/* Hoja base de /app/, trozo 01 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ==================================================================================================
   F18 — /app/: LA FORMA. Rediseño visual completo, pedido por el operador con las capturas de
   ChatGPT y Codex delante: «simple, con animaciones sutiles pero rápidas y de calidad, robusto».

   LO QUE CAMBIA Y LO QUE NO. Cambia la geometría entera —el armazón, la barra, el hilo, el
   cajón— y las superficies. NO cambian: los colores de ESTADO (bien/alerta/mal/desconocido) ni
   el acento, que se midieron en F16 contra WCAG y siguen siendo la parte que dice la verdad; ni
   un solo contrato con los módulos (los ids y clases son los mismos); ni la regla de que el
   diseño no suaviza la verdad.

   LA IDEA VISUAL AHORA: «UNA SUPERFICIE, UNA COLUMNA». Como en las apps de referencia:
     - la pantalla es PLANA: barra a la izquierda sobre --fondo, lectura a la derecha sobre
       --superficie, separadas por un filete. Sin panel redondeado flotando dentro de un marco:
       eso leía como «widget», no como aplicación.
     - TODO lo que se lee vive en una columna central de 780px: el hilo, el hero y el cajón
       comparten el mismo eje, y por eso la pantalla se ve «acomodada» — un solo eje vertical.
     - lo humano va en BURBUJA a la derecha; lo del agente va en prosa plena a la izquierda,
       sin burbuja: la respuesta es el documento, el mensaje propio es la nota al margen.
     - el sistema habla en líneas pequeñas centradas: presente, pero nunca compitiendo.

   Las escalas (espacio --e*, tipografía --t-*, radios --r-*) se HEREDAN de F16: el sistema
   métrico funcionaba; lo que estaba mal era la composición.
   ================================================================================================== */

/* ==================================================================================================
   F20 · LAS CARAS. Copiadas de styles.css, no importadas: /app/ NO carga la hoja del panel clásico
   —traerla por las fuentes arrastraría 74 KB de reglas de otra presentación encima de ésta— y sin
   un @font-face propio el navegador no tiene de dónde sacar la cara. Citarla en --prosa sin
   declararla, que es lo que había, solo funciona en la máquina de quien la tenga instalada:
   medido en producción, la fuente que resolvía era la del sistema.

   Los woff2 ya se sirven desde /fonts/ y ya viajan en el despliegue. Esto no añade un byte de
   descarga nueva; solo deja de desperdiciar los que ya se bajaban para el panel clásico.

   Desde nuestro origen porque la CSP dice `default-src 'self'`: un fonts.gstatic.com aquí no es
   una comodidad, es una petición que el navegador bloquea sin decir nada.
   ================================================================================================== */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/hanken-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/hanken-400-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: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/hanken-500-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/hanken-500-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: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/hanken-600-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/hanken-600-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: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/hanken-700-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/hanken-700-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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/jbmono-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/jbmono-400-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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/jbmono-500-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/jbmono-500-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; }

