/* Simulacro completo en línea · ProfeColimba
   Paleta de la pieza «vitrina» azul (v4): azul noche, amarillo y naranja. Sin azul agua.
   Una familia (Archivo). Ningún texto por debajo de 13 px. Claro y oscuro. */
:root {
  color-scheme: light;
  --noche: #11173F;
  --noche-2: #1C2560;
  --fondo: #F5F6FB;
  --blanco: #FFFFFF;
  --superficie: #ECEEF7;
  --tinta: #141A3A;
  --tinta-2: #4A5275;
  --hilo: #C7CCE2;
  --hilo-2: #E0E3F0;
  --azul: #3A4FB8;
  --azul-2: #2E3F99;
  --azul-tenue: rgba(58, 79, 184, .09);
  --azul-marcado: rgba(58, 79, 184, .14);
  --sobre-azul: #FFFFFF;
  --sobre-azul-2: #FFE58A;
  --amarillo: #FFC530;
  --amarillo-tenue: #FFF4D3;
  --naranja: #9E4410;
  --naranja-vivo: #E8702A;
  --naranja-tenue: rgba(232, 112, 42, .11);
  --verde: #166B42;
  --verde-tenue: rgba(27, 127, 79, .10);
  --sobre-noche: #F3F4FB;
  --sobre-noche-2: #BAC0E2;
  --sombra: 0 1px 2px rgba(17, 23, 63, .06), 0 14px 34px -18px rgba(17, 23, 63, .28);
  --radio: 16px;
  --ancho: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --noche: #11173F;
    --noche-2: #1C2560;
    --fondo: #111421;
    --blanco: #1A1E2E;
    --superficie: #242A3D;
    --tinta: #F1F3F9;
    --tinta-2: #BAC0D4;
    --hilo: #363D56;
    --hilo-2: #282E43;
    --azul: #A9B7FF;
    --azul-2: #B9C6FF;
    --azul-tenue: rgba(157, 174, 255, .13);
    --azul-marcado: rgba(157, 174, 255, .24);
    --sobre-azul: #111421;
    --sobre-azul-2: #11173F;
    --amarillo: #FFC530;
    --amarillo-tenue: rgba(255, 197, 48, .14);
    --naranja: #FFA066;
    --naranja-vivo: #FF8A45;
    --naranja-tenue: rgba(255, 138, 69, .15);
    --verde: #6BD9A2;
    --verde-tenue: rgba(107, 217, 162, .13);
    --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 34px -18px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --noche: #11173F;
  --noche-2: #1C2560;
  --fondo: #111421;
  --blanco: #1A1E2E;
  --superficie: #242A3D;
  --tinta: #F1F3F9;
  --tinta-2: #BAC0D4;
  --hilo: #363D56;
  --hilo-2: #282E43;
  --azul: #A9B7FF;
  --azul-2: #B9C6FF;
  --azul-tenue: rgba(157, 174, 255, .13);
  --azul-marcado: rgba(157, 174, 255, .24);
  --sobre-azul: #111421;
  --sobre-azul-2: #11173F;
  --amarillo: #FFC530;
  --amarillo-tenue: rgba(255, 197, 48, .14);
  --naranja: #FFA066;
  --naranja-vivo: #FF8A45;
  --naranja-tenue: rgba(255, 138, 69, .15);
  --verde: #6BD9A2;
  --verde-tenue: rgba(107, 217, 162, .13);
  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 34px -18px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); text-underline-offset: 3px; }
