/* ============================================================
   SMAG — Design System: tokens
   Fuente única de verdad para color, tipografía, espaciado,
   radios y sombras. No usar valores hardcodeados fuera de este
   archivo — todo componente nuevo consume estas variables.
   ============================================================ */

/* ══ LA TIPOGRAFIA, PARTIDA POR ALFABETO (28/08/2026) ══════════════════
   Medido contra produccion: la fuente era el **74% de la primera carga**
   —352 KB de 475—, mas que el HTML, todo el CSS y todo el JavaScript
   juntos. La italica pesaba otros 388 KB.

   No era un archivo mal hecho: Inter trae cirilico, griego y vietnamita
   completos, y nueve pesos. Aqui se escribe en espanol y la hoja usa cinco.

   **Los alfabetos no se pierden: se separan.** Con `unicode-range` el
   navegador baja `latin` siempre y `latinext` **solo si encuentra un
   caracter suyo** — un cliente que se llame Ferré, una marca polaca. Nada
   se ve mal, y quien nunca escriba uno no paga por ellos.

       InterVariable.woff2   352 KB  ->  latin 77 KB  +  latinext 96 KB
       ...-Italic.woff2      388 KB  ->  latin 84 KB  +  latinext 104 KB

   Se recorta por RANGOS y no por «los caracteres que hoy salen en pantalla»:
   los textos fijos se pueden mirar, **los datos no**.

   Los pesos se limitan a **400-800**, los que usa la hoja. **El tamano
   optico (`opsz`) SE CONSERVA**: fijarlo ahorraba 26 KB mas y dejaba todos
   los titulos con el dibujo pensado para 14 px.

   Se regeneran con `scripts/recortar_tipografia.py`, y
   `tests/test_la_tipografia_no_pierde_letras.py` falla si un caracter que
   el sistema escribe se queda fuera. ═══════════════════════════════════ */

/* Los dos rangos, escritos una vez para no copiarlos cuatro veces mal.
   Si se tocan, se tocan en las cuatro declaraciones a la vez. */

@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  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: "InterVariable";
  src: url("/static/fonts/InterVariable-latinext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, 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;
}

@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable-Italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  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: "InterVariable";
  src: url("/static/fonts/InterVariable-Italic-latinext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, 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;
}

