/* ==========================================================================
   SAFCO Ltda. — Sistema de tema
   --------------------------------------------------------------------------
   El aspecto se alinea con el de Mantener: fondo grafito, acento verde SAFCO,
   Inter, y controles con relieve suficiente para distinguirse de la tarjeta
   que los contiene.

   Este archivo hace tres cosas, en este orden:

     1. Define la tipografia y los tokens de color de los dos temas.
     2. Da un piso decente a los controles nativos (input, select, textarea)
        SIN pisar las utilidades que cada vista ya escribio: los selectores de
        elemento tienen menos especificidad que una clase, asi que aportan
        color y relieve pero no tocan el layout existente.
     3. Traduce al tema oscuro el vocabulario Tailwind que ya usan las 77
        vistas de modulo. Esa parte necesita explicacion, y esta en su
        seccion (paragrafo 5).

   Se carga DESPUES del CDN de Tailwind. El shell nuevo (header/footer) usa
   variantes dark: normales; lo de aqui es para el codigo heredado.
   ========================================================================== */


/* -- 1. Tipografia --------------------------------------------------------
   Inter local, no CDN: la app se sirve tras una CSP que no permite origenes
   externos, y la fuente tiene que estar disponible sin red. Son los dos
   archivos variables (100-900), asi que un solo @font-face cubre todos los
   pesos que use la interfaz. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* -- 2. Tokens ------------------------------------------------------------
   El neutro no es gris puro: lleva una leve desviacion hacia el verde del logo, que
   es lo que hace que el acento se lea como parte del conjunto y no como un
   color pegado encima de una plantilla gris. */

/* Paletas elegibles por usuario (lib/Apariencia.php). Cada escala va en
   canales RGB sueltos para que Tailwind pueda aplicarles opacidad
   (bg-green-600/50 -> rgb(var(--a-600) / .5)). En todas, el 600 da al menos
   4,5:1 con texto blanco. :root sin atributo = Verde SAFCO (predeterminada). */
:root,
:root[data-paleta="safco"] {   /* verde oscuro del logo SAFCO */
    --a-50: 242 248 239;  --a-100: 225 240 218; --a-200: 195 226 182;
    --a-300: 155 207 134; --a-400: 111 184 92;  --a-500: 70 160 63;
    --a-600: 43 125 49;   --a-700: 35 102 41;   --a-800: 31 81 36;
    --a-900: 27 67 31;    --a-950: 12 37 16;
}
:root[data-paleta="azul"] {
    --a-50: 239 246 255;  --a-100: 219 234 254; --a-200: 191 219 254;
    --a-300: 147 197 253; --a-400: 96 165 250;  --a-500: 59 130 246;
    --a-600: 37 99 235;   --a-700: 29 78 216;   --a-800: 30 64 175;
    --a-900: 30 58 138;   --a-950: 23 37 84;
}
:root[data-paleta="indigo"] {
    --a-50: 240 241 253;  --a-100: 227 229 251; --a-200: 203 207 247;
    --a-300: 169 176 250; --a-400: 139 147 248; --a-500: 110 121 232;
    --a-600: 94 106 210;  --a-700: 79 90 192;   --a-800: 63 72 153;
    --a-900: 52 60 128;   --a-950: 34 38 90;
}
:root[data-paleta="grafito"] {
    --a-50: 248 250 252;  --a-100: 241 245 249; --a-200: 226 232 240;
    --a-300: 203 213 225; --a-400: 148 163 184; --a-500: 100 116 139;
    --a-600: 71 85 105;   --a-700: 51 65 85;    --a-800: 30 41 59;
    --a-900: 15 23 42;    --a-950: 2 6 23;
}

/* Tamaño de letra elegido por el usuario: multiplica toda la escala
   tipografica (tema_head.php). Normal = 15px de base. */
:root                         { --fs: 1; }
:root[data-fuente="pequena"]    { --fs: 0.933333; }   /* 14px */
:root[data-fuente="grande"]     { --fs: 1.066667; }   /* 16px */
:root[data-fuente="muy_grande"] { --fs: 1.133333; }   /* 17px */