::selection { background: var(--amarillo); color: #11173F; }
.env { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.angosto { width: min(100% - 32px, 920px); margin-inline: auto; }
.salto { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--amarillo); color: #11173F; font-weight: 700; }
.salto:focus { top: 12px; }

/* Barra superior */
.barra { background: #2C47C9; color: #FFFFFF; border-bottom: 4px solid var(--amarillo); }
.barra .marca-sub { color: #E3E7FF; }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 68px; padding-block: 10px; }
.marca { display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1.15; min-width: 0; }
.marca-nombre { font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.marca-nombre span { color: var(--amarillo); }
.marca-sub { font-size: 13px; color: var(--sobre-noche-2); font-weight: 500; }
.barra-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.barra a.barra-enlace { color: var(--sobre-noche); font-size: 14px; font-weight: 600; }
.boton-tema { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--sobre-noche); cursor: pointer; }
.boton-tema:hover { background: rgba(255,255,255,.08); }
.boton-tema svg { width: 20px; height: 20px; }
.boton-tema .luna { display: none; }
:root[data-theme="dark"] .boton-tema .sol { display: none; }
:root[data-theme="dark"] .boton-tema .luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tema .sol { display: none; }
  :root:not([data-theme="light"]) .boton-tema .luna { display: block; }
}

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 2px solid transparent; font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.btn:focus-visible, .opcion:has(input:focus-visible), input:focus-visible, select:focus-visible, textarea:focus-visible, .celda:focus-visible, summary:focus-visible, .chip:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.btn-solido { background: var(--azul); color: #FFFFFF; }
.btn-solido:hover { background: var(--azul-2); }
:root[data-theme="dark"] .btn-solido { color: #111421; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-solido { color: #111421; } }
.btn-amarillo { background: var(--amarillo); color: #11173F; }
.btn-amarillo:hover { background: #FFD45E; }
.btn-linea { background: transparent; color: var(--tinta); border-color: var(--hilo); }
.btn-linea:hover { border-color: var(--azul); color: var(--azul); }
.btn-peligro { background: var(--naranja-vivo); color: #11173F; }
.btn-whatsapp { background: #17773F; color: #FFFFFF; }
.btn-whatsapp:hover { background: #126333; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-chico { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--azul); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.etiqueta { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.etiqueta-pago { background: var(--amarillo); color: #11173F; text-transform: uppercase; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.aviso { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--naranja-vivo); background: var(--naranja-tenue); font-size: 15px; font-weight: 600; }
.aviso-suave { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--hilo); background: var(--superficie); font-size: 15px; color: var(--tinta-2); }
.tarjeta { background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--radio); box-shadow: var(--sombra); }

/* Entrada */
.entrada { padding-block: clamp(32px, 6vw, 72px); }
.entrada-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.titulo-grande { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.07; letter-spacing: -.045em; font-weight: 800; margin-top: 16px; max-width: 17ch; }
.titulo-grande span { color: var(--azul); }
.bajada { font-size: 18px; line-height: 1.7; color: var(--tinta-2); max-width: 56ch; margin-top: 20px; }
.datos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 0; list-style: none; }
.datos li { padding: 9px 14px; border-radius: 10px; background: var(--blanco); border: 1px solid var(--hilo); font-size: 15px; color: var(--tinta-2); }
.datos strong { color: var(--tinta); }
.form-clave { padding: clamp(24px, 3vw, 34px); }
.form-clave h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.02em; }
.campo { display: grid; gap: 8px; margin-top: 20px; }
.campo label { font-size: 15px; font-weight: 700; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--hilo); background: var(--fondo); font-size: 17px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); }
.campo-clave input { font-size: 22px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.campo-clave input::placeholder { text-transform: none; letter-spacing: .02em; font-size: 17px; font-weight: 500; color: var(--tinta-2); opacity: .75; }
.form-clave .btn { width: 100%; margin-top: 18px; }
.ayuda { font-size: 14px; line-height: 1.65; color: var(--tinta-2); margin-top: 14px; }
.form-clave .aviso { margin-top: 16px; }
.compra { margin-top: 22px; padding: 22px; border-left: 5px solid var(--amarillo); }
.compra h3 { font-size: 19px; margin-top: 10px; line-height: 1.35; }
.compra p { font-size: 15px; color: var(--tinta-2); margin-top: 8px; }
.compra .btn { width: 100%; margin-top: 14px; }
.gratis { font-size: 14px; color: var(--tinta-2); margin-top: 16px; }
.pasos { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; padding: 22px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: var(--radio); font-size: 15px; color: var(--tinta-2); line-height: 1.6; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 50%; background: #FFC530; color: #11173F; font-weight: 800; font-size: 17px; box-shadow: 0 3px 0 #C98A00; }
.pasos strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; }

/* Tablero */
.tablero { padding-block: clamp(28px, 5vw, 56px); }
.saludo { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; margin-top: 10px; }
.cargo { font-size: 17px; color: var(--tinta-2); margin-top: 8px; }
.intentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.intento { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.intento-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.intento h2 { font-size: 22px; letter-spacing: -.02em; }
.estado { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--superficie); color: var(--tinta-2); }
.estado.en-curso { background: var(--amarillo-tenue); color: var(--tinta); border: 1px solid var(--amarillo); }
.estado.entregado { background: var(--verde-tenue); color: var(--verde); border: 1px solid var(--verde); }
.intento p { font-size: 15px; color: var(--tinta-2); }
.intento .cifras { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--tinta-2); }
.intento .cifras strong { font-size: 22px; color: var(--tinta); }
.intento .btn { margin-top: auto; align-self: flex-start; }
.retro-lista { margin-top: 22px; padding: 22px 24px; border-left: 5px solid var(--verde); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.retro-lista h2 { font-size: 20px; }
.retro-lista p { color: var(--tinta-2); font-size: 15px; margin-top: 4px; }
.instrucciones { margin-top: 26px; padding: 24px 26px; }
.instrucciones h2 { font-size: 20px; }
.instrucciones ul { margin-top: 12px; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-2); font-size: 15.5px; }
.instrucciones strong { color: var(--tinta); }
.pie-tablero { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 26px; font-size: 15px; color: var(--tinta-2); }

/* Examen */
.examen { padding-bottom: 60px; }
.examen-barra { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--hilo); box-shadow: 0 10px 18px -18px rgba(17, 23, 63, .5); }
.examen-barra-in { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-block: 10px; }
.examen-parte { font-size: 13px; font-weight: 700; color: var(--azul); letter-spacing: .03em; }
.examen-contador { font-size: 17px; font-weight: 800; }
.examen-info { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; color: var(--tinta-2); }
.reloj { font-variant-numeric: tabular-nums; }
.reloj strong { color: var(--tinta); }
.guardado { display: inline-flex; align-items: center; gap: 6px; }
.guardado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
.guardado.guardando::before { background: var(--amarillo); }
.guardado.sin-red::before { background: var(--naranja-vivo); }
.progreso { height: 6px; background: var(--hilo-2); }
.progreso span { display: block; height: 100%; background: var(--amarillo); transition: width .2s; }
.componente-actual { margin-top: 24px; font-size: 14px; font-weight: 700; color: var(--azul); }
.cambio-prueba { margin-top: 20px; padding: 18px 20px; border-radius: 12px; background: var(--noche); color: var(--sobre-noche); }
.cambio-prueba strong { color: var(--amarillo); }
.estimulo { margin-top: 18px; padding: clamp(20px, 3vw, 30px); }
.estimulo-intro { color: var(--azul); font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.estimulo-intro:only-child { margin-bottom: 0; }
.estimulo-control { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 14px; padding: 10px 16px; border: 1px solid var(--azul); border-radius: 8px; background: var(--azul-tenue); color: var(--azul); font-size: 14px; font-weight: 700; cursor: pointer; }
.estimulo-control::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.estimulo-control[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.estimulo-contenido { margin-top: 16px; }
.estimulo-contenido.limitado { max-height: 46vh; max-height: 46dvh; overflow: auto; overscroll-behavior-y: contain; padding-right: 6px; scrollbar-color: var(--hilo) transparent; }
.pregunta { margin-top: 26px; }
.pregunta h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 14px; }
.opciones { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.opciones legend { font-size: 14px; color: var(--tinta-2); margin-bottom: 12px; }
.opcion { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 20px; margin-bottom: 12px; background: var(--blanco); border: 1px solid var(--hilo); border-radius: 12px; cursor: pointer; }
.opcion:hover { border-color: var(--azul); }
.opcion:has(input:checked) { border: 2px solid var(--azul); padding: 19px; background: var(--azul-marcado); }
.opcion input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--azul); cursor: pointer; }
.opcion .letra { font-weight: 800; color: var(--azul); font-size: 16px; line-height: 1.75; }
.opcion .texto { font-size: 16.5px; line-height: 1.7; }
.borrar-respuesta { margin-top: 4px; font-size: 14px; }
.navegacion { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hilo); }
.navegacion .centro { display: flex; gap: 12px; flex-wrap: wrap; }

/* Texto de las preguntas */
.prosa { font-size: 17px; line-height: 1.8; overflow-wrap: break-word; }
.prosa > * + * { margin-top: 16px; }
.prosa p { max-width: 74ch; }
.prosa ul, .prosa ol { padding-left: 22px; display: grid; gap: 6px; }
.prosa blockquote { margin: 0; padding: 12px 18px; border-left: 4px solid var(--amarillo); background: var(--superficie); border-radius: 0 10px 10px 0; }
.prosa sup, .prosa sub { font-size: max(13px, .78em); }
.enunciado { font-size: 18px; }
.tabla-caja { margin-block: 18px; border: 1px solid var(--hilo); border-radius: 10px; overflow-x: auto; max-width: 100%; background: var(--blanco); scrollbar-color: var(--hilo) transparent; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prosa th, .prosa td { padding: 11px 14px; border-right: 1px solid var(--hilo-2); border-bottom: 1px solid var(--hilo-2); text-align: left; vertical-align: top; hyphens: auto; -webkit-hyphens: auto; }
.prosa thead th { background: var(--superficie); font-size: 14px; font-weight: 700; vertical-align: bottom; }
.prosa tr > :last-child { border-right: 0; }
.prosa tbody tr:last-child > * { border-bottom: 0; }
.prosa tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--superficie) 45%, transparent); }
.desliza { display: none; font-size: 13px; color: var(--tinta-2); margin-top: 6px; }
.tabla-caja.desborda + .desliza { display: block; }