:root {
  /* --- Color de marca (landing SMAG) --- */
  --color-ink: #16203a;         /* tinta — texto principal, encabezados */
  --color-ink-soft: #4a5570;    /* texto secundario */
  /* ══ MÁS CLARO, PARA QUE EL MENÚ OSCURO RESALTE (29/08/2026) ══
     Vladimir: «sería bueno ponerle un color blanco al fondo del sistema y
     no gris»; y al ver que blanco sobre blanco borraría el límite de cada
     tarjeta: «déjalo como está entonces, solo aclara más el gris».

     Era `#f3f6fc` —1,083:1 contra una tarjeta blanca—, paso a `#f7f9fd`
     (1,054) y ahora a `#f9fbfe` (1,037).

     **Y aqui se para, con el suelo puesto a proposito.** El primer intento
     fue `#fafcff` (1,028) razonando que la separacion no la lleva el fondo
     —se conto: de las cajas blancas que se apoyan en el, 0 carecen de borde
     o sombra—. Lo tumbo el guardia de `test_el_resaltado_se_ve.py`, que
     tiene el suelo en 1,03 por lo que dijo Vladimir el 29/08: *«blanco
     sobre blanco desaparece el borde de cada caja»*.

     Se respeta el guardia y no al reves. La cuenta dice que HOY no habria
     pasado nada; el suelo protege el dia que alguien anada una caja sin
     borde, que es cuando ya no se puede medir. Y entre 1,028 y 1,037 el
     ojo no distingue: se habria cambiado una regla escrita a cambio de
     nada visible.

     Blanco del todo sigue sin hacerse: ahi la separacion es 1,000, o sea
     ninguna. Con `#f9fbfe` queda un resto de azul que ademas empuja el
     borde de 1,247 a 1,268 contra el fondo.

     **Esto es el fondo de la APLICACION.** El de los correos es otro
     —`perfil.color_superficie`, `#f3f6fc`— y no se toca: alli no hay
     hoja de estilos que garantice bordes, y muchos gestores de correo
     recortan lo que pueden. */
  --color-surface: #f9fbfe;     /* fondo de la app */
  --color-border: #d8e1f2;      /* líneas, bordes */
  --color-white: #ffffff;

  /* --color-brand es el verde de la landing tal cual. NO se usa donde
     haya texto encima: con blanco da 3.29:1, por debajo del mínimo
     accesible de 4.5:1. Para eso están --color-primary y sus tonos. */
  --color-brand: #24a40c;
  --color-primary: #1c8209;        /* blanco encima: 4.95:1 ✔ */
  --color-primary-hover: #177006;  /* blanco encima: 6.26:1 ✔ */
  --color-primary-texto: #1a7a08;  /* sobre --color-primary-bg: 4.86:1 ✔ */
  --color-primary-bg: #e6f6e1;  /* fondo suave para estados activos/hover sutiles */

  --color-whatsapp: #25d366;    /* solo para el canal WhatsApp, no es color de marca general */
  /* EL PROYECTO NO TENIA AZUL: el primario de la casa es verde, asi que
     todo lo que se pintaba «azul» salia del mismo color que la burbuja de
     WhatsApp y que «Leído». Blanco encima: 5.6:1 ✔ */
  --color-azul: #1a5fb4;

  /* El beneficio, en el carril del tablero. Es un dato de otra naturaleza
     que los de arriba —no es lo que se cotizó ni lo que entró, es lo que
     queda— y por eso pide un color propio. Morado sobre blanco: 5.9:1 ✔ */
  --color-morado: #5b4bc4;
  --color-correo: var(--color-azul);   /* el icono del canal correo */

  /* Resaltado de una fila al pasar el ratón. Vive aparte de la escala
     neutra porque significa algo: "esta fila se abre". Antes usaba
     --color-gray-50, que sobre el blanco de la tabla es indistinguible
     del fondo; este es dos pasos más oscuro y sí se percibe.
     NO se usa aquí el verde --color-primary-bg: en el menú lateral
     significa "sección activa", y repetirlo en las filas le quitaría
     ese significado. */
  --color-fila-hover: #e8edf5;

  /* ══ EL MENÚ LATERAL, EN LA TINTA DE LA MARCA (29/08/2026) ══
     Vladimir: «toma el menú como está de ese color y el texto blanco».

     **No es un color nuevo**: `--color-menu` ES `--color-ink`, la misma
     tinta con la que está escrito todo el sistema, usada aquí como fondo.
     Así el menú pertenece al producto en vez de parecer pegado de otro
     sitio — y el día que otra empresa cambie su identidad, cambia con ella
     (decisión 19.1).

     Los otros tres existen porque **sobre fondo oscuro las reglas se
     invierten**: el texto secundario tiene que ACLARARSE, no oscurecerse, y
     el resaltado tiene que ser más claro que el fondo, no más oscuro.
     Reusar los de fondo claro habría dejado el menú ilegible. */
  --color-menu: var(--color-ink);
  --color-menu-texto: #c9d4ea;   /* sobre --color-menu: 9.8:1 ✔ */
  --color-menu-hover: #253150;   /* 1.36:1 sobre el fondo — se percibe */
  --color-menu-activo: #2f5fb3;  /* blanco encima: 4.6:1 ✔ */

  /* --- Escala neutra (reemplaza los ~10 grises accidentales encontrados en la auditoría) --- */
  --color-gray-50: #f8fafc;
  --color-gray-100: #eceff1;
  --color-gray-500: #64748b;
  --color-gray-700: var(--color-ink-soft);

  /* --- Paleta CATEGÓRICA (19/08/2026) ---
     Distinta de la semántica de abajo, y por un motivo concreto: los
     colores semánticos SIGNIFICAN algo —verde bien, rojo mal, ámbar ojo—.
     Usarlos para «Clínica» contra «Laboratorio» diría que un segmento es
     mejor que otro, y no lo es: son categorías, no estados.

     Siete tonos distintos con fuerza pareja, para que ninguno pese más
     que los demás. El primero es el verde de la casa porque el tramo
     mayor va primero y conviene que lo mayor lleve el color de marca.
     Todos llevan texto blanco encima en la barra: mínimo 4.5:1. */
  --cat-1: #1c8209;   /* verde de la casa — 4.95:1 ✔ */
  --cat-2: #1a5fb4;   /* azul — 6.29:1 ✔ */
  --cat-3: #7c4dbe;   /* violeta — 5.73:1 ✔ */
  --cat-4: #c2185b;   /* magenta — 5.87:1 ✔ */
  --cat-5: #b06000;   /* ámbar oscuro — 4.65:1 ✔ */
  --cat-6: #00796b;   /* teal — 5.32:1 ✔ */
  --cat-7: #5d6b82;   /* pizarra — 5.40:1 ✔ */

  /* Lo que NO tiene categoría. Fuera de la rotación a propósito: si «Sin
     asignar» cayera en un color de la paleta se leería como una categoría
     más, y es un dato que falta — verlo es justamente el punto.

     Es un gris OSCURO y no el gris claro que pedía el instinto: el claro
     (#94a3b8) daba 2.56:1 con el número blanco encima, ilegible. Un tramo
     que dice «esto falta» y no se puede leer es peor que no ponerlo. */
  --cat-vacio: #64748b;   /* 4.76:1 ✔ */

  /* --- Estados semánticos --- */
  /* El texto que va SOBRE el verde de WhatsApp. No es el verde de la
     marca ni el de «correcto»: es el unico que se lee encima de aquel.
     Estaba escrito a mano en las dos burbujas del contador. */
  --color-whatsapp-texto: #0b3d1c;
  --color-success: #1e7e34;
  --color-success-bg: #e3f6e8;
  --color-danger: #c0392b;
  --color-danger-bg: #fdecea;

  /* Los otros dos fondos suaves, para los accesos del carril. El verde y el
     rojo ya existían; faltaban el azul y el morado, y sin ellos habría que
     escribir el color a mano justo donde la hoja no lo admite. */
  --color-azul-bg: #eaf1fb;    /* --color-azul encima: 5.4:1 ✔ */
  --color-morado-bg: #f0eefb;  /* --color-morado encima: 5.6:1 ✔ */
  --color-warning: #a35a19;   /* 4.64:1 sobre su fondo, 5.21:1 con blanco ✔ */
  --color-warning-bg: #fdf0e0;
  --color-caution: #8a6d00;     /* prioridad "media" — distinto de warning para no chocar con "alta" */
  --color-caution-bg: #fdf6d8;
  --color-info: var(--color-ink);
  --color-info-bg: #e3ecfb;

  /* --- Tipografía --- */
  --font-sans: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 11px. El escalon mas pequeno de la escala, para lo que acompana a un
     dato y no es el dato: la unidad de una cifra, el pie de una barra.
     Estaba escrito a mano en tres sitios de «Detalles compartidos». */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;    /* 12px — badges, metadatos */
  --text-sm: 0.8125rem;  /* 13px — texto secundario */
  --text-base: 0.875rem; /* 14px — texto de interfaz por defecto */
  --text-lg: 1rem;       /* 16px — cuerpo, inputs */
  --text-xl: 1.25rem;    /* 20px — títulos de tarjeta */
  --text-2xl: 1.75rem;   /* 28px — títulos de página */

  /* --- Espaciado (grid de 8px) --- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */

  /* --- Radios --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* --- Sombras (tintadas con la tinta de marca, no negro puro) --- */
  --shadow-sm: 0 1px 6px rgba(22, 32, 58, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 32, 58, 0.10);
  --shadow-lg: 0 8px 24px rgba(22, 32, 58, 0.14);

  /* --- Foco visible (accesibilidad: mismo anillo en todo componente
     interactivo, nunca se suprime sin reemplazo) --- */
  --focus-ring: 0 0 0 3px rgba(36, 164, 12, 0.28);
  --focus-ring-danger: 0 0 0 3px rgba(192, 57, 43, 0.25);

  /* --- Capas (z-index): una sola escala para no volver a inventar
     números sueltos. Sidebar 40 y topbar 30 vienen de la Fase 2. --- */
  --z-menu: 35;   /* sobre la topbar (30), bajo el sidebar móvil (39/40) */
  --z-modal-fondo: 60;
  --z-modal: 61;

  /* --- Layout --- */
  --content-max-width: 1140px;
  --sidebar-width: 248px;
  --sidebar-width-colapsado: 72px;
  --topbar-height: 60px;

  /* --- Medidas del módulo de correo (06/08/2026) ---------------------
     Un correo no se mide con la rejilla de 8px de la aplicación: se mide
     con los anchos REALES de un cliente de correo. 600 es el ancho
     estándar de un correo HTML y 390 el ancho útil de un móvil corriente;
     los demás se derivan de esos dos. Viven aquí, con el resto de la
     fuente única de verdad, y no escritos dentro de un componente. */
  --ancho-correo: 600px;          /* el estándar de facto de un correo HTML */
  --ancho-movil: 390px;           /* lo que hay de verdad en un teléfono */
  --alto-miniatura: 190px;        /* la tarjeta de la galería */
  --alto-miniatura-fuente: 760px; /* el trozo de correo que se retrata */
  --alto-vista-previa: 420px;
  --alto-texto-legal: 160px;
  --ancho-selector-color: 56px;
  --alto-control: 34px;           /* mismo alto que un botón pequeño */

  /* --- Centro de preferencias (06/08/2026) ---------------------------
     44px es el minimo comodo para el dedo segun las guias de
     accesibilidad tactil; por debajo se falla el toque, y en esa pantalla
     fallar el toque significa cambiar un permiso sin querer. */
  --alto-tactil: 44px;
  --tamano-casilla: 18px;

  /* --- Los enlaces de una ficha (13/09/2026) -------------------------
     El tono de cada sitio, en claro. No son «colores de marca general»
     —igual que `--color-whatsapp`, valen SOLO para señalar de quién es
     ese acceso—, y viven aquí porque los usan las dos fichas, cliente y
     proveedor, a través de la misma pieza.

     **Por qué teñidos y no sólidos.** Vladimir vio la versión sólida:
     «esos colores están muy chillones». Y además competían con
     «Solicitar cotización»: en este sistema el color dice IMPORTANCIA,
     y dos botones fuertes en la misma pantalla es no decir ninguna. */
  --enlace-web-fondo: #eef1f7;
  --enlace-web-linea: #dfe4ee;
  --enlace-web-texto: #16203a;
  --enlace-fb-fondo: #eaf2fe;
  --enlace-fb-linea: #cfe2fd;
  --enlace-fb-texto: #0f5fc4;
  --enlace-ig-fondo: #fdeef6;
  --enlace-ig-linea: #f7d6e8;
  --enlace-ig-texto: #a52a6e;
  --enlace-maps-fondo: #fdeeed;
  --enlace-maps-linea: #f8d5d2;
  --enlace-maps-texto: #c5372c;
  --enlace-waze-fondo: #e8f7fd;
  --enlace-waze-linea: #cbeaf8;
  --enlace-waze-texto: #0d6f92;
  --enlace-wa-fondo: #e9f9ef;
  --enlace-wa-linea: #c6eed4;
  --enlace-wa-texto: #11743a;
  --enlace-correo-fondo: #f1eefc;
  --enlace-correo-linea: #ddd6f7;
  --enlace-correo-texto: #5a3ec0;
  --enlace-catalogo-fondo: #fdf4e6;
  --enlace-catalogo-linea: #f6e2c0;
  --enlace-catalogo-texto: #93580b;
  --enlace-portal-fondo: #e8f5f3;
  --enlace-portal-linea: #c8e8e2;
  --enlace-portal-texto: #0f6b5e;
}