/* PMthropic PMP Readiness — hoja de estilo de la aplicación.
 *
 * Los tokens salen de docs/spec/tokens.json y están medidos contra los suelos
 * del contrato: texto >= 5.40:1, microetiqueta >= 4.90:1, no-texto >= 3.00:1.
 * Ningún componente escribe un color: todos leen de las variables.
 *
 * Reglas de forma que no se negocian (contrato §1.1): radio 0 en toda la
 * interfaz, separación por reglas de 1 px a sangre, sin sombras, y el naranja
 * nunca significa estado.
 */
/* ═══ Tokens · generados desde tokens.json y medidos contra los suelos del
   contrato: texto ≥5.40:1, microetiqueta ≥4.90:1, no-texto ≥3.00:1 ═══ */
:root{
  --bg-page:#03030B; --bg-surface:#07071A; --bg-raised:#0D0D24; --bg-sheet:#13132E;
  --bg-case:#141232; --bg-selected:#14113A; --bg-correct:#08120F; --bg-incorrect:#140A0E;
  --bg-amber:#1A1206; --bg-flag:#1C1408; --bg-track:#22223C;
  --ink-title:#FFFFFF; --ink-body:#E9E9F4; --ink-support:#CBCBDC; --ink-secondary:#B6B6CC;
  --ink-muted:#9C9CB8; --ink-faint:#8E8EA8; --ink-micro:#8788A0;
  --ink-on-color:#FFFFFF; --ink-on-accent:#0A0A16;
  --accion:#E8620F; --accion-hover:#FF7A2B; --acento:#FF8A3D; --acento-ink:#FFB37A;
  --dato:#3FC3E8; --sistema:#9A8CF0;
  --dom-personas:#AA307A; --dom-proceso:#0D6A83; --dom-entorno:#1D703F;
  --ok:#54C98A; --mal:#FF7B70; --mal-ink:#FF9A91; --atencion:#F0B429;
  --linea:rgba(255,255,255,.11); --linea-fuerte:rgba(255,255,255,.15);
  --linea-marca:rgba(255,255,255,.32);
  --foco:#29B3DE; --foco-halo:#07071A;
  --display:'Sora',system-ui,sans-serif; --texto:'Manrope',system-ui,sans-serif;
}
/* Si el visor está en claro y no ha pedido oscuro explícitamente, se aclara el
   conjunto entero. Nunca a medias: un token suelto deja texto de un tema sobre
   el fondo del otro. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg-page:#E7E5DE; --bg-surface:#FFFFFF; --bg-raised:#F7F6F1; --bg-sheet:#F5F4EF;
    --bg-case:#F1EFFA; --bg-selected:#EDEBFA; --bg-correct:#EAF5EE; --bg-incorrect:#FCEEEC;
    --bg-amber:#FDF5E7; --bg-flag:#FDF3E2; --bg-track:#D9D7CF;
    --ink-title:#17172E; --ink-body:#23233C; --ink-support:#3A3A52; --ink-secondary:#43435C;
    --ink-muted:#55556E; --ink-faint:#63637A; --ink-micro:#6A6A80;
    --ink-on-color:#FFFFFF; --ink-on-accent:#FFFFFF;
    --accion:#4C3D9E; --accion-hover:#3F3287; --acento:#C2410C; --acento-ink:#9A4708;
    --dato:#0E6E88; --sistema:#5B49B5;
    --dom-personas:#9B2C6F; --dom-proceso:#0E6E88; --dom-entorno:#1F7A45;
    --ok:#1F7A45; --mal:#B3261E; --mal-ink:#A3201A; --atencion:#9A5B08;
    --linea:rgba(0,0,0,.10); --linea-fuerte:rgba(0,0,0,.13); --linea-marca:rgba(0,0,0,.26);
    --foco-halo:#FFFFFF;
  }
}
:root[data-theme="light"]{
  --bg-page:#E7E5DE; --bg-surface:#FFFFFF; --bg-raised:#F7F6F1; --bg-sheet:#F5F4EF;
  --bg-case:#F1EFFA; --bg-selected:#EDEBFA; --bg-correct:#EAF5EE; --bg-incorrect:#FCEEEC;
  --bg-amber:#FDF5E7; --bg-flag:#FDF3E2; --bg-track:#D9D7CF;
  --ink-title:#17172E; --ink-body:#23233C; --ink-support:#3A3A52; --ink-secondary:#43435C;
  --ink-muted:#55556E; --ink-faint:#63637A; --ink-micro:#6A6A80;
  --ink-on-color:#FFFFFF; --ink-on-accent:#FFFFFF;
  --accion:#4C3D9E; --accion-hover:#3F3287; --acento:#C2410C; --acento-ink:#9A4708;
  --dato:#0E6E88; --sistema:#5B49B5;
  --dom-personas:#9B2C6F; --dom-proceso:#0E6E88; --dom-entorno:#1F7A45;
  --ok:#1F7A45; --mal:#B3261E; --mal-ink:#A3201A; --atencion:#9A5B08;
  --linea:rgba(0,0,0,.10); --linea-fuerte:rgba(0,0,0,.13); --linea-marca:rgba(0,0,0,.26);
  --foco-halo:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--ink-body);
  font-family:var(--texto);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* Radio 0 en toda la interfaz. Es regla del contrato, no gusto. */