:root {
  color-scheme: light;

  /* ---- espacio (F16, intacta) ---- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* ---- tipografía (F16, intacta) ---- */
  --t-2xs: 10.5px; --lh-2xs: 1.35;
  --t-xs: 11.5px;  --lh-xs: 1.4;
  --t-sm: 12.5px;  --lh-sm: 1.5;
  --t-md: 13.5px;  --lh-md: 1.55;
  --t-lg: 15.5px;  --lh-lg: 1.65;
  --t-xl: 19px;    --lh-xl: 1.35;
  --t-2xl: 23px;   --lh-2xl: 1.25;
  --t-3xl: 28px;   --lh-3xl: 1.15;
  --track-titulo: -.02em;
  --track-micro: .09em;
  --prosa: 'Hanken Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo,
    Consolas, monospace;

  /* ---- radios (F16, intacta) ---- */
  --r-menudo: 7px; --r-control: 10px; --r-tarjeta: 14px; --r-burbuja: 18px; --r-chip: 999px;

  /* ---- medidas ---- */
  --ancho-lateral: 268px;
  --ancho-hilo: 780px;          /* la columna única: hilo, hero y cajón comparten este eje */
  --ancho-prosa: 68ch;
  --alto-control: 34px;
  --alto-tactil: 44px;
  --carril: 3px; --carril-fino: 2px; --filete: 1px;
  --punto: 6px; --punto-aqui: 8px; --trazo-punto: 1.5px;
  --icono-aviso: 16px; --icono-vacio: 32px;
  --esq-alto-lista: 116px; --esq-alto-hilo: 120px;

  /* ---- superficies: PLANAS, dos tonos ----
     --fondo es la barra; --superficie la zona de lectura; --elevada lo que flota (cajón,
     tarjetas, hero-tarjetas); --hundida lo que se marca (hover, burbuja humana, entrada de
     búsqueda). Contraste de texto: medido abajo, en PARES-MEDIDOS. */
  --fondo: #f2f3f5;
  --superficie: #ffffff;
  --elevada: #ffffff;
  --hundida: #ececef;
  --linea: rgba(16, 18, 22, .08);
  --borde: #767e8b;
  --borde-flotante: rgba(16, 18, 22, .13);
  --espina: rgba(16, 18, 22, .20);

  /* ---- tinta ---- */
  --tinta: #14171b;
  --tinta-suave: #4c535e;
  --tinta-apagada: #626c7a;

  /* ---- acento y estados (F16, MEDIDOS — no se tocan) ---- */
  --acento: #0f5fa6;
  --acento-tinta: #ffffff;
  --acento-tenue: #e2ecf7;
  --halo: 0 0 0 4px rgba(15, 95, 166, .16);
  --bien: #0e6b36;
  --alerta: #7a5200;
  --mal: #b3211b;
  --mal-fondo: #fbeceb;
  --desconocido: #6a2fbe;

  --sombra-1: 0 1px 2px rgba(16, 20, 26, .05), 0 2px 8px rgba(16, 20, 26, .05);
  --sombra-2: 0 2px 6px rgba(16, 20, 26, .06), 0 18px 44px rgba(16, 20, 26, .13);
  --esq-barra: #dcdfe4;
  --esq-brillo: #e9ebef;
  --marca: var(--borde);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Oscuro a la manera de las referencias: barra un paso más honda que la lectura, y lo que
       flota un paso más claro. Sin sombras negras: en oscuro eleva el color. */
    --fondo: #16181b;
    --superficie: #212429;
    --elevada: #2a2d33;
    --hundida: #2c3036;
    --linea: rgba(233, 237, 243, .07);
    --borde: #8b93a1;
    --borde-flotante: rgba(233, 237, 243, .12);
    --espina: rgba(233, 237, 243, .16);
    --tinta: #e9edf3;
    --tinta-suave: #b7bdc7;
    --tinta-apagada: #8f97a3;
    --acento: #6bb4f5;
    --acento-tinta: #06121d;
    --acento-tenue: #16283a;
    --halo: 0 0 0 4px rgba(107, 180, 245, .18);
    --bien: #4fd48a;
    --alerta: #e9b368;
    --mal: #fb8497;
    --mal-fondo: #2e1a1e;
    --desconocido: #c3a5f6;
    --sombra-1: none;
    --sombra-2: none;
    --esq-barra: #23272d;
    --esq-brillo: #2f343b;
  }
}

/* PARES-MEDIDOS con el script de luminancia WCAG (corrido, no estimado). La primera versión de
   la apagada clara (#66707e) daba 4.3 sobre --hundida — bajo AA — y se oscureció a #626c7a:
   claro : tinta/superficie 18.0 · suave/superficie 7.8 · apagada/superficie 5.3 ·
           apagada/fondo 4.8 · apagada/hundida 4.5 · tinta/hundida 15.2 · acento/superficie 6.5
   oscuro: tinta/superficie 13.2 · suave/superficie 8.2 · apagada/superficie 5.3 ·
           apagada/fondo 6.0 · apagada/hundida 4.5 · tinta/hundida 11.3 · acento/superficie 7.0 */

/* ===== BASE (F16, portada) ===== */
/* ==================================================================================================
   BASE
   ================================================================================================== */

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 var(--t-lg)/var(--lh-lg) var(--prosa);
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mono, code, pre, kbd { font-family: var(--mono); }
a { color: var(--acento); text-underline-offset: 2px; }

/* La selección lleva el acento tenue con tinta medida encima (12.8:1 oscuro, 15.0:1 claro): un
   detalle que se ve cien veces al día y que con el azul del sistema delataría que aquí no se
   eligió nada. */
::selection { background: var(--acento-tenue); color: var(--tinta); }

/* Barras de scroll finas y del color de la retícula. Sin esto, en oscuro Chrome pinta una barra
   clara que es lo más ruidoso de la pantalla. */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }

:focus-visible {
  outline: var(--carril-fino) solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-menudo);
}

/* Los controles nativos (casillas del inventario, selects, scrollbars) heredan el tema por
   color-scheme; el acento de la casilla marcada, por accent-color. Sin esto, una casilla de
   capacidad concedida se pinta con el azul del sistema y no con el de esta app. */
input, select, textarea, button {
  font-family: inherit;
  accent-color: var(--acento);
}