:root {
    /* Acento: alias legibles de la paleta activa */
    --acento-50:  rgb(var(--a-50));
    --acento-100: rgb(var(--a-100));
    --acento-200: rgb(var(--a-200));
    --acento-300: rgb(var(--a-300));
    --acento-400: rgb(var(--a-400));
    --acento-500: rgb(var(--a-500));
    --acento-600: rgb(var(--a-600));   /* color de marca: boton primario, enlaces */
    --acento-700: rgb(var(--a-700));
    --acento-800: rgb(var(--a-800));

    /* Superficies y texto — tema claro */
    --fondo-app:     #f5f7f4;
    --superficie:    #ffffff;
    --superficie-2:  #f0f3ef;   /* cabeceras de tabla, filas alternas */
    --borde:         #e2e7e0;
    --borde-fuerte:  #8c8c8c;   /* 3,1:1 sobre blanco: minimo WCAG para un control */
    --texto:         #171717;
    --texto-suave:   #525252;
    --texto-sutil:   #737373;
    --placeholder:   #a3a3a3;
    --hundido:       0 1px 2px rgb(0 0 0 / 0.04) inset;

    color-scheme: light;
}

/* Neutros del tema claro con el matiz de cada paleta (el de :root es el de
   Verde SAFCO). En oscuro todas comparten el grafito. */
:root:not(.dark)[data-paleta="azul"],
:root:not(.dark)[data-paleta="indigo"] {
    --fondo-app:    #f6f6f9;
    --superficie-2: #f2f2f6;
    --borde:        #e5e5ea;
}
:root:not(.dark)[data-paleta="grafito"] {
    --fondo-app:    #f5f6f8;
    --superficie-2: #f1f3f5;
    --borde:        #e3e6ea;
}

:root.dark {
    --fondo-app:     #0a0a0a;
    --superficie:    #0f0f0f;
    --superficie-2:  #161616;
    --borde:         rgb(255 255 255 / 0.10);
    --borde-fuerte:  rgb(255 255 255 / 0.35);   /* 3,05:1 sobre #0f0f0f */
    --texto:         #ffffff;
    --texto-suave:   #d4d4d4;
    --texto-sutil:   #a3a3a3;
    /* Un marcador de posicion es texto a efectos de WCAG 1.4.3: con el #737373
       de la escala se quedaba en 4,04:1. Sube lo justo para pasar el 4,5:1 sin
       alcanzar al texto sutil, que es lo que mantiene la jerarquia. */
    --placeholder:   #8a8a8a;
    --hundido:       0 1px 2px rgb(0 0 0 / 0.35) inset;

    /* Los controles nativos los pinta el navegador, y sin saber en que tema
       estamos los pinta claros: la lista desplegada de un select saldria con
       fondo blanco y el texto heredando el blanco del control. Con
       color-scheme se entera, y de paso arregla el calendario de los campos
       de fecha, las flechas de los numericos y las barras de desplazamiento. */
    color-scheme: dark;
}


/* -- 3. Base ------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
                 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: calc(0.9375rem * var(--fs, 1));   /* 15px x tamaño elegido (tema_head.php) */
}

/* Cifras del mismo ancho en tablas e importes: una columna de numeros se lee
   como columna y no baila al ordenar o al teclear. */
td, th, .tabular {
    font-variant-numeric: tabular-nums;
}

/* Indicador de foco visible en ambos temas. El anillo por defecto de varias
   vistas va con alfa bajo y se queda por debajo del 3:1 que pide WCAG 2.2. */
:where(a, button, [role="button"], summary):focus-visible {
    outline: 2px solid var(--acento-500);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

::selection {
    background-color: color-mix(in srgb, var(--acento-500) 35%, transparent);
}

/* Barras de desplazamiento discretas y del color del tema. */
.custom-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.custom-scroll:hover { scrollbar-color: var(--borde-fuerte) transparent; }
.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 4px; }
.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: var(--borde-fuerte); }

