/* ============================================================================
   Delta Tax — Motor de temas (claro / oscuro)
   ----------------------------------------------------------------------------
   Cómo funciona:
     1. TOKENS      — :root define el tema claro; html[data-theme="dark"] lo
                      sobrescribe. Una sola familia de tono (navy ~217°): lo que
                      cambia entre temas es la atmósfera, no la marca.
     2. COMPATIBILIDAD — las 36 vistas de la app tienen ~3.000 clases de color
                      escritas a mano (text-slate-400, bg-white, text-[#1b2d42]…).
                      En vez de reescribirlas una por una, aquí se redefinen esos
                      mismos selectores bajo html[data-theme="dark"]. Tailwind
                      compila `text-[#1b2d42]` al selector `.text-\[\#1b2d42\]`,
                      así que se puede alcanzar desde un solo archivo.

   Reglas al editar:
     · El sidebar (aside) usa SOLO utilidades alpha (bg-white/15, text-white/70),
       que compilan a selectores distintos y por eso NO se ven afectadas. El rail
       navy se mantiene idéntico en ambos temas — es la firma visual de Delta Tax.
     · Los rellenos saturados (bg-emerald-600, bg-rose-500…) se dejan intactos:
       ya tienen contraste suficiente sobre superficies oscuras.
     · text-white NO se remapea: vive dentro del sidebar y de botones rellenos.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS — Tema claro (por defecto)
   ───────────────────────────────────────────────────────────────────────────── */
