/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Sistema cohesivo con tokens y elevación por capas
   Inspirado en Linear / Vercel / Radix Dark.
   Cacheado por WhiteNoise (immutable) + Service Worker.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Transición suave global de tema (elimina saltos bruscos de brillo) ── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              fill 0.22s ease,
              stroke 0.22s ease !important;
  transition-delay: 0s !important;
}

/* ── Optimización táctil global (elimina 300ms tap delay en móviles) ─── */
a, button, input, select, textarea, label, [role="button"],
.canal-pill, .mobile-filter-badge, .badge-dynamic, .touch-target, .touch-target-sm {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html.dark {
  color-scheme: dark;

  /* ── Superficies dinámicas vinculadas a DaisyUI (respeta cada tema oscuro) ── */
  --d-bg:          var(--color-base-100, #0a0f1f);
  --d-surf-1:      var(--color-base-100, #060a16);
  --d-surf-2:      color-mix(in oklch, var(--color-base-100, #121a30) 92%, var(--color-base-content, #fff));
  --d-surf-3:      var(--color-base-300, #1a2440);
  --d-surf-4:      var(--color-base-300, #232e50);
  --d-surf-sunken: color-mix(in oklch, var(--color-base-100, #060a16) 95%, black);

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --d-border:        color-mix(in srgb, var(--color-base-content, #fff) 12%, transparent);
  --d-border-strong: color-mix(in srgb, var(--color-base-content, #fff) 20%, transparent);
  --d-border-focus:  var(--color-primary, #6366f1);

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --d-text:         var(--color-base-content, #e7eaf5);
  --d-text-strong:  var(--color-base-content, #f5f7fc);
  --d-text-muted:   color-mix(in srgb, var(--color-base-content, #e7eaf5) 70%, transparent);
  --d-text-dim:     color-mix(in srgb, var(--color-base-content, #e7eaf5) 50%, transparent);
  --d-placeholder:  color-mix(in srgb, var(--color-base-content, #e7eaf5) 45%, transparent);

  /* ── Acento ─────────────────────────────────────────────────────────── */
  --d-accent:       var(--color-primary, #818cf8);
  --d-accent-soft:  color-mix(in srgb, var(--color-primary, #6366f1) 16%, transparent);
  --d-accent-hover: color-mix(in srgb, var(--color-primary, #6366f1) 24%, transparent);
  --d-accent-ring:  color-mix(in srgb, var(--color-primary, #6366f1) 35%, transparent);

  /* ── Sombras ─────────────────────────────────────────────────────────── */
  --d-shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.025) inset;
  --d-shadow:    0 4px 14px -2px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
  --d-shadow-lg: 0 18px 40px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;

  --color-indigo-50:   rgba(99,102,241,0.12);
  --color-emerald-50:  rgba(16,185,129,0.10);
  --color-amber-50:    rgba(245,158,11,0.10);
  --color-red-50:      rgba(239,68,68,0.10);
  --color-orange-50:   rgba(249,115,22,0.10);
  --color-purple-50:   rgba(168,85,247,0.10);
  --color-blue-50:     rgba(59,130,246,0.10);
  --color-green-50:    rgba(34,197,94,0.10);
  --color-teal-50:     rgba(20,184,166,0.10);
  --color-rose-50:     rgba(244,63,94,0.10);
  --color-yellow-50:   rgba(234,179,8,0.10);
  --color-pink-50:     rgba(236,72,153,0.10);
  --color-violet-50:   rgba(139,92,246,0.15);
  --color-sky-50:      rgba(14,165,233,0.15);
  --color-cyan-50:     rgba(6,182,212,0.10);
  --color-fuchsia-50:  rgba(217,70,239,0.10);
  --color-lime-50:     rgba(132,204,22,0.10);
}

/* ── Body, selección y scrollbars ───────────────────────────────────── */
html.dark body {
  background-color: var(--d-bg);
  color: var(--d-text);
}
html.dark ::selection { background: var(--d-accent-hover); color: #fff; }
html.dark { scrollbar-color: #2f3a5c transparent; scrollbar-width: thin; }
html.dark *::-webkit-scrollbar { width: 11px; height: 11px; }
html.dark *::-webkit-scrollbar-track { background: transparent; }
html.dark *::-webkit-scrollbar-thumb {
  background: #2c365a;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.dark *::-webkit-scrollbar-thumb:hover { background-color: #3d4870; background-clip: padding-box; }

/* ── Superficies ─────────────────────────────────────────────────────── */
html.dark .bg-white,
html.dark .bg-slate-100 { background-color: var(--d-surf-2) !important; }
html.dark .bg-slate-50 { background-color: var(--d-bg) !important; }
html.dark .bg-slate-200 { background-color: var(--d-surf-3) !important; }
html.dark .bg-slate-300 { background-color: var(--d-surf-4) !important; }
html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/90 { background-color: color-mix(in oklch, var(--d-surf-3, #1a2440) 65%, transparent) !important; }
html.dark .bg-slate-100\/40,
html.dark .bg-slate-100\/60,
html.dark .bg-slate-100\/80 { background-color: color-mix(in oklch, var(--d-surf-3, #1a2440) 80%, transparent) !important; }

/* Sidebar */
html.dark aside#sidebar {
  background-color: var(--d-surf-1) !important;
  border-right: 1px solid var(--d-border) !important;
}
html.dark aside#sidebar hr { border-color: var(--d-border) !important; }
html.dark aside#sidebar .shrink-0.border-t {
    border-top-color: rgba(255,255,255,0.06) !important;
}
html.dark aside#sidebar .sidebar-sub {
    border-left-color: rgba(255,255,255,0.06) !important;
}
html.dark aside#sidebar .shrink-0 a[href*="logout"]:hover,
html.dark aside#sidebar button:hover,
html.dark aside#sidebar a[title="Mi perfil"]:hover {
    background-color: var(--d-surf-3) !important;
}
html.dark aside#sidebar .sidebar-sub a:hover {
    background-color: var(--d-surf-3) !important;
    border-left-color: var(--d-accent) !important;
}
html.dark aside#sidebar .sidebar-sub a[style*="border-indigo-400"],
html.dark aside#sidebar .sidebar-sub a.border-indigo-400 {
    background-color: var(--d-accent-soft) !important;
}
html.dark aside#sidebar .text-slate-400,
html.dark aside#sidebar .text-slate-500,
html.dark aside#sidebar i.text-slate-400,
html.dark aside#sidebar i.text-slate-500 {
    color: var(--d-text-muted) !important;
}
html.dark aside#sidebar a.text-white,
html.dark aside#sidebar .text-white i,
html.dark aside#sidebar span.text-white {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* Header: glassmorphism */
html.dark header.bg-white {
  background-color: color-mix(in oklch, var(--d-surf-2, #121a30) 85%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--d-border) !important;
}

/* ── Sombras ─────────────────────────────────────────────────────────── */
html.dark .shadow-sm  { box-shadow: var(--d-shadow-sm) !important; }
html.dark .shadow     { box-shadow: var(--d-shadow) !important; }
html.dark .shadow-md  { box-shadow: var(--d-shadow) !important; }
html.dark .shadow-lg  { box-shadow: var(--d-shadow-lg) !important; }
html.dark .shadow-xl  { box-shadow: var(--d-shadow-lg) !important; }
html.dark .shadow-2xl { box-shadow: var(--d-shadow-lg) !important; }

/* ── Bordes y divisores ──────────────────────────────────────────────── */
html.dark .border-slate-100,
html.dark .border-slate-200 { border-color: var(--d-border) !important; }
html.dark .border-slate-300 { border-color: var(--d-border-strong) !important; }
html.dark .border-slate-400 { border-color: var(--d-border-strong) !important; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--d-border) !important; }
html.dark hr,
html.dark .border-slate-700 { border-color: var(--d-border) !important; }

/* ── Texto ───────────────────────────────────────────────────────────── */
html.dark .text-slate-900,
html.dark .text-slate-800 { color: var(--d-text-strong) !important; }
html.dark .text-slate-700 { color: var(--d-text) !important; }
html.dark .text-slate-600 { color: var(--d-text-muted) !important; }
html.dark .text-slate-500 { color: var(--d-text-muted) !important; }
html.dark .text-slate-400 { color: var(--d-text-dim) !important; }
html.dark .text-slate-300 { color: var(--d-text-muted) !important; }
html.dark .text-black { color: var(--d-text-strong) !important; }
html.dark .text-white { color: #ffffff !important; }

/* ── Hover neutros ──────────────────────────────────────────────────── */
html.dark .hover\:bg-slate-50:hover { background-color: color-mix(in oklch, var(--d-surf-3, #1a2440) 65%, transparent) !important; }
html.dark .hover\:bg-slate-100:hover { background-color: var(--d-surf-3) !important; }
html.dark .hover\:bg-slate-200:hover { background-color: var(--d-surf-4) !important; }
html.dark .hover\:text-slate-700:hover { color: var(--d-text) !important; }
html.dark .hover\:text-slate-800:hover { color: var(--d-text-strong) !important; }
html.dark .hover\:text-slate-600:hover { color: var(--d-text-muted) !important; }
html.dark .hover\:bg-slate-50\/60:hover,
html.dark .hover\:bg-slate-50\/80:hover,
html.dark .hover\:bg-slate-50\/90:hover { background-color: color-mix(in oklch, var(--d-surf-3, #1a2440) 80%, transparent) !important; }

/* ── Backgrounds tintados 50/100 (Theme-aware con fallback) ─────────── */
html.dark .bg-indigo-50  { background-color: var(--color-indigo-50, rgba(99,102,241,0.12)) !important; }
html.dark .bg-emerald-50 { background-color: var(--color-emerald-50, rgba(16,185,129,0.10)) !important; }
html.dark .bg-amber-50   { background-color: var(--color-amber-50, rgba(245,158,11,0.10)) !important; }
html.dark .bg-red-50     { background-color: var(--color-red-50, rgba(239,68,68,0.10)) !important; }
html.dark .bg-orange-50  { background-color: var(--color-orange-50, rgba(249,115,22,0.10)) !important; }
html.dark .bg-purple-50  { background-color: var(--color-purple-50, rgba(168,85,247,0.10)) !important; }
html.dark .bg-blue-50    { background-color: var(--color-blue-50, rgba(59,130,246,0.10)) !important; }
html.dark .bg-green-50   { background-color: var(--color-green-50, rgba(34,197,94,0.10)) !important; }
html.dark .bg-teal-50    { background-color: var(--color-teal-50, rgba(20,184,166,0.10)) !important; }
html.dark .bg-rose-50    { background-color: var(--color-rose-50, rgba(244,63,94,0.10)) !important; }
html.dark .bg-yellow-50  { background-color: var(--color-yellow-50, rgba(234,179,8,0.10)) !important; }
html.dark .bg-pink-50    { background-color: var(--color-pink-50, rgba(236,72,153,0.10)) !important; }
html.dark .bg-cyan-50    { background-color: var(--color-cyan-50, rgba(6,182,212,0.10)) !important; }
html.dark .bg-sky-50     { background-color: var(--color-sky-50, rgba(14,165,233,0.15)) !important; }
html.dark .bg-lime-50    { background-color: var(--color-lime-50, rgba(132,204,22,0.10)) !important; }
html.dark .bg-violet-50  { background-color: var(--color-violet-50, rgba(139,92,246,0.15)) !important; }
html.dark .bg-fuchsia-50 { background-color: var(--color-fuchsia-50, rgba(217,70,239,0.10)) !important; }

html.dark .bg-indigo-100  { background-color: var(--color-indigo-100, rgba(99,102,241,0.20)) !important; }
html.dark .bg-emerald-100 { background-color: var(--color-emerald-100, rgba(16,185,129,0.18)) !important; }
html.dark .bg-amber-100   { background-color: var(--color-amber-100, rgba(245,158,11,0.18)) !important; }
html.dark .bg-red-100     { background-color: var(--color-red-100, rgba(239,68,68,0.18)) !important; }
html.dark .bg-orange-100  { background-color: var(--color-orange-100, rgba(249,115,22,0.18)) !important; }
html.dark .bg-purple-100  { background-color: var(--color-purple-100, rgba(168,85,247,0.18)) !important; }
html.dark .bg-blue-100    { background-color: var(--color-blue-100, rgba(59,130,246,0.18)) !important; }
html.dark .bg-green-100   { background-color: var(--color-green-100, rgba(34,197,94,0.18)) !important; }
html.dark .bg-teal-100    { background-color: var(--color-teal-100, rgba(20,184,166,0.18)) !important; }
html.dark .bg-rose-100    { background-color: var(--color-rose-100, rgba(244,63,94,0.18)) !important; }
html.dark .bg-yellow-100  { background-color: var(--color-yellow-100, rgba(234,179,8,0.18)) !important; }
html.dark .bg-pink-100    { background-color: var(--color-pink-100, rgba(236,72,153,0.18)) !important; }
html.dark .bg-cyan-100    { background-color: var(--color-cyan-100, rgba(6,182,212,0.18)) !important; }
html.dark .bg-sky-100     { background-color: var(--color-sky-100, rgba(14,165,233,0.18)) !important; }
html.dark .bg-violet-100  { background-color: var(--color-violet-100, rgba(139,92,246,0.18)) !important; }
html.dark .bg-fuchsia-100 { background-color: var(--color-fuchsia-100, rgba(217,70,239,0.18)) !important; }

/* Hover tintados */
html.dark .hover\:bg-indigo-100:hover  { background-color: var(--color-indigo-100, rgba(99,102,241,0.28)) !important; }
html.dark .hover\:bg-emerald-100:hover { background-color: var(--color-emerald-100, rgba(16,185,129,0.26)) !important; }
html.dark .hover\:bg-amber-100:hover   { background-color: var(--color-amber-100, rgba(245,158,11,0.26)) !important; }
html.dark .hover\:bg-red-100:hover     { background-color: var(--color-red-100, rgba(239,68,68,0.26)) !important; }
html.dark .hover\:bg-orange-100:hover  { background-color: var(--color-orange-100, rgba(249,115,22,0.26)) !important; }
html.dark .hover\:bg-purple-100:hover  { background-color: var(--color-purple-100, rgba(168,85,247,0.26)) !important; }
html.dark .hover\:bg-blue-100:hover    { background-color: var(--color-blue-100, rgba(59,130,246,0.26)) !important; }
html.dark .hover\:bg-green-100:hover   { background-color: var(--color-green-100, rgba(34,197,94,0.26)) !important; }
html.dark .hover\:bg-teal-100:hover    { background-color: var(--color-teal-100, rgba(20,184,166,0.26)) !important; }

/* ── Texto coloreado 600-900 → Theme-aware con fallback ─────────────── */
html.dark .text-indigo-600,  html.dark .text-indigo-700,  html.dark .text-indigo-800,  html.dark .text-indigo-900  { color: var(--color-indigo-400, #a5b4fc) !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: var(--color-emerald-400, #6ee7b7) !important; }
html.dark .text-amber-600,   html.dark .text-amber-700,   html.dark .text-amber-800,   html.dark .text-amber-900   { color: var(--color-amber-400, #fcd34d) !important; }
html.dark .text-red-600,     html.dark .text-red-700,     html.dark .text-red-800,     html.dark .text-red-900     { color: var(--color-red-400, #fca5a5) !important; }
html.dark .text-orange-600,  html.dark .text-orange-700,  html.dark .text-orange-800,  html.dark .text-orange-900  { color: var(--color-orange-400, #fdba74) !important; }
html.dark .text-purple-600,  html.dark .text-purple-700,  html.dark .text-purple-800,  html.dark .text-purple-900  { color: var(--color-purple-400, #d8b4fe) !important; }
html.dark .text-blue-600,    html.dark .text-blue-700,    html.dark .text-blue-800,    html.dark .text-blue-900    { color: var(--color-blue-400, #93c5fd) !important; }
html.dark .text-green-600,   html.dark .text-green-700,   html.dark .text-green-800,   html.dark .text-green-900   { color: var(--color-green-400, #86efac) !important; }
html.dark .text-yellow-600,  html.dark .text-yellow-700,  html.dark .text-yellow-800,  html.dark .text-yellow-900  { color: var(--color-yellow-400, #fde047) !important; }

/* Hover de texto coloreado */
html.dark .hover\:text-indigo-300:hover,  html.dark .hover\:text-indigo-700:hover,  html.dark .hover\:text-indigo-800:hover  { color: #c7d2fe !important; }
html.dark .hover\:text-emerald-700:hover, html.dark .hover\:text-emerald-800:hover { color: #a7f3d0 !important; }
html.dark .hover\:text-red-700:hover,     html.dark .hover\:text-red-800:hover     { color: #fecaca !important; }
html.dark .hover\:text-amber-700:hover,   html.dark .hover\:text-amber-800:hover,
html.dark .hover\:text-amber-900:hover    { color: #fde68a !important; }
html.dark .hover\:text-purple-700:hover,  html.dark .hover\:text-purple-800:hover  { color: #e9d5ff !important; }
html.dark .hover\:text-blue-700:hover,    html.dark .hover\:text-blue-800:hover    { color: #bfdbfe !important; }
html.dark .hover\:text-orange-700:hover,  html.dark .hover\:text-orange-800:hover  { color: #fed7aa !important; }

/* ── Bordes coloreados ───────────────────────────────────────────────── */
html.dark .border-indigo-100  { border-color: rgba(99,102,241,0.30) !important; }
html.dark .border-emerald-100 { border-color: rgba(16,185,129,0.30) !important; }
html.dark .border-amber-100   { border-color: rgba(245,158,11,0.30) !important; }
html.dark .border-red-100     { border-color: rgba(239,68,68,0.30) !important; }
html.dark .border-orange-100  { border-color: rgba(249,115,22,0.30) !important; }
html.dark .border-purple-100  { border-color: rgba(168,85,247,0.30) !important; }
html.dark .border-blue-100    { border-color: rgba(59,130,246,0.30) !important; }
html.dark .border-green-100   { border-color: rgba(34,197,94,0.30) !important; }
html.dark .border-teal-100    { border-color: rgba(20,184,166,0.30) !important; }
html.dark .border-pink-100    { border-color: rgba(236,72,153,0.30) !important; }
html.dark .border-cyan-100    { border-color: rgba(6,182,212,0.30) !important; }
html.dark .border-rose-100    { border-color: rgba(244,63,94,0.30) !important; }
html.dark .border-yellow-100  { border-color: rgba(234,179,8,0.30) !important; }

html.dark .border-indigo-200  { border-color: rgba(99,102,241,0.40) !important; }
html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.40) !important; }
html.dark .border-amber-200   { border-color: rgba(245,158,11,0.40) !important; }
html.dark .border-red-200     { border-color: rgba(239,68,68,0.40) !important; }
html.dark .border-orange-200  { border-color: rgba(249,115,22,0.40) !important; }
html.dark .border-purple-200  { border-color: rgba(168,85,247,0.40) !important; }
html.dark .border-blue-200    { border-color: rgba(59,130,246,0.40) !important; }
html.dark .border-green-200   { border-color: rgba(34,197,94,0.40) !important; }
html.dark .border-teal-200    { border-color: rgba(20,184,166,0.40) !important; }
html.dark .border-rose-200    { border-color: rgba(244,63,94,0.40) !important; }
html.dark .border-yellow-200  { border-color: rgba(234,179,8,0.40) !important; }
html.dark .border-cyan-200    { border-color: rgba(6,182,212,0.40) !important; }
html.dark .border-pink-200    { border-color: rgba(236,72,153,0.40) !important; }

/* ── Formularios ─────────────────────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html.dark textarea,
html.dark select {
  background-color: var(--d-surf-sunken) !important;
  color: var(--d-text);
  border-color: var(--d-border-strong) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--d-placeholder) !important; opacity: 1; }
html.dark .placeholder-slate-300::placeholder,
html.dark .placeholder-slate-400::placeholder,
html.dark .placeholder-slate-500::placeholder { color: var(--d-placeholder) !important; opacity: 1; }
html.dark input:focus, html.dark textarea:focus, html.dark select:focus,
html.dark input:focus-visible, html.dark textarea:focus-visible, html.dark select:focus-visible {
  border-color: var(--d-border-focus) !important;
  box-shadow: 0 0 0 3px var(--d-accent-ring) !important;
  outline: none !important;
}
html.dark input[disabled], html.dark textarea[disabled], html.dark select[disabled] {
  background-color: var(--d-surf-2) !important;
  color: var(--d-text-dim) !important;
  opacity: .65;
}
html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: var(--d-accent); }
html.dark input[type="file"] { color: var(--d-text-muted); background: transparent !important; border: none !important; }
html.dark input[type="file"]::file-selector-button {
  background-color: var(--d-accent-soft);
  color: var(--d-accent);
  border: none;
}

/* Focus rings */
html.dark .focus\:ring-indigo-500:focus,
html.dark .focus\:ring-emerald-500:focus,
html.dark .focus\:ring-amber-500:focus,
html.dark .focus\:ring-red-500:focus,
html.dark .focus\:ring-blue-500:focus,
html.dark .focus\:ring-purple-500:focus,
html.dark .focus\:ring-teal-500:focus,
html.dark .focus\:ring-rose-500:focus { box-shadow: 0 0 0 3px var(--d-accent-ring) !important; }

/* ── Overlays / modales ──────────────────────────────────────────────── */
html.dark .bg-black\/40 { background-color: rgba(0,0,0,0.72) !important; }
html.dark .bg-black\/50 { background-color: rgba(0,0,0,0.78) !important; }
html.dark .bg-black\/60 { background-color: rgba(0,0,0,0.82) !important; }

/* ── Misc ────────────────────────────────────────────────────────────── */
html.dark .border-dashed { border-color: var(--d-border-strong) !important; }
html.dark img:not(.no-dim) { filter: brightness(.92) contrast(1.02); }

html.dark .bg-indigo-600 { background-color: var(--color-indigo-600, #6366f1) !important; }
html.dark .hover\:bg-indigo-700:hover { background-color: var(--color-indigo-700, #4f46e5) !important; }
html.dark .bg-emerald-600 { background-color: var(--color-emerald-600, #10b981) !important; }
html.dark .hover\:bg-emerald-700:hover { background-color: var(--color-emerald-700, #059669) !important; }

html.dark .bg-white\/10,
html.dark .bg-white\/20 { background-color: rgba(255,255,255,0.18) !important; }
html.dark .bg-white\/70 { background-color: rgba(255,255,255,0.85) !important; color: #0f172a !important; }

html.dark .text-gray-100, html.dark .text-gray-200 { color: var(--d-text-muted) !important; }
html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--d-text-dim) !important; }
html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--d-text-dim) !important; }


/* ── Fondos tintados 200-series ──────────────────────────────────────── */
html.dark .bg-emerald-200 { background-color: rgba(16,185,129,0.18) !important; }
html.dark .bg-amber-200   { background-color: rgba(245,158,11,0.18) !important; }
html.dark .bg-blue-200    { background-color: rgba(59,130,246,0.18) !important; }
html.dark .bg-red-200     { background-color: rgba(239,68,68,0.18) !important; }
html.dark .bg-purple-200  { background-color: rgba(168,85,247,0.18) !important; }
html.dark .bg-pink-200    { background-color: rgba(236,72,153,0.18) !important; }
html.dark .bg-orange-200  { background-color: rgba(249,115,22,0.18) !important; }
html.dark .bg-sky-200     { background-color: rgba(14,165,233,0.18) !important; }
html.dark .bg-teal-200    { background-color: rgba(20,184,166,0.18) !important; }
html.dark .bg-green-200   { background-color: rgba(34,197,94,0.18) !important; }
html.dark .bg-violet-200  { background-color: rgba(139,92,246,0.18) !important; }
html.dark .bg-rose-200    { background-color: rgba(244,63,94,0.18) !important; }
html.dark .bg-cyan-200    { background-color: rgba(6,182,212,0.18) !important; }
html.dark .bg-fuchsia-200 { background-color: rgba(217,70,239,0.18) !important; }
html.dark .bg-lime-200    { background-color: rgba(132,204,22,0.18) !important; }

html.dark .progress-track {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark .progress-fill {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15), 0 0 14px currentColor;
  filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════
   BRIDGE UNIVERSAL DaisyUI → Tailwind Color Tokens
   ─────────────────────────────────────────────────────────────────────
   Remapea los tokens hardcodeados de Tailwind (--color-white, --color-slate-*)
   a las variables semánticas de DaisyUI (--color-base-*) cuando hay un
   tema activo. Al aparecer DESPUÉS del bloque html.dark (igual especificidad),
   este bloque toma precedencia para cualquier combinación de tema+clase.

   color-mix() es compatible con Chrome 111+, Firefox 113+, Safari 16.2+
   ═══════════════════════════════════════════════════════════════════════ */
html.dark[data-theme] {
  /* ── Superficies y Elevación para modo oscuro ── */
  --d-bg:          var(--color-base-200);
  --d-surf-1:      color-mix(in oklch, var(--color-base-100) 85%, black);
  --d-surf-2:      var(--color-base-100);
  --d-surf-3:      var(--color-base-200);
  --d-surf-4:      var(--color-base-300);
  --d-surf-sunken: color-mix(in oklch, var(--color-base-100) 85%, #000000);

  /* ── Bordes ── */
  --d-border:        color-mix(in oklch, var(--color-base-content) 14%, var(--color-base-100));
  --d-border-strong: color-mix(in oklch, var(--color-base-content) 24%, var(--color-base-100));
  --d-border-focus:  var(--color-primary);

  /* ── Texto ── */
  --d-text:         color-mix(in oklch, var(--color-base-content) 90%, var(--color-base-100));
  --d-text-strong:  var(--color-base-content);
  --d-text-muted:   color-mix(in oklch, var(--color-base-content) 60%, var(--color-base-100));
  --d-text-dim:     color-mix(in oklch, var(--color-base-content) 40%, var(--color-base-100));
  --d-placeholder:  color-mix(in oklch, var(--color-base-content) 40%, var(--color-base-100));

  /* ── Acento ── */
  --d-accent:       var(--color-primary);
  --d-accent-soft:  color-mix(in oklch, var(--color-primary) 15%, transparent);
  --d-accent-hover: color-mix(in oklch, var(--color-primary) 25%, transparent);
  --d-accent-ring:  color-mix(in oklch, var(--color-primary) 35%, transparent);

  /* ── Superficies para modo oscuro vinculadas al tema ── */
  --color-slate-950: color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-slate-900: var(--color-base-100);
  --color-slate-850: color-mix(in oklch, var(--color-base-100) 90%, var(--color-base-content));
  --color-slate-800: var(--color-base-200);
  --color-slate-700: var(--color-base-300);

  /* ── Bordes y divisores modo oscuro ── */
  --color-slate-600: color-mix(in oklch, var(--color-base-content) 25%, var(--color-base-100));

  /* ── Textos modo oscuro ── */
  --color-slate-500: color-mix(in oklch, var(--color-base-content) 50%, var(--color-base-100));
  --color-slate-400: color-mix(in oklch, var(--color-base-content) 65%, var(--color-base-100));
  --color-slate-300: color-mix(in oklch, var(--color-base-content) 80%, var(--color-base-100));
  --color-slate-200: color-mix(in oklch, var(--color-base-content) 90%, var(--color-base-100));
  --color-slate-100: var(--color-base-content);
  --color-slate-50:  var(--color-base-content);

  /* ── Gray alias → Slate ── */
  --color-gray-50:  var(--color-slate-50);  --color-gray-100: var(--color-slate-100);
  --color-gray-200: var(--color-slate-200); --color-gray-300: var(--color-slate-300);
  --color-gray-400: var(--color-slate-400); --color-gray-500: var(--color-slate-500);
  --color-gray-600: var(--color-slate-600); --color-gray-700: var(--color-slate-700);
  --color-gray-800: var(--color-slate-800); --color-gray-900: var(--color-slate-900);
  --color-gray-950: var(--color-slate-950);

  /* ════════════════════════════════════════════════════════════
     FAMILIAS DE BADGE / CARD / ICON — mapean a DaisyUI semantic
     ════════════════════════════════════════════════════════════ */

  /* ── PRIMARY (indigo → --color-primary) ── */
  --color-indigo-50:  color-mix(in oklch, var(--color-primary) 10%, var(--color-base-100));
  --color-indigo-100: color-mix(in oklch, var(--color-primary) 18%, var(--color-base-100));
  --color-indigo-200: color-mix(in oklch, var(--color-primary) 30%, var(--color-base-100));
  --color-indigo-300: color-mix(in oklch, var(--color-primary) 50%, var(--color-base-100));
  --color-indigo-400: color-mix(in oklch, var(--color-primary) 70%, var(--color-base-100));
  --color-indigo-500: color-mix(in oklch, var(--color-primary) 85%, var(--color-base-100));
  --color-indigo-600: var(--color-primary);
  --color-indigo-700: color-mix(in oklch, var(--color-primary) 85%, black);
  --color-indigo-800: color-mix(in oklch, var(--color-primary) 72%, black);
  --color-indigo-900: color-mix(in oklch, var(--color-primary) 55%, var(--color-base-content));
  --color-indigo-950: color-mix(in oklch, var(--color-base-100) 80%, black);

  /* ── SUCCESS (emerald/green → --color-success) ── */
  --color-emerald-50:  color-mix(in oklch, var(--color-success) 10%, var(--color-base-100));
  --color-emerald-100: color-mix(in oklch, var(--color-success) 18%, var(--color-base-100));
  --color-emerald-200: color-mix(in oklch, var(--color-success) 30%, var(--color-base-100));
  --color-emerald-300: color-mix(in oklch, var(--color-success) 50%, var(--color-base-100));
  --color-emerald-400: color-mix(in oklch, var(--color-success) 68%, var(--color-base-100));
  --color-emerald-500: color-mix(in oklch, var(--color-success) 85%, var(--color-base-100));
  --color-emerald-600: var(--color-success);
  --color-emerald-700: color-mix(in oklch, var(--color-success) 85%, black);
  --color-emerald-800: color-mix(in oklch, var(--color-success) 72%, black);
  --color-emerald-950: color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-green-50:    color-mix(in oklch, var(--color-success) 10%, var(--color-base-100));
  --color-green-100:   color-mix(in oklch, var(--color-success) 18%, var(--color-base-100));
  --color-green-200:   color-mix(in oklch, var(--color-success) 30%, var(--color-base-100));
  --color-green-300:   color-mix(in oklch, var(--color-success) 50%, var(--color-base-100));
  --color-green-400:   color-mix(in oklch, var(--color-success) 68%, var(--color-base-100));
  --color-green-500:   color-mix(in oklch, var(--color-success) 85%, var(--color-base-100));
  --color-green-600:   var(--color-success);
  --color-green-700:   color-mix(in oklch, var(--color-success) 85%, black);
  --color-green-800:   color-mix(in oklch, var(--color-success) 72%, black);

  /* ── ERROR (red/rose → --color-error) ── */
  --color-red-50:   color-mix(in oklch, var(--color-error) 10%, var(--color-base-100));
  --color-red-100:  color-mix(in oklch, var(--color-error) 18%, var(--color-base-100));
  --color-red-200:  color-mix(in oklch, var(--color-error) 30%, var(--color-base-100));
  --color-red-300:  color-mix(in oklch, var(--color-error) 50%, var(--color-base-100));
  --color-red-400:  color-mix(in oklch, var(--color-error) 68%, var(--color-base-100));
  --color-red-500:  color-mix(in oklch, var(--color-error) 85%, var(--color-base-100));
  --color-red-600:  var(--color-error);
  --color-red-700:  color-mix(in oklch, var(--color-error) 85%, black);
  --color-red-800:  color-mix(in oklch, var(--color-error) 72%, black);
  --color-red-950:  color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-rose-50:  color-mix(in oklch, var(--color-error) 10%, var(--color-base-100));
  --color-rose-100: color-mix(in oklch, var(--color-error) 18%, var(--color-base-100));
  --color-rose-200: color-mix(in oklch, var(--color-error) 30%, var(--color-base-100));
  --color-rose-300: color-mix(in oklch, var(--color-error) 50%, var(--color-base-100));
  --color-rose-400: color-mix(in oklch, var(--color-error) 68%, var(--color-base-100));
  --color-rose-500: color-mix(in oklch, var(--color-error) 85%, var(--color-base-100));
  --color-rose-600: var(--color-error);
  --color-rose-700: color-mix(in oklch, var(--color-error) 85%, black);
  --color-rose-800: color-mix(in oklch, var(--color-error) 72%, black);
  --color-rose-950: color-mix(in oklch, var(--color-base-100) 80%, black);

  /* ── WARNING (amber/orange/yellow → --color-warning) ── */
  --color-amber-50:   color-mix(in oklch, var(--color-warning) 10%, var(--color-base-100));
  --color-amber-100:  color-mix(in oklch, var(--color-warning) 18%, var(--color-base-100));
  --color-amber-200:  color-mix(in oklch, var(--color-warning) 30%, var(--color-base-100));
  --color-amber-300:  color-mix(in oklch, var(--color-warning) 50%, var(--color-base-100));
  --color-amber-400:  color-mix(in oklch, var(--color-warning) 68%, var(--color-base-100));
  --color-amber-500:  color-mix(in oklch, var(--color-warning) 85%, var(--color-base-100));
  --color-amber-600:  var(--color-warning);
  --color-amber-700:  color-mix(in oklch, var(--color-warning) 85%, black);
  --color-amber-800:  color-mix(in oklch, var(--color-warning) 72%, black);
  --color-amber-950:  color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-orange-50:  color-mix(in oklch, var(--color-warning) 10%, var(--color-base-100));
  --color-orange-100: color-mix(in oklch, var(--color-warning) 18%, var(--color-base-100));
  --color-orange-200: color-mix(in oklch, var(--color-warning) 30%, var(--color-base-100));
  --color-orange-300: color-mix(in oklch, var(--color-warning) 50%, var(--color-base-100));
  --color-orange-400: color-mix(in oklch, var(--color-warning) 68%, var(--color-base-100));
  --color-orange-500: color-mix(in oklch, var(--color-warning) 85%, var(--color-base-100));
  --color-orange-600: var(--color-warning);
  --color-orange-700: color-mix(in oklch, var(--color-warning) 85%, black);
  --color-orange-800: color-mix(in oklch, var(--color-warning) 72%, black);
  --color-orange-950: color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-yellow-50:  color-mix(in oklch, var(--color-warning) 10%, var(--color-base-100));
  --color-yellow-100: color-mix(in oklch, var(--color-warning) 18%, var(--color-base-100));
  --color-yellow-200: color-mix(in oklch, var(--color-warning) 30%, var(--color-base-100));
  --color-yellow-300: color-mix(in oklch, var(--color-warning) 50%, var(--color-base-100));
  --color-yellow-400: color-mix(in oklch, var(--color-warning) 68%, var(--color-base-100));
  --color-yellow-500: var(--color-warning);
  --color-yellow-600: var(--color-warning);
  --color-yellow-700: color-mix(in oklch, var(--color-warning) 85%, black);
  --color-yellow-800: color-mix(in oklch, var(--color-warning) 72%, black);

  /* ── INFO (blue/sky/cyan → --color-info) ── */
  --color-blue-50:   color-mix(in oklch, var(--color-info) 10%, var(--color-base-100));
  --color-blue-100:  color-mix(in oklch, var(--color-info) 18%, var(--color-base-100));
  --color-blue-200:  color-mix(in oklch, var(--color-info) 30%, var(--color-base-100));
  --color-blue-300:  color-mix(in oklch, var(--color-info) 50%, var(--color-base-100));
  --color-blue-400:  color-mix(in oklch, var(--color-info) 68%, var(--color-base-100));
  --color-blue-500:  color-mix(in oklch, var(--color-info) 85%, var(--color-base-100));
  --color-blue-600:  var(--color-info);
  --color-blue-700:  color-mix(in oklch, var(--color-info) 85%, black);
  --color-blue-800:  color-mix(in oklch, var(--color-info) 72%, black);
  --color-blue-950:  color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-sky-50:    color-mix(in oklch, var(--color-info) 10%, var(--color-base-100));
  --color-sky-100:   color-mix(in oklch, var(--color-info) 18%, var(--color-base-100));
  --color-sky-200:   color-mix(in oklch, var(--color-info) 30%, var(--color-base-100));
  --color-sky-300:   color-mix(in oklch, var(--color-info) 50%, var(--color-base-100));
  --color-sky-400:   color-mix(in oklch, var(--color-info) 68%, var(--color-base-100));
  --color-sky-500:   color-mix(in oklch, var(--color-info) 85%, var(--color-base-100));
  --color-sky-600:   var(--color-info);
  --color-sky-700:   color-mix(in oklch, var(--color-info) 85%, black);
  --color-sky-800:   color-mix(in oklch, var(--color-info) 72%, black);
  --color-cyan-50:   color-mix(in oklch, var(--color-info) 10%, var(--color-base-100));
  --color-cyan-100:  color-mix(in oklch, var(--color-info) 18%, var(--color-base-100));
  --color-cyan-200:  color-mix(in oklch, var(--color-info) 30%, var(--color-base-100));
  --color-cyan-300:  color-mix(in oklch, var(--color-info) 50%, var(--color-base-100));
  --color-cyan-400:  color-mix(in oklch, var(--color-info) 68%, var(--color-base-100));
  --color-cyan-500:  color-mix(in oklch, var(--color-info) 85%, var(--color-base-100));
  --color-cyan-600:  var(--color-info);
  --color-cyan-700:  color-mix(in oklch, var(--color-info) 85%, black);
  --color-cyan-800:  color-mix(in oklch, var(--color-info) 72%, black);

  /* ── ACCENT (purple/violet/pink/fuchsia → --color-accent) ── */
  --color-purple-50:   color-mix(in oklch, var(--color-accent) 10%, var(--color-base-100));
  --color-purple-100:  color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100));
  --color-purple-200:  color-mix(in oklch, var(--color-accent) 30%, var(--color-base-100));
  --color-purple-300:  color-mix(in oklch, var(--color-accent) 50%, var(--color-base-100));
  --color-purple-400:  color-mix(in oklch, var(--color-accent) 68%, var(--color-base-100));
  --color-purple-500:  color-mix(in oklch, var(--color-accent) 85%, var(--color-base-100));
  --color-purple-600:  var(--color-accent);
  --color-purple-700:  color-mix(in oklch, var(--color-accent) 85%, black);
  --color-purple-800:  color-mix(in oklch, var(--color-accent) 72%, black);
  --color-purple-950:  color-mix(in oklch, var(--color-base-100) 80%, black);
  --color-violet-50:   color-mix(in oklch, var(--color-accent) 10%, var(--color-base-100));
  --color-violet-100:  color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100));
  --color-violet-200:  color-mix(in oklch, var(--color-accent) 30%, var(--color-base-100));
  --color-violet-300:  color-mix(in oklch, var(--color-accent) 50%, var(--color-base-100));
  --color-violet-400:  color-mix(in oklch, var(--color-accent) 68%, var(--color-base-100));
  --color-violet-500:  color-mix(in oklch, var(--color-accent) 85%, var(--color-base-100));
  --color-violet-600:  var(--color-accent);
  --color-violet-700:  color-mix(in oklch, var(--color-accent) 85%, black);
  --color-violet-800:  color-mix(in oklch, var(--color-accent) 72%, black);
  --color-pink-50:     color-mix(in oklch, var(--color-accent) 10%, var(--color-base-100));
  --color-pink-100:    color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100));
  --color-pink-200:    color-mix(in oklch, var(--color-accent) 30%, var(--color-base-100));
  --color-pink-300:    color-mix(in oklch, var(--color-accent) 50%, var(--color-base-100));
  --color-pink-400:    color-mix(in oklch, var(--color-accent) 68%, var(--color-base-100));
  --color-pink-500:    color-mix(in oklch, var(--color-accent) 85%, var(--color-base-100));
  --color-pink-600:    var(--color-accent);
  --color-pink-700:    color-mix(in oklch, var(--color-accent) 85%, black);
  --color-pink-800:    color-mix(in oklch, var(--color-accent) 72%, black);
  --color-fuchsia-50:  color-mix(in oklch, var(--color-accent) 10%, var(--color-base-100));
  --color-fuchsia-100: color-mix(in oklch, var(--color-accent) 18%, var(--color-base-100));
  --color-fuchsia-200: color-mix(in oklch, var(--color-accent) 30%, var(--color-base-100));
  --color-fuchsia-300: color-mix(in oklch, var(--color-accent) 50%, var(--color-base-100));
  --color-fuchsia-400: color-mix(in oklch, var(--color-accent) 68%, var(--color-base-100));
  --color-fuchsia-500: color-mix(in oklch, var(--color-accent) 85%, var(--color-base-100));
  --color-fuchsia-600: var(--color-accent);
  --color-fuchsia-700: color-mix(in oklch, var(--color-accent) 85%, black);
  --color-fuchsia-800: color-mix(in oklch, var(--color-accent) 72%, black);

  /* ── SECONDARY (teal → --color-secondary) ── */
  --color-teal-50:   color-mix(in oklch, var(--color-secondary) 10%, var(--color-base-100));
  --color-teal-100:  color-mix(in oklch, var(--color-secondary) 18%, var(--color-base-100));
  --color-teal-200:  color-mix(in oklch, var(--color-secondary) 30%, var(--color-base-100));
  --color-teal-300:  color-mix(in oklch, var(--color-secondary) 50%, var(--color-base-100));
  --color-teal-400:  color-mix(in oklch, var(--color-secondary) 68%, var(--color-base-100));
  --color-teal-500:  color-mix(in oklch, var(--color-secondary) 85%, var(--color-base-100));
  --color-teal-600:  var(--color-secondary);
  --color-teal-700:  color-mix(in oklch, var(--color-secondary) 85%, black);
  --color-teal-800:  color-mix(in oklch, var(--color-secondary) 72%, black);

  /* ── LIME (estados especiales → usa success) ── */
  --color-lime-50:   color-mix(in oklch, var(--color-success) 10%, var(--color-base-100));
  --color-lime-100:  color-mix(in oklch, var(--color-success) 18%, var(--color-base-100));
  --color-lime-200:  color-mix(in oklch, var(--color-success) 30%, var(--color-base-100));
  --color-lime-300:  color-mix(in oklch, var(--color-success) 50%, var(--color-base-100));
  --color-lime-400:  color-mix(in oklch, var(--color-success) 68%, var(--color-base-100));
  --color-lime-500:  color-mix(in oklch, var(--color-success) 85%, var(--color-base-100));
  --color-lime-600:  var(--color-success);
  --color-lime-700:  color-mix(in oklch, var(--color-success) 85%, black);
  --color-lime-800:  color-mix(in oklch, var(--color-success) 72%, black);
}

/* ── Sidebar & body background siguen el tema ──────────────────────────
   El sidebar usa bg-slate-900 (hardcodeado), lo forzamos via variable CSS
   para que responda al tema. El body usa bg-slate-50.                    */
html.dark[data-theme] body {
  background-color: var(--color-base-200);
}

html.dark[data-theme] aside#sidebar {
  background-color: color-mix(in oklch, var(--color-base-content) 92%, var(--color-base-100)) !important;
  color: var(--color-base-100);
}

/* Texto del sidebar → siempre legible (contraste automático) */
html.dark[data-theme] aside#sidebar a,
html.dark[data-theme] aside#sidebar p,
html.dark[data-theme] aside#sidebar span:not(.badge),
html.dark[data-theme] aside#sidebar button {
  color: color-mix(in oklch, var(--color-base-100) 85%, var(--color-base-content));
}

html.dark[data-theme] aside#sidebar a:hover,
html.dark[data-theme] aside#sidebar button:hover {
  background-color: color-mix(in oklch, var(--color-base-100) 15%, var(--color-base-content)) !important;
  color: var(--color-base-100);
}

/* Light themes: sidebar siempre oscuro */
html[data-theme=flexiblebeta] aside#sidebar,html[data-theme=light] aside#sidebar,html[data-theme=corporate] aside#sidebar,html[data-theme=nord] aside#sidebar,html[data-theme=cupcake] aside#sidebar,html[data-theme=emerald] aside#sidebar,html[data-theme=retro] aside#sidebar,html[data-theme=valentine] aside#sidebar,html[data-theme=garden] aside#sidebar,html[data-theme=lofi] aside#sidebar,html[data-theme=pastel] aside#sidebar,html[data-theme=winter] aside#sidebar,html[data-theme=autumn] aside#sidebar,html[data-theme=silk] aside#sidebar,html[data-theme=cyberpunk] aside#sidebar,html[data-theme=cmyk] aside#sidebar,html[data-theme=wireframe] aside#sidebar,html[data-theme=bumblebee] aside#sidebar,html[data-theme=acid] aside#sidebar,html[data-theme=lemonade] aside#sidebar {
  background-color: oklch(15% 0.01 260) !important;
}

html[data-theme=flexiblebeta] aside#sidebar a,html[data-theme=flexiblebeta] aside#sidebar p,html[data-theme=flexiblebeta] aside#sidebar span:not(.badge),html[data-theme=flexiblebeta] aside#sidebar button,html[data-theme=light] aside#sidebar a,html[data-theme=light] aside#sidebar p,html[data-theme=light] aside#sidebar span:not(.badge),html[data-theme=light] aside#sidebar button,html[data-theme=corporate] aside#sidebar a,html[data-theme=corporate] aside#sidebar p,html[data-theme=corporate] aside#sidebar span:not(.badge),html[data-theme=corporate] aside#sidebar button,html[data-theme=nord] aside#sidebar a,html[data-theme=nord] aside#sidebar p,html[data-theme=nord] aside#sidebar span:not(.badge),html[data-theme=nord] aside#sidebar button,html[data-theme=cupcake] aside#sidebar a,html[data-theme=cupcake] aside#sidebar p,html[data-theme=cupcake] aside#sidebar span:not(.badge),html[data-theme=cupcake] aside#sidebar button,html[data-theme=emerald] aside#sidebar a,html[data-theme=emerald] aside#sidebar p,html[data-theme=emerald] aside#sidebar span:not(.badge),html[data-theme=emerald] aside#sidebar button,html[data-theme=retro] aside#sidebar a,html[data-theme=retro] aside#sidebar p,html[data-theme=retro] aside#sidebar span:not(.badge),html[data-theme=retro] aside#sidebar button,html[data-theme=valentine] aside#sidebar a,html[data-theme=valentine] aside#sidebar p,html[data-theme=valentine] aside#sidebar span:not(.badge),html[data-theme=valentine] aside#sidebar button,html[data-theme=garden] aside#sidebar a,html[data-theme=garden] aside#sidebar p,html[data-theme=garden] aside#sidebar span:not(.badge),html[data-theme=garden] aside#sidebar button,html[data-theme=lofi] aside#sidebar a,html[data-theme=lofi] aside#sidebar p,html[data-theme=lofi] aside#sidebar span:not(.badge),html[data-theme=lofi] aside#sidebar button,html[data-theme=pastel] aside#sidebar a,html[data-theme=pastel] aside#sidebar p,html[data-theme=pastel] aside#sidebar span:not(.badge),html[data-theme=pastel] aside#sidebar button,html[data-theme=winter] aside#sidebar a,html[data-theme=winter] aside#sidebar p,html[data-theme=winter] aside#sidebar span:not(.badge),html[data-theme=winter] aside#sidebar button,html[data-theme=autumn] aside#sidebar a,html[data-theme=autumn] aside#sidebar p,html[data-theme=autumn] aside#sidebar span:not(.badge),html[data-theme=autumn] aside#sidebar button,html[data-theme=silk] aside#sidebar a,html[data-theme=silk] aside#sidebar p,html[data-theme=silk] aside#sidebar span:not(.badge),html[data-theme=silk] aside#sidebar button,html[data-theme=cyberpunk] aside#sidebar a,html[data-theme=cyberpunk] aside#sidebar p,html[data-theme=cyberpunk] aside#sidebar span:not(.badge),html[data-theme=cyberpunk] aside#sidebar button,html[data-theme=cmyk] aside#sidebar a,html[data-theme=cmyk] aside#sidebar p,html[data-theme=cmyk] aside#sidebar span:not(.badge),html[data-theme=cmyk] aside#sidebar button,html[data-theme=wireframe] aside#sidebar a,html[data-theme=wireframe] aside#sidebar p,html[data-theme=wireframe] aside#sidebar span:not(.badge),html[data-theme=wireframe] aside#sidebar button,html[data-theme=bumblebee] aside#sidebar a,html[data-theme=bumblebee] aside#sidebar p,html[data-theme=bumblebee] aside#sidebar span:not(.badge),html[data-theme=bumblebee] aside#sidebar button,html[data-theme=acid] aside#sidebar a,html[data-theme=acid] aside#sidebar p,html[data-theme=acid] aside#sidebar span:not(.badge),html[data-theme=acid] aside#sidebar button,html[data-theme=lemonade] aside#sidebar a,html[data-theme=lemonade] aside#sidebar p,html[data-theme=lemonade] aside#sidebar span:not(.badge),html[data-theme=lemonade] aside#sidebar button {
  color: rgba(255,255,255,0.75);
}

html[data-theme=flexiblebeta] aside#sidebar a:hover,html[data-theme=flexiblebeta] aside#sidebar button:hover,html[data-theme=light] aside#sidebar a:hover,html[data-theme=light] aside#sidebar button:hover,html[data-theme=corporate] aside#sidebar a:hover,html[data-theme=corporate] aside#sidebar button:hover,html[data-theme=nord] aside#sidebar a:hover,html[data-theme=nord] aside#sidebar button:hover,html[data-theme=cupcake] aside#sidebar a:hover,html[data-theme=cupcake] aside#sidebar button:hover,html[data-theme=emerald] aside#sidebar a:hover,html[data-theme=emerald] aside#sidebar button:hover,html[data-theme=retro] aside#sidebar a:hover,html[data-theme=retro] aside#sidebar button:hover,html[data-theme=valentine] aside#sidebar a:hover,html[data-theme=valentine] aside#sidebar button:hover,html[data-theme=garden] aside#sidebar a:hover,html[data-theme=garden] aside#sidebar button:hover,html[data-theme=lofi] aside#sidebar a:hover,html[data-theme=lofi] aside#sidebar button:hover,html[data-theme=pastel] aside#sidebar a:hover,html[data-theme=pastel] aside#sidebar button:hover,html[data-theme=winter] aside#sidebar a:hover,html[data-theme=winter] aside#sidebar button:hover,html[data-theme=autumn] aside#sidebar a:hover,html[data-theme=autumn] aside#sidebar button:hover,html[data-theme=silk] aside#sidebar a:hover,html[data-theme=silk] aside#sidebar button:hover,html[data-theme=cyberpunk] aside#sidebar a:hover,html[data-theme=cyberpunk] aside#sidebar button:hover,html[data-theme=cmyk] aside#sidebar a:hover,html[data-theme=cmyk] aside#sidebar button:hover,html[data-theme=wireframe] aside#sidebar a:hover,html[data-theme=wireframe] aside#sidebar button:hover,html[data-theme=bumblebee] aside#sidebar a:hover,html[data-theme=bumblebee] aside#sidebar button:hover,html[data-theme=acid] aside#sidebar a:hover,html[data-theme=acid] aside#sidebar button:hover,html[data-theme=lemonade] aside#sidebar a:hover,html[data-theme=lemonade] aside#sidebar button:hover {
  background-color: rgba(255,255,255,0.12) !important;
  color: #fff;
}
html[data-theme=light] aside#sidebar a,
html[data-theme=light] aside#sidebar p,
html[data-theme=light] aside#sidebar span:not(.badge),
html[data-theme=light] aside#sidebar button,
html[data-theme=corporate] aside#sidebar a,
html[data-theme=corporate] aside#sidebar p,
html[data-theme=corporate] aside#sidebar span:not(.badge),
html[data-theme=corporate] aside#sidebar button,
html[data-theme=nord] aside#sidebar a,
html[data-theme=nord] aside#sidebar p,
html[data-theme=nord] aside#sidebar span:not(.badge),
html[data-theme=nord] aside#sidebar button {
  color: rgba(255,255,255,0.75);
}

html[data-theme=light] aside#sidebar a:hover,
html[data-theme=light] aside#sidebar button:hover,
html[data-theme=corporate] aside#sidebar a:hover,
html[data-theme=corporate] aside#sidebar button:hover,
html[data-theme=nord] aside#sidebar a:hover,
html[data-theme=nord] aside#sidebar button:hover {
  background-color: rgba(255,255,255,0.12) !important;
  color: #fff;
}