/* =====================================================================
   ANTI.EXAMEN5 · Pantallas del alumno
   Pensadas para un celular de gama baja tanto como para una PC:
   todo toca bien con el dedo y se lee a 360 px de ancho.
   ===================================================================== */

.codigo-grande { font-size: 1.35rem; letter-spacing: .1em; text-transform: lowercase; }

/* ------------------------------------------------- barra del examen */
.barra-examen { display: flex; align-items: center; gap: var(--e5); flex: 1; min-width: 0; }
.barra-examen[hidden] { display: none; }
.be-titulo { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.be-titulo strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-titulo .sutil { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.be-cifras { display: flex; gap: 2px; flex: none; }
.be-cifra { display: grid; padding: 6px 12px; background: var(--urdimbre-2); min-width: 88px; }
.be-cifra small { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.be-cifra b { font-size: 1rem; font-weight: 650; }
.be-cifra.avi b { color: var(--leve); }
.be-cifra.mal b { color: var(--grave); }
.be-cifra.reloj.avi { background: var(--leve-fondo); }
.be-cifra.reloj.mal { background: var(--grave-fondo); }
.be-telar { --alto: 10px; margin: 0; }
.be-telar[hidden] { display: none; }
body.alumno.en-examen .marca { display: none; }
@media (max-width: 640px) {
  .barra-app-in { gap: var(--e3); }
  .be-titulo { display: none; }
  .be-cifras { flex: 1; }
  .be-cifra { flex: 1; min-width: 0; padding: 6px 8px; }
}

/* ---------------------------------------------------------- reglas */
.reglas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.reglas-cab { position: sticky; top: 100px; display: grid; gap: var(--e5); }
.ficha-examen { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; }
.ficha-examen > div { padding: var(--e3) var(--e4); background: var(--urdimbre-2); }
.ficha-examen dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); }
.ficha-examen dd { margin: 0; font-family: var(--f-mono); font-size: 1.05rem; font-weight: 600; }
.pasos-previos { display: grid; gap: var(--e4); margin: 0; padding: 0; list-style: none; }
.previo { background: var(--urdimbre-2); box-shadow: inset 0 0 0 1px var(--hebra); transition: box-shadow .2s ease; }
.previo.listo { box-shadow: inset 0 0 0 1px rgba(47, 184, 106, .45); }
.previo.bloqueado { opacity: .55; }
.previo-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); }
.previo-cuerpo { padding: 0 var(--e5) var(--e5); display: grid; gap: var(--e4); }
.previo-cuerpo p { color: var(--texto-2); }
.reglas-listas { display: grid; gap: var(--e4); }
.lista-hilos { display: grid; gap: 6px; margin: var(--e2) 0 0; padding: 0; list-style: none; }
.lista-hilos li { position: relative; padding-left: 18px; color: var(--texto-2); font-size: .95rem; }
.lista-hilos li::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 4px; background: var(--fucsia); }
.lista-hilos.no li::before { background: var(--verde); }
.regla-justa { padding: var(--e3) var(--e4); background: var(--perdon-fondo); color: var(--texto) !important; font-size: .95rem; }
.reglas-accion { display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; margin-top: var(--e6); }
@media (max-width: 860px) {
  .reglas { grid-template-columns: 1fr; }
  .reglas-cab { position: static; }
  .reglas-accion .boton { width: 100%; }
}

/* --------------------------------------------------------- examen */
.examen { max-width: 760px; }
.preguntas { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 0; padding: 0; list-style: none; counter-reset: preg; }
.pregunta { display: grid; gap: var(--e4); counter-increment: preg; }
.preg-cab { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: start; }
.preg-num { font-family: var(--f-mono); font-size: .82rem; font-weight: 650; color: var(--maiz); padding-top: .3em; min-width: 2ch; }
.preg-num::before { content: counter(preg, decimal-leading-zero); }
.preg-enun { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); font-weight: 560; line-height: 1.5; color: var(--texto); }
.preg-pts { margin-top: .2em; }
.examen-activo .preg-enun, .examen-activo .opcion-texto { user-select: none; -webkit-user-select: none; }

.opciones { display: grid; gap: var(--e2); margin: 0; padding: 0; border: 0; }
.opcion {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center;
  min-height: 54px; padding: var(--e3) var(--e4);
  background: var(--urdimbre-2); box-shadow: inset 0 0 0 1px var(--hebra);
  cursor: pointer;
  transition: box-shadow .15s ease, background-color .15s ease, transform 120ms var(--ease-out);
}
.opcion:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { box-shadow: inset 0 0 0 1px var(--texto-3); } }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-marca {
  width: 22px; height: 22px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px var(--hebra-2); background: var(--urdimbre);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.opcion-marca::after { content: ""; width: 10px; height: 10px; background: var(--accion-texto); transform: scale(0); transition: transform 180ms var(--ease-out); }
.opcion:has(input:checked) { background: rgba(242, 201, 76, .09); box-shadow: inset 0 0 0 2px var(--maiz); }
.opcion:has(input:checked) .opcion-marca { background: var(--maiz); box-shadow: none; }
.opcion:has(input:checked) .opcion-marca::after { transform: scale(1); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--info); outline-offset: 2px; }
.opcion-texto { line-height: 1.45; }

.tipo-abierta textarea { min-height: 170px; }
.preg-pie { display: flex; justify-content: space-between; gap: var(--e3); font-size: .8rem; color: var(--texto-3); min-height: 1.4em; }
.guardado { display: inline-flex; gap: .35em; align-items: center; transition: opacity .3s ease; }
.guardado .icono { width: 1em; height: 1em; }
.guardado.ok { color: var(--perdon); }
.guardado.error { color: var(--leve); }

.examen-cierre {
  display: flex; gap: var(--e4); align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: var(--e6);
  box-shadow: inset 0 1px 0 var(--hebra);
}
@media (max-width: 640px) { .examen-cierre .boton { width: 100%; } }

/* ----------------------------------------------------------- final */
.final { width: min(100% - 2 * var(--margen), 560px); display: grid; gap: var(--e4); }
.final-estado { display: flex; }
.final-nota { font-size: clamp(3.2rem, 2rem + 6vw, 5.6rem); font-weight: 820; font-stretch: 118%; letter-spacing: -.035em; line-height: 1; color: var(--texto); }
.final-nota small { font-size: .38em; font-weight: 600; color: var(--texto-3); letter-spacing: -.01em; margin-left: .15em; }
.final-texto { max-width: 46ch; }
.final-telar { --alto: 28px; margin-top: var(--e3); }
.final-acciones { margin-top: var(--e4); }
.final.anulado::before { background: var(--fucsia); }

/* -------------------------------------------------------- impresion */
@media print {
  body.alumno * { display: none !important; }
  body.alumno::after { content: "La impresión está deshabilitada durante el examen."; display: block !important; padding: 2cm; font: 20pt sans-serif; color: #000; }
}