/* ============================================================
   Simulacro de examen — Heurísticas de usabilidad (J. Nielsen)
   ============================================================ */

:root {
  --azul: #1b3a6b;
  --azul-medio: #1b5e9c;
  --azul-claro: #e8eef7;
  --azul-linea: #c9d8ee;
  --verde: #2e7d32;
  --verde-claro: #e6f2e6;
  --rojo: #c0392b;
  --rojo-claro: #fbe7e4;
  --ambar: #b9770e;
  --gris: #4a4a4a;
  --gris-claro: #f2f2f2;
  --negro: #1a1a1a;
  --radio: 8px;
  --sombra: 0 1px 3px rgba(16, 34, 68, 0.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f4f6fa;
  color: var(--negro);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Barra superior ---------- */
.barra-azul {
  background: var(--azul);
  color: #fff;
  border-bottom: 2px solid #7fa8d9;
}
.barra-contenido {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.barra-titulo { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; }
.barra-sub { font-style: italic; font-size: 0.82rem; color: #c9d8ee; }

/* ---------- Estructura ---------- */
.contenedor {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

/* ---------- Portada ---------- */
.portada {
  background: var(--azul);
  color: #fff;
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
  text-align: center;
  border-bottom: 2px solid #7fa8d9;
}
.portada-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9dbde4;
  font-weight: 700;
}
.portada-titulo {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 700;
}
.portada-sub {
  margin: 0.35rem 0 0;
  font-style: italic;
  color: #c9d8ee;
  font-size: 0.95rem;
}
.portada-meta {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: #eaf1fa;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 0.7rem;
}

/* ---------- Panel de instrucciones ---------- */
.panel-info {
  background: var(--azul-claro);
  border: 1px solid var(--azul-linea);
  border-left: 5px solid var(--azul-medio);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
}
.panel-info-titulo {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lista-instrucciones {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
}
.lista-instrucciones li { margin-bottom: 0.3rem; }

.progreso-caja { margin-top: 1rem; }
.progreso-cabecera {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--azul);
  margin-bottom: 0.35rem;
}
.progreso-barra {
  height: 9px;
  background: #cfdcee;
  border-radius: 99px;
  overflow: hidden;
}
.progreso-relleno {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--azul-medio), #4a90d9);
  transition: width 0.25s ease;
}

/* ---------- Preguntas ---------- */
.pregunta {
  background: #fff;
  border: 1px solid var(--azul-linea);
  border-radius: var(--radio);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.pregunta-cabecera { display: flex; gap: 0.7rem; align-items: flex-start; }
.pregunta-num {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--azul-medio);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.pregunta-texto { margin: 0; font-size: 1rem; font-weight: 600; }
.pregunta-en { display: block; font-weight: 400; font-style: italic; color: var(--gris); font-size: 0.85rem; }

.opciones { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.opcion {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.93rem;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.opcion:hover { background: var(--azul-claro); }
.opcion input { margin: 0.25rem 0 0; accent-color: var(--azul-medio); flex: 0 0 auto; }
.opcion input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.opcion-letra { font-weight: 700; color: var(--azul-medio); }

.pregunta.marcada-correcta { border-color: var(--verde); background: var(--verde-claro); }
.pregunta.marcada-incorrecta { border-color: var(--rojo); background: var(--rojo-claro); }
.pregunta.marcada-correcta .pregunta-num { background: var(--verde); }
.pregunta.marcada-incorrecta .pregunta-num { background: var(--rojo); }

.opcion.es-correcta {
  background: #d6ecd6;
  border-color: var(--verde);
  font-weight: 600;
}
.opcion.es-incorrecta-elegida {
  background: #f6d6d1;
  border-color: var(--rojo);
  text-decoration: line-through;
}

/* ---------- Retroalimentación por pregunta ---------- */
.retro {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--azul-linea);
  font-size: 0.88rem;
}
.retro-bloque { margin-bottom: 0.5rem; }
.retro-bloque:last-child { margin-bottom: 0; }
.retro-etiqueta { font-weight: 700; }
.retro-ok .retro-etiqueta { color: var(--verde); }
.retro-fallo .retro-etiqueta { color: var(--rojo); }
.retro-explica { color: #333; }
.retro-heuristica {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2e5c9a;
  background: var(--azul-claro);
  border: 1px solid var(--azul-linea);
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
}
.retro-heuristica.incorrecta { color: var(--rojo); background: var(--rojo-claro); border-color: #e6bdb6; }

/* ---------- Acciones ---------- */
.acciones {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
}
.boton {
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.12s ease;
}
.boton:hover { filter: brightness(1.08); }
.boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.boton-primario { background: var(--azul); color: #fff; }
.boton-secundario { background: #fff; color: var(--azul); border-color: var(--azul-linea); }

/* ---------- Resultado ---------- */
.resultado {
  margin-top: 1.75rem;
  background: #fff;
  border: 1px solid var(--azul-linea);
  border-top: 5px solid var(--azul);
  border-radius: var(--radio);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--sombra);
}
.resultado-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.resultado-puntaje { display: flex; align-items: baseline; gap: 0.5rem; }
.resultado-puntaje-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.resultado-puntaje-numero {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--azul-medio);
}
.resultado-puntaje-numero.aprobado { color: var(--verde); }
.resultado-puntaje-numero.desaprobado { color: var(--rojo); }
.resultado-puntaje-max { color: var(--gris); font-size: 0.9rem; }

.resultado-detalle { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.9rem; }
.resultado-detalle-item {
  background: var(--gris-claro);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
}
.resultado-detalle-item span { font-weight: 700; color: var(--azul); }

.resultado-mensaje {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  background: var(--azul-claro);
  border-left: 4px solid var(--azul-medio);
  font-size: 0.92rem;
}

/* ---------- Retroalimentación global ---------- */
.retroalimentacion { margin-top: 2rem; }
.retro-titulo {
  font-size: 1.15rem;
  color: var(--azul);
  border-bottom: 2px solid var(--azul-linea);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}

.retro-item {
  background: #fff;
  border: 1px solid var(--azul-linea);
  border-left: 5px solid var(--gris);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
}
.retro-item.ok { border-left-color: var(--verde); }
.retro-item.fallo { border-left-color: var(--rojo); background: #fefaf9; }
.retro-item-cabecera { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.35rem; }
.retro-item-num {
  font-weight: 700;
  color: #fff;
  background: var(--gris);
  border-radius: 4px;
  padding: 0.05rem 0.45rem;
  font-size: 0.8rem;
  flex: 0 0 auto;
}
.retro-item.ok .retro-item-num { background: var(--verde); }
.retro-item.fallo .retro-item-num { background: var(--rojo); }
.retro-item-enunciado { font-weight: 600; }
.retro-linea { margin: 0.2rem 0; }
.retro-linea strong { color: var(--azul); }
.retro-linea.fallada strong { color: var(--rojo); }

/* ---------- Pie ---------- */
.pie {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--gris);
  font-size: 0.88rem;
  font-style: italic;
}
.pie-nota { font-style: normal; font-size: 0.78rem; color: #7a7a7a; }

/* ---------- Utilidades ---------- */
.oculto { display: none; }

.aviso-faltantes {
  background: #fff8e1;
  border: 1px solid #e8d08a;
  border-left: 5px solid var(--ambar);
  border-radius: var(--radio);
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .contenedor { padding: 1rem 0.85rem 2.5rem; }
  .portada { padding: 1.2rem 1rem; }
  .portada-titulo { font-size: 1.3rem; }
  .resultado-puntaje-numero { font-size: 2.3rem; }
  .barra-contenido { flex-direction: column; gap: 0.15rem; }
}

@media print {
  .barra-azul, .acciones, .progreso-caja { display: none; }
  body { background: #fff; }
  .pregunta { break-inside: avoid; box-shadow: none; }
}