/* Simulador Examen de Conducir Clase B — POSCAM
 *
 * Superficie de tarea: el alumno tiene 45 minutos y lee bajo presión, muchas
 * veces en la calle y con el celular en una mano. Manda la legibilidad.
 *
 * Tipografía: una sola familia — Atkinson Hyperlegible Next, diseñada por el
 * Braille Institute para máxima legibilidad: letras que no se confunden entre
 * sí (I/l/1, 0/O), aperturas amplias y altura de x grande.
 * Tema: claro, siempre. No hay variante oscura.
 * Contraste: todo el texto sobre superficie clara pasa 4.5:1.
 */

:root {
  color-scheme: light;

  /* ── tinta y superficies ─────────────────────────────────────── */
  --tinta:        #0d1526;   /* texto principal        18.4:1 sobre blanco */
  --tinta-2:      #33405a;   /* subtítulos y datos      9.3:1 */
  --gris:         #5c6a83;   /* metadata y ayudas       5.2:1 */
  --bg:           #f6f8fc;
  --card:         #ffffff;
  --borde:        #e2e8f3;
  --borde-fuerte: #c9d3e6;

  /* ── acento: relleno sólido vs. el mismo color usado como texto ─ */
  --verde:        #00875f;   /* fondo de botón, blanco encima 4.5:1 */
  --verde-tinta:  #037d59;   /* el verde como texto, 4.6:1 incluso sobre --verde-suave */
  --verde-suave:  #e7f5ef;
  --rojo:         #d8273f;
  --rojo-tinta:   #c52036;   /* 5.1:1 sobre --rojo-suave */
  --rojo-suave:   #fdedef;
  --ambar-tinta:  #9a5c04;
  --ambar-suave:  #fdf3e3;

  --sombra:    0 1px 2px rgba(13, 21, 38, .05), 0 6px 16px -6px rgba(13, 21, 38, .10);
  --sombra-alta: 0 2px 4px rgba(13, 21, 38, .06), 0 18px 40px -12px rgba(13, 21, 38, .22);

  /* ── escala tipográfica (roles, no valores sueltos) ──────────── */
  --t-micro:   .75rem;      /* 12px — leyendas */
  --t-meta:    .8125rem;    /* 13px — metadata */
  --t-label:   .875rem;     /* 14px — etiquetas de campo */
  --t-body:    1rem;        /* 16px — alternativas y prosa */
  --t-lead:    1.0625rem;   /* 17px — bajadas */
  --t-preg:    1.25rem;     /* 20px — el enunciado */
  --t-h2:      1.3125rem;   /* 21px — títulos de pantalla */
  --t-cifra:   1.75rem;
  --t-puntaje: 3rem;
  --t-display: clamp(2.125rem, 8vw, 3rem);

  --lh-display: 1.08;
  --lh-titulo:  1.25;
  --lh-preg:    1.38;
  --lh-body:    1.55;
  --lh-meta:    1.4;

  /* Atkinson es ancha y está dibujada para leerse con espaciado normal:
     solo el display pide un pelo de tracking negativo. */
  --tr-display: -.018em;
  --tr-titulo:  -.01em;
  --tr-preg:    0;
  --tr-etiqueta: .05em;

  --medida: 60ch;           /* la cara es ancha: menos ch para la misma medida óptica */

  --radio: 16px;
  --tap: 48px;              /* alto mínimo de todo lo tocable */

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--tinta);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 { line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); font-weight: 700; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

/* toda cifra que se lee de un vistazo o cambia en vivo */
.cifra b, .reloj, .marcador, .puntaje-grande, .insignia, .rejilla button, .chip-num, .item-cabecera .n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.icono { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }
.icono-sm { width: 16px; height: 16px; }
.icono-lg { width: 26px; height: 26px; }

.envoltorio { max-width: 680px; margin: 0 auto; padding: 0 16px; }

/* ─────────────────────────────────────────────────── pantallas */
.pantalla { display: none; }
.pantalla.activa { display: block; animation: entrar .22s var(--ease-out); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────── ingreso */
.hero {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  gap: 20px; max-width: 680px; margin: 0 auto;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  color: var(--gris); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-etiqueta); text-transform: uppercase;
}
.marca span { width: 26px; height: 2px; background: var(--verde); border-radius: 2px; }
.hero h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.hero h1 em { font-style: normal; color: var(--verde-tinta); }
.bajada { color: var(--gris); font-size: var(--t-lead); max-width: var(--medida); }

