/* ========================================================================
   JUEGOSDRAG — TEMAS Y PERSONALIZACIÓN AVANZADA
   ------------------------------------------------------------------------
   Selectores con máxima especificidad para vencer my.css:
     - body[data-jd-theme] combinado con .card
     - #layout-menu para sidebar
     - Todos con !important
   ======================================================================== */


/* ======================== 1. VARIABLES BASE ======================== */
:root {
  --jd-radius: 8px;
}


/* ======================== 2. TEMAS PERSONALIZADOS ======================== */

/* ---- MEDIANOCHE ---- Azul negro profundo */
body[data-jd-theme="midnight"] {
  --bs-body-bg: #0a0a0f;
  --bs-body-color: #d0d0d0;
  --bs-heading-color: #ffffff;
  --bs-border-color: #1f2030;
  background-color: #0a0a0f !important;
}

/* CARDS y elementos de interfaz */
body[data-jd-theme="midnight"] .card {
  background-color: #13131a !important;
  border-color: #1f2030 !important;
}
body[data-jd-theme="midnight"] .card-header {
  background-color: #1a1a25 !important;
  border-bottom-color: #1f2030 !important;
}
body[data-jd-theme="midnight"] .layout-navbar,
body[data-jd-theme="midnight"] #layout-menu,
body[data-jd-theme="midnight"] .content-footer,
body[data-jd-theme="midnight"] .dropdown-menu,
body[data-jd-theme="midnight"] .modal-content,
body[data-jd-theme="midnight"] .offcanvas {
  background-color: #13131a !important;
  border-color: #1f2030 !important;
}


/* ---- GAMING ---- Neón cyberpunk */
body[data-jd-theme="gaming"] {
  --bs-body-bg: #0d0221;
  --bs-body-color: #e0f7ff;
  --bs-heading-color: #ff006e;
  --bs-border-color: #ff006e;
  background: radial-gradient(ellipse at top, #1a0533 0%, #0d0221 100%) !important;
}

body[data-jd-theme="gaming"] .card {
  background-color: rgba(26, 5, 51, 0.85) !important;
  border: 1px solid rgba(255, 0, 110, 0.3) !important;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.15) !important;
  backdrop-filter: blur(6px);
}
body[data-jd-theme="gaming"] .card-header {
  background-color: rgba(35, 8, 70, 0.9) !important;
  border-bottom: 1px solid rgba(255, 0, 110, 0.4) !important;
}
body[data-jd-theme="gaming"] .layout-navbar,
body[data-jd-theme="gaming"] #layout-menu,
body[data-jd-theme="gaming"] .content-footer,
body[data-jd-theme="gaming"] .dropdown-menu,
body[data-jd-theme="gaming"] .modal-content {
  background-color: rgba(26, 5, 51, 0.85) !important;
  border: 1px solid rgba(255, 0, 110, 0.3) !important;
  box-shadow: 0 0 20px rgba(255, 0, 110, 0.15) !important;
  backdrop-filter: blur(6px);
}
body[data-jd-theme="gaming"] h1, 
body[data-jd-theme="gaming"] h2,
body[data-jd-theme="gaming"] h3, 
body[data-jd-theme="gaming"] h4 {
  text-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}
body[data-jd-theme="gaming"] .menu-link.active,
body[data-jd-theme="gaming"] .menu-link:hover {
  background-color: rgba(255, 0, 110, 0.15) !important;
  color: #00f5ff !important;
}


/* ---- NATURALEZA ---- Verde orgánico */
body[data-jd-theme="nature"] {
  --bs-body-bg: #f1f8f0;
  --bs-body-color: #2e5931;
  --bs-heading-color: #1b5e20;
  --bs-border-color: #c8e6c9;
  background-color: #f1f8f0 !important;
}

body[data-jd-theme="nature"] .card {
  background-color: #ffffff !important;
  border-color: #c8e6c9 !important;
}
body[data-jd-theme="nature"] .card-header {
  background-color: #f1f8f0 !important;
  border-bottom-color: #c8e6c9 !important;
}
body[data-jd-theme="nature"] .layout-navbar,
body[data-jd-theme="nature"] #layout-menu,
body[data-jd-theme="nature"] .content-footer,
body[data-jd-theme="nature"] .dropdown-menu {
  background-color: #ffffff !important;
  border-color: #c8e6c9 !important;
}
body[data-jd-theme="nature"] .menu-link.active,
body[data-jd-theme="nature"] .menu-link:hover {
  background-color: #e8f5e9 !important;
  color: #1b5e20 !important;
}


