/*
 * spec-20260902-002-lucayuvdev (AC1/AC3/AC4) — LA CAPA DE COLOR DEL SHELL, PORTADA DEL CANVAS.
 *
 * ============================================================================================
 * QUÉ CONTIENE ESTE ARCHIVO, Y QUÉ NO — LA SEPARACIÓN ES DELIBERADA
 *
 *   CONTIENE: los 20 custom properties de color del tema claro y sus 20 equivalentes del tema
 *   oscuro, con los mismos nombres y los mismos valores que el artboard archivado
 *   `.claude/sdd/refinements/done/refinement-20260902-002-lucayuvdev.assets/Main.dc.html:20-56`
 *   (los bloques `.shell` y `.shell.dark`), más los dos custom properties de tipografía de marca,
 *   más los tokens que las specs siguientes agregaron por el mismo canal (`--*-strong`, `--info*`
 *   de la 0904-002; `--overlay` de la 0904-005).
 *
 *   spec-20260904-005-lucayuvdev (AC5) — Y UNA PROPIEDAD QUE NO ES CUSTOM PROPERTY: `color-scheme`.
 *   Es la única forma de que los controles que pinta el SISTEMA OPERATIVO y no el CSS —el calendario
 *   nativo de un `input type=date`, la lista de un `<select>`, el tilde de un checkbox, la barra de
 *   scroll de un contenedor— sigan al tema. No hay `var()` que los alcance, así que declararlos en
 *   otra hoja sería partir la decisión "qué tema está activo" en dos archivos (Q1): vive acá, en los
 *   mismos dos alcances que los tokens. No es geometría y ningún AC la prohíbe.
 *
 *   NO CONTIENE NI UNA REGLA DE GEOMETRÍA: ni `padding`, ni `width`, ni `font-size`, ni un
 *   `@media`. La geometría de layout se queda donde está, en `public/css/mainmenu.css`, y no
 *   migra (AC17). `research-20260902-002` midió que tres grupos de esas reglas
 *   —`body{font-size:0.9rem}`, `.page-wrapper .page-content` y las dos `@media` de sidebar—
 *   tienen dependientes reales y masivos en las 21 pantallas del SPA, y que el canvas no trae
 *   ningún valor de reemplazo para ellas porque usa otro paradigma de layout (flexbox contra el
 *   `position:fixed` + offset actual). Mover ese `body{font-size}` acá le cambiaría el tamaño de
 *   celda a `TablaGenerica`, `Common/ABM/TablaAbm` y `TablaReporte` en casi todas las pantallas.
 *
 * ============================================================================================
 * LOS DOS ALCANCES, Y POR QUÉ SON ÉSTOS
 *
 *   `:root`        -> tema claro. Es el default: sin cookie de tema, el documento arranca acá.
 *   `.tema-oscuro` -> tema oscuro. La clase la lleva el `<body>` —spec-20260904-005 (AC1) la mudó
 *                     ahí desde el `.page-wrapper`— y la pinta el servidor antes de que React monte
 *                     (`React/main.blade.php`, `Main/login.blade.php`) para que no haya flash.
 *
 *   POR QUÉ EL `<body>` Y NO EL `.page-wrapper`: los modales, tooltips y popovers de react-bootstrap
 *   y el menú de acciones de `TablaGenerica` se montan en `document.body`, que es HERMANO del
 *   `.page-wrapper`. Los custom properties heredan por ancestría del DOM, así que con la clase en el
 *   wrapper ningún `var(--surface)` resolvía dentro de un modal. Con la clase en el `<body>` heredan
 *   todos, sin un parche por portal (Q2).
 *
 *   Los dos alcances son DISJUNTOS a propósito: si el mismo selector declarara los dos juegos, el
 *   segundo pisaría al primero y lo que quedaría sería UN tema fijo, no dos conmutables.
 *   `.tema-oscuro` tiene la misma especificidad que `:root` y va después, así que gana sobre el
 *   `<body>` y —por herencia de los custom properties— sobre todo lo que cuelga de él.
 *
 * ============================================================================================
 * EL PATRÓN DE RESPALDO DE `color-mix()` (AC4), Y POR QUÉ EL ORDEN ES EL MECANISMO
 *
 *   Cada token derivado se declara DOS veces:
 *     1. primero, FUERA de todo `@supports`, con un valor `hex` literal — el respaldo;
 *     2. después, DENTRO de `@supports (color: color-mix(in srgb, red 50%, blue))`, con el
 *        `color-mix()` del canvas.
 *
 *   El orden no es cosmético: al revés, el hex pisaría al `color-mix` en TODOS los navegadores
 *   —incluidos los que sí lo soportan— y el respaldo dejaría de ser respaldo para pasar a ser el
 *   único valor. Un navegador sin soporte de `color-mix` descarta el bloque `@supports` entero y
 *   se queda con el hex, que es degradar en vez de quedarse sin color.
 *
 *   LOS HEX DE RESPALDO SON EL RESULTADO DE LA MEZCLA CON EL ACENTO POR DEFECTO
 *   (`--accent-light: #4f46e5` / `--accent-dark: #0891b2`, los defaults del canvas). No pueden
 *   seguir al acento del tenant: `color-mix()` es justamente lo que hace eso, y el respaldo existe
 *   para cuando esa función no está disponible. Que el color resultante se lea bien es AC16,
 *   verificación manual — ningún runner de este repo evalúa color.
 *
 * ============================================================================================
 * DE DÓNDE SALEN `--accent-light` Y `--accent-dark`
 *
 *   Son el único par que NO viene del canvas fijo: son el tweak editable por tenant
 *   (`parametros.AcentoClaro` / `parametros.AcentoOscuro`, AC5/AC7). El servidor los emite como
 *   atributo `style=` sobre `.page-wrapper` —el mismo canal que el canvas usa,
 *   `Main.dc.html:134`—, y ese valor gana sobre el default de acá. Los defaults se declaran igual
 *   para que la hoja sea autosuficiente si algún documento no los emitiera.
 */