.datos-clave { display: flex; flex-wrap: wrap; gap: 8px; }
.dato {
  background: var(--card); border: 1px solid var(--borde); border-radius: 999px;
  padding: 7px 14px; font-size: var(--t-meta); color: var(--gris); box-shadow: var(--sombra);
}
.dato b { color: var(--tinta); font-weight: 600; }

.tarjeta {
  background: var(--card); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra);
}

.campo { margin-bottom: 14px; }
.campo label {
  display: block; font-size: var(--t-label); font-weight: 600;
  margin-bottom: 6px; color: var(--tinta-2);
}
.campo input {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-size: 16px;                      /* evita el zoom automático de iOS */
  background: var(--bg); border: 1.5px solid var(--borde-fuerte);
  border-radius: 12px; transition: border-color .16s var(--ease-out);
}
.campo input::placeholder { color: var(--gris); opacity: 1; }
.campo input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.campo .ayuda { font-size: var(--t-meta); color: var(--gris); margin-top: 6px; line-height: var(--lh-meta); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 14px 20px;
  border-radius: 12px; font-weight: 600; font-size: var(--t-body);
  background: var(--verde); color: #fff;
  transition: transform .16s var(--ease-out), opacity .16s var(--ease-out), background-color .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secundario { background: var(--card); color: var(--tinta); border: 1.5px solid var(--borde-fuerte); }
.btn.peligro { background: var(--rojo); }

.enlaces-pie { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.enlaces-pie button {
  display: flex; align-items: center; gap: 7px;
  color: var(--tinta-2); font-size: var(--t-label); font-weight: 500;
  padding: 12px 14px; min-height: var(--tap); border-radius: 10px;
  transition: background-color .16s var(--ease-out);
}
.enlaces-pie button:hover { background: var(--card); }
.enlaces-pie button .icono { color: var(--gris); }

/* ─────────────────────────────────────────────────── cabecera del examen */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  padding-top: env(safe-area-inset-top);
}
.cabecera-fila {
  display: flex; align-items: center; gap: 10px;
  max-width: 680px; margin: 0 auto; padding: 10px 16px;
}
.reloj {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: var(--t-body); color: var(--tinta);
  background: var(--bg); border-radius: 10px; padding: 8px 12px; border: 1px solid var(--borde);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.reloj .icono { color: var(--gris); }
.reloj span { min-width: 5ch; text-align: center; }   /* el conteo no salta al cambiar de cifra */
.reloj.alerta { color: var(--rojo-tinta); border-color: var(--rojo); }
.reloj.alerta .icono { color: var(--rojo-tinta); }
.marcador { margin-left: auto; font-size: var(--t-meta); color: var(--gris); font-weight: 600; }
.btn-mapa {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--borde);
  font-weight: 600; font-size: var(--t-label); color: var(--tinta-2);
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}
.btn-mapa:active { transform: scale(.97); }
.barra { height: 3px; background: var(--borde); overflow: hidden; }
.barra i {
  display: block; height: 100%; background: var(--verde);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--ease-out);
}

/* ─────────────────────────────────────────────────── pregunta */
.zona-pregunta { padding: 20px 16px 124px; max-width: 680px; margin: 0 auto; }

.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: var(--card); color: var(--gris); border: 1px solid var(--borde);
}
.etiqueta.doble { background: var(--ambar-suave); color: var(--ambar-tinta); border-color: transparent; }
.etiqueta.multi { background: var(--verde-suave); color: var(--verde-tinta); border-color: transparent; }

.enunciado {
  font-size: var(--t-preg); font-weight: 600; line-height: var(--lh-preg);
  letter-spacing: var(--tr-preg); margin-bottom: 18px; max-width: var(--medida);
}