:root.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
:root.dark ::-webkit-scrollbar-track { background: var(--fondo-app); }
:root.dark ::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / 0.14);
    border-radius: 6px;
    border: 2px solid var(--fondo-app);
}
:root.dark ::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 0.22); }


/* -- 4. Controles nativos -------------------------------------------------
   Selectores de ELEMENTO a proposito: especificidad 0,0,1. Aportan fuente,
   color y relieve a los 750 campos que ya existen, y cualquier utilidad que
   la vista haya escrito (padding, ancho, borde) sigue mandando sobre esto.
   Es un piso, no un reemplazo. */

input, select, textarea, button {
    font-family: inherit;
    font-size: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    background-color: var(--superficie);
    color: var(--texto);
    border-color: var(--borde-fuerte);
    box-shadow: var(--hundido);
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

input::placeholder, textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Casillas y radios: los pinta el navegador, y con accent-color siguen la
   marca en vez del azul del sistema. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--acento-600);
}

/* El indicador de foco de los campos va con outline solido y separacion: se
   ve en los dos temas y no desplaza el contenido. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--acento-500);
    outline-offset: 1px;
}


/* -- 5. Puente al tema oscuro ---------------------------------------------
   Las 77 vistas de modulo se escribieron para un unico tema claro: usan
   bg-white, text-gray-500 y border-gray-300 directamente, sin variante dark:.
   Son unas 5.400 apariciones. Reescribirlas una por una es un cambio de miles
   de lineas donde cada linea puede equivocarse, y ademas dejaria el problema
   abierto para la proxima vista que alguien escriba copiando a la anterior.

   En vez de eso, el tema oscuro REASIGNA lo que pintan esas utilidades. Cada
   regla lleva html.dark delante (especificidad 0,2,0 frente al 0,1,0 de la
   utilidad), asi que gana siempre y no depende del orden en que el CDN de
   Tailwind inyecte su hoja.

   La correspondencia no es un oscurecimiento mecanico: text-gray-500 es el
   texto secundario de la app —1.194 usos— y en oscuro tiene que seguir
   leyendose como secundario, no desaparecer. Los valores mantienen la
   jerarquia de los seis grises sin bajar de 4,5:1 sobre la tarjeta (#0f0f0f)
   en los que llevan texto de lectura.

   AVISO para quien escriba vistas nuevas: usa las variantes dark: de Tailwind
   —es lo correcto— pero NO sobre una clase que aparezca en esta seccion. Un
   `bg-white dark:bg-neutral-900` no hace lo que dice: la regla de aqui es
   `html.dark .bg-white` (0,2,1) y la del CDN es `.dark .bg-neutral-900`
   (0,2,0), asi que gana esta y el dark: se ignora en silencio. Para un color
   propio, elige una escala que el puente no toque (`neutral`, `stone`) o
   escribe el valor entre corchetes: `bg-[#ffffff]`. Es lo que hace el shell.

   Esta seccion es para lo que ya estaba. */

/* 5.1 Superficies */
html.dark .bg-white          { background-color: var(--superficie); }
html.dark .bg-gray-50        { background-color: var(--superficie-2); }
html.dark .bg-gray-100       { background-color: rgb(255 255 255 / 0.06); }
html.dark .bg-gray-200       { background-color: rgb(255 255 255 / 0.10); }
html.dark .bg-gray-300       { background-color: rgb(255 255 255 / 0.14); }
html.dark .bg-slate-50       { background-color: var(--superficie-2); }
html.dark .bg-white\/60      { background-color: rgb(15 15 15 / 0.6); }
html.dark .bg-gray-50\/50    { background-color: rgb(255 255 255 / 0.03); }
html.dark .bg-gray-50\/60    { background-color: rgb(255 255 255 / 0.04); }

/* Un campo deshabilitado se marca con disabled:bg-gray-100, que sin traducir
   deja el gris de papel: en oscuro el campo apagado acababa siendo el elemento
   MAS claro del formulario, justo al reves de lo que tiene que comunicar. Va
   mas oscuro que la tarjeta, que es como se lee «aqui no se puede escribir». */