/* Hoja de respuestas (panel lateral) */
.hoja { position: fixed; inset: 0; z-index: 40; display: grid; justify-items: end; background: rgba(8, 12, 38, .55); }
.hoja-panel { width: min(100%, 520px); height: 100%; overflow-y: auto; background: var(--fondo); padding: 22px 20px 30px; box-shadow: -10px 0 30px rgba(0, 0, 0, .25); }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hoja-cab h2 { font-size: 22px; }
.hoja-resumen { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.hoja h3 { font-size: 15px; margin-top: 22px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; margin-top: 10px; }
.celda { display: grid; place-items: center; min-height: 44px; border-radius: 8px; border: 1px solid var(--hilo); background: var(--blanco); font-size: 14px; font-weight: 700; color: var(--tinta-2); cursor: pointer; line-height: 1.1; padding: 2px; }
.celda small { display: block; font-size: 13px; color: var(--azul); }
.celda.respondida { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.celda.respondida small { color: var(--sobre-azul-2); }
.celda.actual { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 13px; color: var(--tinta-2); }
.leyenda span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; border: 1px solid var(--hilo); background: var(--blanco); vertical-align: -1px; }
.leyenda .l-resp::before { background: var(--azul); border-color: var(--azul); }
.hoja-entregar { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hilo); }
.hoja-entregar .btn { width: 100%; }