button,input,table,div,span{border-radius:0}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.aviso-foco{box-shadow:0 0 0 2px var(--foco-halo)}

.envoltura{max-width:1180px;margin:0 auto;background:var(--bg-surface);min-height:100vh;
  border-left:1px solid var(--linea);border-right:1px solid var(--linea)}

/* ── Cabecera ── */
.marca{display:flex;align-items:baseline;gap:9px;padding:16px 20px;border-bottom:1px solid var(--linea-fuerte)}
.marca b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink-title)}
.marca b i{font-style:normal;color:var(--acento)}
.marca span{font-family:var(--texto);font-weight:500;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-micro)}
.marca .tema{margin-left:auto}
.btn-tema{background:none;border:1px solid var(--linea-marca);color:var(--ink-secondary);
  font:inherit;font-size:11px;padding:6px 11px;cursor:pointer;min-height:32px}
.btn-tema:hover{color:var(--ink-title);border-color:var(--ink-faint)}

/* ── Barra de etapa: derivada de la pantalla, nunca fija ── */
.etapas{display:flex;border-bottom:1px solid var(--linea-fuerte)}
.etapas span{flex:1;font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-micro);padding:9px 8px;text-align:center;
  border-right:1px solid var(--linea)}
.etapas span:last-child{border-right:0}
.etapas span[aria-current="step"]{color:var(--ink-on-accent);background:var(--accion)}

/* ── Sesión ── */
.sesion{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--linea)}
.ordinal{font-family:var(--display);font-weight:200;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-title)}
.ordinal small{font-size:13px;color:var(--ink-micro);font-weight:400}
.segmentos{display:flex;gap:3px;flex:1}
.seg{height:3px;flex:1;background:var(--bg-track)}
.seg.hecho{background:var(--accion)}
.seg.actual{background:var(--acento)}
.salir{margin-left:auto;min-height:44px;min-width:44px;display:flex;align-items:center;
  background:none;border:0;color:var(--ink-muted);font:inherit;font-size:12px;cursor:pointer}

/* ── Banda de dominio: SOLO en práctica ── */
.dominio{display:flex;align-items:center;gap:10px;padding:7px 20px}
.dominio b{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-on-color)}
.dominio i{font-style:normal;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.82)}
.dominio.personas{background:var(--dom-personas)}
.dominio.proceso{background:var(--dom-proceso)}
.dominio.entorno{background:var(--dom-entorno)}