/* ---- HIELO ---- Azul claro cristalino */
body[data-jd-theme="ice"] {
  --bs-body-bg: #e0f7fa;
  --bs-body-color: #00525a;
  --bs-heading-color: #006064;
  --bs-border-color: #80deea;
  background: linear-gradient(180deg, #e0f7fa 0%, #f5fcfd 100%) !important;
}

body[data-jd-theme="ice"] .card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #80deea !important;
  backdrop-filter: blur(8px);
}
body[data-jd-theme="ice"] .card-header {
  background-color: rgba(224, 247, 250, 0.8) !important;
  border-bottom-color: #80deea !important;
}
body[data-jd-theme="ice"] .layout-navbar,
body[data-jd-theme="ice"] #layout-menu,
body[data-jd-theme="ice"] .content-footer,
body[data-jd-theme="ice"] .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #80deea !important;
  backdrop-filter: blur(8px);
}
body[data-jd-theme="ice"] .menu-link.active,
body[data-jd-theme="ice"] .menu-link:hover {
  background-color: #b2ebf2 !important;
  color: #006064 !important;
}


/* ---- FUEGO ---- Naranjas cálidos */
body[data-jd-theme="fire"] {
  --bs-body-bg: #2b0f02;
  --bs-body-color: #ffccbc;
  --bs-heading-color: #ff7043;
  --bs-border-color: #bf360c;
  background: radial-gradient(ellipse at bottom, #4d1e0a 0%, #2b0f02 100%) !important;
}

body[data-jd-theme="fire"] .card {
  background-color: #3d1608 !important;
  border-color: #bf360c !important;
}
body[data-jd-theme="fire"] .card-header {
  background-color: #4d1e0a !important;
  border-bottom-color: #bf360c !important;
}
body[data-jd-theme="fire"] .layout-navbar,
body[data-jd-theme="fire"] #layout-menu,
body[data-jd-theme="fire"] .content-footer,
body[data-jd-theme="fire"] .dropdown-menu,
body[data-jd-theme="fire"] .modal-content {
  background-color: #3d1608 !important;
  border-color: #bf360c !important;
}
body[data-jd-theme="fire"] .menu-link.active,
body[data-jd-theme="fire"] .menu-link:hover {
  background-color: rgba(255, 87, 34, 0.18) !important;
  color: #ff7043 !important;
}


/* ---- OCÉANO ---- Azules profundos */
body[data-jd-theme="ocean"] {
  --bs-body-bg: #001f3f;
  --bs-body-color: #b3e5fc;
  --bs-heading-color: #4fc3f7;
  --bs-border-color: #0277bd;
  background: linear-gradient(180deg, #001f3f 0%, #002b5c 100%) !important;
}

body[data-jd-theme="ocean"] .card {
  background-color: #002b5c !important;
  border-color: #0277bd !important;
}
body[data-jd-theme="ocean"] .card-header {
  background-color: #003d6b !important;
  border-bottom-color: #0277bd !important;
}
body[data-jd-theme="ocean"] .layout-navbar,
body[data-jd-theme="ocean"] #layout-menu,
body[data-jd-theme="ocean"] .content-footer,
body[data-jd-theme="ocean"] .dropdown-menu,
body[data-jd-theme="ocean"] .modal-content {
  background-color: #002b5c !important;
  border-color: #0277bd !important;
}
body[data-jd-theme="ocean"] .menu-link.active,
body[data-jd-theme="ocean"] .menu-link:hover {
  background-color: rgba(2, 119, 189, 0.25) !important;
  color: #4fc3f7 !important;
}


/* ---- ATARDECER ---- Degradado púrpura */
body[data-jd-theme="sunset"] {
  --bs-body-bg: #2a0944;
  --bs-body-color: #ffb6b9;
  --bs-heading-color: #ff80ab;
  --bs-border-color: #a9488b;
  background: linear-gradient(135deg, #2a0944 0%, #3d1260 50%, #5e1a7a 100%) !important;
}

body[data-jd-theme="sunset"] .card {
  background-color: rgba(61, 18, 96, 0.85) !important;
  border-color: #a9488b !important;
  backdrop-filter: blur(6px);
}
body[data-jd-theme="sunset"] .card-header {
  background-color: rgba(75, 25, 115, 0.9) !important;
  border-bottom-color: #a9488b !important;
}
body[data-jd-theme="sunset"] .layout-navbar,
body[data-jd-theme="sunset"] #layout-menu,
body[data-jd-theme="sunset"] .content-footer,
body[data-jd-theme="sunset"] .dropdown-menu,
body[data-jd-theme="sunset"] .modal-content {
  background-color: rgba(61, 18, 96, 0.85) !important;
  border-color: #a9488b !important;
  backdrop-filter: blur(6px);
}
body[data-jd-theme="sunset"] .menu-link.active,
body[data-jd-theme="sunset"] .menu-link:hover {
  background-color: rgba(169, 72, 139, 0.3) !important;
  color: #ff80ab !important;
}


/* ======================== 3. COLOR DEL SIDEBAR ======================== */
/* DEFAULT: restaura los colores del tema actual */
body[data-jd-sidebar="default"] #layout-menu {
  background-color: inherit !important;
}

/* DARK: fuerza sidebar oscuro */
body[data-jd-sidebar="dark"] #layout-menu {
  background-color: #1a1a2e !important;
}
body[data-jd-sidebar="dark"] #layout-menu .menu-link,
body[data-jd-sidebar="dark"] #layout-menu .app-brand-text,
body[data-jd-sidebar="dark"] #layout-menu .menu-header-text {
  color: #d0d0d0 !important;
}
body[data-jd-sidebar="dark"] #layout-menu .menu-footer {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* ACCENT: usa color primario */
body[data-jd-sidebar="accent"] #layout-menu {
  background-color: var(--bs-primary) !important;
}
body[data-jd-sidebar="accent"] #layout-menu .menu-link,
body[data-jd-sidebar="accent"] #layout-menu .app-brand-text,
body[data-jd-sidebar="accent"] #layout-menu .menu-header-text {
  color: #ffffff !important;
}
body[data-jd-sidebar="accent"] #layout-menu .menu-footer {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* GRADIENT: degradado */
body[data-jd-sidebar="gradient"] #layout-menu {
  background: linear-gradient(180deg, var(--bs-primary) 0%, #00bcd4 100%) !important;
}
body[data-jd-sidebar="gradient"] #layout-menu .menu-link,
body[data-jd-sidebar="gradient"] #layout-menu .app-brand-text,
body[data-jd-sidebar="gradient"] #layout-menu .menu-header-text {
  color: #ffffff !important;
}
body[data-jd-sidebar="gradient"] #layout-menu .menu-footer {
  background-color: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.2) !important;
}