html.dark .disabled\:bg-gray-100:disabled { background-color: rgb(255 255 255 / 0.04); }
html.dark .disabled\:bg-gray-50:disabled  { background-color: rgb(255 255 255 / 0.03); }
html.dark .disabled\:text-gray-600:disabled { color: #8f8f8f; }

html.dark .hover\:bg-white:hover       { background-color: rgb(255 255 255 / 0.05); }
html.dark .hover\:bg-gray-50:hover     { background-color: rgb(255 255 255 / 0.04); }
html.dark .hover\:bg-gray-50\/60:hover { background-color: rgb(255 255 255 / 0.04); }
html.dark .hover\:bg-gray-100:hover    { background-color: rgb(255 255 255 / 0.07); }
html.dark .hover\:bg-gray-200:hover    { background-color: rgb(255 255 255 / 0.10); }
html.dark .hover\:bg-gray-300:hover    { background-color: rgb(255 255 255 / 0.14); }

/* 5.2 Texto. La escala se mantiene monotona: cuanto mas alto el numero, mas
   contraste con el fondo — igual que en claro, pero al reves en luminancia. */
html.dark .text-gray-900   { color: #ffffff; }
html.dark .text-gray-800   { color: #f5f5f5; }
html.dark .text-gray-700   { color: #e5e5e5; }
html.dark .text-gray-600   { color: #d4d4d4; }
html.dark .text-gray-500   { color: #a3a3a3; }
html.dark .text-gray-400   { color: #8f8f8f; }
html.dark .text-gray-300   { color: #7d7d7d; }   /* 4,53:1 — cruza el minimo */
html.dark .text-gray-200   { color: #6b6b6b; }
html.dark .text-slate-800  { color: #f5f5f5; }
html.dark .text-slate-600  { color: #d4d4d4; }

html.dark .hover\:text-gray-800:hover { color: #ffffff; }
html.dark .hover\:text-gray-700:hover { color: #f5f5f5; }
html.dark .hover\:text-gray-600:hover { color: #e5e5e5; }

/* 5.3 Bordes y separadores */
html.dark .border-gray-50   { border-color: rgb(255 255 255 / 0.05); }
html.dark .border-gray-100  { border-color: rgb(255 255 255 / 0.07); }
html.dark .border-gray-200  { border-color: rgb(255 255 255 / 0.10); }
html.dark .border-gray-300  { border-color: rgb(255 255 255 / 0.16); }
html.dark .border-gray-400  { border-color: rgb(255 255 255 / 0.24); }
html.dark .hover\:border-gray-300:hover { border-color: rgb(255 255 255 / 0.22); }
html.dark .hover\:border-gray-400:hover { border-color: rgb(255 255 255 / 0.30); }

html.dark .divide-gray-50  > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / 0.05); }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / 0.07); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(255 255 255 / 0.10); }

/* Un control necesita 3:1 contra la tarjeta (WCAG 1.4.11), mas que un
   separador. Por eso los campos suben el borde por encima del 0,16 general.
   La lista incluye botones y enlaces con aspecto de boton —los «Exportar»,
   «Imprimir», «Cancelar» de las barras de herramientas— porque el 3:1 lo pide
   cualquier borde que delimite un control, no solo el de un campo: con el
   0,16 general se quedaban en 1,56:1 y el boton parecia flotar sin contorno. */
html.dark input.border-gray-300,
html.dark select.border-gray-300,
html.dark textarea.border-gray-300,
html.dark button.border-gray-300,
html.dark a.border-gray-300,
html.dark [role="button"].border-gray-300,
html.dark input.border-gray-200,
html.dark select.border-gray-200,
html.dark textarea.border-gray-200,
html.dark button.border-gray-200,
html.dark a.border-gray-200,
html.dark [role="button"].border-gray-200 { border-color: var(--borde-fuerte); }

/* 5.4 Colores con significado.
   Los tonos 50 y 100 son fondos casi blancos —un aviso, un badge de estado— y
   en oscuro hay que volverlos veladuras del mismo color sobre la tarjeta; los
   700/800 son texto sobre ese fondo y suben a un tono claro del mismo matiz,
   que es lo que mantiene legible la pareja. */

/* Acento (la escala green = verde SAFCO en tailwind.config) */
html.dark .bg-green-50           { background-color: rgb(var(--a-600) / 0.10); }
html.dark .bg-green-100          { background-color: rgb(var(--a-600) / 0.18); }
html.dark .hover\:bg-green-50:hover  { background-color: rgb(var(--a-600) / 0.12); }
html.dark .hover\:bg-green-100:hover { background-color: rgb(var(--a-600) / 0.22); }
html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800,
html.dark .text-green-900        { color: var(--acento-300); }
html.dark .group:hover .group-hover\:text-green-600,
html.dark .hover\:text-green-700:hover,
html.dark .hover\:text-green-800:hover,
html.dark .hover\:text-green-900:hover { color: var(--acento-200); }
html.dark .border-green-200      { border-color: rgb(var(--a-600) / 0.35); }
html.dark .border-green-100      { border-color: rgb(var(--a-600) / 0.25); }

/* Rojo — errores, eliminar */
html.dark .bg-red-50             { background-color: rgb(239 68 68 / 0.10); }
html.dark .bg-red-100            { background-color: rgb(239 68 68 / 0.18); }
html.dark .hover\:bg-red-50:hover  { background-color: rgb(239 68 68 / 0.14); }
html.dark .hover\:bg-red-100:hover { background-color: rgb(239 68 68 / 0.22); }
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900          { color: #fca5a5; }
html.dark .text-red-500          { color: #f87171; }
html.dark .hover\:text-red-600:hover,
html.dark .hover\:text-red-700:hover { color: #fecaca; }
html.dark .border-red-200        { border-color: rgb(239 68 68 / 0.35); }
html.dark .border-red-100        { border-color: rgb(239 68 68 / 0.25); }

/* Ambar / amarillo — advertencias, pendientes */
html.dark .bg-amber-50           { background-color: rgb(245 158 11 / 0.10); }
html.dark .bg-amber-100          { background-color: rgb(245 158 11 / 0.18); }
html.dark .bg-yellow-50          { background-color: rgb(245 158 11 / 0.10); }
html.dark .bg-yellow-100         { background-color: rgb(245 158 11 / 0.18); }
html.dark .hover\:bg-amber-50:hover  { background-color: rgb(245 158 11 / 0.14); }
html.dark .hover\:bg-yellow-50:hover { background-color: rgb(245 158 11 / 0.14); }
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-yellow-600,
html.dark .text-yellow-700,
html.dark .text-yellow-800       { color: #fcd34d; }
html.dark .text-amber-500        { color: #fbbf24; }
html.dark .border-amber-200      { border-color: rgb(245 158 11 / 0.35); }
html.dark .border-yellow-200     { border-color: rgb(245 158 11 / 0.35); }
html.dark .border-yellow-400     { border-color: rgb(245 158 11 / 0.50); }

/* Azul — informacion, enlaces secundarios */
html.dark .bg-blue-50            { background-color: rgb(59 130 246 / 0.10); }
html.dark .bg-blue-100           { background-color: rgb(59 130 246 / 0.18); }
html.dark .hover\:bg-blue-50:hover  { background-color: rgb(59 130 246 / 0.14); }
html.dark .hover\:bg-blue-100:hover { background-color: rgb(59 130 246 / 0.22); }
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900         { color: #93c5fd; }
html.dark .border-blue-200       { border-color: rgb(59 130 246 / 0.35); }

/* Esmeralda — confirmaciones. Se mantiene verde a proposito: aqui el verde NO
   es la marca, es «correcto», y perderlo dejaria la app sin ese signo. */
html.dark .bg-emerald-50         { background-color: rgb(16 185 129 / 0.10); }
html.dark .bg-emerald-100        { background-color: rgb(16 185 129 / 0.18); }
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800      { color: #6ee7b7; }
html.dark .text-emerald-500      { color: #34d399; }
html.dark .border-emerald-200    { border-color: rgb(16 185 129 / 0.35); }

/* Purpura, naranja e indigo — usos puntuales en badges de estado */
html.dark .bg-purple-50          { background-color: rgb(168 85 247 / 0.10); }
html.dark .bg-purple-100         { background-color: rgb(168 85 247 / 0.18); }
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800       { color: #d8b4fe; }
html.dark .bg-orange-50          { background-color: rgb(249 115 22 / 0.10); }
html.dark .bg-orange-100         { background-color: rgb(249 115 22 / 0.18); }
html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-orange-800       { color: #fdba74; }
html.dark .bg-indigo-50          { background-color: rgb(99 102 241 / 0.10); }
html.dark .bg-indigo-100         { background-color: rgb(99 102 241 / 0.18); }
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-indigo-800       { color: #a5b4fc; }

/* 5.4.b Las hermanas de las anteriores.
   Las reglas de arriba cubren la clase base —bg-emerald-50, hover:bg-green-50,
   bg-blue-100— pero las vistas usan ademas tres variaciones que son clases
   DISTINTAS para Tailwind y por tanto se quedaban sin traducir:

     · con alfa:   bg-emerald-50/50, bg-green-50/60, hover:bg-green-50/40
     · con foco:   focus:bg-green-50
     · un tono mas: hover:bg-green-200, hover:bg-yellow-100

   Sin traducir componen un velo casi blanco sobre la tarjeta oscura, y el
   texto que llevan encima —ya puenteado a un tono claro— desaparecia: las
   cabeceras «Cliente pago» / «Hicimos» de Conciliacion quedaban a 1,4:1, la
   fila de subtotal por cliente de la Proforma a 1,43:1, y el icono de activar
   de los mantenedores se borraba justo al apuntarlo, porque la mitad roja del
   ternario tenia puente y la esmeralda no.

   Los valores siguen el mismo criterio que la seccion anterior: veladura del
   color base sobre la tarjeta, mas tenue cuanto menor era el alfa original. */

/* Acento con alfa */
html.dark .bg-green-50\/60          { background-color: rgb(var(--a-600) / 0.12); }
html.dark .bg-green-50\/50          { background-color: rgb(var(--a-600) / 0.10); }
html.dark .bg-green-50\/40          { background-color: rgb(var(--a-600) / 0.09); }
html.dark .bg-green-50\/30          { background-color: rgb(var(--a-600) / 0.07); }
html.dark .hover\:bg-green-50\/60:hover { background-color: rgb(var(--a-600) / 0.14); }
html.dark .hover\:bg-green-50\/50:hover { background-color: rgb(var(--a-600) / 0.12); }
html.dark .hover\:bg-green-50\/40:hover { background-color: rgb(var(--a-600) / 0.11); }
html.dark .focus\:bg-green-50:focus     { background-color: rgb(var(--a-600) / 0.16); }
html.dark .hover\:bg-green-200:hover    { background-color: rgb(var(--a-600) / 0.26); }

/* Esmeralda: es la pareja del rojo en los botones de activar/desactivar, asi
   que necesita exactamente las mismas variantes que aquel. */
html.dark .bg-emerald-50\/50        { background-color: rgb(16 185 129 / 0.10); }
html.dark .bg-emerald-50\/30        { background-color: rgb(16 185 129 / 0.07); }
html.dark .bg-emerald-50\/20        { background-color: rgb(16 185 129 / 0.05); }
html.dark .hover\:bg-emerald-50:hover   { background-color: rgb(16 185 129 / 0.14); }
html.dark .hover\:bg-emerald-100:hover  { background-color: rgb(16 185 129 / 0.22); }
html.dark .hover\:bg-emerald-200:hover  { background-color: rgb(16 185 129 / 0.26); }
html.dark .hover\:text-emerald-700:hover { color: #a7f3d0; }
html.dark .hover\:border-emerald-300:hover { border-color: rgb(16 185 129 / 0.45); }

/* Resto de colores con alfa y tonos de hover que faltaban */
html.dark .bg-blue-50\/50           { background-color: rgb(59 130 246 / 0.10); }
html.dark .bg-blue-50\/30           { background-color: rgb(59 130 246 / 0.07); }
html.dark .hover\:bg-blue-200:hover { background-color: rgb(59 130 246 / 0.26); }
html.dark .bg-amber-50\/40          { background-color: rgb(245 158 11 / 0.08); }
html.dark .hover\:bg-amber-100\/60:hover { background-color: rgb(245 158 11 / 0.14); }
html.dark .hover\:bg-amber-200:hover     { background-color: rgb(245 158 11 / 0.26); }
html.dark .hover\:bg-yellow-100:hover    { background-color: rgb(245 158 11 / 0.18); }
html.dark .hover\:bg-yellow-200:hover    { background-color: rgb(245 158 11 / 0.26); }
html.dark .bg-red-50\/40            { background-color: rgb(239 68 68 / 0.08); }
html.dark .hover\:bg-red-200:hover  { background-color: rgb(239 68 68 / 0.26); }

/* Teal, violeta y cian: aparecen como estados en la MISMA linea que un azul o
   un ambar que si estaban puenteados, asi que sin esto un grupo de badges
   hermanos salia mitad velado y mitad pastilla blanca. */
html.dark .bg-teal-100     { background-color: rgb(20 184 166 / 0.18); }
html.dark .bg-teal-50      { background-color: rgb(20 184 166 / 0.10); }
html.dark .text-teal-700,
html.dark .text-teal-800   { color: #5eead4; }
html.dark .bg-violet-100   { background-color: rgb(139 92 246 / 0.18); }
html.dark .bg-violet-50    { background-color: rgb(139 92 246 / 0.10); }
html.dark .text-violet-700,
html.dark .text-violet-800 { color: #c4b5fd; }
html.dark .bg-cyan-100     { background-color: rgb(6 182 212 / 0.18); }
html.dark .bg-cyan-50      { background-color: rgb(6 182 212 / 0.10); }
html.dark .text-cyan-700,
html.dark .text-cyan-800   { color: #67e8f9; }

/* 5.5 Superposiciones. Sobre un fondo ya oscuro, un velo al 40 % no separa el
   dialogo de la pagina: se sube y se le anade desenfoque. */
html.dark .bg-black\/40 { background-color: rgb(0 0 0 / 0.72); backdrop-filter: blur(3px); }
html.dark .bg-black\/50 { background-color: rgb(0 0 0 / 0.76); backdrop-filter: blur(3px); }
html.dark .bg-gray-900\/50 { background-color: rgb(0 0 0 / 0.72); }

/* 5.6 Sombras. Una sombra negra sobre fondo negro no existe: en el tema claro
   es la sombra la que despega la tarjeta del fondo, y al pasar a oscuro las
   tarjetas se quedaban flotando sin nada, indistinguibles del lienzo (#0f0f0f
   sobre #0a0a0a son cinco puntos de diferencia).

   Lo que separa una tarjeta del fondo en oscuro es el BORDE, asi que cada
   nivel de sombra estrena un anillo de 1 px como primera capa. Va como
   box-shadow y no como border a proposito: un borde de verdad sumaria 2 px a
   la caja y desplazaria el contenido de las 600 tarjetas que ya existen. */
html.dark .shadow,
html.dark .shadow-sm  { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 1px 2px rgb(0 0 0 / 0.5); }
html.dark .shadow-md  { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 4px 10px rgb(0 0 0 / 0.55); }
html.dark .shadow-lg  { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 10px 24px rgb(0 0 0 / 0.6); }
html.dark .shadow-xl,
html.dark .shadow-2xl { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 20px 45px rgb(0 0 0 / 0.7); }

/* Tarjetas sin clase de sombra: mismo anillo, para que la reja de la pagina
   sea una sola y no dos segun quien escribiera la vista. Se excluyen las que
   ya llevan borde propio, que ahi manda el borde. */
html.dark .bg-white.rounded-xl:not([class*="border"]),
html.dark .bg-white.rounded-2xl:not([class*="border"]),
html.dark .bg-white.rounded-lg:not([class*="border"]) {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07);
}


/* -- 6. Componentes del shell ---------------------------------------------
   Clases propias del encabezado, el menu y las paginas de acceso. No compiten
   con ninguna utilidad de Tailwind. */

[x-cloak] { display: none !important; }

/* Logo SAFCO: no se filtra en tema oscuro (perderia los verdes). El markup
   alterna logo.png (tinta gris) y logo-oscuro.png (tinta clara) con
   dark:hidden / hidden dark:block; el isotipo verde sirve en ambos temas. */

/* Item del menu lateral */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: calc(0.8125rem * var(--fs, 1));
    font-weight: 500;
    color: var(--texto-suave);
    transition: background-color 120ms ease, color 120ms ease;
}
.nav-item:hover { background-color: rgb(0 0 0 / 0.05); color: var(--texto); }
:root.dark .nav-item { color: #a3a3a3; }
:root.dark .nav-item:hover { background-color: rgb(255 255 255 / 0.05); color: #ffffff; }

.nav-item.is-active {
    background-color: color-mix(in srgb, var(--acento-600) 15%, transparent);
    color: var(--acento-700);
}
:root.dark .nav-item.is-active {
    background-color: color-mix(in srgb, var(--acento-500) 15%, transparent);
    color: var(--acento-300);
}

/* Rampa del mapa de calor (analitica de uso).
   Iba escrita como bg-green-100 … bg-green-800, y eso en tema oscuro deja de
   ser una rampa: el 100 es casi blanco y el 800 casi negro, asi que la celda
   con MENOS actividad brillaba mas que la de mas. Aqui la intensidad es una
   sola cosa —cuanto acento hay sobre la tarjeta— y por eso crece igual en los
   dos temas, del apenas visible al color pleno. */
.mapa-calor-0 { background-color: rgb(0 0 0 / 0.05); }
.mapa-calor-1 { background-color: rgb(var(--a-600) / 0.20); }
.mapa-calor-2 { background-color: rgb(var(--a-600) / 0.38); }
.mapa-calor-3 { background-color: rgb(var(--a-600) / 0.58); }
.mapa-calor-4 { background-color: rgb(var(--a-600) / 0.80); }
.mapa-calor-5 { background-color: var(--acento-600); }
:root.dark .mapa-calor-0 { background-color: rgb(255 255 255 / 0.05); }

/* Resplandor radial de fondo para las pantallas de acceso. */
.glow-radial {
    background-image: radial-gradient(
        60% 60% at 50% 0%,
        color-mix(in srgb, var(--acento-600) 22%, transparent) 0%,
        transparent 70%
    );
}


/* -- 7. Impresion ---------------------------------------------------------
   Los informes se imprimen desde la propia pagina, asi que el papel siempre
   va en claro: tinta oscura sobre fondo oscuro no se ve, y un fondo negro a
   pagina completa vacia el cartucho. */
@media print {
    :root, :root.dark {
        --fondo-app: #ffffff;
        --superficie: #ffffff;
        --superficie-2: #f3f4f6;
        --borde: #e5e7eb;
        --texto: #111827;
        --texto-suave: #374151;
        --texto-sutil: #6b7280;
        color-scheme: light;
    }
    html.dark body { background: #fff !important; color: #111827 !important; }
    html.dark .bg-white, html.dark .bg-gray-50 { background-color: #fff !important; }
    html.dark [class*="text-gray-"], html.dark [class*="text-slate-"] { color: #111827 !important; }
    html.dark [class*="border-gray-"] { border-color: #e5e7eb !important; }
    html.dark [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; }
    aside, body > header, .no-print { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    [class*="shadow"] { box-shadow: none !important; }
    .rounded-xl, .rounded-lg { border-radius: 0 !important; }
    table { font-size: 10pt; }
    thead { background: #f3f4f6 !important; }
    @page { margin: 1.5cm; }
}