/* ── Estímulo: pestañas persistentes en móvil ── */
.estimulo{border-bottom:1px solid var(--linea-fuerte);background:var(--bg-case)}
.pestanas{display:flex;border-bottom:1px solid var(--linea)}
.pestanas button{flex:1;background:none;border:0;border-right:1px solid var(--linea);
  color:var(--ink-muted);font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:0 10px;min-height:44px;cursor:pointer}
.pestanas button:last-child{border-right:0}
.pestanas button[aria-selected="true"]{color:var(--ink-title);box-shadow:inset 0 -3px 0 var(--acento)}
.panel{padding:14px 20px;font-size:14px;color:var(--ink-support);max-height:290px;overflow:auto}
.panel p{margin:0 0 9px}
.tabla-envoltura{overflow-x:auto;margin:0 -20px;padding:0 20px}
table{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
th{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-on-color);background:var(--dom-proceso);padding:8px 10px;text-align:left;white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--linea);color:var(--ink-support);white-space:nowrap}
td:first-child{color:var(--ink-body);font-weight:500;position:sticky;left:0;background:var(--bg-case)}
.alt{font-size:11.5px;color:var(--ink-micro);padding:10px 20px 14px;border-top:1px solid var(--linea)}

/* ── Enunciado y pregunta ── */
.enunciado{padding:18px 20px 4px;max-width:66ch}
.enunciado p{margin:0 0 11px;color:var(--ink-body)}
.pregunta{padding:6px 20px 16px;max-width:66ch;font-family:var(--display);font-size:17px;
  font-weight:600;line-height:1.35;color:var(--ink-title);text-wrap:balance}
.cuantas{padding:0 20px 12px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-micro);font-family:var(--display);font-weight:600}

/* ── Opciones: filas a sangre, 3 px de canto al seleccionar ── */
.opciones{border-top:1px solid var(--linea-fuerte)}
.opcion{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:62px;padding:13px 20px;
  background:none;border:0;border-bottom:1px solid var(--linea);border-left:3px solid transparent;
  text-align:left;font:inherit;color:var(--ink-body);cursor:pointer}
.opcion:hover:not([disabled]){background:var(--bg-raised)}
.opcion[aria-pressed="true"]{background:var(--bg-selected);border-left-color:var(--accion)}
.opcion .letra{flex:none;width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--linea-marca);font-family:var(--display);font-size:12px;font-weight:700;
  color:var(--ink-secondary)}
.opcion[aria-pressed="true"] .letra{background:var(--accion);border-color:var(--accion);
  color:var(--ink-on-accent)}
.opcion .txt{flex:1;padding-top:3px}
.opcion.tachada .txt{text-decoration:line-through;color:var(--ink-micro)}
.opcion[disabled]{cursor:default}
.tachar{flex:none;width:44px;min-height:44px;display:grid;place-items:center;background:none;
  border:0;border-left:1px solid var(--linea);color:var(--ink-micro);font-size:15px;cursor:pointer}
.tachar:hover{color:var(--ink-title)}
/* Tras confirmar, la clave se marca. Antes, jamás. */
.opcion.es-clave{background:var(--bg-correct);border-left-color:var(--ok)}
.opcion.elegida-mal{background:var(--bg-incorrect);border-left-color:var(--mal)}

/* ── Barra de acción ── */
.acciones{display:flex;gap:1px;background:var(--linea-fuerte);border-top:1px solid var(--linea-fuerte);
  position:sticky;bottom:0}
.acciones button{background:var(--bg-raised);border:0;color:var(--ink-secondary);font:inherit;
  min-height:54px;padding:0 16px;cursor:pointer;font-size:13px}
.acciones .primario{flex:1;background:var(--accion);color:var(--ink-on-accent);
  font-family:var(--display);font-weight:700;font-size:14px}
.acciones .primario:hover{background:var(--accion-hover)}
.acciones .primario[disabled]{background:var(--bg-track);color:var(--ink-micro);cursor:default}