:root{
    /* Superficies, de la más profunda a la más elevada */
    --page:       #eef2fa;
    --page-glow:  rgba(0,51,153,.10);
    --surface:    #ffffff;
    --surface-2:  #f8fafc;
    --surface-3:  #f1f5f9;
    --surface-4:  #e2e8f0;

    /* Líneas */
    --line:        #e4e9f2;
    --line-soft:   #eef1f7;
    --line-strong: #cbd5e1;

    /* Tinta, de la más fuerte a la más tenue */
    --ink:   #101a2b;
    --ink-2: #475569;
    --ink-3: #64748b;
    --ink-4: #64748b;   /* D-01: era #94a3b8 (2,56:1 sobre blanco, bajo el mínimo AA 4,5:1) */
    --ink-5: #cbd5e1;

    /* Marca */
    --accent:    #003399;
    --accent-2:  #002266;
    --navy:      #1b2d42;
    --navy-2:    #0c141e;
    --violet:    #6c389d;
    --cta:       #f58220;
    --ring:      rgba(0,51,153,.16);
    --btn-a:     #003399;
    --btn-b:     #002266;
    --btn-glow:  rgba(0,51,153,.38);

    /* El panel navy: idéntico en identidad en ambos temas, distinto en calibración */
    --hero: linear-gradient(155deg, #0c141e 0%, #1b2d42 55%, #003399 100%);

    /* Semántica (badges, alertas, chips) */
    --ok-bg:      #d1fae5;  --ok-fg:      #059669;  --ok-ln:      #a7f3d0;
    --warn-bg:    #fef3c7;  --warn-fg:    #b45309;  --warn-ln:    #fde68a;
    --err-bg:     #fee2e2;  --err-fg:     #dc2626;  --err-ln:     #fecaca;
    --info-bg:    #eff6ff;  --info-fg:    #1d4ed8;  --info-ln:    #bfdbfe;
    --violet-bg:  #ede9fe;  --violet-fg:  #7c3aed;  --violet-ln:  #ddd6fe;
    --neutral-bg: #f1f5f9;  --neutral-fg: #64748b;

    /* Elevación */
    --shadow:    0 24px 48px -12px rgba(16,26,43,.18), 0 8px 16px -8px rgba(16,26,43,.10);
    --shadow-sm: 0 4px 12px -4px rgba(16,26,43,.12);
    --card-edge: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. TOKENS — Tema oscuro
   El acento sube de luminancia (#003399 → #4d8dff) porque un navy oscuro sobre
   superficie oscura pierde todo contraste. Mismo criterio que usa Delta Planner
   en su tokens.css al pasar --brand de #4F46E5 a #818CF8.
   ───────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
    --page:       #070b14;
    --page-glow:  rgba(45,105,220,.16);
    --surface:    #0e1626;
    --surface-2:  #131e33;
    --surface-3:  #18243c;
    --surface-4:  #1e2c48;

    --line:        rgba(125,155,205,.16);
    --line-soft:   rgba(125,155,205,.10);
    --line-strong: rgba(125,155,205,.26);

    --ink:   #e8edf7;
    --ink-2: #b6c2d8;
    --ink-3: #9aa9c2;
    --ink-4: #8496b2;   /* D-01: era #6c7c96 (4,28:1 sobre #0e1626, bajo el mínimo AA 4,5:1) */
    --ink-5: #5b6b88;   /* estados deshabilitados: tenue pero aún legible */

    --accent:    #4d8dff;
    --accent-2:  #2f6ce0;
    --ring:      rgba(77,141,255,.22);
    --btn-a:     #2f6ce0;
    --btn-b:     #1d4ed8;
    --btn-glow:  rgba(47,108,224,.45);

    --hero: linear-gradient(155deg, #060b14 0%, #12233d 55%, #1a4699 100%);

    --ok-bg:      rgba(16,185,129,.15);  --ok-fg:      #6ee7b7;  --ok-ln:      rgba(16,185,129,.32);
    --warn-bg:    rgba(245,158,11,.15);  --warn-fg:    #fcd34d;  --warn-ln:    rgba(245,158,11,.32);
    --err-bg:     rgba(244,63,94,.15);   --err-fg:     #fda4af;  --err-ln:     rgba(244,63,94,.32);
    --info-bg:    rgba(59,130,246,.15);  --info-fg:    #93c5fd;  --info-ln:    rgba(59,130,246,.32);
    --violet-bg:  rgba(168,85,247,.15);  --violet-fg:  #d8b4fe;  --violet-ln:  rgba(168,85,247,.32);
    --neutral-bg: rgba(125,155,205,.12); --neutral-fg: #9aa9c2;

    --shadow:    0 28px 60px -16px rgba(0,0,0,.65), 0 8px 20px -10px rgba(0,0,0,.5);
    --shadow-sm: 0 4px 12px -4px rgba(0,0,0,.5);
    --card-edge: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. CAPA DE COMPATIBILIDAD — solo activa en tema oscuro
   Redefine las utilidades de color ya escritas en las vistas. Ordenado por
   frecuencia de uso real en el código (medido con grep sobre public/).
   ───────────────────────────────────────────────────────────────────────────── */

/* --- Superficies neutras ------------------------------------------------- */
html[data-theme="dark"] .bg-white       { background-color:var(--surface); }
html[data-theme="dark"] .bg-slate-50    { background-color:var(--surface-2); }
html[data-theme="dark"] .bg-slate-100   { background-color:var(--surface-3); }
html[data-theme="dark"] .bg-slate-200   { background-color:var(--surface-4); }
html[data-theme="dark"] .bg-\[\#f6f6f6\]{ background-color:var(--page); }
html[data-theme="dark"] .bg-slate-300    { background-color:var(--surface-4); }
html[data-theme="dark"] .bg-slate-400    { background-color:var(--line-strong); }
html[data-theme="dark"] .hover\:bg-slate-50:hover  { background-color:var(--surface-2); }
html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color:var(--surface-3); }
html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color:var(--surface-4); }
/* Botón deshabilitado: en claro es slate-300 con texto blanco; sobre oscuro esa
   superficie clara desentona. Se usa una superficie hundida + tinta apagada. */
html[data-theme="dark"] .disabled\:bg-slate-300:disabled { background-color:var(--surface-3); color:var(--ink-4); }

/* --- Tinta neutra --------------------------------------------------------- */
html[data-theme="dark"] .text-slate-900 { color:var(--ink); }
html[data-theme="dark"] .text-slate-800 { color:var(--ink); }
html[data-theme="dark"] .text-slate-700 { color:var(--ink-2); }
html[data-theme="dark"] .text-slate-600 { color:var(--ink-2); }
html[data-theme="dark"] .text-slate-500 { color:var(--ink-3); }
html[data-theme="dark"] .text-slate-400 { color:var(--ink-4); }
/* OJO: text-slate-300/200 y text-{hue}-200/300 NO se remapean. Se usan sobre los
   paneles navy (cabeceras, tiras hero) donde ya son el tono claro correcto;
   oscurecerlos los volvía ilegibles. 78 usos de text-slate-300 dependen de esto. */
html[data-theme="dark"] .hover\:text-slate-600:hover { color:var(--ink-2); }
html[data-theme="dark"] .hover\:text-slate-700:hover { color:var(--ink-2); }
html[data-theme="dark"] .hover\:text-slate-800:hover { color:var(--ink); }

/* --- Bordes neutros ------------------------------------------------------- */
html[data-theme="dark"] .border-slate-100 { border-color:var(--line-soft); }
html[data-theme="dark"] .border-slate-200 { border-color:var(--line); }
html[data-theme="dark"] .border-slate-300 { border-color:var(--line-strong); }
html[data-theme="dark"] .divide-slate-100 > * + * { border-color:var(--line-soft); }
html[data-theme="dark"] .divide-slate-200 > * + * { border-color:var(--line); }

/* --- Azules de marca escritos a mano -------------------------------------- */
html[data-theme="dark"] .text-\[\#1b2d42\]   { color:var(--ink); }
html[data-theme="dark"] .border-\[\#1b2d42\] { border-color:var(--accent); }
/* bg-[#1b2d42] es a la vez superficie navy (paneles, cabeceras, avatares) y
   color de los botones de acción — el dueño lo eligió así: el botón es del
   mismo tono que el riel lateral, no del azul --accent. Por eso NO pasa a azul
   brillante en oscuro: se eleva apenas sobre --surface, lo justo para que los
   botones se despeguen sin romper los paneles. */
html[data-theme="dark"] .bg-\[\#1b2d42\]     { background-color:#22334d; }
html[data-theme="dark"] .bg-\[\#0c141e\]     { background-color:#101c2e; }
/* En oscuro el hover aclara (al revés que en claro, donde oscurece). */
html[data-theme="dark"] .hover\:bg-\[\#0c141e\]:hover { background-color:#2d4160; }
html[data-theme="dark"] .hover\:bg-\[\#1b2d42\]:hover { background-color:#2d4160; }
html[data-theme="dark"] .text-\[\#003399\]   { color:var(--accent); }
html[data-theme="dark"] .border-\[\#003399\] { border-color:var(--accent); }
html[data-theme="dark"] .bg-\[\#003399\]     { background-color:var(--btn-a); }
html[data-theme="dark"] .hover\:bg-\[\#002266\]:hover { background-color:var(--btn-b); }
html[data-theme="dark"] .text-\[\#6c389d\]   { color:var(--violet-fg); }
html[data-theme="dark"] .border-\[\#6c389d\] { border-color:var(--violet-fg); }

/* --- Controles de formulario ----------------------------------------------
   Los <input>/<select>/<textarea> de la app no llevan clase bg-*: su blanco lo
   pone la hoja de estilos del navegador, así que no hay utilidad que interceptar.
   Se atacan por elemento. `:not([class*="bg-"])` respeta los que sí definen fondo
   propio, para no pisar controles ya estilizados a mano. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="bg-"]),
html[data-theme="dark"] select:not([class*="bg-"]),
html[data-theme="dark"] textarea:not([class*="bg-"]){
    background-color: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: var(--ink-4); }
html[data-theme="dark"] select option{ background-color: var(--surface-2); color: var(--ink); }
/* El calendario/reloj nativo de los date/time inputs es negro sobre oscuro */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.65); }

/* --- Tintes pastel: fondos ------------------------------------------------ */
html[data-theme="dark"] .bg-emerald-200 { background-color:var(--ok-bg); }
html[data-theme="dark"] .bg-amber-200   { background-color:var(--warn-bg); }
html[data-theme="dark"] .bg-rose-200    { background-color:var(--err-bg); }
html[data-theme="dark"] .bg-blue-200    { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-purple-200  { background-color:var(--violet-bg); }
html[data-theme="dark"] .bg-emerald-50  { background-color:var(--ok-bg); }
html[data-theme="dark"] .bg-emerald-100 { background-color:var(--ok-bg); }
html[data-theme="dark"] .bg-amber-50    { background-color:var(--warn-bg); }
html[data-theme="dark"] .bg-amber-100   { background-color:var(--warn-bg); }
html[data-theme="dark"] .bg-rose-50     { background-color:var(--err-bg); }
html[data-theme="dark"] .bg-rose-100    { background-color:var(--err-bg); }
html[data-theme="dark"] .bg-red-50      { background-color:var(--err-bg); }
html[data-theme="dark"] .bg-blue-50     { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-blue-100    { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-purple-50   { background-color:var(--violet-bg); }
html[data-theme="dark"] .bg-purple-100  { background-color:var(--violet-bg); }
html[data-theme="dark"] .bg-violet-50,  html[data-theme="dark"] .bg-violet-100  { background-color:var(--violet-bg); }
html[data-theme="dark"] .bg-indigo-50,  html[data-theme="dark"] .bg-indigo-100  { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-sky-50,     html[data-theme="dark"] .bg-sky-100     { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-cyan-50,    html[data-theme="dark"] .bg-cyan-100    { background-color:var(--info-bg); }
html[data-theme="dark"] .bg-teal-50,    html[data-theme="dark"] .bg-teal-100    { background-color:var(--ok-bg); }
html[data-theme="dark"] .bg-green-50,   html[data-theme="dark"] .bg-green-100   { background-color:var(--ok-bg); }
html[data-theme="dark"] .bg-orange-50,  html[data-theme="dark"] .bg-orange-100  { background-color:var(--warn-bg); }
html[data-theme="dark"] .bg-yellow-50,  html[data-theme="dark"] .bg-yellow-100  { background-color:var(--warn-bg); }
html[data-theme="dark"] .bg-pink-50,    html[data-theme="dark"] .bg-pink-100    { background-color:var(--violet-bg); }
html[data-theme="dark"] .bg-red-100,    html[data-theme="dark"] .bg-fuchsia-50  { background-color:var(--err-bg); }

/* --- Tintes pastel: texto oscuro que debe aclararse ----------------------- */
html[data-theme="dark"] .text-emerald-900,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-600 { color:var(--ok-fg); }
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-teal-700    { color:var(--ok-fg); }
html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-600   { color:var(--warn-fg); }
html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-yellow-700  { color:var(--warn-fg); }
html[data-theme="dark"] .text-rose-900,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-600     { color:var(--err-fg); }
html[data-theme="dark"] .text-blue-900,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-sky-700,
html[data-theme="dark"] .text-cyan-700    { color:var(--info-fg); }
html[data-theme="dark"] .text-purple-900,
html[data-theme="dark"] .text-purple-800,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-violet-900,
html[data-theme="dark"] .text-violet-800,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-fuchsia-800,
html[data-theme="dark"] .text-fuchsia-700,
html[data-theme="dark"] .text-pink-900,
html[data-theme="dark"] .text-pink-800,
html[data-theme="dark"] .text-pink-700    { color:var(--violet-fg); }

/* Los tonos -800/-900 de los matices menos frecuentes (aparecen en el F22 y en
   tablas comparativas del SII); sin esto quedan texto oscuro sobre fondo oscuro. */
html[data-theme="dark"] .text-cyan-900,
html[data-theme="dark"] .text-cyan-800,
html[data-theme="dark"] .text-cyan-600,
html[data-theme="dark"] .text-sky-900,
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-indigo-900,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-600  { color:var(--info-fg); }
html[data-theme="dark"] .text-teal-900,
html[data-theme="dark"] .text-teal-800,
html[data-theme="dark"] .text-teal-600,
html[data-theme="dark"] .text-green-900,
html[data-theme="dark"] .text-green-800   { color:var(--ok-fg); }
html[data-theme="dark"] .text-orange-900,
html[data-theme="dark"] .text-orange-800,
html[data-theme="dark"] .text-yellow-800  { color:var(--warn-fg); }
html[data-theme="dark"] .text-red-900,
html[data-theme="dark"] .text-red-800     { color:var(--err-fg); }

/* Los tonos 400/500 ya son medios: solo se suben un escalón para leer sobre oscuro */
html[data-theme="dark"] .text-emerald-500, html[data-theme="dark"] .text-emerald-400 { color:var(--ok-fg); }
html[data-theme="dark"] .text-amber-500,   html[data-theme="dark"] .text-amber-400   { color:var(--warn-fg); }
html[data-theme="dark"] .text-rose-500,    html[data-theme="dark"] .text-rose-400    { color:var(--err-fg); }
html[data-theme="dark"] .text-blue-500,    html[data-theme="dark"] .text-blue-400    { color:var(--info-fg); }
html[data-theme="dark"] .text-purple-500,  html[data-theme="dark"] .text-purple-400  { color:var(--violet-fg); }

/* --- Tintes pastel: bordes ------------------------------------------------ */
html[data-theme="dark"] .border-emerald-200, html[data-theme="dark"] .border-emerald-300 { border-color:var(--ok-ln); }
html[data-theme="dark"] .border-amber-200,   html[data-theme="dark"] .border-amber-300   { border-color:var(--warn-ln); }
html[data-theme="dark"] .border-rose-200,    html[data-theme="dark"] .border-rose-300    { border-color:var(--err-ln); }
html[data-theme="dark"] .border-red-200                                                  { border-color:var(--err-ln); }
html[data-theme="dark"] .border-blue-200,    html[data-theme="dark"] .border-blue-300    { border-color:var(--info-ln); }
html[data-theme="dark"] .border-purple-200,  html[data-theme="dark"] .border-purple-300  { border-color:var(--violet-ln); }

/* NOTA: los rellenos saturados (bg-emerald-600, bg-rose-500, bg-amber-500,
   bg-purple-600…) se dejan sin tocar a propósito — llevan texto blanco encima y
   ya contrastan bien sobre superficies oscuras. Igual .text-white. */

/* --- Paradas de gradiente claras ------------------------------------------
   Tailwind compila `via-white` a --tw-gradient-stops con #fff literal, así que
   no basta con redefinir background-color: hay que reemplazar la parada. */
html[data-theme="dark"] .via-white{
    --tw-gradient-stops: var(--tw-gradient-from), var(--surface), var(--tw-gradient-to);
}
html[data-theme="dark"] .from-white     { --tw-gradient-from:var(--surface); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-white       { --tw-gradient-to:var(--surface); }
html[data-theme="dark"] .from-slate-50,
html[data-theme="dark"] .from-slate-100 { --tw-gradient-from:var(--surface-2); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-slate-50,
html[data-theme="dark"] .to-slate-100   { --tw-gradient-to:var(--surface-2); }
html[data-theme="dark"] .from-blue-50    { --tw-gradient-from:var(--info-bg); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-blue-50      { --tw-gradient-to:var(--info-bg); }
html[data-theme="dark"] .from-emerald-50 { --tw-gradient-from:var(--ok-bg); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-emerald-50   { --tw-gradient-to:var(--ok-bg); }
html[data-theme="dark"] .from-amber-50   { --tw-gradient-from:var(--warn-bg); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-amber-50     { --tw-gradient-to:var(--warn-bg); }
html[data-theme="dark"] .from-purple-50  { --tw-gradient-from:var(--violet-bg); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-purple-50    { --tw-gradient-to:var(--violet-bg); }
html[data-theme="dark"] .from-rose-50    { --tw-gradient-from:var(--err-bg); --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="dark"] .to-rose-50      { --tw-gradient-to:var(--err-bg); }

/* ─────────────────────────────────────────────────────────────────────────────
   4. Transición de tema + accesibilidad
   ───────────────────────────────────────────────────────────────────────────── */
body, .glass-card, aside, header,
input, select, textarea, table.dataTable tbody tr{
    transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition:none !important; animation:none !important; }
}

/* La salida impresa siempre va en claro, sin importar el tema de pantalla. */
@media print{
    html[data-theme="dark"]{
        --page:#fff; --surface:#fff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
        --line:#e2e8f0; --line-soft:#f1f5f9;
        --ink:#0f172a; --ink-2:#334155; --ink-3:#475569; --ink-4:#64748b;
    }
    html[data-theme="dark"] body{ background:#fff !important; }
}