/* ENXIT · tokens v0.3 · 14-oct-2026 · ronda 16, paleta Petróleo (v0.2: 6-oct; v0.1: 1-oct)
   v0.3 cambia valores, no nombres: page, selected, fg-2, line-strong, action (+ hover y pressed), status-blocked.
   Suma: selected-border, surface-final, on-final, line-final, surface-tint. Retira fg-3 (apunta a fg-2).
   Sólo modo claro. Los nombres son de rol: el modo oscuro se suma después redefiniendo estas mismas
   variables (por ejemplo en :root[data-theme="dark"]), sin tocar componentes.
   Fuente de verdad: enxit.tokens.json. Este archivo no estiliza ningún elemento: sólo @font-face y variables.
   Colores en hex: oklch() no existe en los WebView viejos de Android. El oklch de cada color está en el JSON. */

/* Manrope · SIL OFL 1.1 (fonts/OFL-manrope.txt) · variable.
   La interfaz usa 400–700 de un solo archivo (el cuestionario, 400 y 600); 800 es el trazo del logo y queda afuera.
   latin se baja siempre; latin-ext y vietnamese sólo si la página usa una letra de su rango (ĩ ũ ỹ / ẽ).
   El MVP sale sólo en español: alcanza con latin. Con el guaraní, los tres se reemplazan por un solo corte propio (ver README). */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/manrope-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;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/manrope-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  /* Color · superficies */
  --enxit-page: #F3F7F9;                 /* v0.3 · fondo frío (antes #FAF9F6, papel) */
  --enxit-surface: #FFFFFF;              /* tarjetas, campos, pantalla del cuestionario */
  --enxit-surface-warm: #F1E5D3;         /* arena: sólo piezas que presentan (deck, guía). E11 usa surface-final */
  --enxit-surface-final: #161D38;        /* v0.3 · E11 en noche: índigo lleno */
  --enxit-on-final: #F1E5D3;             /* v0.3 · texto en E11: arena, 13,33 */
  --enxit-line-final: rgba(241, 229, 211, 0.16); /* v0.3 · filete en E11 */
  --enxit-surface-tint: #E9F6FB;         /* v0.3 · avisos que salen una vez (primer mes) */
  --enxit-selected: #D3EFFA;             /* v0.3 · opción elegida; siempre con borde 2 px en selected-border y el check */
  --enxit-selected-border: #007090;      /* v0.3 · antes fg: 5,64 contra blanco */
  --enxit-track: rgba(22, 29, 56, 0.10); /* carril vacío de bandas y progreso */

  /* Color · texto */
  --enxit-fg: #161D38;                   /* texto 1° */
  --enxit-fg-2: #555C7C;                 /* v0.3 · texto 2°: 6,55 surface, 6,07 page */
  --enxit-fg-3: var(--enxit-fg-2);       /* v0.3 · retirado: no usar; se borra en la v0.4 */

  /* Color · acción */
  --enxit-action: #007090;               /* v0.3 · botón principal: petróleo (antes índigo) */
  --enxit-on-action: #FFFFFF;            /* 5,64 */

  /* Color · líneas */
  --enxit-line: rgba(22, 29, 56, 0.12);  /* filete: separa, no marca controles */
  --enxit-line-strong: #858BAE;          /* v0.3 · borde de control y segmento vacío: 3,33 surface, 3,09 page */

  /* Color · marca y dato */
  --enxit-brand: #3AB4DE;                /* cian: E, hilo, bandas. Nunca texto sobre claro */
  --enxit-brand-ink: #007090;            /* tinta cian: texto de marca y links */
  --enxit-weave: #A7A4DC;                /* lavanda: trama de las bandas. Nunca texto */
  /* Banda (8 px de alto o más; debajo, lisa en --enxit-brand). Contable: un hilo por respuesta, flex + space-evenly,
     mientras entren con el aire mínimo: 5n + 2 ≤ ancho en px. Si no, trama pareja (--enxit-weave-threads),
     que es el mismo paso al mínimo y arranca a 2 px del borde, como la contable
     (background-position: var(--enxit-weave-gap) var(--enxit-weave-inset)). Hilo 3 px y aire 2 px: el logo a u = 1 px. */
  --enxit-weave-thread: 3px;             /* ancho del hilo */
  --enxit-weave-gap: 2px;                /* aire mínimo entre hilos: paso mínimo 5 px */
  --enxit-weave-inset: 2px;              /* el hilo deja 2 px arriba y abajo, también en la trama pareja */
  --enxit-weave-threads: repeating-linear-gradient(90deg, var(--enxit-brand) 0 3px, transparent 3px 5px);

  /* Color · estado */
  --enxit-focus: #007090;                /* anillo de 2 px, a 2 px del control */
  --enxit-error: #AB3933;                /* error funcional: texto e ícono, chico */
  /* El semáforo y Sin datos suficientes: en el bloque v0.2 (--enxit-status-*) */

  /* Tipografía · una escala para las dos superficies */
  --enxit-font-sans: "Manrope", system-ui, sans-serif;
  --enxit-weight-regular: 400;
  --enxit-weight-semibold: 600;
  --enxit-weight-bold: 700;              /* sólo panel: cifras grandes y título de página */
  --enxit-numeric: tabular-nums;         /* font-variant-numeric de toda cifra que se compara */

  --enxit-text-display: 1.75rem;   --enxit-text-display--line: calc(36 / 28);  --enxit-text-display--weight: 700;  --enxit-text-display--tracking: -0.02em;
  --enxit-text-title: 1.375rem;    --enxit-text-title--line: calc(28 / 22);    --enxit-text-title--weight: 600;    --enxit-text-title--tracking: -0.01em;
  --enxit-text-subtitle: 1.125rem; --enxit-text-subtitle--line: calc(24 / 18); --enxit-text-subtitle--weight: 600; --enxit-text-subtitle--tracking: 0em;
  --enxit-text-body: 1rem;         --enxit-text-body--line: calc(24 / 16);     --enxit-text-body--weight: 400;     --enxit-text-body--tracking: 0em;
  --enxit-text-small: 0.875rem;    --enxit-text-small--line: calc(20 / 14);    --enxit-text-small--weight: 400;    --enxit-text-small--tracking: 0em;
  --enxit-text-caption: 0.75rem;   --enxit-text-caption--line: calc(16 / 12);  --enxit-text-caption--weight: 600;  --enxit-text-caption--tracking: 0.02em;

  /* Espacio · unidad 4 px (la misma --spacing de Tailwind) */
  --enxit-space-half: 0.125rem;  /*  2 */
  --enxit-space-1: 0.25rem;      /*  4 */
  --enxit-space-2: 0.5rem;       /*  8 */
  --enxit-space-3: 0.75rem;      /* 12 */
  --enxit-space-4: 1rem;         /* 16 */
  --enxit-space-5: 1.25rem;      /* 20 */
  --enxit-space-6: 1.5rem;       /* 24 */
  --enxit-space-8: 2rem;         /* 32 */
  --enxit-space-10: 2.5rem;      /* 40 */
  --enxit-space-12: 3rem;        /* 48 */
  --enxit-space-16: 4rem;        /* 64 */

  /* Tamaños */
  --enxit-target: 3rem;          /* 48: mínimo de todo lo tocable */
  --enxit-control: 3.25rem;      /* 52: alto mínimo (min-height) de opción y botón del cuestionario */
  --enxit-logo-sm: 16px;         /* cuestionario. El logo va en múltiplos de 16 px: u entero */
  --enxit-logo-md: 32px;         /* panel */

  /* Radios, bordes, foco y sombra */
  --enxit-radius-thread: 1px;    /* hilos, bandas, segmentos */
  --enxit-radius-control: 4px;   /* botón, opción, campo, chip */
  --enxit-radius-container: 8px; /* tarjeta, diálogo, menú */
  --enxit-border-1: 1px;         /* filete y borde de control */
  --enxit-border-2: 2px;         /* selección y foco */
  --enxit-focus-width: 2px;
  --enxit-focus-offset: 2px;
  --enxit-shadow-overlay: 0 1px 2px rgba(22, 29, 56, 0.08), 0 8px 24px rgba(22, 29, 56, 0.12); /* sólo lo que flota */

  /* Movimiento · una curva: la de la X */
  --enxit-duration-1: 120ms;     /* respuesta: tocar, elegir */
  --enxit-duration-2: 240ms;     /* transición: pasar de pregunta, abrir, cerrar */
  --enxit-duration-3: 560ms;     /* gesto: la X que se enciende; el hilo que entra en la trama */
  --enxit-ease: cubic-bezier(0.3, 0, 0, 1);
  --enxit-x-angle: 28.24deg;     /* borde del barrido de la X, perpendicular al hilo */
  --enxit-gesture-x: var(--enxit-duration-3) var(--enxit-ease) 0ms; /* el gesto de la X: duración, curva y demora (motion.gesture-x) */
}