/* PEDIDO DEL USUARIO (2026-09-21) — LA TIPOGRAFÍA DEL LOGOTIPO DE ALLWAYS, AUTOALOJADA.
 *
 * Es la fuente con la que está dibujado el logotipo completo (`public/img/logofinal2.png`). Se
 * autoaloja y no viene de Google Fonts porque no está ahí: es una fuente de terceros
 * (© 2000 utopiafonts + channel 42) que llegó como archivo. El molde —`public/fonts/<familia>/` más
 * un `@font-face`— es el que este repo ya usa para Poppins (`public/css/main.css:4-22`).
 *
 * ============================================================================================
 * LO QUE ESTA FUENTE **NO** ALCANZA A REPRODUCIR, MEDIDO — LÉASE ANTES DE USARLA PARA UNA MARCA
 *
 *   El logotipo la lleva CONDENSADA al 0.336 de su ancho natural, y sin esa condensación no se
 *   parece al logotipo: se ve tres veces más ancha. La medición, sobre `logofinal2.png`:
 *
 *     - a una altura de mayúscula de 37px el archivo escribe "Allways ERP" en 270px de ancho;
 *     - la fuente, a esa misma altura de mayúscula y sin transformar, lo escribe en 803px;
 *     - superpuestas las letras "ERP" del archivo y las de la fuente comprimida a ese 0.336, los
 *       contornos coinciden — o sea que es la misma tipografía, condensada, y no otra fuente.
 *
 *   POR ESO EL BLOQUE DE MARCA DE LA PANTALLA DE ACCESO NO USA ESTE TOKEN: reproducir esa
 *   condensación con texto vivo exige `transform: scaleX(.336)` más un margen negativo que
 *   compense el ancho que el transform no le saca a la caja de layout, y si la fuente no carga el
 *   respaldo se renderiza igualmente condensado al tercio y queda ilegible. Ese bloque usa el
 *   recorte del propio logotipo (`public/img/logo-texto.png`); el porqué completo está en el
 *   `<style>` de `Main/login.blade.php`.
 *
 *   QUEDA DECLARADA IGUAL, y no es código muerto: un `@font-face` cuya familia nadie renderiza no
 *   descarga un solo byte —el navegador trae la fuente recién cuando un glifo la necesita—, y
 *   tenerla nombrada evita que el próximo que la precise vuelva a descubrir el archivo, el molde y,
 *   sobre todo, el 0.336. Quien la use para algo que no sea reproducir el logotipo no necesita
 *   condensar nada.
 *
 * ============================================================================================
 * UNA SOLA VARIANTE, Y POR ESO QUIEN LA USE TIENE QUE DECLARAR `font-weight: 400`: el archivo trae
 * sólo la Regular. Pedirle 700/800 hace que el navegador SINTETICE la negrita engrosando los
 * trazos, y sobre una tipografía de display eso la emborrona.
 *
 * `font-display: swap` para que el texto se pinte en el respaldo mientras bajan los 36 KB en vez de
 * quedar invisible. */
