/* =====================================================================
   VALAD · Sistema de diseño · Tokens
   Fuente única de color, tipografía, espaciado, radios, movimiento y capas.
   La landing (index.html), la aplicación (app.html) y la guía de estilo
   (sistema.html) consumen estos tokens. No definir colores sueltos fuera
   de este archivo salvo la escala de riesgo clínico, que también vive aquí.
   ===================================================================== */

:root{
  /* ---------- Neutros (familia fría con leve matiz verde) ---------- */
  --bg:#f3f5f3;
  --surface:#fcfdfc;
  --surface-2:#eff2ef;
  --surface-3:#e5e9e5;
  --ink:#0f1716;
  --ink-2:#36423f;
  --muted:#5f6b68;
  --line:#dce1dd;
  --line-strong:#bfc8c3;

  /* ---------- Acento único: petróleo ---------- */
  --accent:#0b5b5d;
  --accent-strong:#073e40;
  --accent-soft:#e0ecea;
  --accent-ink:#ffffff;
  --focus:#0b5b5d;

  /* ---------- Escala de riesgo clínico (semántica, no decorativa) ---------- */
  --risk-low:#2e8556;      --risk-low-ink:#ffffff;
  --risk-mod:#d4a216;      --risk-mod-ink:#2b2100;
  --risk-high:#dc6a2b;     --risk-high-ink:#ffffff;
  --risk-vhigh:#c3372d;    --risk-vhigh-ink:#ffffff;
  --risk-max:#7c1c15;      --risk-max-ink:#ffffff;
  --risk-na:#7b8582;       --risk-na-ink:#ffffff;

  /* ---------- Estados de mensajes ---------- */
  --info-bg:#e8eff1;  --info-bd:#4f7682;  --info-tx:#16303a;
  --warn-bg:#fbf3dc;  --warn-bd:#c79a1a;  --warn-tx:#3d2f05;
  --danger-bg:#fbeae7; --danger-bd:#c3372d; --danger-tx:#521510;
  --ok-bg:#e5f1ea;    --ok-bd:#2e8556;    --ok-tx:#113a24;
  --note-bg:#eeecf5;  --note-bd:#6b5f95;  --note-tx:#2c2547;

  /* ---------- Sombras teñidas (luz cenital única) ---------- */
  --shadow-1:0 1px 0 rgba(15,40,38,.04), 0 1px 2px rgba(15,40,38,.05);
  --shadow-2:0 1px 0 rgba(15,40,38,.04), 0 12px 32px -18px rgba(15,52,50,.32);
  --shadow-3:0 2px 0 rgba(15,40,38,.03), 0 30px 70px -30px rgba(10,48,46,.42);

  /* ---------- Tipografía ---------- */
  --font-sans:"Geist","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-mono:"Geist Mono","Cascadia Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs-2xs:11.5px;
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:20px;
  --fs-xl:26px;
  --fs-2xl:clamp(28px,3.2vw,36px);
  --fs-3xl:clamp(36px,5vw,58px);
  --fs-display:clamp(42px,6.6vw,84px);
  --lh-tight:1.04;
  --lh-snug:1.22;
  --lh-body:1.55;
  --track-display:-.035em;
  --track-head:-.02em;
  --track-label:.01em;

  /* ---------- Espaciado (base 4) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  /* ---------- Radios: regla documentada ----------
     controles (botones, inputs, chips de navegación) = --r-sm
     paneles y tarjetas = --r-md · contenedores grandes = --r-lg
     etiquetas de estado clínico = --r-pill (único uso de la píldora) */
  --r-xs:5px; --r-sm:9px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* ---------- Movimiento ---------- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --d-instant:90ms; --d-fast:150ms; --d-base:230ms; --d-slow:420ms;

  /* ---------- Capas ---------- */
  --z-base:1; --z-sticky:20; --z-bar:60; --z-scrim:70; --z-sheet:80; --z-tabbar:90; --z-toast:200;

  /* ---------- Dimensiones de la app ---------- */
  --bar-h:60px;
  --tabbar-h:64px;
  --nav-w:276px;
  --content-max:1240px;

  color-scheme:light;
}

