/* ==========================================================================
   tokens.css -- EL UNICO LUGAR DONDE SE DECIDE COMO SE VE FUNCION-IA
   ==========================================================================

   POR QUE EXISTE (17-09-26, peticion de Luis: "tenemos el css que parece
   generico con tailwind").

   No habia Tailwind. Habia 27 archivos y 25,546 lineas de CSS escritas a mano
   en las que cada pantalla decidio su propio color, su propio radio y su
   propio espacio. Medido antes de escribir esto:

       232 colores hexadecimales distintos (2,338 apariciones)
       46  valores distintos de border-radius
       112 sombras distintas
       117 tamanos de letra distintos
       304 combinaciones de padding
       274 propiedades --x declaradas fuera de aqui, --primary en 8 archivos
           y clavada a #4f46e5 (= indigo-600 de Tailwind) en tres de ellos

   El resultado no era feo por gusto de nadie: era feo porque NADIE lo decidia.
   La pantalla de Ventas tenia al mismo tiempo un encabezado verde degradado,
   botones indigo, un boton de cobrar de OTRO verde, un chip azul y un aviso
   ambar. Cuatro familias de color, y ninguna de la marca -- mientras la barra
   lateral (navbar.js) si usaba la marca desde el principio. La aplicacion
   estaba a medio convertir.

   LA FUENTE DE VERDAD NO ES ESTE ARCHIVO. Es landing/medios/marca/
   guia-visual-v1.png -- la Guia Visual Esencial v1.0 (junio 2025). Este
   archivo solo la TRADUCE a CSS. Si alguna vez discrepan, manda la guia.
   Lo que la guia manda y aqui se copia sin cambiarlo: los cinco colores
   institucionales y la tipografia Inter (Semibold/Bold en titulos,
   Regular/Medium en cuerpo e interfaz).

   LO QUE LA GUIA NO CUBRE. Su propio titulo dice "para landing page": no
   habla de tablas, insignias, formularios ni densidad. Ese hueco es el que
   llenan las secciones marcadas EXTENSION. Se llenan UNA VEZ aqui, en vez de
   inventarse otra vez en cada pantalla, que es como llegamos a los 232
   colores.

   COMO SE USA. Se enlaza ANTES del CSS del modulo, para que el modulo pueda
   pisar lo que necesite:

       <link rel="stylesheet" href="../../css/ui/tokens.css">
       <link rel="stylesheet" href="../../css/modules/ventas/ventas.css">

   QUIEN LO VIGILA. scripts/test-tokens-css.mjs, que corre en CI con las
   demas pruebas puras. No puede exigir que las 25,546 lineas se limpien de
   golpe, asi que lleva una LINEA BASE de la deuda (scripts/
   deuda-estilos.base.json) y falla si algun contador se mueve sin que el
   numero se actualice en el mismo commit. Sube = regresion; baja = avance,
   y el diff lo ensena. Eso es lo que evita volver a los 232 colores.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       1. PALETA INSTITUCIONAL -- GUIA v1.0 §3
       Estos cinco valores NO se cambian, no se "ajustan un poco" y no se les
       agrega un sexto. La prueba falla si este bloque deja de decir
       exactamente esto.
       ---------------------------------------------------------------------- */
    --fia-naranja: #F26A1A;          /* naranja principal   242,106,26 */
    --fia-grafito: #111317;          /* negro grafito        17, 19,23 */
    --fia-gris-medio: #6B7280;       /* gris medio          107,114,128 */
    --fia-gris-claro: #E5E7EB;       /* gris claro          229,231,235 */
    --fia-blanco: #FFFFFF;           /* blanco */

    /* ----------------------------------------------------------------------
       2. DERIVADOS DEL NARANJA -- EXTENSION, con su razon y su contraste
       El naranja institucional sobre blanco da 3.06:1. Eso PASA el minimo de
       3:1 para texto grande o en negrita y NO PASA el de 4.5:1 para texto
       normal (ya anotado en landing/medios/marca/LEEME.md). La salida que
       manda ese documento es oscurecer el naranja SOLO PARA ESE USO, nunca
       cambiar el institucional. Estos son esos usos:
       ---------------------------------------------------------------------- */
    --fia-naranja-hondo: #CE5A16;    /* :hover de un boton naranja. Ya se usa
                                        asi en la landing desde junio 2025. */
    --fia-naranja-texto: #8A3A08;    /* naranja LEGIBLE en texto chico:
                                        7.8:1 sobre blanco, 7.3:1 sobre
                                        --fia-naranja-tenue. Es el unico
                                        naranja que puede llevar texto de
                                        cuerpo. */
    --fia-naranja-tenue: #FFF6EF;    /* fondo de un aviso de marca */
    --fia-naranja-borde: #F9C39A;    /* su borde */

    /* Sobre el naranja institucional como FONDO: el blanco da 3.06:1 (solo
       titulos grandes en negrita) y el grafito da 6.07:1 (cualquier texto).
       Por eso una banda naranja lleva su texto chico en grafito. Aqui decia
       5.4:1, que salio de medir contra otra mezcla; scripts/test-paleta.mjs
       fija el 6.07 y ya no hay dos numeros para la misma pareja. */
    --fia-sobre-naranja: var(--fia-grafito);
    --fia-sobre-naranja-titulo: var(--fia-blanco);

    /* ----------------------------------------------------------------------
       3. NEUTROS INTERMEDIOS -- EXTENSION
       La guia da un solo gris medio y un solo gris claro. Una aplicacion de
       mostrador necesita ademas un gris de texto secundario mas oscuro que
       #6B7280 (para que cumpla 4.5:1 en texto chico), un fondo de pagina que
       no sea blanco puro y una linea mas tenue que #E5E7EB para dividir
       renglones sin rayar la pantalla. Tres valores, no treinta.
       ---------------------------------------------------------------------- */
    --fia-grafito-medio: #454F5F;    /* texto secundario: 7.9:1 sobre blanco */

    /* EL GRIS DE LEER, QUE NO ES EL GRIS DE LA GUIA (medido 17-09-26).
       #6B7280 --el gris medio institucional-- sobre --fia-papel-hueso da
       4.51:1 al calcularlo y 4.44:1 medido en la pantalla: justo por debajo
       del 4.5 que pide un texto de 11.5 px. Era el mismo fallo repetido en
       Maquila, Seguimiento, Clientes y Facturacion, siempre en encabezados
       de columna.
       Este tono da 5.4:1 sobre el hueso y 6.9:1 sobre blanco. El gris
       institucional NO se toca: se queda para bordes, iconos y separadores,
       que no tienen que cumplir contraste de texto. */
    --fia-gris-lectura: #5F6774;
    --fia-papel-hueso: #F6F7F9;      /* fondo de pagina; el mismo de la landing */
    --fia-linea-tenue: #EEF0F4;      /* divisor entre renglones de una tabla */
    --fia-borde-control: #D7DBE2;    /* borde de un input en reposo */

    /* EL TEXTO QUE VA ENCIMA DE UNA SUPERFICIE OSCURA (medido 18-09-26).
       Con la opcion B hay ahora pantallas grafito de verdad --la franja de
       las 19 vistas, la barra lateral, el panel del generador de pedidos--
       y sobre grafito los grises de leer no sirven: --fia-gris-lectura da
       3.26:1 y --fia-naranja-texto, 2.38:1. Son el mismo error al reves,
       y el generador lo tenia catorce veces en sus etiquetas.
       Blanco sobre grafito da 18.6:1; este gris claro, 11.5:1, y sirve para
       lo secundario sin volverlo invisible. El naranja institucional, que
       sobre blanco no se puede leer, sobre grafito da 6.1:1: es EL acento
       de las superficies oscuras. */
    --fia-sobre-oscuro: var(--fia-blanco);
    --fia-sobre-oscuro-tenue: #C7CCD4;
    --fia-acento-oscuro: var(--fia-naranja);

    /* ----------------------------------------------------------------------
       4. ESTADOS -- EXTENSION, y la parte que mas cuidado pide
       La guia no tiene colores de estado porque una landing no los necesita.
       Aqui se cobra dinero, asi que hacen falta. La regla que los mantiene
       fuera del camino de la marca: el NARANJA significa "aqui se actua", y
       por eso un aviso NO puede ser naranja -- se confundiria con un boton.
       Los tres estados viven en su propia familia y solo aparecen cuando de
       verdad hay un estado.
       ---------------------------------------------------------------------- */
    --fia-exito: #1F8A4C;            /* mismo verde que ya usa la landing */
    --fia-exito-tenue: #F1F8F3;
    --fia-exito-texto: #14603A;      /* 6.9:1 sobre --fia-exito-tenue */

    --fia-aviso: #B7791F;
    --fia-aviso-tenue: #FFF8E6;
    --fia-aviso-texto: #7A4E09;      /* 7.4:1 sobre --fia-aviso-tenue */

    --fia-peligro: #D92D20;
    --fia-peligro-tenue: #FEF3F2;
    --fia-peligro-texto: #B42318;    /* 5.9:1 sobre --fia-peligro-tenue */

    /* ----------------------------------------------------------------------
       4-bis. EL SEMAFORO DEL PEDIDO -- EXTENSION, elegida por Luis 17-09-26

       NO ES LA FAMILIA DE ESTADOS DE ARRIBA, y la diferencia importa. Exito,
       aviso y peligro dicen si algo salio bien o mal. Esto dice OTRA COSA: en
       que punto de su camino va un pedido. Son siete puntos y la familia de
       arriba tiene tres, asi que meterlos ahi habria borrado distinciones que
       el mostrador usa --"entregado" y "finalizado" se habrian visto igual, y
       son justo los dos que hay que separar.

       COMO SE LLEGO A ESTOS SIETE. Estaban repartidos en cuatro modulos con
       verdes, morados y rosas de Tailwind, y "en proceso" y "cancelado"
       compartian EL MISMO fondo, distinguiendose solo por el tono de la letra.
       Se probaron tres juegos (tenues, medios y hondos) y Luis eligio estos
       mirandolos en su telefono: "colores que a simple vista se vean
       diferentes".

       LA LETRA ES BLANCA EN LOS SIETE, Y CUATRO NO LLEGAN AL 4.5:1. Medidos:

           --fia-pedido-borrador    #94A3B8   2.56:1   <-- por debajo
           --fia-pedido-pendiente   #D97706   3.19:1   <-- por debajo
           --fia-pedido-proceso     #2563EB   5.17:1
           --fia-pedido-maquila     #7C3AED   5.70:1
           --fia-pedido-finalizado  #0891B2   3.68:1   <-- por debajo
           --fia-pedido-entregado   #16A34A   3.30:1   <-- por debajo
           --fia-pedido-cancelado   #DC2626   4.83:1

       Esto NO es un descuido ni una medicion que falto: es UNA DECISION DE
       LUIS, tomada despues de que yo le pusiera los cuatro numeros enfrente y
       el los viera a tamano real en su telefono. Queda escrita aqui para que
       quien los mida manana encuentre la razon en vez de "corregirlos" por su
       cuenta -- que es exactamente lo que yo hice con los colores de los tipos
       de requisicion, y hubo que deshacerlo.

       Si algun dia se quiere subir alguno sin perder el matiz, se oscurece: el
       gris llega a 4.54:1 en #6C7786, el naranja a 4.52 en #B26205, el
       turquesa a 4.52 en #07819E y el verde a 4.61 en #12873D.
       ---------------------------------------------------------------------- */
    --fia-pedido-borrador: #94A3B8;
    --fia-pedido-pendiente: #D97706;
    --fia-pedido-proceso: #2563EB;
    --fia-pedido-maquila: #7C3AED;
    --fia-pedido-finalizado: #0891B2;
    --fia-pedido-entregado: #16A34A;
    --fia-pedido-cancelado: #DC2626;
    --fia-pedido-letra: var(--fia-blanco);

    /* ----------------------------------------------------------------------
       4-ter. EL AZUL DEL CLIP (Luis, 21-09-26: "un cuadrito con un clip color
       azul... el cuadrito azul con el clip en blanco... sin palabras").
       El distintivo de "esta venta trae orden de compra adjunta".

       ES EL MISMO HEX QUE --fia-pedido-proceso, Y ESTA ESCRITO DOS VECES A
       PROPOSITO. En el sistema hay UN azul; si el clip apuntara con var() al
       token del semaforo, el dia que el mostrador quisiera otro tono para "en
       proceso" el clip se moveria con el sin que nadie lo pidiera. Son dos
       decisiones distintas que hoy coinciden, no una sola compartida.

       Blanco encima da 5.17:1: pasa a cualquier tamano, que es lo que pide un
       icono de 12 px sin palabra que lo acompane.
       ---------------------------------------------------------------------- */
    --fia-adjunto: #2563EB;
    --fia-adjunto-letra: var(--fia-blanco);

    /* ----------------------------------------------------------------------
       5. LOS NOMBRES QUE USA EL CSS DE LOS MODULOS
       Un modulo NO deberia escribir --fia-grafito: deberia escribir
       --color-texto. Asi, el dia que la guia cambie un valor, cambia aqui y
       nada mas. Esta es la capa que hace que eso sea posible.
       ---------------------------------------------------------------------- */
    --color-texto: var(--fia-grafito);
    --color-texto-suave: var(--fia-grafito-medio);
    --color-texto-tenue: var(--fia-gris-lectura);

    --color-fondo: var(--fia-papel-hueso);
    --color-superficie: var(--fia-blanco);
    --color-superficie-2: var(--fia-papel-hueso);

    --color-linea: var(--fia-gris-claro);
    --color-linea-suave: var(--fia-linea-tenue);

    --color-accion: var(--fia-naranja);
    --color-accion-hover: var(--fia-naranja-hondo);
    /* GRAFITO, NO BLANCO, y esto se midio en la pantalla real (17-09-26).
       Blanco sobre el naranja institucional da 3.06:1: pasa el minimo de 3:1
       de un titulo grande en negrita, pero NO el 4.5:1 del texto de un boton
       de 13 px. Grafito sobre el mismo naranja da 6.07:1 y pasa a cualquier
       tamano. Es ademas la pareja del propio isotipo. La alternativa era
       oscurecer el naranja de los botones, pero ni --fia-naranja-hondo
       alcanza: con blanco encima da 4.12:1. */
    /* Apunta a --fia-sobre-naranja, no a --fia-grafito: asi la decision de
       QUE LETRA va encima del color de accion se toma en un solo lugar. Hoy
       vale lo mismo (--fia-sobre-naranja es grafito), pero el dia que una
       empresa elija un color oscuro su letra sera blanca, y este alias tiene
       que seguirla sin que nadie se acuerde de venir a cambiarlo. */
    --color-accion-texto: var(--fia-sobre-naranja);
    --color-accion-legible: var(--fia-naranja-texto);

    /* ----------------------------------------------------------------------
       6. RADIOS -- 3, no 46
       Uno para lo que se toca, uno para lo que contiene, uno para lo redondo.
       ---------------------------------------------------------------------- */
    --radio-control: 8px;            /* inputs, botones, chips */
    --radio-tarjeta: 12px;           /* tarjetas, modales, tablas */
    --radio-pildora: 999px;          /* avatares, contadores, insignias */

    /* ----------------------------------------------------------------------
       7. ESPACIO -- una escala de base 4, no 304 combinaciones
       ---------------------------------------------------------------------- */
    --esp-1: 4px;                    /* entre un icono y su texto */
    --esp-2: 8px;                    /* dentro de un chip; entre botones */
    --esp-3: 12px;                   /* entre tarjetas */
    --esp-4: 16px;                   /* dentro de una tarjeta */
    --esp-6: 24px;                   /* entre secciones */
    --esp-8: 32px;                   /* margen de pagina */

    /* ----------------------------------------------------------------------
       8. TIPOGRAFIA -- GUIA v1.0 §4 (Inter) con 6 pasos, no 117
       Los pasos van en px a proposito. En rem tambien estaria bien; en `vh`
       NO, y por eso se dice aqui: `vh` es el 1% del ALTO DE LA VENTANA, asi
       que un texto en vh cambia de tamano al abrir la consola del navegador o
       al cambiar de monitor. Hay 37 medidas asi en el repo y estan contadas
       en la linea base para que no crezcan.
       ---------------------------------------------------------------------- */
    --fuente: 'Inter', system-ui, -apple-system, sans-serif;

    --texto-xs: 11px;                /* encabezado de columna, en mayusculas */
    --texto-sm: 12px;                /* etiquetas */
    --texto-base: 13px;              /* secundario */
    --texto-md: 15px;                /* cuerpo y renglones */
    --texto-lg: 20px;                /* cifras que deciden */
    --texto-xl: 30px;                /* titulo de modulo */

    --peso-cuerpo: 400;
    --peso-medio: 500;
    --peso-semi: 600;                /* el "Semibold" de la guia */
    --peso-fuerte: 700;              /* el "Bold" de la guia */
    --peso-titulo: 800;

    /* Dinero. En Inter el 1 es mas angosto que el 0, asi que sin esto los
       puntos decimales de una columna de importes no se alinean y hay que
       LEER cada cifra en vez de verlas. Ya se usa en 7 modulos; faltaba en
       Ventas, que es donde se cobra. */
    --cifras: tabular-nums;

    /* ----------------------------------------------------------------------
       9. SOMBRAS -- 2, no 112
       La sombra deja de decorar y dice una sola cosa: esto esta encima de lo
       demas. Sin brillos de color: sobre el grafito se ven sucios y la guia
       §7 los marca como uso incorrecto sobre la marca.
       ---------------------------------------------------------------------- */
    --sombra-reposo: 0 1px 2px rgba(17, 19, 23, 0.05);
    --sombra-flotante: 0 8px 24px -12px rgba(17, 19, 23, 0.18);

    /* ----------------------------------------------------------------------
       10. MEDIDAS DE INTERACCION
       ---------------------------------------------------------------------- */
    /* Un dedo apoya unos 9 mm en la pantalla: 44 px. Hoy .toolbar-btn mide
       entre 31.5 y 35.4 px segun el alto de la ventana (su icono esta en
       1.8vh), y el mostrador toca esa barra todo el dia. */
    --toque-min: 44px;

    /* El tope de una pareja "etiqueta ... cifra". `space-between` reparte a
       las orillas: en un contenedor de 1,900 px la cifra queda a 1,900 px de
       su etiqueta y el ojo tiene que cruzar la pantalla para juntarlas.
       Dentro de este ancho se lee de un golpe. */
    --medida-pareja: 420px;

    /* Ancho maximo de una columna de lectura. Entregas, Clientes,
       Contabilidad y Seguimiento hoy no tienen ninguno: crecen con el
       monitor. */
    --medida-lectura: 1200px;

    --transicion: 160ms ease;

    /* Monoespaciado, para lo que se lee caracter por caracter: folios, UUID,
       enlaces de contrasena. La pila evita que un cero y una o se vean igual
       cuando alguien lo dicta por telefono.

       Hay tres declaraciones sueltas de monoespaciado en
       modules/dashboards/dashboard-c.css que son anteriores a este token y no
       se tocaron aqui. Pasarlas a var(--font-mono) baja la deuda de estilos de
       15 a 13; es limpieza aparte, no de este cambio. */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* ==========================================================================
   Nada mas. Este archivo NO pinta: solo declara.

   Un solo selector aqui --un `body { }`, un `.btn { }`-- y el archivo deja
   de poder enlazarse sin riesgo en las 30 vistas, porque empezaria a pisar
   estilos que ya funcionan. Los estilos compartidos van en otro archivo de
   public/css/ui/, y la prueba vigila que aqui siga habiendo un solo bloque.
   ========================================================================== */