/* agenteseguros.app — generado por scripts/build-tokens.cjs desde design/tokens.json. No editar a mano. */
:root {
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-sunken: #ece8de;
  --line: #d9d3c5;
  --line-strong: #8a8473;
  --ink: #10201d;
  --ink-muted: #51605c;
  --deep: #0c3a34;
  --on-deep: #f3f6ee;
  --on-deep-muted: #b4c7bf;
  --accent: #c8f04a;
  --on-accent: #10201d;
  --accent-ink: #3f6212;
  --accent-soft: #eef8cf;
  --acierto: #0a5fb4;
  --acierto-soft: #e1eefb;
  --error: #b03a0a;
  --error-soft: #fbe6dc;
  --alerta: #8a5a00;
  --alerta-soft: #fbefd0;
  --focus: #0a5fb4;
  --shadow-card: 0 1px 2px rgba(16,32,29,0.06), 0 8px 24px rgba(16,32,29,0.06);
  --shadow-pop: 0 24px 64px rgba(6,26,23,0.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1413;
    --surface: #161e1c;
    --surface-sunken: #0a0f0e;
    --line: #2a3633;
    --line-strong: #6b7a76;
    --ink: #eef2ec;
    --ink-muted: #a3b0ab;
    --deep: #17574c;
    --on-deep: #f3f6ee;
    --on-deep-muted: #c3d3cc;
    --accent: #c8f04a;
    --on-accent: #10201d;
    --accent-ink: #c8f04a;
    --accent-soft: #26310f;
    --acierto: #6cb6ff;
    --acierto-soft: #10283f;
    --error: #ff9466;
    --error-soft: #3a1c10;
    --alerta: #f5c451;
    --alerta-soft: #33290c;
    --focus: #c8f04a;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
    --shadow-pop: 0 24px 64px rgba(0,0,0,0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1413;
  --surface: #161e1c;
  --surface-sunken: #0a0f0e;
  --line: #2a3633;
  --line-strong: #6b7a76;
  --ink: #eef2ec;
  --ink-muted: #a3b0ab;
  --deep: #17574c;
  --on-deep: #f3f6ee;
  --on-deep-muted: #c3d3cc;
  --accent: #c8f04a;
  --on-accent: #10201d;
  --accent-ink: #c8f04a;
  --accent-soft: #26310f;
  --acierto: #6cb6ff;
  --acierto-soft: #10283f;
  --error: #ff9466;
  --error-soft: #3a1c10;
  --alerta: #f5c451;
  --alerta-soft: #33290c;
  --focus: #c8f04a;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-pop: 0 24px 64px rgba(0,0,0,0.55);
  color-scheme: dark;
}
/* agenteseguros.app — estilos compartidos. Todos los valores salen de tokens.json. */
.as-root{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.as-root *,.as-root *::before,.as-root *::after{box-sizing:border-box}
:where(.as-root) :where(h1,h2,h3,h4,p){margin:0}
.as-root :where(h1,h2,h3){font-family:var(--font-display);text-wrap:balance}
:where(.as-root) button{font:inherit;color:inherit}
.as-root :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.as-deep :focus-visible{outline-color:var(--accent)}
.as-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.as-label{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.as-muted{color:var(--ink-muted)}
.as-wordmark{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:inherit;text-decoration:none;white-space:nowrap}
.as-wordmark span{color:var(--accent-ink)}
.as-deep .as-wordmark span{color:var(--accent)}

/* Bloque deep */
.as-deep{background:var(--deep);color:var(--on-deep)}
.as-deep .as-muted,.as-deep .as-label{color:var(--on-deep-muted)}

/* Botón */
.as-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border:2px solid transparent;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:16px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.as-btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 -2px var(--on-accent)}
.as-btn:active{transform:translateY(0);box-shadow:none}
.as-btn--deep{background:var(--deep);color:var(--on-deep)}
.as-btn--deep:hover{box-shadow:0 6px 0 -2px var(--accent)}
.as-btn--ghost{background:transparent;color:inherit;border-color:var(--line-strong)}
.as-btn--ghost:hover{box-shadow:none;background:var(--surface-sunken)}
.as-deep .as-btn--ghost{border-color:var(--on-deep-muted)}
.as-deep .as-btn--ghost:hover{background:rgba(255,255,255,.08)}
.as-btn--sm{min-height:36px;padding:0 var(--space-4);font-size:14px}
.as-btn--lg{min-height:56px;padding:0 var(--space-8);font-size:18px}
.as-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Tarjeta */
.as-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6)}
.as-card--raised{box-shadow:var(--shadow-card)}

/* Etiqueta de estado */
.as-tag{display:inline-flex;align-items:center;gap:6px;padding:3px var(--space-2);border-radius:var(--radius-sm);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.02em;background:var(--surface-sunken);color:var(--ink);white-space:nowrap}
.as-tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink-muted);flex:none}
.as-tag--acierto{background:var(--acierto-soft);color:var(--acierto)}
.as-tag--acierto::before{background:var(--acierto);border-radius:50%}
.as-tag--error{background:var(--error-soft);color:var(--error)}
.as-tag--error::before{background:var(--error);transform:rotate(45deg)}
.as-tag--alerta{background:var(--alerta-soft);color:var(--alerta)}
.as-tag--alerta::before{background:var(--alerta);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.as-tag--objetivo{background:var(--accent-soft);color:var(--accent-ink)}
.as-tag--objetivo::before{background:var(--accent-ink)}

/* Chip de cédula */
.as-cedula{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:56px;padding:0 var(--space-3);border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-family:var(--font-mono);font-weight:700;font-size:20px;cursor:pointer;transition:background .12s,border-color .12s,transform .12s}
.as-cedula:hover{transform:translateY(-2px);border-color:var(--ink)}
.as-cedula[aria-pressed="true"],.as-cedula.is-on{background:var(--accent);border-color:var(--on-accent);color:var(--on-accent)}
.as-cedula--sm{min-width:32px;height:28px;padding:0 var(--space-2);font-size:13px;border-width:1.5px;border-radius:var(--radius-sm);cursor:default}
.as-cedula--sm:hover{transform:none}

/* Opción de respuesta */
.as-opcion{display:flex;align-items:flex-start;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);text-align:left;font-size:16px;line-height:1.45;cursor:pointer;transition:border-color .12s,background .12s}
.as-opcion:hover{border-color:var(--ink)}
.as-opcion__key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);background:var(--surface-sunken);font-family:var(--font-mono);font-weight:700;font-size:14px}
.as-opcion__txt{flex:1;padding-top:2px}
.as-opcion__estado{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding-top:5px}
.as-opcion.is-selected{border-color:var(--ink);background:var(--accent-soft)}
.as-opcion.is-selected .as-opcion__key{background:var(--accent);color:var(--on-accent)}
.as-opcion.is-correct{border-color:var(--acierto);background:var(--acierto-soft)}
.as-opcion.is-correct .as-opcion__key{background:var(--acierto);color:var(--surface)}
.as-opcion.is-correct .as-opcion__estado{color:var(--acierto)}
.as-opcion.is-wrong{border-color:var(--error);background:var(--error-soft)}
.as-opcion.is-wrong .as-opcion__key{background:var(--error);color:var(--surface)}
.as-opcion.is-wrong .as-opcion__estado{color:var(--error)}
.as-opcion.is-locked{cursor:default}
.as-opcion.is-dim{opacity:.6}