/* ── Confianza ── */
.confianza{border-top:1px solid var(--linea-fuerte);background:var(--bg-case);padding:15px 20px}
.confianza h3{margin:0 0 4px;font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink-title)}
.confianza .pie{margin:0 0 12px;font-size:12px;color:var(--ink-micro)}
.confianza .fila{display:flex;gap:1px;background:var(--linea-fuerte)}
.confianza button{flex:1;min-height:46px;background:var(--bg-surface);border:0;color:var(--ink-body);
  font:inherit;font-size:13px;cursor:pointer}
.confianza button:hover{background:var(--bg-raised);color:var(--ink-title)}

/* ── Veredicto: icono + palabra + canto de 4 px ── */
.veredicto{border-left:4px solid;padding:15px 20px;border-bottom:1px solid var(--linea-fuerte)}
.veredicto.bien{background:var(--bg-correct);border-left-color:var(--ok)}
.veredicto.mal{background:var(--bg-incorrect);border-left-color:var(--mal)}
.veredicto .cabeza{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.veredicto .cabeza b{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase}
.veredicto.bien .cabeza b{color:var(--ok)} .veredicto.mal .cabeza b{color:var(--mal-ink)}
.veredicto p{margin:0;color:var(--ink-body);font-size:14px;max-width:64ch}
.meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-family:var(--display);font-size:9.5px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-micro)}
.meta em{font-style:normal;color:var(--ink-secondary)}

/* ── Explicación por capas ── */
.capa{border-bottom:1px solid var(--linea)}
.capa>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:14px 20px;min-height:52px;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-secondary)}
.capa>summary::-webkit-details-marker{display:none}
.capa>summary:hover{color:var(--ink-title)}
.capa .num{font-weight:200;font-size:19px;color:var(--ink-micro);font-variant-numeric:tabular-nums}
.capa>summary .mas{margin-left:auto;font-size:17px;color:var(--ink-micro)}
.capa[open]>summary .mas{transform:rotate(45deg)}
.cuerpo{padding:0 20px 18px}
.pista{background:var(--bg-amber);border-left:3px solid var(--acento);padding:12px 14px;margin-bottom:15px}
.pista b{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acento-ink);margin-bottom:5px}
.pista span{font-size:13.5px;color:var(--ink-body)}
ol.ruta{margin:0 0 16px;padding:0;list-style:none;counter-reset:p}
ol.ruta li{counter-increment:p;display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea);
  font-size:13.5px;color:var(--ink-support)}
ol.ruta li::before{content:counter(p,decimal-leading-zero);font-family:var(--display);font-weight:200;
  font-size:17px;color:var(--ink-micro);flex:none;font-variant-numeric:tabular-nums}
.porop{border-top:1px solid var(--linea)}
.porop details{border-bottom:1px solid var(--linea)}
.porop summary{list-style:none;cursor:pointer;display:flex;gap:11px;align-items:flex-start;
  padding:12px 0;min-height:44px;font-size:13.5px}
.porop summary::-webkit-details-marker{display:none}
.porop .marca-op{flex:none;width:22px;height:22px;display:grid;place-items:center;font-size:11px;
  font-family:var(--display);font-weight:700;border:1px solid var(--linea-marca);color:var(--ink-micro)}
.porop .clave .marca-op{background:var(--ok);border-color:var(--ok);color:#04140B}
.porop .tuya .marca-op{background:var(--mal);border-color:var(--mal);color:#1A0604}
.porop .cont{padding:0 0 14px 33px;font-size:13.5px;color:var(--ink-support)}
.porop .cont p{margin:0 0 9px}
.cuando{background:var(--bg-case);border-left:3px solid var(--sistema);padding:10px 13px;margin-top:9px}
.cuando b{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--sistema);margin-bottom:4px}
.codigo{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-micro);margin-top:8px;display:block}
.regla{background:var(--bg-raised);border-left:3px solid var(--dato);padding:12px 14px;margin-top:16px}
.regla b{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dato);margin-bottom:5px}
.regla span{font-size:13.5px;color:var(--ink-body)}