/* ---------- Tema oscuro: sistema, salvo elección explícita de claro ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c1111; --surface:#121919; --surface-2:#172020; --surface-3:#1e2928;
    --ink:#e6ecea; --ink-2:#bcc7c4; --muted:#8a9693; --line:#24302e; --line-strong:#35433f;
    --accent:#5bb8b0; --accent-strong:#8fd6cf; --accent-soft:#132f2d; --accent-ink:#06201f; --focus:#7cc9c2;
    --risk-low:#3f9f6b; --risk-mod:#e0b232; --risk-high:#e57c40; --risk-vhigh:#d9524a; --risk-max:#a3332a; --risk-na:#6d7875;
    --info-bg:#122127; --info-bd:#5d8d9a; --info-tx:#d3e6ec;
    --warn-bg:#2a2410; --warn-bd:#c79a1a; --warn-tx:#f3e4b2;
    --danger-bg:#311715; --danger-bd:#d9524a; --danger-tx:#ffd6d1;
    --ok-bg:#10281c; --ok-bd:#3f9f6b; --ok-tx:#cdeedb;
    --note-bg:#1d1a2b; --note-bd:#8c80bd; --note-tx:#e2ddf5;
    --shadow-1:0 1px 0 rgba(0,0,0,.25);
    --shadow-2:0 1px 0 rgba(0,0,0,.25), 0 16px 36px -22px rgba(0,0,0,.85);
    --shadow-3:0 2px 0 rgba(0,0,0,.25), 0 30px 70px -30px rgba(0,0,0,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0c1111; --surface:#121919; --surface-2:#172020; --surface-3:#1e2928;
  --ink:#e6ecea; --ink-2:#bcc7c4; --muted:#8a9693; --line:#24302e; --line-strong:#35433f;
  --accent:#5bb8b0; --accent-strong:#8fd6cf; --accent-soft:#132f2d; --accent-ink:#06201f; --focus:#7cc9c2;
  --risk-low:#3f9f6b; --risk-mod:#e0b232; --risk-high:#e57c40; --risk-vhigh:#d9524a; --risk-max:#a3332a; --risk-na:#6d7875;
  --info-bg:#122127; --info-bd:#5d8d9a; --info-tx:#d3e6ec;
  --warn-bg:#2a2410; --warn-bd:#c79a1a; --warn-tx:#f3e4b2;
  --danger-bg:#311715; --danger-bd:#d9524a; --danger-tx:#ffd6d1;
  --ok-bg:#10281c; --ok-bd:#3f9f6b; --ok-tx:#cdeedb;
  --note-bg:#1d1a2b; --note-bd:#8c80bd; --note-tx:#e2ddf5;
  --shadow-1:0 1px 0 rgba(0,0,0,.25);
  --shadow-2:0 1px 0 rgba(0,0,0,.25), 0 16px 36px -22px rgba(0,0,0,.85);
  --shadow-3:0 2px 0 rgba(0,0,0,.25), 0 30px 70px -30px rgba(0,0,0,.9);
  color-scheme:dark;
}

/* ---------- Base compartida ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:var(--lh-body);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
::selection{ background:color-mix(in srgb,var(--accent) 24%,transparent); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs); }
.num, .tnum{ font-variant-numeric:tabular-nums lining-nums; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; left:12px; top:-60px; z-index:var(--z-toast); background:var(--ink); color:var(--bg); padding:10px 14px; border-radius:var(--r-sm); font-weight:600; text-decoration:none; transition:top var(--d-fast) var(--ease-out); }
.skip-link:focus{ top:12px; }

/* ---------- Marca ---------- */
.wordmark{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:650; letter-spacing:.14em; font-size:15px; }
.wordmark svg{ width:26px; height:26px; flex:none; color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; scroll-behavior:auto!important; }
}