/* OnSite by Gestacore, hoja 1 de 4: tokens, reset y tipografía. Contrato de tokens =
   docs/mockups/mock.css (Fase 3). El ORDEN de carga de las cuatro hojas lo declara
   `web/templating.py::HOJAS_CSS` -- cambiarlo cambia la cascada. */

:root {
  color-scheme: light;

  /* Paleta oficial de Gestacore (kit de Elementor de gestacore.com, leído 2026-08-20):
     primary #296B68 · accent #E76B20 · secondary #3E3C38 · dark #232222. Orden de _anti-acartonado §5. */
  --primary: #296B68;        /* teal: estructura, nav activa, enlaces, bitácora, focos */
  --secondary: #3A8783;      /* teal claro: hover de teal */
  --accent: #E76B20;         /* naranja Gestacore: LA acción principal de cada vista (texto carbón encima) */
  --bg: #F6F3EE;             /* crema tenue del sitio */
  --fg: #232222;             /* carbón del sitio */
  --border: #E0D9CF;         /* hairline decorativa, cálida */
  --muted-fg: #625C54;
  --destructive: #B42318;

  --surface: #FDFCFA;
  --surface-2: #EFE9E1;
  --border-strong: #7F776C;  /* bordes de controles: 4.3:1 */
  --accent-texto: #B5501A;   /* naranja en texto chico: 5.0:1 */
  --accent-bg: #FDEFE4;
  --primary-bg: #E3EFEE;

  /* Ida en falso: rojo de peligro, NO el naranja de marca (el naranja ya es "acción") */
  --falso: #B42318; --falso-bg: #FBEAE8; --falso-border: #E9A8A2;

  --ok: #1F7A3A;    --ok-bg: #EAF5EC;    --ok-border: #9BD3AB;
  --warn: #9A5B00;  --warn-bg: #FBF1DF;  --warn-border: #EFC97A;
  --bad: #B42318;   --bad-bg: #FBEAE8;   --bad-border: #E9A8A2;
  --info: #1D5F9A;  --info-bg: #E7EFF8;  --info-border: #9DBFE3;

  /* Papel de la firma (H30a, B1): el fondo claro FIJO de toda firma en pantalla: el marco `.firma-papel` (vistas.css)
     y la imagen misma, que el servidor entrega con la tinta ya sobre este papel (`PAPEL` de evidencia/firma.py, el
     mismo color; también es el `--surface-2` del PDF: lo vigila `tests/test_evidencia_firma.py`). A propósito NO se
     redefine en el tema oscuro y no se duplica en su bloque: es papel, no superficie de la interfaz, y la tinta
     oscura se lee igual en los dos temas. Más oscuro que `--bg` y `--surface` a propósito: en el portal la firma
     cae sobre el fondo de la página y con el mismo crema no se distinguiría. */
  --papel-firma: #EFE9E1;

  --ring: var(--primary);
  --ring-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent);

  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs: .75rem; --lh-xs: 1.4;
  --t-sm: .8125rem; --lh-sm: 1.45;
  --t-base: .9375rem; --lh-base: 1.55;
  --t-md: 1.0625rem; --lh-md: 1.4;
  --t-lg: 1.25rem; --lh-lg: 1.3;
  --t-xl: 1.5rem; --lh-xl: 1.2;
  --t-2xl: 2.125rem; --lh-2xl: 1.1;
  --t-hora: 2.75rem;           /* la hora grande del sello de tiempo */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --r-sm: 4px; --r-md: 8px; --r-pill: 999px;   /* Clean: 4/8, una sola escala */

  --sh-card: 0 1px 2px rgb(35 34 34 / .05), 0 6px 20px -12px rgb(35 34 34 / .14);
  --sh-card-h: 0 2px 4px rgb(35 34 34 / .07), 0 14px 32px -14px rgb(35 34 34 / .22);
  --sh-panel: 0 24px 60px -24px rgb(35 34 34 / .32);

  --dur-rapido: 120ms; --dur-normal: 180ms; --dur-lento: 280ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* El rayado de advertencia: la firma visual de la ida en falso (rojo, como la cinta de peligro) */
  --rayado: repeating-linear-gradient(135deg, var(--falso) 0 6px, transparent 6px 14px);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --primary: #6CC2BC; --secondary: #8ED6D1; --accent: #F0833C;
  --bg: #1A1918; --fg: #F1ECE6; --border: #3E3C38; --muted-fg: #B5ADA3; --destructive: #FF7B70;
  --surface: #232222; --surface-2: #2C2A28; --border-strong: #7A7268;
  --accent-texto: #FFA066; --accent-bg: #3F2415; --primary-bg: #1E3533;
  --falso: #FF7B70; --falso-bg: #3A1A18; --falso-border: #7A3530;
  --ok: #5DD389; --ok-bg: #16301F; --ok-border: #2F7A4C;
  --warn: #F5C451; --warn-bg: #33260C; --warn-border: #8A6414;
  --bad: #FF7B70; --bad-bg: #3A1A18; --bad-border: #7A3530;
  --info: #7FB8EE; --info-bg: #14283C; --info-border: #2B5F80;
  --sh-card: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px -12px rgb(0 0 0 / .6);
  --sh-card-h: 0 2px 4px rgb(0 0 0 / .5), 0 14px 32px -14px rgb(0 0 0 / .7);
}

