/* ── La tipografía, embarcada ────────────────────────────────────────────────────────────────────
 *
 * El producto DECLARABA Inter y no la servía: cero @font-face y cero ficheros de fuente. El
 * servidor donde se hacían las capturas sí la tenía instalada, así que todo lo que se revisó
 * —las 26 capturas, la auditoría de Vera y la de Ignacio— estaba en una letra que el cliente no
 * iba a recibir: en el Windows de la clínica caía a Segoe UI, con otra altura de x y otras
 * longitudes de línea.
 *
 * Es la variable (un solo fichero para todos los pesos) con subconjunto latino: 64 KB frente a los
 * 876 KB del .ttf original. `swap` para que el texto se lea desde el primer momento.
 */
@font-face{
  font-family:Inter;
  src:url("fonts/inter-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ── Tokens del sistema de diseño · Conector Boquera ─────────────────────────────────────────────
 *
 * ÚNICA fuente de los colores, la escala tipográfica, el espaciado y la elevación.
 *
 * Vivía copiado en cuatro plantillas (base, preview, detalle, login) y las copias ya habían
 * divergido: `--sans` llevaba "Helvetica Neue" en la base y no en las otras, `--card` era #ffffff
 * aquí y #fff allí, y a `login` le faltaban seis tokens. Vera lo midió el 13/09 y lo llamó «la causa
 * mecánica de que no parezca el mismo producto».
 *
 * `preview` y `detalle` ya no lo necesitan: heredan de base.html. Lo cargan `base.html` y
 * `login.html` — esta última NO hereda porque es una pantalla anónima con un layout incompatible
 * (tarjeta centrada a pantalla completa), y heredar le metería la barra superior, un botón «salir»
 * en la pantalla de entrar y una barra de pestañas vacía.
 *
 * Los simuladores (`sim/_base.html`) NO cargan esto a propósito: fingen ser software ajeno, y si
 * llevaran el cromado del panel la demo dejaría de demostrar nada.
 */
:root{
  --brand:#08394a; --brand-2:#0b5566; --sage:#98bab1; --sage-2:#c7dcd5;
  --ink:#17262b; --muted:#4f5e63; --faint:#566268; --paper:#f5f8ee; --card:#ffffff; --line:#e2e8dc;
  /* barra superior SIEMPRE oscura (no se invierte en dark); texto sobre el brand según tema */
  --topbar:#08394a; --on-brand:#ffffff;
  /* verde y azul derivados del hue teal/sage del brand; ámbar y rojo se mantienen cálidos por
     semántica (Vera F-007) */
  --green:#0b6a50; --amber:#8a5406; --red:#a3261a; --blue:#155e7c;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* escala tipográfica modular (~1.25) — sin valores sueltos ni .5px */
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-base:14px; --fs-lg:16px; --fs-xl:18px;
  --fs-2xl:22px; --fs-3xl:28px;
  /* escala de espaciado 4/8pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --radius:14px; --radius-sm:10px; --radius-pill:999px; --ease:150ms cubic-bezier(.4,0,.2,1);
  /* elevación (Vera F-011) — sombras sutiles derivadas del brand */
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--brand) 8%,transparent);
  --shadow:0 2px 8px color-mix(in srgb,var(--brand) 10%,transparent),0 1px 2px color-mix(in srgb,var(--brand) 6%,transparent);
}

/* Tema CLARO siempre, como la web del cliente: no sigue el modo oscuro del navegador.
   El oscuro es opt-in explícito con data-theme=dark, nunca automático. */
:root{color-scheme:light}
:root[data-theme=dark]{
  --brand:#7fd3c8; --brand-2:#9fe0d7; --sage:#7faea3; --sage-2:#bfe0d8;
  --ink:#e7f0ec; --muted:#a7bbb5; --faint:#93a89f; --paper:#0d1614; --card:#14201d; --line:#233330;
  --green:#4ade80; --amber:#fbbf24; --red:#f87171; --blue:#60a5fa; --on-brand:#08262e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 10px rgba(0,0,0,.5);
}

/* Reset y utilidades que usan TODAS las pantallas, hereden o no. */
*{box-sizing:border-box}
.ic{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.15em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}