/* Simulador de examen teórico de manejo — Categoría B */

:root {
  --tinta: #3d4f5c;
  --tinta-suave: #6b7d88;
  --turquesa: #12a2a0;
  --turquesa-osc: #0d8785;
  --rojo: #e02b2b;
  --verde: #1f9d55;
  --pildora: #e4e8ea;
  --pildora-hover: #d5dbdf;
  --tarjeta: #ffffff;
  --borde: #e2e8ec;
  --sombra: 0 10px 30px rgba(45, 70, 85, .08);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: #eef3f5;
  background-image:
    radial-gradient(105% 70% at 88% 4%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(85% 60% at 6% 96%, #dff0f0 0%, rgba(223, 240, 240, 0) 62%),
    linear-gradient(160deg, #f4f8f9 0%, #e6eff2 100%);
  background-attachment: fixed;
  line-height: 1.5;
}

/* ---------- pantallas ---------- */

.pantalla { display: none; }
.pantalla.activa { display: block; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra);
  max-width: 760px;
  margin: clamp(16px, 4vw, 40px) auto;
  padding: clamp(20px, 4vw, 40px);
}

/* ---------- inicio ---------- */

.sobretitulo {
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--turquesa);
  font-weight: 700;
}

.tarjeta-inicio h1 {
  margin: 10px 0 4px;
  text-align: center;
  font-size: clamp(23px, 4.4vw, 33px);
  font-weight: 600;
  line-height: 1.2;
}

.subtitulo {
  margin: 0 0 26px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: clamp(14px, 2.4vw, 17px);
}

.reglas {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.reglas li {
  background: #f2f7f8;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}

.reglas strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  color: var(--turquesa);
  font-weight: 700;
}

.reglas span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--tinta-suave);
}

.titulo-modos {
  margin: 0 0 14px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}

.modos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.modo {
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #f7fafb;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 18px;
  transition: border-color .15s, transform .15s, background .15s;
}

.modo:hover { border-color: var(--turquesa); transform: translateY(-2px); }
.modo.destacado { background: #eefafa; border-color: #b7e4e3; }

.modo-nombre {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--turquesa-osc);
  margin-bottom: 6px;
}

.modo-desc {
  display: block;
  font-size: 13.5px;
  color: var(--tinta-suave);
  line-height: 1.45;
}

/* ---------- historial ---------- */

#historial:not(:empty) { margin-top: 32px; border-top: 1px solid var(--borde); padding-top: 20px; }
#historial h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--tinta-suave); }

.hist-lista { list-style: none; margin: 0 0 12px; padding: 0; }

.hist-lista li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid #f0f4f6;
  font-size: 13.5px;
}

.hist-fecha { color: var(--tinta-suave); min-width: 82px; }
.hist-modo { color: var(--tinta-suave); min-width: 66px; }
.hist-puntaje { font-weight: 600; margin-left: auto; }
.hist-estado.ok { color: var(--verde); font-weight: 600; }
.hist-estado.no { color: var(--rojo); font-weight: 600; }

/* ---------- barra del examen ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borde);
}

.barra-fila {
  max-width: 760px;
  margin: 0 auto;
  padding: 11px clamp(14px, 4vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}

#contador { margin-left: auto; color: var(--tinta-suave); font-weight: 500; }

#reloj {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--turquesa-osc);
  min-width: 62px;
  text-align: right;
}

#reloj.alerta { color: #d38200; }
#reloj.critico { color: var(--rojo); animation: latido 1s steps(2, end) infinite; }

@keyframes latido { 50% { opacity: .35; } }

.progreso { height: 4px; background: #e4ebee; }
.progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--turquesa);
  transition: width .25s ease;
}

/* ---------- pregunta ---------- */

#enunciado {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(18px, 3.2vw, 24px);
  font-weight: 500;
  line-height: 1.35;
}

.grafico {
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  max-width: 340px;
}

.grafico svg,
.grafico img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.opciones { display: flex; flex-direction: column; gap: 11px; }

.opcion {
  font: inherit;
  font-size: clamp(14px, 2.3vw, 16px);
  color: var(--tinta);
  text-align: center;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef2f4 0%, #dfe5e9 100%);
  transition: background .15s, border-color .15s, transform .1s;
}