/* ---------- Tamaño de la página (2026-10-20): Compacto, Normal y Grande ----------
   El servidor pinta `data-tamano` en `<html>` desde la cookie `onsite_tamano` (`web/templating.py::tamano_de`) y
   `app.mjs` lo cambia al momento. Las hojas miden casi todo en px, así que cambiar la letra raíz no basta: el tamaño se
   aplica a toda la página con `zoom`. Normal = 1, idéntico a como se veía antes. OJO: con `zoom` en `<html>`, Chromium
   pinta las unidades de pantalla como zoom x la ventana (a 1.15, `100dvh` mide 839 de 730 px y `100vw` 1766 de 1536:
   scroll de lado), así que TODA `vh`/`dvh`/`vw`/... de las cuatro hojas va como `calc(N<unidad> / var(--zoom))`, y
   también `env(safe-area-inset-*)` (px de la pantalla real: `env(...) / var(--zoom)`). Lo vigila
   `tests/test_tamano_pagina.py`. Las `@media` siguen midiendo la ventana real. */
:root { --zoom: 1; }
:root[data-tamano="compacto"] { --zoom: .8; }
:root[data-tamano="grande"] { --zoom: 1.15; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Regla de casa (revisión Task 7, Medio #3): la cascada de AUTOR le gana al agente de
   usuario sin importar especificidad, así que `.btn { display: inline-flex }` derrota al
   `[hidden] { display: none }` del navegador para cualquier elemento con esa clase. Con esto
   `el.hidden = true` vuelve a esconder de verdad, tenga la clase que tenga. */
[hidden] { display: none !important; }
html { background: var(--bg); font-size: 16px; -webkit-text-size-adjust: 100%; zoom: var(--zoom); }
body { margin: 0; font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--lh-base); color: var(--fg); background: var(--bg); min-height: calc(100dvh / var(--zoom)); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--t-xl); line-height: var(--lh-xl); }
h2 { font-size: var(--t-lg); line-height: var(--lh-lg); }
h3 { font-size: var(--t-md); line-height: var(--lh-md); }
p { margin: 0; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-fg); }
.sm { font-size: var(--t-sm); line-height: var(--lh-sm); }
.xs { font-size: var(--t-xs); line-height: var(--lh-xs); }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.salto { position: absolute; left: var(--s-4); top: -100px; background: var(--surface); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); z-index: 100; }
.salto:focus { top: var(--s-4); }