.ilustracion {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--borde);
  margin-bottom: 18px; background: #fff;
}
.ilustracion img { width: 100%; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.galeria img { border-radius: 12px; border: 1px solid var(--borde); background: #fff; }

/* ── alternativas ── */
.alternativas { display: flex; flex-direction: column; gap: 10px; }
.alt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  min-height: var(--tap); padding: 14px; text-align: left;
  font-size: var(--t-body); line-height: var(--lh-body);
  background: var(--card); border: 1.5px solid var(--borde); border-radius: 14px;
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), background-color .16s var(--ease-out);
}
.alt:active { transform: scale(.985); }
.alt .letra {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 600; font-size: var(--t-label);
  background: var(--bg); color: var(--gris); border: 1px solid var(--borde);
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.alt .cuerpo { flex: 1; min-width: 0; max-width: var(--medida); }
.alt.marcada { border-color: var(--verde); background: var(--verde-suave); }
.alt.marcada .letra { background: var(--verde); color: #fff; border-color: var(--verde); }

.alternativas.imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alternativas.imagenes .alt { flex-direction: column; align-items: stretch; padding: 10px; gap: 8px; }
.alternativas.imagenes .alt img { border-radius: 8px; background: #fff; width: 100%; }
.alternativas.imagenes .letra { align-self: flex-start; }

/* ── combinar señal con número (pregunta 242) ── */
.match-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px; border: 1.5px solid var(--borde); border-radius: 14px; background: var(--card);
}
.match-fila .texto { flex: 1 1 100%; font-weight: 600; font-size: var(--t-body); }
.match-fila .numeros { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-num {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  font-weight: 600; font-size: var(--t-body);
  background: var(--bg); border: 1.5px solid var(--borde); color: var(--tinta-2);
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);
}
.chip-num:active { transform: scale(.95); }
.chip-num.activo { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ─────────────────────────────────────────────────── barra inferior */
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); border-top: 1px solid var(--borde);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.pie-fila { display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0 auto; }
.pie .btn { width: auto; flex: 1; }
.pie .btn.paso {
  flex: 0 0 auto; min-width: 56px; padding: 14px;
  background: var(--bg); color: var(--tinta-2); border: 1.5px solid var(--borde-fuerte);
}
.pie .btn.paso:disabled { opacity: .35; }

/* ─────────────────────────────────────────────────── mapa de preguntas */
.hoja {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(13, 21, 38, .45); align-items: flex-end;
}
.hoja.abierta { display: flex; animation: aparecer .2s var(--ease-out); }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.hoja-panel {
  background: var(--card); width: 100%; max-height: 82dvh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--sombra-alta);
  animation: subir .26s var(--ease-out);
}
@media (min-width: 680px) {
  .hoja { align-items: center; justify-content: center; }
  .hoja-panel { max-width: 560px; border-radius: 20px; }
}
@keyframes subir { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }
.hoja-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hoja-titulo h3 { font-size: var(--t-h2); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.rejilla button {
  min-height: 46px; border-radius: 12px; font-weight: 600; font-size: var(--t-label);
  background: var(--bg); border: 1.5px solid var(--borde); color: var(--gris);
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}
.rejilla button:active { transform: scale(.95); }
.rejilla button.respondida { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-tinta); }
.rejilla button.actual { outline: 2.5px solid var(--tinta); outline-offset: 1px; }
.leyenda {
  display: flex; gap: 16px; font-size: var(--t-meta); color: var(--gris);
  margin-top: 14px; flex-wrap: wrap;
}
.leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; vertical-align: -1px; margin-right: 6px; }

/* ─────────────────────────────────────────────────── resultado */
.resultado-cabecera { text-align: center; padding: 30px 16px 20px; }
.sello {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--verde-suave); color: var(--verde-tinta);
}
.sello.no { background: var(--rojo-suave); color: var(--rojo-tinta); }
.sello svg { width: 34px; height: 34px; stroke-width: 2; }
.veredicto { font-size: var(--t-h2); margin-bottom: 6px; }
.veredicto.ok { color: var(--verde-tinta); }
.veredicto.no { color: var(--rojo-tinta); }
.puntaje-grande {
  font-size: var(--t-puntaje); font-weight: 700;
  letter-spacing: var(--tr-display); line-height: 1.05;
}
.puntaje-grande small { font-size: var(--t-body); color: var(--gris); font-weight: 500; letter-spacing: 0; }
.resultado-cabecera .bajada { margin: 10px auto 0; font-size: var(--t-meta); text-align: center; }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.cifra {
  background: var(--card); border: 1px solid var(--borde); border-radius: 14px;
  padding: 14px 8px; text-align: center;
}
.cifra b { display: block; font-size: var(--t-cifra); font-weight: 700; letter-spacing: var(--tr-titulo); }
.cifra span { font-size: var(--t-micro); color: var(--gris); }
.cifra.ok b { color: var(--verde-tinta); }
.cifra.no b { color: var(--rojo-tinta); }

.titulo-seccion { font-size: var(--t-h2); margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }

