/* ASSURE — variables del sistema (tokens v2) y fuentes. Base neutra; verde agua solo para marca y avance. */
@font-face { font-family: "Archivo"; src: url("/static/assure/fuentes/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/assure/fuentes/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/assure/fuentes/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/assure/fuentes/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Michroma es la letra de una sola palabra, el «ASSURE» de la cabecera, y
   era lo único que la app le pedía a internet: un <link> a Google Fonts en
   cada pantalla. Acá adentro son 11 KB y la aplicación queda entera sin
   conexión, que es como se usa en campo. Subconjunto latino: la palabra de
   marca no tiene acentos, y si algún día los tuviera cae a Archivo. */
@font-face { font-family: "Michroma"; src: url("/static/assure/fuentes/Michroma-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --surface-0: #050505; --surface-1: #111213; --surface-2: #18191b; --surface-3: #222427;
  --line: #26282b; --line-strong: #6b7075;
  --ink: #eeeff0; --ink-muted: #a2a6aa; --ink-faint: #868a8f;
  --primary: #eef0f1; --primary-hover: #ffffff; --on-primary: #0c0d0e;
  --signal: #4fd8c4; --signal-strong: #7be8d8; --signal-soft: #0d2623; --on-signal: #04201d;
  --steel: #8fb3cc; --steel-soft: #16242e;
  --ok: #4cf07a; --ok-soft: #0e2a16; --warn: #ffd23a; --warn-soft: #2e2508;
  --danger: #ff4f63; --danger-soft: #36101a; --info: #95a2ff; --info-soft: #171c3a;
  --esp-i: #b98cff; --esp-p: #f783ac; --esp-e: #ffa94d; --esp-m: #d8bc8c;
  --link: #a5b4ff; --focus: #95a2ff;
  --chart-real: var(--signal); --chart-plan: var(--steel); --chart-grid: var(--line);
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-brand: "Michroma", "Archivo", sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 32px; --space-7: 48px; --space-8: 96px;
  --radius-xs: 6px; --radius-sm: 11px; --radius-md: 14px; --radius-lg: 20px;
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --control-sm: 36px; --control-md: 42px; --row-height: 62px; --sidebar-width: 232px;
}

/* Tema claro (documentos): aplicar en un contenedor */
.as-light {
  --surface-0: #f2f3f4; --surface-1: #ffffff; --surface-2: #eceeef; --surface-3: #e0e2e4;
  --line: #dcdee0; --line-strong: #7a7f84;
  --ink: #111213; --ink-muted: #4f5358; --ink-faint: #5f6368;
  --primary: #111213; --primary-hover: #2a2c2f; --on-primary: #ffffff;
  --signal: #00756a; --signal-strong: #005e55; --signal-soft: #e0f6f3; --on-signal: #ffffff;
  --steel: #3a6887; --steel-soft: #e1ebf2;
  --ok: #0b7a1f; --ok-soft: #dcf3e1; --warn: #9a6200; --warn-soft: #fdf1cf;
  --danger: #d1061f; --danger-soft: #fde2e6; --info: #2f45d6; --info-soft: #e2e6ff;
  --esp-i: #5a17e0; --esp-p: #c2255c; --esp-e: #c2410c; --esp-m: #7a5a2b;
  --link: #2f45d6; --focus: #2f45d6; --shadow-overlay: 0 12px 32px rgba(17, 18, 19, 0.16);
  color: var(--ink);
}

.as-overline { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.as-h1 { margin: 0; font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.01em; }
.as-h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 620; }
.as-h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 650; }
.as-display { margin: 0; font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.as-body-lg { font-size: 17px; line-height: 26px; }
.as-caption { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
a.as-btn { text-decoration: none; }

/* Logo: 02 Rampa (tres listones que suben, verde agua) + nombre en Michroma */
.as-logo-mark { background: url("assure-mark.svg") center / contain no-repeat; }
.as-logo-mark path { visibility: hidden; }
.as-light .as-logo-mark { background-image: url("assure-mark-light.svg"); }
.as-logo-mark:has(path[fill="currentColor"]) { background-image: url("assure-mark-mono.svg"); }
.as-logo-word { font-family: var(--font-brand); font-weight: 400; font-variation-settings: normal; letter-spacing: 0.06em; }