@font-face {
    font-family: 'Beware';
    src: url('../fonts/beware/Beware.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tipografía de marca. Se aplica acotada al shell y al acceso desde `mainmenu.css`, no al
       `body`: el tamaño de cuerpo lo sigue fijando `mainmenu.css` (AC17) y cambiar la familia de
       todo el documento excede lo que esta spec rediseña. */
    --font-marca: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-cuerpo: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* PEDIDO DEL USUARIO (2026-09-21) — la del logotipo, sólo para el texto que acompaña al
       isotipo. El respaldo es `--font-marca` y no una lista suelta: si la fuente no cargara, el
       texto cae exactamente en la tipografía que tenía antes de este cambio. */
    --font-isologo: 'Beware', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* El acento del tenant. El servidor lo pisa por `style=` sobre `.page-wrapper` (AC5). */
    --accent-light: #4f46e5;
    --accent-dark: #0891b2;

    /* --- Los 20 del TEMA CLARO (`Main.dc.html:20-40`, bloque `.shell`) --- */
    --bg: oklch(98.2% 0.003 260);
    --surface: oklch(99.5% 0.002 260);
    --border: oklch(91% 0.006 260);
    --border-soft: oklch(94.5% 0.004 260);
    --text: oklch(21% 0.015 260);
    --text-muted: oklch(46% 0.02 260);
    --text-faint: oklch(64% 0.015 260);
    --accent: var(--accent-light);

    /* Respaldos de AC4: la mezcla ya resuelta contra `--accent-light: #4f46e5`. */
    --accent-strong: #3f38b7;
    --accent-tint: #eae9fc;
    --accent-tint-text: #332e95;

    --success: oklch(60% 0.13 150);
    --success-tint: oklch(94.5% 0.045 150);
    --success-text: oklch(38% 0.11 150);
    --warning: oklch(68% 0.15 75);
    --warning-tint: oklch(95% 0.05 75);
    --warning-text: oklch(45% 0.13 75);
    --danger: oklch(58% 0.19 25);
    --danger-tint: oklch(95% 0.045 25);
    --danger-text: oklch(45% 0.16 25);

    /* spec-20260904-002-lucayuvdev (AC1) — EL AZUL INFORMATIVO. Es el único trío que NO viene del
       canvas: nace de los tres azules que `resources/js/config/Paleta.js` tenía sueltos como hex
       (`Sky.V200`/`Sky.V400`/`Sky.V500`/`Blue.V500`) y que AC2 colapsa acá. Sigue el mismo molde que
       `--success`/`--warning`/`--danger` —base, tinte y texto, en `oklch`, sin `color-mix` en el
       tema claro— porque tampoco depende del tenant: `color-mix()` sólo hace falta donde el valor de
       origen es editable, que es el caso de `--accent` y de nadie más.
       El matiz (hue 250) es el punto medio entre el `Sky` (~232) y el `Blue` (~262) que colapsan en
       él, y la claridad del 60% lo deja a la par de `--success` frente al texto blanco que va
       encima — que el resultado se vea bien es verificación humana, ningún runner de acá evalúa
       color. */
    --info: oklch(60% 0.16 250);
    --info-tint: oklch(94.5% 0.04 250);
    --info-text: oklch(45% 0.15 250);

    /* spec-20260904-002-lucayuvdev (AC6) — LOS TRES "FUERTES" QUE FALTABAN. `--accent-strong` ya
       vivía acá; sus tres hermanos nacen con `bootstrapTokenizado.css`, que necesita un tono más
       oscuro para el `:hover`/`:active` de `.btn-success`/`.btn-warning`/`.btn-danger` (es lo que
       Bootstrap hacía con sus propios hex). Se declaran ACÁ y no en esa hoja a propósito: la capa de
       tokens tiene un solo hogar, y tener `--accent-strong` en un archivo y `--success-strong` en
       otro sería exactamente la fragmentación que esta spec vino a cerrar (Q1/Q2).
       Respaldo hex + `@supports`, mismo molde que el acento: el hex es la mezcla ya resuelta. */
    --success-strong: #2f7744;
    --warning-strong: #a46d00;
    --danger-strong: #a92f30;

    /* spec-20260904-005-lucayuvdev (AC6) — EL VELO. Es el fondo translúcido que se pone ENCIMA del
       contenido mientras algo carga (`EstilosAbm.css`, `GestorArchivosConTabla.jsx`,
       `ModalComprobante.jsx`), y no lo cubre ninguno de los tokens existentes: un `--surface` opaco
       tapa lo que hay debajo, y bajarle la opacidad al velo con `opacity` apagaría también al
       spinner que va adentro. Por eso es translúcido y no una superficie más.
       NO LLEVA `color-mix()` NI `@supports`: los dos valores son literales por tema, así que no hay
       nada que degradar (AC4 de la 0902-002 sólo exige respaldo donde hay `color-mix`). */
    --overlay: rgba(255, 255, 255, .6);
}

/* spec-20260904-005-lucayuvdev (AC5) — `color-scheme` DEL TEMA CLARO, SOBRE `body` Y NO SOBRE `:root`.
   El scrollbar DEL VIEWPORT toma el `color-scheme` del elemento RAÍZ, y la especificación sólo
   propaga el del `<body>` cuando el raíz quedó en `normal`. Un `:root{color-scheme:light}` dejaría
   ese scrollbar claro también en tema oscuro. Declarándolo en `body` (0,0,1), `.tema-oscuro` (0,1,0)
   —que desde AC1 vive en ese MISMO nodo— gana por especificidad y el raíz nunca se fija: el viewport
   sigue al tema. El resto de los controles nativos cuelga del `<body>`, así que los alcanza igual.

   spec-20260904-005-lucayuvdev (AC1, hueco declarado de la ola 1) — Y EL LIENZO DEL `<body>`.
   Con el portador del tema mudado al `<body>`, ese nodo quedó sin ninguna regla que lo pinte: la hoja
   del shell pinta `.page-wrapper` (`mainmenu.css:542-545`), que es un HIJO. Hoy lo tapa el
   `color-scheme: dark` de arriba —el user agent oscurece el lienzo por su cuenta—, pero eso no cubre
   el overscroll ni ninguna zona que el `.page-wrapper` no alcance: ahí asoma el lienzo claro en tema
   oscuro. `var(--bg)` resuelve en el nodo, así que la MISMA declaración sirve para los dos temas
   (`.tema-oscuro` vive en este nodo y redefine `--bg`).

   ES `background-color` Y NO EL SHORTHAND `background`, A PROPÓSITO: el documento del login pinta el
   degradé del tenant como `background-image` sobre este mismo `<body>` (`Shell/AppRoot.jsx`), y el
   shorthand resetea `background-image` a `none` — borraría el degradé de la portada de acceso. */
body {
    color-scheme: light;
    background-color: var(--bg);

    /* spec-20260915-002-lucayuvdev (AC2/AC4) — EL ACENTO DE LOS CONTROLES QUE PINTA EL NAVEGADOR.
       `accent-color` es la hermana de `color-scheme` de acá arriba: la única palanca sobre las
       partes que dibuja el user agent y no el CSS —el tilde del checkbox, el punto del radio, el
       resaltado de la `<option>` bajo el mouse en un `<select>` nativo, el ícono y el resaltado de
       fecha del `<input type="date">`—. Sin ella el navegador usa su celeste de fábrica, que es el
       síntoma que I-02 e I-03 reportaron. Tampoco es geometría, así que no entra en la prohibición
       de AC1 de esta hoja.
       UNA SOLA DECLARACIÓN SIRVE PARA LOS DOS TEMAS, y por el mismo mecanismo que el
       `background-color` de la línea de arriba: `.tema-oscuro` vive en ESTE nodo y redefine
       `--accent` acá, así que el `var()` se sustituye contra la paleta del tema activo. Escribir un
       gemelo bajo `.tema-oscuro` sería la misma decisión dos veces (Q2).
       VA EN EL `<body>` Y NO SOBRE CADA CONTROL: `accent-color` se hereda, así que una declaración
       alcanza a todo control nativo del documento —incluidos los de un modal portado a
       `document.body`, que es el motivo por el que `spec-20260904-005` mudó acá la clase del tema—.
       LO QUE ESTA PROPIEDAD **NO** ALCANZA, y queda declarado en vez de simulado: el interior del
       popup nativo del calendario y la lista desplegada de un `<select>` los dibuja el sistema
       operativo fuera del DOM. Ningún runner de este repo puede leer esos píxeles (A-11 declarado
       en AC2/AC4 de la spec, con su condición de cierre). */
    accent-color: var(--accent);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --accent-strong: color-mix(in srgb, var(--accent) 80%, black);
        --accent-tint: color-mix(in srgb, var(--accent) 12%, white);
        --accent-tint-text: color-mix(in srgb, var(--accent) 65%, black);
        --success-strong: color-mix(in srgb, var(--success) 80%, black);
        --warning-strong: color-mix(in srgb, var(--warning) 80%, black);
        --danger-strong: color-mix(in srgb, var(--danger) 80%, black);
    }
}