.opcion:hover:not(:disabled) { background: linear-gradient(180deg, #e4eaed 0%, #d2dade 100%); }
.opcion:active:not(:disabled) { transform: scale(.995); }
.opcion:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.opcion:disabled { cursor: default; }

.opcion .letra { font-weight: 700; }

.opcion.elegida { border-color: var(--turquesa); }
.opcion.es-correcta {
  background: #e2f6ea;
  border-color: var(--verde);
  color: #14663a;
  font-weight: 600;
}
.opcion.es-incorrecta {
  background: #fdeaea;
  border-color: var(--rojo);
  color: #a11c1c;
}

/* ---------- feedback inmediato ---------- */

.feedback { margin-top: 22px; text-align: center; }

.veredicto {
  margin: 0 0 8px;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(16px, 2.8vw, 19px);
  letter-spacing: .02em;
}

.feedback.mal .veredicto { color: var(--rojo); }
.feedback.bien .veredicto { color: var(--verde); }

.correcta-es {
  margin: 0;
  font-size: clamp(14px, 2.3vw, 16px);
  line-height: 1.45;
}

.correcta-es span { color: var(--turquesa); font-weight: 600; }

/* ---------- fundamento normativo (sólo modo práctica) ---------- */

.fundamento {
  margin-top: 14px;
  padding: 11px 14px;
  background: #f4f8f9;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--turquesa);
  border-radius: 8px;
  text-align: left;
}

.fund-linea {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.fund-art { color: var(--turquesa-osc); font-weight: 700; }

.fund-vermas {
  font: inherit;
  font-size: 12.5px;
  color: var(--turquesa-osc);
  background: none;
  border: none;
  padding: 6px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

.fund-vermas:hover { color: var(--turquesa); }

.fund-texto {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-suave);
  padding-top: 8px;
  border-top: 1px dashed #d6e0e4;
}

/* ---------- modo «¿soy un Bicibandido?» ---------- */

.modos-extra { margin-top: 14px; }

.modo-bici {
  background: linear-gradient(135deg, #fff6e6 0%, #ffeccc 100%);
  border-color: #f2c98a;
}

.modo-bici:hover { border-color: #e09b2d; }
.modo-bici .modo-nombre { color: #b26a00; }

.bici-sobretitulo {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b26a00;
}

#bici-texto {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(17px, 3vw, 22px);
  font-weight: 500;
  line-height: 1.4;
}

/* Es humor: acá lo "correcto" es la actitud de Bicibandido, así que los colores
   finales van invertidos respecto de la lógica reglamentaria habitual. */
.sello.bb-perfil-0 { background: #fdeaea; color: #a11c1c; border: 2px solid var(--rojo); }
.sello.bb-perfil-1 { background: #fff5e0; color: #8a5a05; border: 2px solid #e0a13a; }
.sello.bb-perfil-2 { background: #e2f6ea; color: #14663a; border: 2px solid var(--verde); }

.bb-desglose {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bb-desglose li {
  background: #f4f8f9;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 8px;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.bb-desglose strong {
  display: block;
  font-size: 24px;
  color: var(--tinta);
  line-height: 1.1;
  margin-bottom: 4px;
}

#bici-repaso { margin-top: 32px; border-top: 1px solid var(--borde); padding-top: 22px; }
#bici-repaso h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.bb-repaso { list-style: none; margin: 0; padding: 0; }

.bb-repaso li {
  border: 1px solid var(--borde);
  border-left: 4px solid #e0a13a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fbfdfd;
}

.bb-sit { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.bb-ok { margin: 0; font-size: 13.5px; color: #14663a; font-weight: 600; }
.bb-sin-errores { text-align: center; color: var(--verde); font-weight: 600; }

/* ---------- navegación ---------- */

.navegacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.boton {
  font: inherit;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .04em;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  min-height: 48px;
  padding: 13px 40px;
  border: 2px solid var(--turquesa);
  border-radius: 10px;
  background: var(--turquesa);
  transition: background .15s, transform .1s;
}

.boton:hover { background: var(--turquesa-osc); border-color: var(--turquesa-osc); }
.boton:active { transform: scale(.985); }
.boton:focus-visible { outline: 3px solid #0d8785; outline-offset: 3px; }

.boton.secundario { background: transparent; color: var(--turquesa-osc); }
.boton.secundario:hover { background: #e6f6f6; }
.boton:disabled { opacity: .4; cursor: default; }

.boton-texto {
  font: inherit;
  font-size: 13.5px;
  color: var(--tinta-suave);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
}

.boton-texto:hover { color: var(--rojo); }

/* ---------- resultado ---------- */

.resultado-cabecera { text-align: center; }

.porcentaje {
  margin: 0;
  font-size: clamp(56px, 15vw, 84px);
  font-weight: 800;
  line-height: 1;
  color: var(--turquesa);
  font-variant-numeric: tabular-nums;
}

.sello {
  display: inline-block;
  margin: 14px 0 12px;
  padding: 8px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .08em;
  font-size: clamp(15px, 3vw, 19px);
}

.sello.aprobado { background: #e2f6ea; color: #14663a; border: 2px solid var(--verde); }
.sello.desaprobado { background: #fdeaea; color: #a11c1c; border: 2px solid var(--rojo); }

.aciertos { margin: 0 0 6px; font-size: clamp(15px, 2.6vw, 18px); font-weight: 600; }
.detalle { margin: 0 0 6px; color: var(--tinta-suave); font-size: 14.5px; }
.tiempo { margin: 0; color: var(--tinta-suave); font-size: 13.5px; }

#resultado-temas, #resultado-repaso { margin-top: 34px; border-top: 1px solid var(--borde); padding-top: 22px; }
#resultado-temas h3, #resultado-repaso h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.temas { list-style: none; margin: 0; padding: 0; }

.temas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 44px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
}

.tema-barra { height: 8px; background: #e8eef0; border-radius: 999px; overflow: hidden; }
.tema-barra span { display: block; height: 100%; background: var(--turquesa); }
.tema-puntaje { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.repaso { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.repaso-item {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fbfdfd;
}

.repaso-item.mal { border-left-color: var(--rojo); }

.repaso-cabecera {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--tinta-suave);
}

.repaso-num { font-weight: 700; color: var(--tinta); }
.repaso-marca { font-weight: 800; font-size: 15px; }
.repaso-item.bien .repaso-marca { color: var(--verde); }
.repaso-item.mal .repaso-marca { color: var(--rojo); }
.repaso-tema { margin-left: auto; }

.repaso-grafico { display: flex; justify-content: center; margin: 4px 0 10px; }
.repaso-grafico svg,
.repaso-grafico img {
  width: 100%;
  max-width: 140px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.repaso-enunciado { margin: 0 0 8px; font-size: 14.5px; font-weight: 500; }
.repaso-tuya { margin: 0 0 4px; font-size: 13.5px; color: #a11c1c; }
.repaso-tuya.sin-responder { color: var(--tinta-suave); font-style: italic; }
.repaso-correcta { margin: 0; font-size: 13.5px; line-height: 1.45; }
.repaso-correcta span { color: var(--turquesa); font-weight: 600; }

/* ---------- pantallas chicas ---------- */

@media (max-width: 560px) {
  .tarjeta { border-radius: 12px; margin: 10px; padding: 16px; }
  .opcion { border-radius: 14px; text-align: left; }
  .navegacion .boton { flex: 1 1 100%; padding: 13px 20px; }
  .bb-desglose { grid-template-columns: 1fr; }
  .bb-desglose li { display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .bb-desglose strong { margin-bottom: 0; font-size: 20px; }
  .temas li { grid-template-columns: minmax(0, 1fr) 56px 42px; }

  /* Pantalla de inicio: todo más compacto para que los modos entren sin scroll. */
  .sobretitulo { font-size: 11px; letter-spacing: .1em; }
  .tarjeta-inicio h1 { margin: 6px 0 2px; font-size: clamp(19px, 5.2vw, 24px); }
  .subtitulo { margin-bottom: 14px; font-size: 13px; }

  .reglas {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
  }
  .reglas li {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 2px;
  }
  .reglas strong { font-size: 21px; }
  .reglas span { margin-top: 1px; font-size: 9.5px; line-height: 1.2; }

  .titulo-modos { margin-bottom: 8px; font-size: 14px; }
  .modos { gap: 8px; }
  .modo { padding: 10px 12px; border-radius: 10px; }
  .modo:hover { transform: none; }
  .modo-nombre { font-size: 15px; margin-bottom: 2px; }
  .modo-desc { font-size: 11.5px; line-height: 1.3; }
  .modos-extra { margin-top: 8px; }
}

@media (max-width: 380px) {
  .reglas strong { font-size: 18px; }
  .reglas span { font-size: 9px; }
  .modo-desc { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}