/* ============================================================================
   Data Animal — Sistema de tema (oscuro / claro)
   Capa de modo claro: re-mapea las utilidades dark de Tailwind ya usadas
   en las plantillas, sin tener que reescribir el markup.
   ========================================================================== */

:root, html[data-theme="dark"] {
  --page-bg:      #030712;
  --scroll-track: #111827;
  --scroll-thumb: #374151;
  --da-surface:   #1f2937;
  --da-border:    #1f2937;
  --da-text:      #f3f4f6;
  --da-muted:     #9ca3af;
  --da-accent:    #2563eb;
}

html[data-theme="light"] {
  --page-bg:      #f1f5f9;
  --scroll-track: #e2e8f0;
  --scroll-thumb: #cbd5e1;
  --da-surface:   #ffffff;
  --da-border:    #e2e8f0;
  --da-text:      #0f172a;
  --da-muted:     #64748b;
  --da-accent:    #2563eb;
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body { background: var(--page-bg) !important; }
::-webkit-scrollbar-track { background: var(--scroll-track) !important; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb) !important; }

/* ── MODO CLARO — superficies ─────────────────────────────────────────────── */
html[data-theme="light"] .bg-gray-900 { background-color:#ffffff !important; }
html[data-theme="light"] .bg-gray-800 { background-color:#ffffff !important; }
html[data-theme="light"] .bg-gray-700 { background-color:#f1f5f9 !important; }
html[data-theme="light"] .bg-gray-600 { background-color:#e2e8f0 !important; }

/* superficies con opacidad (bg-gray-XfX/NN) */
html[data-theme="light"] .bg-gray-900\/60,
html[data-theme="light"] .bg-gray-900\/70,
html[data-theme="light"] .bg-gray-900\/80,
html[data-theme="light"] .bg-gray-900\/50 { background-color:#ffffff !important; }
html[data-theme="light"] .bg-gray-800\/40,
html[data-theme="light"] .bg-gray-800\/50,
html[data-theme="light"] .bg-gray-800\/60,
html[data-theme="light"] .bg-gray-800\/70,
html[data-theme="light"] .bg-gray-800\/80 { background-color:#f1f5f9 !important; }
html[data-theme="light"] .bg-gray-700\/50,
html[data-theme="light"] .bg-gray-700\/60 { background-color:#eef2f7 !important; }

/* ── MODO CLARO — bordes ──────────────────────────────────────────────────── */
html[data-theme="light"] .border-gray-800 { border-color:#e2e8f0 !important; }
html[data-theme="light"] .border-gray-700 { border-color:#e2e8f0 !important; }
html[data-theme="light"] .border-gray-600 { border-color:#cbd5e1 !important; }
html[data-theme="light"] .divide-gray-800 > * { border-color:#e2e8f0 !important; }
html[data-theme="light"] .divide-gray-700 > * { border-color:#e2e8f0 !important; }

/* ── MODO CLARO — texto ───────────────────────────────────────────────────── */
html[data-theme="light"] .text-gray-100 { color:#0f172a !important; }
html[data-theme="light"] .text-gray-200 { color:#1e293b !important; }
html[data-theme="light"] .text-gray-300 { color:#334155 !important; }
html[data-theme="light"] .text-gray-400 { color:#475569 !important; }
html[data-theme="light"] .text-gray-500 { color:#64748b !important; }
html[data-theme="light"] .text-gray-600 { color:#94a3b8 !important; }
html[data-theme="light"] .text-gray-700 { color:#94a3b8 !important; }
html[data-theme="light"] body { color:#0f172a; }

/* text-white: en claro, el texto de CONTENIDO pasa a oscuro... */
html[data-theme="light"] .text-white { color:#0f172a !important; }
/* ...pero sobre fondos de color (botones, chips, nav activa) se mantiene blanco */
html[data-theme="light"] [class*="bg-blue-"] .text-white,    html[data-theme="light"] [class*="bg-blue-"].text-white,
html[data-theme="light"] [class*="bg-emerald-"] .text-white, html[data-theme="light"] [class*="bg-emerald-"].text-white,
html[data-theme="light"] [class*="bg-green-"] .text-white,   html[data-theme="light"] [class*="bg-green-"].text-white,
html[data-theme="light"] [class*="bg-red-"] .text-white,     html[data-theme="light"] [class*="bg-red-"].text-white,
html[data-theme="light"] [class*="bg-indigo-"] .text-white,  html[data-theme="light"] [class*="bg-indigo-"].text-white,
html[data-theme="light"] [class*="bg-purple-"] .text-white,  html[data-theme="light"] [class*="bg-purple-"].text-white,
html[data-theme="light"] [class*="bg-amber-"] .text-white,   html[data-theme="light"] [class*="bg-amber-"].text-white,
html[data-theme="light"] [class*="bg-sky-"] .text-white,     html[data-theme="light"] [class*="bg-sky-"].text-white,
html[data-theme="light"] [class*="bg-cyan-"] .text-white,    html[data-theme="light"] [class*="bg-cyan-"].text-white,
html[data-theme="light"] [class*="bg-orange-"] .text-white,  html[data-theme="light"] [class*="bg-orange-"].text-white,
html[data-theme="light"] [class*="bg-pink-"] .text-white,    html[data-theme="light"] [class*="bg-pink-"].text-white,
html[data-theme="light"] [class*="bg-teal-"] .text-white,    html[data-theme="light"] [class*="bg-teal-"].text-white,
html[data-theme="light"] [class*="bg-rose-"] .text-white,    html[data-theme="light"] [class*="bg-rose-"].text-white,
html[data-theme="light"] [class*="bg-violet-"] .text-white,  html[data-theme="light"] [class*="bg-violet-"].text-white {
  color:#ffffff !important;
}

/* placeholders */
html[data-theme="light"] .placeholder-gray-600::placeholder,
html[data-theme="light"] .placeholder-gray-500::placeholder { color:#94a3b8 !important; }

/* ── MODO CLARO — hover ───────────────────────────────────────────────────── */
html[data-theme="light"] .hover\:bg-gray-700:hover { background-color:#e2e8f0 !important; }
html[data-theme="light"] .hover\:bg-gray-800:hover { background-color:#f1f5f9 !important; }
html[data-theme="light"] .hover\:bg-gray-600:hover { background-color:#cbd5e1 !important; }
html[data-theme="light"] .hover\:text-white:hover  { color:#0f172a !important; }
html[data-theme="light"] .hover\:text-gray-200:hover { color:#1e293b !important; }
html[data-theme="light"] .hover\:text-gray-300:hover { color:#334155 !important; }
html[data-theme="light"] .hover\:text-gray-400:hover { color:#475569 !important; }
html[data-theme="light"] .hover\:border-gray-600:hover { border-color:#cbd5e1 !important; }
html[data-theme="light"] .hover\:border-gray-700:hover { border-color:#e2e8f0 !important; }

/* sombras un poco más visibles sobre fondo claro */
html[data-theme="light"] .shadow,
html[data-theme="light"] .shadow-lg,
html[data-theme="light"] .shadow-xl { box-shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06) !important; }

/* ── Botón de tema ────────────────────────────────────────────────────────── */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; cursor:pointer;
  border:1px solid var(--da-border); background:transparent;
  color:var(--da-muted); transition:all .15s ease;
}
.theme-toggle:hover { color:var(--da-text); border-color:var(--da-accent); }