/* v0.2 · 6-oct-2026 · de las rondas 12 y 13 (Componentes ENXIT.dc.html) y la Semaforización v1.0, confirmados al
   cerrar las dos rondas. Están en enxit.tokens.json y en el preset de Tailwind. */
:root {
  --enxit-press: rgba(22, 29, 56, 0.08);     /* presionado sobre claros. Se superpone al fondo: background-image: linear-gradient(var(--enxit-press), var(--enxit-press)) */
  --enxit-hover: rgba(22, 29, 56, 0.04);     /* sólo panel, con cursor. En táctil no hay hover */
  --enxit-action-pressed: #00566F;           /* v0.3 · petróleo con L −0,08: on-action 8,20 */
  --enxit-action-hover: #00627F;             /* v0.3 · petróleo con L −0,04: on-action 6,88. Sólo panel */
  --enxit-disabled: var(--enxit-track);      /* desactivado = vacío, nunca opacidad */
  --enxit-on-disabled: var(--enxit-fg-2);    /* 5,39 sobre track en blanco: se lee al sol */
  --enxit-pair-rule: rgba(22, 29, 56, 0.22); /* filete del par ENXIT + cliente, el del arte final */
  --enxit-icon: 16px;                        /* íconos de 16 en 16, como el logo */
  --enxit-icon-stroke: 2px;                  /* el hilo del logo (3u) escrito a la altura de la mayúscula del texto */

  /* 12b · panel (3-oct). Banda corta: por debajo de 27 px de largo (5 × 5 + 2), lisa en brand: una banda muestra
     5 hilos o ninguno. Las bandas que se comparan (una tabla, una fila de tarjetas) van en un solo modo:
     contable si entran todas; si una no entra, pareja todas. Los tres hilos de menos de 5 miden weave-thread. */
  --enxit-control-panel: 2.5rem;             /* 40: alto mínimo de los controles del panel con cursor; con pointer: coarse, target */
  --enxit-content-max: 85rem;                /* 1360: ancho máximo del contenido del panel (1440 − 2 × 40) */
  --enxit-band: 10px;                        /* alto de la banda en tarjeta y celda: hilos de 3 × 6 */
  --enxit-glyph: 10px;                       /* alto de los glifos de dato a 1×: segmentos de nivel (28 × 10) y tres hilos (16 × 10) */
  --enxit-chart-point: 6px;                  /* punto del gráfico de evolución: cuadrado con radio de hilo */
  --enxit-weave-threads-print: repeating-linear-gradient(90deg, var(--enxit-fg) 0 3px, transparent 3px 5px); /* trama pareja de impresión: hilos en fg sobre blanco */

  /* Semáforo · el color lo devuelve la API (GREEN, YELLOW, RED). Siempre con 1, 2 o 3 segmentos de 3 y el nombre
     del estado; la cifra, en su -ink. En B/N y con daltonismo lo dicen los segmentos y el nombre. */
  --enxit-status-green: #389560;             /* Favorable · Bajo en Retention Signals · 1 segmento. 3,73 sobre surface */
  --enxit-status-green-ink: #24744D;         /* la cifra en verde: 5,71 sobre surface, 5,42 sobre page */
  --enxit-status-yellow: #E8A127;            /* Intermedio · Medio · 2 segmentos. 2,20: v0.3 · cada segmento con filete de 1 px por dentro en -ink (box-shadow: inset 0 0 0 1px) */
  --enxit-status-yellow-ink: #885716;        /* la cifra en amarillo: 6,14 y 5,83 */
  --enxit-status-red: #C74C41;               /* Atención · Alto · 3 segmentos. 4,63. Rojo funcional: nunca un fondo */
  --enxit-status-red-ink: #AB3933;           /* la cifra en rojo: el valor de error, 6,24 y 5,93 */
  --enxit-status-blocked: #555C7C;           /* v0.3 · fg-2 (antes cian). Sin datos suficientes (BLOCKED y BLOCKED_RESIDUAL): tres hilos sueltos, siempre tres */
}

@media (pointer: coarse) {
  :root { --enxit-control-panel: var(--enxit-target); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --enxit-duration-1: 0ms; --enxit-duration-2: 0ms; --enxit-duration-3: 0ms; }
}