/* Barra de dominio */
.as-barra{position:relative;height:12px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:visible}
.as-barra__fill{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-pill);background:var(--acierto)}
.as-barra__fill--riesgo{background:var(--error)}
.as-barra__meta{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:2px;background:var(--ink)}

/* Mapa de errores: una celda por pregunta */
.as-mapa{display:grid;grid-template-columns:repeat(var(--cols,10),1fr);gap:var(--space-1)}
.as-celda{aspect-ratio:1;min-width:0;border-radius:var(--radius-sm);background:var(--surface-sunken);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink-muted);padding:0;cursor:pointer}
.as-celda.is-ok{background:var(--acierto);border-color:var(--acierto);color:var(--surface)}
.as-celda.is-err{background:var(--error);border-color:var(--error);color:var(--surface)}
.as-celda.is-resp{background:var(--ink-muted);border-color:var(--ink-muted);color:var(--surface)}
.as-celda.is-flag{box-shadow:inset 0 -5px 0 var(--alerta)}
.as-celda.is-now{background:var(--accent);border-color:var(--on-accent);color:var(--on-accent);border-width:2px}
.as-deep .as-celda{background:rgba(255,255,255,.07);border-color:transparent}
.as-deep .as-celda.is-ok{background:#6cb6ff}
.as-deep .as-celda.is-err{background:#ff9466}
.as-deep .as-celda.is-now{background:var(--accent)}

/* Leyenda */
.as-leyenda{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-size:13px;color:var(--ink-muted)}
.as-leyenda span{display:inline-flex;align-items:center;gap:6px}
.as-leyenda i{width:12px;height:12px;border-radius:3px;background:var(--surface-sunken);border:1.5px solid var(--line);display:inline-block}
.as-leyenda .ok{background:var(--acierto);border-color:var(--acierto)}
.as-leyenda .err{background:var(--error);border-color:var(--error)}
.as-leyenda .now{background:var(--accent);border-color:var(--on-accent)}
.as-leyenda .resp{background:var(--ink-muted);border-color:var(--ink-muted)}
.as-leyenda .flag{box-shadow:inset 0 -4px 0 var(--alerta)}
.as-card.as-deep{background:var(--deep);color:var(--on-deep);border-color:transparent}