/* ======================== 4. COLOR DEL FOOTER ======================== */
/* DEFAULT: restaura el color del tema */
body[data-jd-footer="default"] .content-footer {
  background-color: inherit !important;
  color: inherit !important;
}

/* DARK: footer oscuro */
body[data-jd-footer="dark"] .content-footer {
  background-color: #1a1a2e !important;
  color: #d0d0d0 !important;
}
body[data-jd-footer="dark"] .content-footer a {
  color: #d0d0d0 !important;
}

/* ACCENT: footer con color primario */
body[data-jd-footer="accent"] .content-footer {
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}
body[data-jd-footer="accent"] .content-footer a {
  color: #ffffff !important;
  text-decoration: underline;
}


/* ======================== 5. DENSIDAD ======================== */
body[data-jd-density="compact"] .card-body { padding: 0.75rem !important; }
body[data-jd-density="compact"] .card-header { padding: 0.6rem 0.75rem !important; }
body[data-jd-density="compact"] .menu-link { padding: 0.35rem 0.75rem !important; }

body[data-jd-density="spacious"] .card-body { padding: 2rem !important; }
body[data-jd-density="spacious"] .card-header { padding: 1.5rem 2rem !important; }
body[data-jd-density="spacious"] .menu-link { padding: 0.85rem 1.25rem !important; }


/* ======================== 6. TAMAÑO DE FUENTE ======================== */
body[data-jd-font="small"]  { font-size: 0.875rem; }
body[data-jd-font="normal"] { font-size: 1rem; }
body[data-jd-font="large"]  { font-size: 1.125rem; }


/* ======================== 7. BORDES REDONDEADOS ======================== */
body .card,
body .btn,
body .form-control,
body .dropdown-menu,
body .alert,
body .modal-content {
  border-radius: var(--jd-radius) !important;
}


/* ======================== 8. PATRONES DE FONDO ======================== */
body[data-jd-pattern="dots"] {
  background-image: radial-gradient(circle, rgba(115, 103, 240, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
body[data-jd-pattern="grid"] {
  background-image:
    linear-gradient(rgba(115, 103, 240, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 103, 240, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}
body[data-jd-pattern="diagonal"] {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(115, 103, 240, 0.05) 10px,
    rgba(115, 103, 240, 0.05) 20px
  );
}
body[data-jd-pattern="waves"] {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(115, 103, 240, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 188, 212, 0.08) 0%, transparent 50%);
}


/* ======================== 9. ANIMACIONES ======================== */
body[data-jd-animations="off"] *,
body[data-jd-animations="off"] *::before,
body[data-jd-animations="off"] *::after {
  transition: none !important;
  animation: none !important;
}