/* ============================================================
  THEMES.CSS — Botón arcoíris + Modal + Temas completos
  Incluye variables base Y variables --db-* del dashboard
   ============================================================ */

/*  Botón arcoíris  */
.btn_apariencia {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: conic-gradient(
    #ef4444 0deg 51deg,
    #f97316 51deg 102deg,
    #eab308 102deg 153deg,
    #22c55e 153deg 204deg,
    #06b6d4 204deg 255deg,
    #6366f1 255deg 306deg,
    #ec4899 306deg 357deg,
    #ef4444 357deg 360deg
  );
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  outline: none;
}

/* Centro pequeño — hereda el color del fondo del contenedor */
.btn_apariencia::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bg-primary, #080911);
  transition: background 0.35s ease;
  z-index: 1;
}

/* Estilos del boton o accion */
.btn_apariencia:hover {
  transform: scale(1.15) rotate(40deg);
  box-shadow: 0 5px 22px rgba(0,0,0,0.55);
}

/* Estilos del boton o accion */
.btn_apariencia:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/*  Overlay del modal  */
.overlay_temas {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Estilo para .overlay_temas.is-open */
.overlay_temas.is-open {
  opacity: 1;
  visibility: visible;
}

/*  Panel del modal  */
.modal_temas {
  background: var(--card-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 26px 22px 22px;
  width: 100%;
  max-width: 430px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* Estilo para .overlay_temas.is-open .modal_temas */
.overlay_temas.is-open .modal_temas {
  transform: translateY(0) scale(1);
}

/*  Cabecera  */
.header_temas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* Estilo para .lbl_temas_titulo */
.lbl_temas_titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

/* Estilo para .btn_temas_cerrar */
.btn_temas_cerrar {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-size: 16px;
}

/* Estilo para .btn_temas_cerrar:hover */
.btn_temas_cerrar:hover {
  background: rgba(255,255,255,0.15);
  color: var(--text-main);
}

/*  Etiqueta de sección  */
.lbl_seccion_temas {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 16px;
}

.lbl_seccion_temas:first-of-type { margin-top: 0; }

/*  Grid de tarjetas  */
.grid_temas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid_temas[data-theme-group="mode"],
.grid_temas--modo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 200px;
}

/*  Tarjeta  */
.card_tema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

/* Contenedor o bloque principal */
.card_tema:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
}

/* Contenedor o bloque principal */
.card_tema.activo {
  border-color: var(--primary);
  background: rgba(255,255,255,0.05);
}

/* Estilo para .swatch_tema */
.swatch_tema {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.card_tema:hover .swatch_tema { transform: scale(1.08); }

/* Contenedor o bloque principal */
.card_tema.activo .swatch_tema {
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px var(--primary), 0 3px 10px rgba(0,0,0,0.3);
}

/* Estilo para .lbl_tema */
.lbl_tema {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.card_tema.activo .lbl_tema { color: var(--primary); }




/* ============================================================
  TEMAS COMPLETOS
  Cada bloque sobrescribe: variables base + variables --db-*
   ============================================================ */

/*  OSCURO  */
html[data-theme="dark"] {
  /* Base */
  --bg-primary:     #080911;
  --card-bg:        rgba(255,255,255,0.03);
  --card-border:    rgba(255,255,255,0.07);
  --card-glow:      rgba(99,102,241,0.05);
  --primary:        hsl(245,82%,67%);
  --accent:         #8b5cf6;
  --primary-hover:  hsl(245,82%,73%);
  --primary-glow:   rgba(99,102,241,0.3);
  --text-main:      #f3f4f6;
  --text-muted:     #9ca3af;
  --text-inverse:   #080911;
  /* Dashboard */
  --db-sidebar-bg:    #111113;
  --db-sidebar-border:rgba(255,255,255,0.07);
  --db-sidebar-text:  #9ca3af;
  --db-nav-hover-bg:  #1f1f23;
  --db-nav-active:    #fff;
  --db-brand-color:   #ffffff;
  --db-main-bg:       #18181b;
  --db-card-bg:       #1e1e22;
  --db-card-border:   #2d2d33;
  --db-card-hover-bg: #26262c;
  --db-card-shadow:   rgba(0,0,0,0.4);
  --db-modal-bg:      #1a1a1f;
  --db-modal-border:  #2d2d33;
  --db-text-main:     #f3f4f6;
  --db-text-muted:    #71717a;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  CLARO  */
html[data-theme="light"] {
  /* Base */
  --bg-primary:     #f1f5f9;
  --card-bg:        rgba(255,255,255,0.70);
  --card-border:    rgba(255,255,255,0.95);
  --card-glow:      rgba(99,102,241,0.08);
  --primary:        hsl(245,82%,55%);
  --accent:         #8b5cf6;
  --primary-hover:  hsl(245,82%,48%);
  --primary-glow:   rgba(99,102,241,0.35);
  --text-main:      #334155;
  --text-muted:     #64748b;
  --text-inverse:   #ffffff;
  /* Dashboard */
  --db-sidebar-bg:    #f8f9fb;
  --db-sidebar-border:rgba(0,0,0,0.08);
  --db-sidebar-text:  #6b7280;
  --db-nav-hover-bg:  #f0f1f5;
  --db-nav-active:    #111;
  --db-brand-color:   #111827;
  --db-main-bg:       #f1f3f7;
  --db-card-bg:       #ffffff;
  --db-card-border:   #e5e7eb;
  --db-card-hover-bg: #f9fafb;
  --db-card-shadow:   rgba(0,0,0,0.08);
  --db-modal-bg:      #ffffff;
  --db-modal-border:  #e5e7eb;
  --db-text-main:     #111827;
  --db-text-muted:    #6b7280;
  --db-logout-bg:     rgba(239,68,68,0.07);
  --db-logout-color:  #dc2626;
  --db-logout-hover:  rgba(239,68,68,0.14);
}

/*  AZUL  */
html[data-theme="blue"] {
  /* Base */
  --bg-primary:     #060d1a;
  --card-bg:        rgba(56,189,248,0.05);
  --card-border:    rgba(56,189,248,0.13);
  --card-glow:      rgba(56,189,248,0.07);
  --primary:        #38bdf8;
  --accent:         #60a5fa;
  --primary-hover:  #7dd3fc;
  --primary-glow:   rgba(56,189,248,0.35);
  --text-main:      #e0f2fe;
  --text-muted:     #7dd3fc;
  --text-inverse:   #060d1a;
  /* Dashboard */
  --db-sidebar-bg:    #071020;
  --db-sidebar-border:rgba(56,189,248,0.12);
  --db-sidebar-text:  #7dd3fc;
  --db-nav-hover-bg:  rgba(56,189,248,0.07);
  --db-nav-active:    #e0f2fe;
  --db-brand-color:   #e0f2fe;
  --db-main-bg:       #060d1a;
  --db-card-bg:       rgba(56,189,248,0.05);
  --db-card-border:   rgba(56,189,248,0.13);
  --db-card-hover-bg: rgba(56,189,248,0.10);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #071020;
  --db-modal-border:  rgba(56,189,248,0.16);
  --db-text-main:     #e0f2fe;
  --db-text-muted:    #7dd3fc;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  OCÉANO  */
html[data-theme="ocean"] {
  /* Base */
  --bg-primary:     #040f1c;
  --card-bg:        rgba(2,132,199,0.06);
  --card-border:    rgba(2,132,199,0.15);
  --card-glow:      rgba(2,132,199,0.07);
  --primary:        #0284c7;
  --accent:         #06b6d4;
  --primary-hover:  #38bdf8;
  --primary-glow:   rgba(2,132,199,0.35);
  --text-main:      #bae6fd;
  --text-muted:     #7dd3fc;
  --text-inverse:   #040f1c;
  /* Dashboard */
  --db-sidebar-bg:    #051220;
  --db-sidebar-border:rgba(2,132,199,0.13);
  --db-sidebar-text:  #7dd3fc;
  --db-nav-hover-bg:  rgba(2,132,199,0.08);
  --db-nav-active:    #bae6fd;
  --db-brand-color:   #bae6fd;
  --db-main-bg:       #040f1c;
  --db-card-bg:       rgba(2,132,199,0.06);
  --db-card-border:   rgba(2,132,199,0.15);
  --db-card-hover-bg: rgba(2,132,199,0.11);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #051220;
  --db-modal-border:  rgba(2,132,199,0.18);
  --db-text-main:     #bae6fd;
  --db-text-muted:    #7dd3fc;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  CIAN  */
html[data-theme="cyan"] {
  /* Base */
  --bg-primary:     #04161b;
  --card-bg:        rgba(8,145,178,0.06);
  --card-border:    rgba(8,145,178,0.15);
  --card-glow:      rgba(8,145,178,0.07);
  --primary:        #0891b2;
  --accent:         #06b6d4;
  --primary-hover:  #22d3ee;
  --primary-glow:   rgba(8,145,178,0.35);
  --text-main:      #cffafe;
  --text-muted:     #67e8f9;
  --text-inverse:   #04161b;
  /* Dashboard */
  --db-sidebar-bg:    #041a21;
  --db-sidebar-border:rgba(8,145,178,0.13);
  --db-sidebar-text:  #67e8f9;
  --db-nav-hover-bg:  rgba(8,145,178,0.08);
  --db-nav-active:    #cffafe;
  --db-brand-color:   #cffafe;
  --db-main-bg:       #04161b;
  --db-card-bg:       rgba(8,145,178,0.06);
  --db-card-border:   rgba(8,145,178,0.15);
  --db-card-hover-bg: rgba(8,145,178,0.11);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #041a21;
  --db-modal-border:  rgba(8,145,178,0.18);
  --db-text-main:     #cffafe;
  --db-text-muted:    #67e8f9;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  ESMERALDA  */
html[data-theme="emerald"] {
  /* Base */
  --bg-primary:     #041410;
  --card-bg:        rgba(16,185,129,0.05);
  --card-border:    rgba(16,185,129,0.13);
  --card-glow:      rgba(16,185,129,0.06);
  --primary:        #10b981;
  --accent:         #059669;
  --primary-hover:  #34d399;
  --primary-glow:   rgba(16,185,129,0.35);
  --text-main:      #d1fae5;
  --text-muted:     #6ee7b7;
  --text-inverse:   #041410;
  /* Dashboard */
  --db-sidebar-bg:    #051815;
  --db-sidebar-border:rgba(16,185,129,0.12);
  --db-sidebar-text:  #6ee7b7;
  --db-nav-hover-bg:  rgba(16,185,129,0.07);
  --db-nav-active:    #d1fae5;
  --db-brand-color:   #d1fae5;
  --db-main-bg:       #041410;
  --db-card-bg:       rgba(16,185,129,0.05);
  --db-card-border:   rgba(16,185,129,0.13);
  --db-card-hover-bg: rgba(16,185,129,0.09);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #051815;
  --db-modal-border:  rgba(16,185,129,0.16);
  --db-text-main:     #d1fae5;
  --db-text-muted:    #6ee7b7;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  VERDE  */
html[data-theme="green"] {
  /* Base */
  --bg-primary:     #041008;
  --card-bg:        rgba(34,197,94,0.05);
  --card-border:    rgba(34,197,94,0.13);
  --card-glow:      rgba(34,197,94,0.06);
  --primary:        #22c55e;
  --accent:         #16a34a;
  --primary-hover:  #4ade80;
  --primary-glow:   rgba(34,197,94,0.35);
  --text-main:      #dcfce7;
  --text-muted:     #86efac;
  --text-inverse:   #041008;
  /* Dashboard */
  --db-sidebar-bg:    #05140a;
  --db-sidebar-border:rgba(34,197,94,0.12);
  --db-sidebar-text:  #86efac;
  --db-nav-hover-bg:  rgba(34,197,94,0.07);
  --db-nav-active:    #dcfce7;
  --db-brand-color:   #dcfce7;
  --db-main-bg:       #041008;
  --db-card-bg:       rgba(34,197,94,0.05);
  --db-card-border:   rgba(34,197,94,0.13);
  --db-card-hover-bg: rgba(34,197,94,0.09);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #05140a;
  --db-modal-border:  rgba(34,197,94,0.16);
  --db-text-main:     #dcfce7;
  --db-text-muted:    #86efac;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  BOSQUE  */
html[data-theme="forest"] {
  /* Base */
  --bg-primary:     #050f06;
  --card-bg:        rgba(22,163,74,0.06);
  --card-border:    rgba(22,163,74,0.14);
  --card-glow:      rgba(22,163,74,0.07);
  --primary:        #16a34a;
  --accent:         #15803d;
  --primary-hover:  #4ade80;
  --primary-glow:   rgba(22,163,74,0.35);
  --text-main:      #bbf7d0;
  --text-muted:     #4ade80;
  --text-inverse:   #050f06;
  /* Dashboard */
  --db-sidebar-bg:    #061309;
  --db-sidebar-border:rgba(22,163,74,0.13);
  --db-sidebar-text:  #4ade80;
  --db-nav-hover-bg:  rgba(22,163,74,0.08);
  --db-nav-active:    #bbf7d0;
  --db-brand-color:   #bbf7d0;
  --db-main-bg:       #050f06;
  --db-card-bg:       rgba(22,163,74,0.06);
  --db-card-border:   rgba(22,163,74,0.14);
  --db-card-hover-bg: rgba(22,163,74,0.10);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #061309;
  --db-modal-border:  rgba(22,163,74,0.17);
  --db-text-main:     #bbf7d0;
  --db-text-muted:    #4ade80;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  DORADO  */
html[data-theme="gold"] {
  /* Base */
  --bg-primary:     #120e03;
  --card-bg:        rgba(202,138,4,0.06);
  --card-border:    rgba(202,138,4,0.15);
  --card-glow:      rgba(202,138,4,0.07);
  --primary:        #ca8a04;
  --accent:         #d97706;
  --primary-hover:  #fbbf24;
  --primary-glow:   rgba(202,138,4,0.35);
  --text-main:      #fef9c3;
  --text-muted:     #fcd34d;
  --text-inverse:   #120e03;
  /* Dashboard */
  --db-sidebar-bg:    #171205;
  --db-sidebar-border:rgba(202,138,4,0.14);
  --db-sidebar-text:  #fcd34d;
  --db-nav-hover-bg:  rgba(202,138,4,0.08);
  --db-nav-active:    #fef9c3;
  --db-brand-color:   #fef9c3;
  --db-main-bg:       #120e03;
  --db-card-bg:       rgba(202,138,4,0.06);
  --db-card-border:   rgba(202,138,4,0.15);
  --db-card-hover-bg: rgba(202,138,4,0.11);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #171205;
  --db-modal-border:  rgba(202,138,4,0.18);
  --db-text-main:     #fef9c3;
  --db-text-muted:    #fcd34d;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  NARANJA  */
html[data-theme="orange"] {
  /* Base */
  --bg-primary:     #130903;
  --card-bg:        rgba(234,88,12,0.06);
  --card-border:    rgba(234,88,12,0.15);
  --card-glow:      rgba(234,88,12,0.07);
  --primary:        #ea580c;
  --accent:         #f97316;
  --primary-hover:  #fb923c;
  --primary-glow:   rgba(234,88,12,0.35);
  --text-main:      #ffedd5;
  --text-muted:     #fdba74;
  --text-inverse:   #130903;
  /* Dashboard */
  --db-sidebar-bg:    #180c05;
  --db-sidebar-border:rgba(234,88,12,0.14);
  --db-sidebar-text:  #fdba74;
  --db-nav-hover-bg:  rgba(234,88,12,0.08);
  --db-nav-active:    #ffedd5;
  --db-brand-color:   #ffedd5;
  --db-main-bg:       #130903;
  --db-card-bg:       rgba(234,88,12,0.06);
  --db-card-border:   rgba(234,88,12,0.15);
  --db-card-hover-bg: rgba(234,88,12,0.11);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #180c05;
  --db-modal-border:  rgba(234,88,12,0.18);
  --db-text-main:     #ffedd5;
  --db-text-muted:    #fdba74;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  CARMESÍ  */
html[data-theme="crimson"] {
  /* Base */
  --bg-primary:     #140404;
  --card-bg:        rgba(220,38,38,0.06);
  --card-border:    rgba(220,38,38,0.14);
  --card-glow:      rgba(220,38,38,0.07);
  --primary:        #dc2626;
  --accent:         #b91c1c;
  --primary-hover:  #f87171;
  --primary-glow:   rgba(220,38,38,0.35);
  --text-main:      #fee2e2;
  --text-muted:     #fca5a5;
  --text-inverse:   #140404;
  /* Dashboard */
  --db-sidebar-bg:    #1a0606;
  --db-sidebar-border:rgba(220,38,38,0.14);
  --db-sidebar-text:  #fca5a5;
  --db-nav-hover-bg:  rgba(220,38,38,0.08);
  --db-nav-active:    #fee2e2;
  --db-brand-color:   #fee2e2;
  --db-main-bg:       #140404;
  --db-card-bg:       rgba(220,38,38,0.06);
  --db-card-border:   rgba(220,38,38,0.14);
  --db-card-hover-bg: rgba(220,38,38,0.10);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #1a0606;
  --db-modal-border:  rgba(220,38,38,0.17);
  --db-text-main:     #fee2e2;
  --db-text-muted:    #fca5a5;
  --db-logout-bg:     rgba(220,38,38,0.12);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(220,38,38,0.22);
}

/*  ROSA  */
html[data-theme="rose"] {
  /* Base */
  --bg-primary:     #140411;
  --card-bg:        rgba(244,63,94,0.06);
  --card-border:    rgba(244,63,94,0.14);
  --card-glow:      rgba(244,63,94,0.07);
  --primary:        #f43f5e;
  --accent:         #e11d48;
  --primary-hover:  #fb7185;
  --primary-glow:   rgba(244,63,94,0.35);
  --text-main:      #ffe4e6;
  --text-muted:     #fda4af;
  --text-inverse:   #140411;
  /* Dashboard */
  --db-sidebar-bg:    #1a0617;
  --db-sidebar-border:rgba(244,63,94,0.14);
  --db-sidebar-text:  #fda4af;
  --db-nav-hover-bg:  rgba(244,63,94,0.08);
  --db-nav-active:    #ffe4e6;
  --db-brand-color:   #ffe4e6;
  --db-main-bg:       #140411;
  --db-card-bg:       rgba(244,63,94,0.06);
  --db-card-border:   rgba(244,63,94,0.14);
  --db-card-hover-bg: rgba(244,63,94,0.10);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #1a0617;
  --db-modal-border:  rgba(244,63,94,0.17);
  --db-text-main:     #ffe4e6;
  --db-text-muted:    #fda4af;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/*  PÚRPURA  */
html[data-theme="purple"] {
  /* Base */
  --bg-primary:     #0c0818;
  --card-bg:        rgba(168,85,247,0.06);
  --card-border:    rgba(168,85,247,0.14);
  --card-glow:      rgba(168,85,247,0.07);
  --primary:        #a855f7;
  --accent:         #7c3aed;
  --primary-hover:  #c084fc;
  --primary-glow:   rgba(168,85,247,0.35);
  --text-main:      #f3e8ff;
  --text-muted:     #d8b4fe;
  --text-inverse:   #0c0818;
  /* Dashboard */
  --db-sidebar-bg:    #110c1f;
  --db-sidebar-border:rgba(168,85,247,0.14);
  --db-sidebar-text:  #d8b4fe;
  --db-nav-hover-bg:  rgba(168,85,247,0.08);
  --db-nav-active:    #f3e8ff;
  --db-brand-color:   #f3e8ff;
  --db-main-bg:       #0c0818;
  --db-card-bg:       rgba(168,85,247,0.06);
  --db-card-border:   rgba(168,85,247,0.14);
  --db-card-hover-bg: rgba(168,85,247,0.10);
  --db-card-shadow:   rgba(0,0,0,0.5);
  --db-modal-bg:      #110c1f;
  --db-modal-border:  rgba(168,85,247,0.17);
  --db-text-main:     #f3e8ff;
  --db-text-muted:    #d8b4fe;
  --db-logout-bg:     rgba(239,68,68,0.08);
  --db-logout-color:  #f87171;
  --db-logout-hover:  rgba(239,68,68,0.18);
}

/* ============================================================
  OVERRIDE GLOBAL — El bg y color ya heredan de las variables
  definidas en html[data-theme]. Este único bloque es suficiente.
  Las variables --db-* se definen en html[data-theme] directamente
  y se heredan por toda la cascada sin necesidad de redefinirlas
  en body para cada tema.
   ============================================================ */
/* Nota: Los bloques html[data-theme="X"] body anteriores han sido
   eliminados ya que son redundantes — las variables CSS heredan
   correctamente desde html[data-theme="X"] sin necesidad de
   redefinirlas en body. */

/*  Sincronizar el centro del botón arcoíris con cada tema  */
html[data-theme="dark"]    .btn_apariencia::before { background: #080911; }
html[data-theme="light"]   .btn_apariencia::before { background: #f1f5f9; }
html[data-theme="blue"]    .btn_apariencia::before { background: #060d1a; }
html[data-theme="ocean"]   .btn_apariencia::before { background: #040f1c; }
html[data-theme="cyan"]    .btn_apariencia::before { background: #04161b; }
html[data-theme="emerald"] .btn_apariencia::before { background: #041410; }
html[data-theme="green"]   .btn_apariencia::before { background: #041008; }
html[data-theme="forest"]  .btn_apariencia::before { background: #050f06; }
html[data-theme="gold"]    .btn_apariencia::before { background: #120e03; }
html[data-theme="orange"]  .btn_apariencia::before { background: #130903; }
html[data-theme="crimson"] .btn_apariencia::before { background: #140404; }
html[data-theme="rose"]    .btn_apariencia::before { background: #140411; }
html[data-theme="purple"]  .btn_apariencia::before { background: #0c0818; }