/* ============================================================================
   app.css — Encuesta AI Ready Venezuela v2, sobre el Soutec Web Design System (public/css/soutec.css).
   Todo color, radio, sombra y fuente sale de los tokens del sistema; aquí solo viven los alias históricos
   (--page, --ink, --cyan…) que usan los scripts y los componentes propios de la encuesta.
   ============================================================================ */
:root{
  /* Alias → tokens Soutec (una sola fuente de verdad: design/soutec/tokens.json) */
  --page:var(--surface-page); --bg:var(--surface-page); --surface:var(--surface-card);
  --ink:var(--fg-1); --ink2:var(--soutec-gray-700);
  --cyan:var(--soutec-cyan); --blue:var(--soutec-blue); --blue-dark:var(--soutec-blue-dark);
  --yellow:var(--soutec-yellow); --crimson:var(--soutec-crimson); --green:var(--soutec-green);
  --hair:var(--soutec-border); --hair-soft:var(--soutec-hairline);
  --cyan-tint:var(--soutec-cyan-100); --yellow-tint:rgba(242,209,63,.18); --green-tint:rgba(71,180,90,.14); --crimson-tint:rgba(200,30,84,.08); /* tintes = color de marca con alfa sobre blanco */
  --shadow:var(--shadow-card);
  --on-accent:var(--fg-on-blue); --hero-ink:var(--fg-on-blue);
  --font-body:var(--font-base); --font-ui:var(--font-roboto);
  --r-card:var(--radius-card); --r-ctl:var(--rounded-small);
}
*{box-sizing:border-box}
body{background:var(--page); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5; margin:0; padding-block:0 48px; padding-inline:16px;}
.wrap{max-width:880px; margin-inline:auto;}
h1,h2,h3{text-wrap:balance; line-height:1.2; margin:0}
a{color:var(--blue)}
a:hover{opacity:1;color:var(--soutec-blue-700)}
button{font-family:var(--font-body); cursor:pointer}
:focus-visible{outline:2px solid transparent; outline-offset:2px; box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* ---- Etiquetas MAYÚSCULAS (eyebrow Soutec: Quattrocento 700, tracking .08em) ---- */
.lbl-up{font:700 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

/* ---- Nav ---- */
.nav{background:var(--surface); box-shadow:var(--shadow); margin-inline:-16px; padding:12px 16px;}
.nav-in{max-width:880px; margin-inline:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.logo{height:34px;width:auto;flex:none;display:block}
.logo-w{height:30px;width:auto;flex:none;display:block}
.mark{width:34px;height:34px;border-radius:var(--radius-badge);background:var(--cyan);color:#fff;display:grid;place-items:center;font:700 13px var(--font-body);letter-spacing:.5px;flex:none}
.nav-t{min-width:0;border-left:1px solid var(--hair);padding-left:14px}
.nav-t b{display:block;font:700 14px/1.2 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.nav-t span{display:block;font:400 12px/1.3 var(--font-body);color:var(--ink2);letter-spacing:.02em}
.chip{margin-left:auto;background:var(--cyan-tint);color:var(--blue-dark);border-radius:var(--radius-pill);font:700 10.5px var(--font-body);letter-spacing:.08em;padding:5px 12px;text-transform:uppercase}

/* ---- Hero: panel azul con el corte diagonal de la marca ---- */
.hero{position:relative;overflow:hidden;background:var(--blue);border-radius:var(--r-card);color:var(--hero-ink);padding:34px 28px;margin-top:22px}
.hero::after{content:"";position:absolute;inset:0;background:var(--blue-dark);clip-path:polygon(72% 0,100% 0,100% 100%,60% 100%)}
.hero>*{position:relative;z-index:1}
.eyebrow{font:700 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-blue-soft);margin-bottom:10px}
.hero h1{font:700 clamp(24px,4.5vw,34px) var(--font-body);text-transform:uppercase;letter-spacing:.01em;line-height:1.1;max-width:60ch}
.hero p{max-width:62ch;margin:12px 0 0;color:var(--fg-on-blue-soft)}
.hero.hero-state{background:var(--blue-dark)}
.hero.hero-state::after{display:none}

/* ---- Cards & sections (superficie blanca, sin borde, sombra con tinte azul) ---- */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px;margin-top:18px}
.sec-h{font:300 22px/1.2 var(--font-body);color:var(--soutec-gray-500);margin:0 0 14px}
.sec-h .kw{color:var(--cyan);font-weight:700;text-transform:uppercase}
.note{background:var(--cyan-tint);border-radius:var(--r-ctl);padding:12px 14px;margin-top:14px;font-size:15px;color:var(--blue-dark)}
.note.warn{background:var(--yellow-tint);color:var(--ink)}
.note.danger{background:var(--crimson-tint);color:var(--ink)}
.note.danger::before,.note.warn::before{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.note.danger::before{content:"Atención";color:var(--crimson)}
.note.warn::before{content:"Aviso";color:var(--blue-dark)}
.muted{color:var(--ink2);font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
label.fld{display:block;font:700 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.req{color:var(--crimson)}
input[type=text],input[type=email],input[type=password],select{width:100%;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);font:400 15px var(--font-body)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--cyan)}
input:disabled,select:disabled{opacity:.75;background:var(--page)}
input.err,select.err{border-color:var(--crimson)}
.errmsg{color:var(--crimson);font:700 12px var(--font-body);margin-top:6px;display:none}
.errmsg.show{display:block}
.hint{font:400 12.5px var(--font-body);color:var(--ink2);margin-top:6px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14.5px}
.consent input{width:18px;height:18px;accent-color:var(--blue);margin-top:3px;flex:none}
.otp-input{width:100%;max-width:280px;text-align:center;font:700 34px/1.2 var(--font-ui);letter-spacing:10px;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink)}
.otp-input.err{border-color:var(--crimson)}
.turnstile{margin-top:14px;min-height:0}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Escala ---- */
.scale{display:grid;gap:8px;margin-top:6px}
.scale-row{display:flex;gap:12px;align-items:flex-start}
.lvl{flex:none;width:30px;height:30px;border-radius:var(--radius-badge);background:var(--blue-dark);color:#fff;display:grid;place-items:center;font:700 14px var(--font-ui)}
.lvl.th{background:var(--yellow);color:var(--blue-dark)}
.scale-row p{margin:3px 0 0;font-size:15px}
.scale-row .tag{font:700 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-dark);background:var(--cyan-tint);border-radius:var(--radius-pill);padding:2px 8px;margin-left:6px}
details{margin-top:14px;border:1px solid var(--hair-soft);border-radius:var(--r-ctl);padding:10px 14px}
details summary{cursor:pointer;font:700 12.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
details dt{font-weight:700;margin-top:8px}
details dd{margin:2px 0 0;color:var(--ink2);font-size:14.5px}

/* ---- Buttons: pills Soutec (Quattrocento 700, MAYÚSCULAS, tracking .06em) ---- */
.btn{display:inline-block;border-radius:var(--radius-pill);border:2px solid transparent;font:700 13px var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:12px 26px;transition:filter var(--dur-base) var(--ease-soutec),transform var(--dur-base) var(--ease-soutec);text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(.94);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.btn-pri{background:var(--blue);color:var(--on-accent);box-shadow:var(--shadow-pill)}
.btn-cyan{background:var(--yellow);color:var(--blue-dark);box-shadow:var(--shadow-pill)}
.btn-out{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-ghost{background:transparent;border-color:var(--hair);color:var(--ink2)}
.btn-link{background:none;border:0;color:var(--blue);font:700 13px var(--font-body);letter-spacing:.02em;text-decoration:underline;padding:6px 2px;text-transform:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.btn-hero{background:transparent;border-color:rgba(255,255,255,.85);color:#fff;margin-top:18px;padding:10px 22px}
.btn-hero:hover{background:rgba(255,255,255,.14);filter:none;transform:none}
.btn-hero[aria-expanded="true"]{background:#fff;color:var(--cyan)}

/* ---- Panel de dimensiones (portada) ---- */
.dims-grid{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:28px;align-items:center}
@media (max-width:760px){.dims-grid{grid-template-columns:1fr;justify-items:center}}
.donut-box{display:grid;justify-items:center;gap:8px;width:100%}
.donut-cap{font:400 12px var(--font-ui);color:var(--ink2);text-align:center;letter-spacing:.2px}
.donut-cap i{display:inline-block;width:16px;height:3px;background:var(--crimson);border-radius:2px;vertical-align:middle;margin-right:6px}
.donut{filter:drop-shadow(0 6px 14px rgba(0,79,100,.14))}
.donut .wedge{cursor:pointer;transition:opacity .25s ease-out,transform .25s ease-out;transform-origin:160px 160px;outline:none}
.donut.dim .wedge{opacity:.32}
.donut.dim .wedge.on{opacity:1;transform:translate(var(--dx),var(--dy))}
.donut.anim .wedge{animation:wedgeIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes wedgeIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.dims-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0;width:100%}
@media (max-width:520px){.dims-tiles{grid-template-columns:1fr}}
.tile{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--hair-soft);border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;transition:border-color .2s ease-out,background .2s ease-out,transform .2s ease-out;min-width:0;outline:none}
.tile.on,.tile:focus-visible{border-color:var(--c);background:var(--cyan-tint);transform:translateX(2px)}
.tile .tw{font:700 21px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--c);min-width:48px;padding-top:3px}
.tile b{display:block;font:700 14px/1.25 var(--font-body)}
.tile p{margin:3px 0 0;font:400 12.5px/1.35 var(--font-body);color:var(--ink2)}
.crit-chip{display:inline-block;margin-left:6px;font:700 9.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--crimson);border:1px solid var(--crimson);border-radius:var(--radius-pill);padding:1px 7px;vertical-align:2px}

/* ---- Progress ---- */
.prog{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);box-shadow:var(--shadow);margin-inline:-16px;padding:10px 16px}
.prog-in{max-width:880px;margin-inline:auto}
.prog-top{display:flex;justify-content:space-between;gap:10px;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);flex-wrap:wrap}
.prog-top b{color:var(--blue)}
.prog-bar{height:6px;background:var(--hair-soft);border-radius:var(--radius-pill);margin-top:8px;overflow:hidden}
.prog-fill{height:100%;background:var(--cyan);border-radius:var(--radius-pill);width:0;transition:width .25s ease-out}
.segs{display:flex;gap:5px;margin-top:8px}
.seg{flex:1;height:7px;border-radius:var(--radius-pill);background:var(--hair-soft);border:0;padding:0;min-width:0}
.seg.done{background:var(--cyan)} .seg.cur{background:var(--blue)} .seg.part{background:var(--yellow)}
.seg:disabled{cursor:not-allowed;opacity:.5}

/* ---- Wizard ---- */
.dim-head{display:flex;gap:14px;align-items:flex-start;margin-top:22px}
.dim-badge{flex:none;width:46px;height:46px;border-radius:var(--radius-badge);background:var(--blue-dark);color:#fff;display:grid;place-items:center;font:700 16px var(--font-ui)}
.dim-head h2{font:700 21px var(--font-body);text-transform:uppercase;letter-spacing:.01em;color:var(--blue)}
.dim-head .muted{margin-top:3px}
.crit{display:inline-block;font:700 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--crimson);border:1px solid var(--crimson);border-radius:var(--radius-pill);padding:2px 10px;margin-top:6px}
.q-card{position:relative}
.q-card::after{content:"";position:absolute;top:22px;right:22px;width:22px;height:22px;border-radius:var(--radius-badge);border:1px solid var(--hair);font:700 12px/22px var(--font-ui);text-align:center;color:var(--ink2)}
.q-card.answered::after{content:"✔";background:var(--cyan);border-color:var(--cyan);color:#fff}
.q-card.missing::after{content:"!";border-color:var(--crimson);color:var(--crimson)}
.q-code{font:700 11.5px var(--font-body);letter-spacing:.08em;color:var(--cyan);text-transform:uppercase}
.q-card h3{font:700 17.5px var(--font-body);margin-top:4px;padding-right:34px}
.opts{display:grid;gap:8px;margin-top:14px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hair-soft);border-radius:var(--r-ctl);padding:11px 13px;cursor:pointer;background:var(--surface);position:relative;transition:border-color var(--dur-fast) var(--ease-soutec),background var(--dur-fast) var(--ease-soutec)}
.opt:hover{border-color:var(--cyan)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .ob{flex:none;width:28px;height:28px;border-radius:var(--radius-badge);border:2px solid var(--hair);display:grid;place-items:center;font:700 13px var(--font-ui);color:var(--ink2)}
.opt p{margin:3px 0 0;font-size:15px}
.opt.sel{border-color:var(--cyan);background:var(--cyan-tint)}
.opt.sel .ob{background:var(--blue);border-color:var(--blue);color:#fff}
.opt.ns .ob{font-size:11px}
.opt.ns{border-style:dashed}
.opt.sel.ns{border-color:var(--ink2);background:transparent}
.opt.sel.ns .ob{background:var(--ink2);border-color:var(--ink2)}
.ns-hint{font:400 12.5px var(--font-body);color:var(--ink2)}
.nav-btns{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px}
.pend{color:var(--ink2);font:700 11.5px var(--font-body);letter-spacing:.04em;align-self:center}
.pend b{color:var(--crimson)}

/* ---- Contexto ---- */
.ctx-table{width:100%;border-collapse:collapse;font-size:14.5px}
.ctx-table th,.ctx-table td{border-bottom:1px solid var(--hair-soft);padding:9px 8px;text-align:left;vertical-align:top}
.ctx-table th{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.ctx-table td.c{text-align:center}
.ctx-table input[type=radio]{accent-color:var(--blue);width:17px;height:17px}
.tbl-scroll{overflow-x:auto}

/* ---- Resultados ---- */
.score-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.score-big{font:700 64px/1 var(--font-ui);font-variant-numeric:tabular-nums}
.score-big small{font-size:22px;font-weight:400;opacity:.85}
.band-pill{display:inline-block;border-radius:var(--radius-pill);padding:7px 18px;font:700 12.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.kpi{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px}
.kpi b{display:block;font:700 24px var(--font-ui);font-variant-numeric:tabular-nums;color:var(--blue)}
.kpi span{font:700 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.bars{display:grid;gap:10px;margin-top:6px}
.bar-lbl{font:700 12px var(--font-body);letter-spacing:.02em;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font:400 12px var(--font-ui);color:var(--ink2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
table.det{width:100%;border-collapse:collapse;font-size:14.5px}
table.det th{font:700 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-align:left;border-bottom:2px solid var(--hair);padding:8px}
table.det td{border-bottom:1px solid var(--hair-soft);padding:9px 8px;vertical-align:middle}
table.det td.num{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.pill{display:inline-block;min-width:52px;text-align:center;border-radius:var(--radius-pill);padding:3px 10px;font:700 12.5px var(--font-ui);color:#fff}
.star{color:var(--crimson);font-weight:700}
.reco{border-top:4px solid var(--yellow)}
.reco h3{font:700 17px var(--font-body);color:var(--blue)}
.reco .dscore{font:700 13px var(--font-ui);color:var(--ink2);margin-top:4px}
.reco .diag{margin:10px 0 0;font-size:15px}
.reco ol,details.acc ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.reco li,details.acc li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:15px}
.hz{display:inline-block;min-width:70px;text-align:center;border-radius:var(--radius-pill);padding:3px 9px;font:700 10.5px var(--font-body);letter-spacing:.04em;background:var(--cyan-tint);color:var(--blue-dark);white-space:nowrap;margin-top:1px}
.hz.h30{background:transparent;box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.hz.h90{background:transparent;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink2)}
.foot{margin-top:30px;color:var(--ink2);font:400 12.5px var(--font-body);line-height:1.6}
.foot b{letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.exec{background:var(--cyan-tint)}
.exec p{margin:0;font-size:16px;line-height:1.55;color:var(--blue-dark)}
.band-chip{display:inline-block;border-radius:var(--radius-pill);padding:2px 10px;font:700 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:#fff;vertical-align:middle;white-space:nowrap}
details.acc{margin-top:8px;padding:8px 14px}
details.acc summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap;text-transform:none;letter-spacing:0;font:700 15px var(--font-body);color:var(--ink)}
details.acc summary .sc{font:700 13px var(--font-ui);color:var(--ink2);margin-left:auto;font-variant-numeric:tabular-nums}
details.acc .diag{margin:10px 0 0;font-size:14.5px}
details.acc li{font-size:14.5px;margin-bottom:2px}
.refs details{margin-top:8px}
.refs>details{margin-top:0}
.refs>details>summary{font-size:14px}
.refs table{width:100%;border-collapse:collapse;font-size:13.5px}
.refs th{font:700 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-align:left;border-bottom:1px solid var(--hair);padding:6px}
.refs td{border-bottom:1px solid var(--hair-soft);padding:6px;vertical-align:top}
.refs .src{margin:6px 0 0;padding-left:18px;font-size:13.5px}.refs .src li{margin-top:4px}
/* Radar, dumbbells, hoja de ruta, benchmark */
.radar-box{position:relative;display:flex;justify-content:center}
.tip{position:absolute;z-index:5;background:var(--blue-dark);color:#fff;font:400 12px/1.45 var(--font-ui);padding:8px 11px;border-radius:var(--r-ctl);box-shadow:var(--shadow-float);max-width:240px;transform:translate(-50%,-112%);white-space:nowrap;pointer-events:none}
@media (max-width:560px){.radar .rl-name{display:none}}
.legend .lg-you{background:var(--cyan)}
.legend .lg-sec,.legend .lg-th{width:18px;height:0;border-top:2px dashed var(--ink2);border-radius:0;vertical-align:3px;background:transparent}
.legend .lg-th{border-top-color:var(--yellow)}
.legend .lg-secdot{background:var(--surface);border:2px solid var(--ink2);width:10px;height:10px;border-radius:50%;box-sizing:border-box}
.db-row{display:grid;grid-template-columns:150px 1fr 118px;gap:10px;align-items:center;margin-top:6px}
@media (max-width:560px){.db-row{grid-template-columns:100px 1fr 96px}}
.db-track{position:relative;height:22px;margin:0 8px}
.db-track::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--hair);border-radius:1px}
.db-th{position:absolute;top:3px;bottom:3px;left:50%;width:2px;background:var(--yellow);transform:translateX(-50%)}
.db-link{position:absolute;top:9px;height:4px;background:var(--hair);border-radius:2px}
.db-sec{position:absolute;top:6px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--ink2);transform:translateX(-50%);box-sizing:border-box}
.db-you{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;border:2px solid var(--surface);transform:translateX(-50%);box-shadow:0 0 0 1px var(--hair);box-sizing:border-box}
.db-val{font:700 13px var(--font-ui);font-variant-numeric:tabular-nums;display:grid;line-height:1.2}
.db-delta{font:400 10.5px var(--font-ui);color:var(--ink2)}
.sep{border:0;border-top:1px solid var(--hair-soft);margin:28px 0 4px}
.roadmap table{width:100%;border-collapse:collapse;font-size:13.5px}
.roadmap th{font:700 10.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);text-align:left;border-bottom:2px solid var(--hair);padding:8px}
.roadmap td{border-bottom:1px solid var(--hair-soft);padding:9px 8px;vertical-align:top;min-width:170px}
.roadmap td:first-child{min-width:90px}
.bench-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mock-tag{display:inline-block;background:var(--yellow-tint);color:var(--blue-dark);border-radius:var(--radius-pill);font:700 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:3px 10px}
.live-tag{display:inline-block;background:var(--cyan-tint);color:var(--blue-dark);border-radius:var(--radius-pill);font:700 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:3px 10px}
.seg-ctl{display:inline-flex;border:1.5px solid var(--blue);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:4px;max-width:100%}
.seg-btn{border:0;background:transparent;color:var(--blue);font:700 11.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;cursor:pointer;white-space:nowrap}
.seg-btn.on{background:var(--blue);color:#fff}
.sub{font:700 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:18px 0 8px}
.strip-track{position:relative;height:26px;margin:0 9px}
.strip-track::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--hair)}
.strip-iqr{position:absolute;top:7px;height:12px;background:var(--hair-soft);border-radius:6px}
.strip-med{position:absolute;top:2px;bottom:2px;width:2px;background:var(--ink2);transform:translateX(-50%)}
.strip-you{position:absolute;top:4px;width:18px;height:18px;border-radius:50%;border:3px solid var(--surface);transform:translateX(-50%);box-shadow:0 0 0 1.5px var(--hair);box-sizing:border-box}
.strip-ax{display:flex;justify-content:space-between;font:400 10.5px var(--font-ui);color:var(--ink2);margin:2px 9px 0}
.bench-txt{margin:8px 0 0;font-size:15px}
.dist{display:flex;height:30px;gap:2px;margin-top:22px}
.dist-seg{position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font:700 12px var(--font-ui);border-radius:4px;min-width:3px}
.dist-seg.mine{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.dist-you{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font:700 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-style:normal}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
@media (max-width:680px){.mb-grid{grid-template-columns:1fr}}
.mb h4{margin:0 0 6px;font:700 13.5px var(--font-body);color:var(--blue)}
.mb-row{display:grid;grid-template-columns:1fr 90px 42px;gap:8px;align-items:center;font-size:13px;padding:3px 0}
.mb-row.mine .mb-lbl{font-weight:700}
.mb-track{height:8px;background:var(--hair-soft);border-radius:4px;overflow:hidden}
.mb-fill{display:block;height:100%;background:var(--ink2);border-radius:4px;opacity:.75}
.mb-row.mine .mb-fill{background:var(--cyan);opacity:1}
.mb-pct{font:500 12px var(--font-ui);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink2)}
.you-tag{display:inline-block;background:var(--blue);color:#fff;border-radius:var(--radius-pill);font:700 9.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;vertical-align:1px;margin-left:2px}
.sent-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--green-tint);border-radius:var(--r-card);padding:12px 18px;margin-top:18px;font-size:14.5px}
.sent-strip .ok{font:700 12px var(--font-body);color:var(--blue-dark);letter-spacing:.06em;text-transform:uppercase}
.sent-strip.demo{background:var(--yellow-tint)}

/* ---- Impresión (PDF desde el navegador) ---- */
@media print{
  body{background:#fff;color:#000;padding:0}
  .nav,.prog,.btn-row,.btn,.seg-ctl,.sent-strip .btn,.no-print{display:none!important}
  .card,.kpi,.hero{box-shadow:none;break-inside:avoid}
  .hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details{border:0;padding:0}
  details:not([open])>*:not(summary){display:none}
  a{text-decoration:none;color:inherit}
}