/* ── Navegación entre ítems de la muestra ── */
.muestras{display:flex;gap:1px;background:var(--linea-fuerte);border-top:1px solid var(--linea-fuerte)}
.muestras button{flex:1;background:var(--bg-raised);border:0;color:var(--ink-muted);font:inherit;
  min-height:50px;cursor:pointer;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.08em}
.muestras button[aria-current="true"]{background:var(--bg-selected);color:var(--ink-title);
  box-shadow:inset 0 -3px 0 var(--acento)}
.nota{padding:16px 20px 26px;border-top:1px solid var(--linea-fuerte);background:var(--bg-page)}
.nota p{margin:0 0 8px;font-size:12px;color:var(--ink-micro);max-width:70ch}
.nota b{color:var(--ink-secondary);font-weight:700}

@media (min-width:860px){
  .cuerpo-doble{display:grid;grid-template-columns:46% 54%}
  .cuerpo-doble>.estimulo{border-right:1px solid var(--linea-fuerte);border-bottom:0}
  .panel{max-height:none}
  .enunciado,.pregunta{padding-left:24px;padding-right:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Acceso ─────────────────────────────────────────────────────────────── */
.acceso{max-width:420px;margin:0 auto;padding:56px 20px}
.acceso h1{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink-title);
  margin:0 0 6px;letter-spacing:-.01em}
.acceso p.sub{margin:0 0 28px;color:var(--ink-muted);font-size:14px}
.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-micro);margin-bottom:7px}
.campo input{width:100%;min-height:48px;padding:0 13px;background:var(--bg-raised);
  border:1px solid var(--linea-marca);color:var(--ink-body);font:inherit;font-size:15px}
.campo input:focus{border-color:var(--foco);outline:2px solid var(--foco);outline-offset:1px}
.error{background:var(--bg-incorrect);border-left:3px solid var(--mal);padding:11px 14px;
  margin-bottom:18px;font-size:13.5px;color:var(--ink-body)}
.boton{width:100%;min-height:52px;background:var(--accion);color:var(--ink-on-accent);
  border:0;font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer}
.boton:hover{background:var(--accion-hover)}

/* ── Home ───────────────────────────────────────────────────────────────── */
.region{border-bottom:1px solid var(--linea-fuerte);padding:20px}
.region>.num{font-family:var(--display);font-weight:200;font-size:19px;color:var(--ink-micro);
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.region h2{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink-title);
  margin:0 0 10px;letter-spacing:-.01em}
.region p{margin:0 0 12px;color:var(--ink-support);font-size:14px;max-width:62ch}
.cifra{font-family:var(--display);font-weight:200;font-size:56px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-title)}
.banda-etq{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-on-color);padding:5px 10px}
.banda-LISTO{background:var(--ok);color:#04140B}
.banda-CERCA{background:var(--atencion);color:#150E01}
.banda-EN_DESARROLLO{background:#5E7490;color:#fff}
.banda-BASE_INSUFICIENTE{background:#4A4A60;color:#fff}
.lista-falta{margin:10px 0 0;padding:0;list-style:none}
.lista-falta li{padding:9px 0;border-top:1px solid var(--linea);font-size:13.5px;
  color:var(--ink-support);display:flex;gap:10px}
.lista-falta li::before{content:"·";color:var(--acento);font-weight:700}
.aviso-interno{background:var(--bg-amber);border-left:3px solid var(--acento);padding:12px 14px;
  font-size:12.5px;color:var(--ink-support);margin:0 20px 20px}
.cta{display:block;text-align:center;text-decoration:none;background:var(--accion);
  color:var(--ink-on-accent);font-family:var(--display);font-weight:700;font-size:15px;
  min-height:56px;line-height:56px}
.cta:hover{background:var(--accion-hover)}
.salir-form{display:inline}
.salir-form button{background:none;border:0;color:var(--ink-muted);font:inherit;font-size:12px;
  cursor:pointer;min-height:44px;padding:0 8px}