/* --- Los 20 del TEMA OSCURO (`Main.dc.html:41-56`, bloque `.shell.dark`) --- */
.tema-oscuro {
    --bg: oklch(21% 0.014 240);
    --surface: oklch(25% 0.018 240);
    --border: oklch(33% 0.02 240);
    --border-soft: oklch(29.5% 0.018 240);
    --text: oklch(93% 0.006 240);
    --text-muted: oklch(72% 0.012 240);
    --text-faint: oklch(55% 0.016 240);
    --accent: var(--accent-dark);

    /* Respaldos de AC4: la mezcla ya resuelta contra `--accent-dark: #0891b2` y el `--surface`
       oscuro de arriba. */
    --accent-strong: #46adc5;
    --accent-tint: #224757;
    --accent-tint-text: #77c3d5;

    --success: oklch(68% 0.15 150);
    --success-tint: #2d5147;
    --success-text: oklch(85% 0.09 150);
    --warning: oklch(74% 0.15 75);
    --warning-tint: #554836;
    --warning-text: oklch(88% 0.1 75);
    --danger: oklch(68% 0.18 25);
    --danger-tint: #593d42;
    --danger-text: oklch(86% 0.12 25);

    /* spec-20260904-002-lucayuvdev (AC1). Mismo trío, aclarado para el fondo oscuro, con el mismo
       respaldo hex + `color-mix` que los tres tintes de arriba: `#29445e` es la mezcla ya resuelta
       del `--info` de este alcance al 26% sobre el `--surface` oscuro. */
    --info: oklch(70% 0.14 250);
    --info-tint: #29445e;
    --info-text: oklch(86% 0.09 250);

    /* spec-20260904-002-lucayuvdev (AC6). Sobre fondo oscuro el estado interactivo ACLARA en vez de
       oscurecer —un hover más oscuro se perdería contra el fondo—, igual que `--accent-strong` acá
       arriba, que mezcla con blanco y no con negro. */
    --success-strong: #73c58b;
    --warning-strong: #e9b454;
    --danger-strong: #f68985;

    /* spec-20260904-005-lucayuvdev (AC6) — el velo, del otro lado: en oscuro aclarar el contenido
       con un blanco translúcido lo haría BRILLAR mientras carga. Se oscurece, y un poco más opaco
       (.55 contra .6) porque el contraste contra `--surface` oscuro es menor. */
    --overlay: rgba(0, 0, 0, .55);

    /* spec-20260904-005-lucayuvdev (AC5) — el par del `body{color-scheme:light}` de más arriba.
       Gana por especificidad sobre él en el mismo nodo, y deja el raíz sin fijar. */
    color-scheme: dark;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .tema-oscuro {
        --accent-strong: color-mix(in srgb, var(--accent) 75%, white);
        --accent-tint: color-mix(in srgb, var(--accent) 24%, var(--surface));
        --accent-tint-text: color-mix(in srgb, var(--accent) 55%, white);
        --success-tint: color-mix(in srgb, oklch(68% 0.15 150) 26%, var(--surface));
        --warning-tint: color-mix(in srgb, oklch(74% 0.15 75) 26%, var(--surface));
        --danger-tint: color-mix(in srgb, oklch(68% 0.18 25) 26%, var(--surface));
        --info-tint: color-mix(in srgb, oklch(70% 0.14 250) 26%, var(--surface));
        --success-strong: color-mix(in srgb, var(--success) 75%, white);
        --warning-strong: color-mix(in srgb, var(--warning) 75%, white);
        --danger-strong: color-mix(in srgb, var(--danger) 75%, white);
    }
}