.revision { display: flex; flex-direction: column; gap: 10px; }
.item-revision {
  background: var(--card); border: 1px solid var(--borde);
  border-radius: 12px; overflow: hidden;
}
.item-cabecera {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px; text-align: left; min-height: var(--tap);
}
.item-cabecera .n { flex: none; font-weight: 600; color: var(--gris); font-size: var(--t-meta); min-width: 22px; padding-top: 2px; }
.item-cabecera .resumen { flex: 1; font-size: var(--t-label); line-height: var(--lh-meta); color: var(--tinta); }
.item-cabecera .estado { flex: none; }
.estado.ok { color: var(--verde-tinta); }
.estado.mal { color: var(--rojo-tinta); }
.estado.vacia { color: var(--gris); }
.item-detalle { display: none; padding: 4px 14px 14px 48px; }
.item-detalle.abierto { display: block; }
.linea-resp { font-size: var(--t-label); margin-top: 10px; line-height: var(--lh-body); }
.linea-resp b {
  display: block; font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: var(--tr-etiqueta); color: var(--gris); margin-bottom: 2px; font-weight: 600;
}
.aviso {
  display: flex; gap: 9px; margin-top: 12px; padding: 12px; border-radius: 10px;
  font-size: var(--t-meta); line-height: var(--lh-meta);
  background: var(--ambar-suave); color: var(--ambar-tinta);
}
.aviso .icono { margin-top: 1px; }
.aviso.explica { background: var(--verde-suave); color: var(--verde-tinta); }

/* ─────────────────────────────────────────────────── historial y estudio */
.fila-historial {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: var(--card); border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 8px;
}
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--verde); }
.punto.no { background: var(--rojo); }
.fila-historial .info { flex: 1; min-width: 0; }
.fila-historial .info b { display: block; font-size: var(--t-label); font-weight: 600; }
.fila-historial .info span { font-size: var(--t-meta); color: var(--gris); line-height: var(--lh-meta); }
.insignia {
  font-weight: 600; font-size: var(--t-label); padding: 6px 10px; border-radius: 8px;
  background: var(--verde-suave); color: var(--verde-tinta);
}
.insignia.no { background: var(--rojo-suave); color: var(--rojo-tinta); }

.vacio { text-align: center; color: var(--gris); padding: 40px 16px; font-size: var(--t-label); }

.paginador { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0 40px; }
.paginador button {
  display: grid; place-items: center;
  min-height: var(--tap); min-width: var(--tap); border-radius: 12px;
  border: 1.5px solid var(--borde-fuerte); background: var(--card); color: var(--tinta-2);
  transition: transform .16s var(--ease-out);
}
.paginador button:active { transform: scale(.95); }
.paginador button:disabled { opacity: .4; }
.paginador span { font-size: var(--t-label); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────── diálogo */
.velo {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(13, 21, 38, .5); align-items: center; justify-content: center; padding: 20px;
}
.velo.abierto { display: flex; animation: aparecer .18s var(--ease-out); }
.dialogo {
  background: var(--card); border-radius: 18px; padding: 22px; max-width: 400px; width: 100%;
  box-shadow: var(--sombra-alta);
  animation: surgir .2s var(--ease-out);
}
@keyframes surgir { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.dialogo h3 { margin-bottom: 8px; font-size: var(--t-h2); }
.dialogo p { color: var(--gris); font-size: var(--t-label); margin-bottom: 18px; line-height: var(--lh-body); }
.dialogo .acciones { display: flex; gap: 10px; }
.dialogo .acciones .btn { flex: 1; }

.cargando { text-align: center; padding: 60px 20px; color: var(--gris); font-size: var(--t-label); }
.girador {
  width: 30px; height: 30px; margin: 0 auto 14px;
  border: 3px solid var(--borde); border-top-color: var(--verde);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.encabezado-simple {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  max-width: 680px; margin: 0 auto; padding-top: calc(14px + env(safe-area-inset-top));
}
.encabezado-simple h2 { flex: 1; font-size: var(--t-h2); }
.volver {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--borde); color: var(--tinta-2);
  transition: transform .16s var(--ease-out);
}
.volver:active { transform: scale(.95); }

/* ─────────────────────────────────────────────────── escritorio */
@media (min-width: 680px) {
  :root { --t-preg: 1.375rem; --t-puntaje: 3.5rem; }
}

/* teclado */
:where(button, input, [tabindex]):focus-visible {
  outline: 2.5px solid var(--verde);
  outline-offset: 2px;
}

/* el hover solo donde hay puntero real */
@media (hover: hover) and (pointer: fine) {
  .alt:hover { border-color: var(--borde-fuerte); }
  .alt.marcada:hover { border-color: var(--verde); }
  .btn:hover:not(:disabled) { opacity: .93; }
  .rejilla button:hover, .chip-num:hover { border-color: var(--borde-fuerte); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}