/* Layout: columna central de lectura (max 920px). Cabecera fija con progreso; cada pilar es un paso con tarjetas de respuesta seleccionables; resultados en secciones apiladas. */
/* Paleta y tipografía según el Manual de Imagen Corporativa de COA (DOM-001):
   azul #003B71, celeste #8CB9CB, rojo #F10826, grises #96989A y #4B4B4D, Montserrat. */
:root {
  --bg: #F4F7F9;
  --surface: #FFFFFF;
  --surface-2: #E3EDF2;
  --ink: #003B71;
  --muted: #4B4B4D;
  --line: #C9D6DD;
  --accent: #003B71;
  --accent-ink: #FFFFFF;
  --signal: #8CB9CB;
  --signal-ink: #003B71;
  --focus: #F10826;
  --ok: #1F7A4D;
  --warn: #A86B00;
  --crit: #F10826;
  --l1: #8CB9CB;
  --l2: #6A9FB8;
  --l3: #4783A4;
  --l4: #24608B;
  --l5: #003B71;
  --hit: #4B4B4D;
  --font-display: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;
  --font-mono: "Montserrat", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #021D36; --surface: #0A2F55; --surface-2: #12406E; --ink: #F2F6F9; --muted: #B4C6D2; --line: #1F4D7A;
    --accent: #8CB9CB; --accent-ink: #021D36; --signal: #8CB9CB; --signal-ink: #003B71; --focus: #FF5A6E;
    --ok: #52C28A; --warn: #E0A53A; --crit: #FF5A6E;
    --l1: #2F6992; --l2: #4A83A6; --l3: #6BA0BA; --l4: #8CB9CB; --l5: #C5DCE5;
    --hit: #D9DADB;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #021D36; --surface: #0A2F55; --surface-2: #12406E; --ink: #F2F6F9; --muted: #B4C6D2; --line: #1F4D7A;
    --accent: #8CB9CB; --accent-ink: #021D36; --signal: #8CB9CB; --signal-ink: #003B71; --focus: #FF5A6E;
    --ok: #52C28A; --warn: #E0A53A; --crit: #FF5A6E;
    --l1: #2F6992; --l2: #4A83A6; --l3: #6BA0BA; --l4: #8CB9CB; --l5: #C5DCE5;
    --hit: #D9DADB;
    color-scheme: dark;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  padding-inline: 16px; padding-block: 0 56px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.wrap { max-width: 920px; margin-inline: auto; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.01em; text-wrap: balance; line-height: 1.15; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:focus-visible, .opt:has(input:focus-visible), .chip:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* barra superior */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); margin-inline: -16px; padding: 10px 16px 12px; }
.meter { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chip { flex: 1 0 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip[aria-current="step"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.done:not([aria-current="step"]) { color: var(--ok); border-color: var(--ok); }
.chip:disabled { cursor: not-allowed; opacity: .55; }

/* opciones */
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--accent); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt .lvl { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; background: var(--surface-2); color: var(--muted); }
.opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.opt:has(input:checked) .lvl { background: var(--accent); color: var(--accent-ink); }
.opt .txt { min-width: 0; font-size: 15px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.q.missing { outline: 2px solid var(--crit); outline-offset: 6px; border-radius: 6px; }

/* resultados */
.seg { display: flex; gap: 3px; }
.seg i { flex: 1; height: 10px; background: var(--surface-2); border-radius: 2px; }
.bar { height: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 2px; }
.lv1 { background: var(--l1); } .lv2 { background: var(--l2); } .lv3 { background: var(--l3); } .lv4 { background: var(--l4); } .lv5 { background: var(--l5); }
.badge { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 16px 8px; background: var(--signal); color: var(--signal-ink); border-radius: 4px; }
.tag { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.tag.alto { border-color: var(--ok); color: var(--ok); background: transparent; }
.tag.medio { border-color: var(--warn); color: var(--warn); background: transparent; }
.tag.baja { border-color: var(--ok); color: var(--ok); background: transparent; }
.tag.media { border-color: var(--warn); color: var(--warn); background: transparent; }
.tag.alta { border-color: var(--crit); color: var(--crit); background: transparent; }
.num { font-variant-numeric: tabular-nums; }
#toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(92vw, 520px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 4px; font-size: 14px; z-index: 50; }
summary { cursor: pointer; }

@media print {
  .no-print, .topbar, #toast { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 12px; }
  :root { --bg:#fff; --surface:#fff; --surface-2:#eceff4; --ink:#003B71; --muted:#4B4B4D; --line:#bfc8d4; --l1:#8CB9CB; --l2:#6A9FB8; --l3:#4783A4; --l4:#24608B; --l5:#003B71; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .case, .pillar { break-inside: avoid; }
  details { display: block; }
  details > *:not(summary) { display: block; }
}

/* formulario de contacto */
.field { display: flex; flex-direction: column; gap: 6px; }
.field input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field select { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }

/* mensaje comercial de COA */
.coa-note { border-left: 4px solid var(--focus); background: var(--surface-2); padding: 14px 18px; border-radius: 4px; }

/* logo de COA junto al título de la portada, de 44 px de alto */
.logo-coa img { height: 44px; width: auto; }
/* En modo oscuro el logo se muestra en blanco (versión negativa), sin recuadro de fondo. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-coa img { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .logo-coa img { filter: brightness(0) invert(1); }
@media print { .logo-coa img { filter: none !important; } }

/* nivel alcanzado: segmento y etiqueta en el gris oscuro de la marca, distinto de la escala de azules */
.seg { align-items: center; }
.seg i.hit { height: 16px; background: var(--hit); }
.seg-labels { display: flex; gap: 3px; }
.seg-labels span { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.seg-labels span.hit { color: var(--hit); font-weight: 700; }

/* textos corridos justificados, con guiones para evitar huecos grandes */
p, li, .opt .txt, legend span.font-normal { text-align: justify; hyphens: auto; }

/* franja de marca */
body { border-top: 4px solid #003B71; border-image: linear-gradient(90deg, #003B71 0 85%, #F10826 85% 100%) 1; }
@media print { body { border-top: 0; } }

/* íconos de las tarjetas de la portada */
.card-icon { width: 22px; height: 22px; flex: none; color: var(--accent); }