/* Diálogo */
.dialogo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8, 12, 38, .6); }
.dialogo-caja { width: min(100%, 480px); padding: 26px; }
.dialogo-caja h2 { font-size: 22px; line-height: 1.3; }
.dialogo-caja p { margin-top: 12px; color: var(--tinta-2); }
.dialogo-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.dialogo-acciones .btn { flex: 1 1 180px; }

/* Resultados */
.resultado { padding-block: clamp(28px, 5vw, 56px); }
.resultado h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.035em; margin-top: 10px; max-width: 24ch; }
.resultado-sub { margin-top: 10px; font-size: 16px; color: var(--tinta-2); }
.marcadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.marcador { padding: 24px; }
.marcador h2 { font-size: 15px; color: var(--tinta-2); font-weight: 700; line-height: 1.4; }
.marcador .cifra { font-size: clamp(48px, 6vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; color: var(--azul); margin-top: 8px; font-variant-numeric: tabular-nums; }
.marcador .cifra small { font-size: 24px; color: var(--tinta-2); font-weight: 600; letter-spacing: -.01em; }
.marcador p { font-size: 15px; color: var(--tinta-2); margin-top: 6px; }
.nota-calculo { margin-top: 16px; font-size: 14px; color: var(--tinta-2); line-height: 1.65; max-width: 90ch; }
.seccion { margin-top: 40px; }
.seccion > h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.seccion > p { margin-top: 10px; color: var(--tinta-2); max-width: 80ch; }
.barras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.barra-comp { padding: 20px 22px; }
.barra-comp.reforzar { border-color: var(--naranja-vivo); }
.barra-comp-cab { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.barra-comp h3 { font-size: 16.5px; line-height: 1.4; }
.barra-comp .puntos { font-size: 21px; font-weight: 800; color: var(--azul); white-space: nowrap; }
.reforzar .puntos { color: var(--naranja); }
.medidor { height: 9px; border-radius: 6px; background: var(--superficie); overflow: hidden; margin-top: 14px; }
.medidor span { display: block; height: 100%; background: var(--azul); }
.reforzar .medidor span { background: var(--naranja-vivo); }
.barra-comp .marca-reforzar { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--naranja); }
.falladas-grupo { margin-top: 18px; }
.falladas-grupo h3 { font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; list-style: none; }
.chips li { min-width: 42px; padding: 6px 9px; border-radius: 8px; background: var(--naranja-tenue); border: 1px solid var(--naranja-vivo); font-size: 14px; font-weight: 700; text-align: center; }
.chips li.vacia { background: transparent; border-style: dashed; color: var(--tinta-2); }
.siguiente-paso { margin-top: 30px; padding: 24px 26px; border-left: 5px solid var(--amarillo); }
.siguiente-paso h2 { font-size: 21px; line-height: 1.3; }
.siguiente-paso p { margin-top: 8px; color: var(--tinta-2); }
.siguiente-paso .btn { margin-top: 16px; }
.comparacion { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 15.5px; }
.comparacion th, .comparacion td { padding: 12px 14px; border-bottom: 1px solid var(--hilo-2); text-align: left; }
.comparacion thead th { font-size: 13.5px; color: var(--tinta-2); background: var(--superficie); }
.comparacion td.num, .comparacion th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comparacion .sube { color: var(--verde); font-weight: 700; }
.comparacion .baja { color: var(--naranja); font-weight: 700; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hilo); background: var(--blanco); font-size: 14px; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--noche); border-color: var(--noche); color: var(--amarillo); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: #11173F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: #11173F; } }
.filtro-etiqueta { width: 100%; font-size: 13px; font-weight: 700; color: var(--tinta-2); margin-top: 6px; }
.revision-item { margin-top: 18px; padding: clamp(20px, 3vw, 28px); }
.revision-item.fallada { border-left: 5px solid var(--naranja-vivo); }
.revision-item.acertada { border-left: 5px solid var(--verde); }
.revision-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.revision-cab h3 { font-size: 20px; }
.revision-estado { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.acertada .revision-estado { background: var(--verde-tenue); color: var(--verde); border: 1px solid var(--verde); }
.fallada .revision-estado { background: var(--naranja-tenue); color: var(--naranja); border: 1px solid var(--naranja-vivo); }
.revision-comp { font-size: 14px; color: var(--tinta-2); margin-top: 6px; }
.revision-estimulo { margin-block: 14px; padding-block: 4px 14px; border-bottom: 1px solid var(--hilo-2); }
.revision-opciones { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.revision-opciones li { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--hilo-2); font-size: 16px; line-height: 1.7; }
.revision-opciones li.correcta { background: var(--verde-tenue); border-color: var(--verde); }
.revision-opciones li.elegida:not(.correcta) { background: var(--naranja-tenue); border-color: var(--naranja-vivo); }
.marca-opcion { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; }
.correcta .marca-opcion { color: var(--verde); }
.elegida:not(.correcta) .marca-opcion { color: var(--naranja); }
.explicacion { padding-top: 18px; border-top: 1px solid var(--hilo); }
.explicacion h4 { font-size: 18px; line-height: 1.45; margin-bottom: 10px; }
.explicacion .prosa { font-size: 16.5px; }
.metadatos { margin-top: 12px; font-size: 14px; color: var(--tinta-2); line-height: 1.6; }
.metadatos strong { color: var(--tinta); }
.referencias { margin-top: 30px; padding: 0 24px; }
.referencias summary { padding-block: 18px; font-size: 18px; font-weight: 700; cursor: pointer; }
.referencias ul { list-style: none; padding: 0 0 20px; }
.referencias li { padding: 14px 0; border-top: 1px solid var(--hilo-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.mas-revision { margin-top: 20px; text-align: center; }

.pie { margin-top: 40px; padding-block: 26px; background: var(--noche); color: var(--sobre-noche-2); font-size: 14px; }
.pie a { color: var(--sobre-noche); }
.pie p + p { margin-top: 6px; }
.cargando { padding: 80px 0; text-align: center; color: var(--tinta-2); }
.cargando::before { content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid var(--hilo); border-top-color: var(--azul); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .entrada-grid { grid-template-columns: minmax(0, 1fr); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body { font-size: 15.5px; }
  .ocultar-celular { display: none; }
  .datos { display: none; }
  .barra-in { flex-wrap: nowrap; }
  .marca-nombre { font-size: 21px; }
  .barra-in { min-height: 60px; }
  .bajada { font-size: 16.5px; }
  .pasos, .intentos, .marcadores, .barras { grid-template-columns: minmax(0, 1fr); }
  .prosa { font-size: 16px; line-height: 1.75; }
  .enunciado { font-size: 17px; }
  .opcion { grid-template-columns: 20px 20px minmax(0, 1fr); gap: 9px; padding: 16px 14px; }
  .opcion:has(input:checked) { padding: 15px 13px; }
  .opcion .texto { font-size: 16px; }
  .estimulo { padding: 18px 12px; }
  .revision-item { padding: 20px 12px; }
  .tabla-caja { margin-inline: -6px; max-width: none; }
  .estimulo-contenido.limitado { margin-inline: -10px; padding-inline: 10px; }
  .prosa table { font-size: 13.5px; line-height: 1.4; }
  .prosa th, .prosa td { padding: 8px 5px; }
  .prosa thead th { font-size: 13px; }
  .examen-contador { font-size: 16px; }
  .navegacion .btn { flex: 1 1 140px; }
  .navegacion .centro { order: 3; width: 100%; }
  .navegacion .centro .btn { flex: 1 1 140px; }
  .marcador .cifra { font-size: 52px; }
  .comparacion th, .comparacion td { padding: 10px 8px; font-size: 14px; }
  .referencias { padding: 0 18px; }
}
@media (max-width: 380px) {
  .prosa th, .prosa td { padding: 7px 4px; }
  .prosa table { font-size: 13px; }
  .prosa table.tabla-ancha th, .prosa table.tabla-ancha td { padding: 6px 3px; }
  .tabla-caja:has(> .tabla-ancha) { margin-inline: -10px; }
  .marca-sub { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  .barra, .examen-barra, .navegacion, .filtros, .pie, .boton-tema, .siguiente-paso .btn { display: none !important; }
  body { background: #fff; color: #000; }
}