/* ==========================================================================
   Estilos del módulo: simulacro.

   La prueba reutiliza tal cual el sistema: .dx-top/.pbar/.timer para la
   cabecera, .qcard/.opts/.opt para la pregunta y .res-hero/.comp-list/.comp-row
   para el resultado. Aquí solo va lo que no existe en componentes.css: el
   enlace de vuelta, el aviso de estado, el muro Pro, la revisión de errores y
   el reloj en cuenta final. Solo tokens, ningún color ni medida en crudo: los
   acentos que son TEXTO usan --blue-txt / --azure-txt / --rojo-txt; --red y
   --mint quedan para bordes y rellenos.
   ========================================================================== */

/* ---------------------------------------------------------------- Vuelta -- */
/* Mismo papel que .art-volver en el módulo de artículo; cuando un tercer
   módulo lo necesite, toca subirlo a componentes.css. */
.sim-volver {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: var(--sp-4);
  font-size: .85rem; font-weight: 600;
  color: var(--muted);
}
.sim-volver:hover { color: var(--blue-txt); }

/* ------------------------------------------------------- Aviso de estado -- */
.sim-aviso {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--azure);
  border-radius: var(--rs);
  padding: var(--sp-3) 14px;
  margin-bottom: var(--sp-4);
  font-size: .88rem;
  color: var(--text);
}
.sim-aviso .icono { color: var(--azure-txt); flex: none; }

/* -------------------------------------------------------------- Portada -- */
/* .sim es una retícula de dos columnas a partir de 900px; la portada tiene una
   sola pieza, así que se queda a ancho completo. */
.sim-portada { grid-template-columns: 1fr; }

.sim-empezar { margin-top: var(--sp-5); }

.sim-letra {
  margin-top: var(--sp-3);
  font-size: .8rem;
  color: var(--muted);
}
.sim .sim-letra { color: var(--on-dark-faint); }
.sim-letra a { color: var(--blue-txt); font-weight: 600; }

.sim-bloque { margin-top: var(--sp-4); }
.sim-bloque .sim-letra { margin: 0 0 var(--sp-3); }

.sim-titulo { font-size: 1.15rem; margin: var(--sp-6) 0 var(--sp-3); }

/* ------------------------------------------------------------ Muro Pro --- */
.sim-muro {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--on-dark-line-2);
  border-radius: var(--r);
  background: var(--on-dark-fill);
  display: grid; gap: var(--sp-3); justify-items: start;
}
.sim-muro-titulo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--on-dark-text); font-weight: 600;
}
.sim-muro p { font-size: .9rem; }

/* ------------------------------------------------------- Recordatorio ---- */
.sim-recordatorio .sim-error {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rojo-txt); font-size: .78rem;
}

/* Campo que simulacro.js añade junto al botón del índice: vive sobre el fondo
   oscuro de .sim, así que no puede heredar los colores de .reg input. */
.sim-correo { margin-bottom: var(--sp-3); max-width: 320px; }
.sim-correo input {
  width: 100%; height: 48px;
  border-radius: var(--rs);
  border: 1px solid var(--on-dark-line-2);
  background: var(--on-dark-fill-2);
  color: var(--on-dark-text);
  padding: 0 14px; font-size: 1rem;
}
.sim-correo input::placeholder { color: var(--on-dark-legal); }

/* ------------------------------------------------------- Prueba en curso -- */
/* .btn declara su propio display, así que gana al [hidden] del navegador y el
   botón oculto seguiría ocupando sitio (y desbordando la fila en móvil). */
.qnav .btn[hidden] { display: none; }

/* En móvil la barra inferior de navegación es fija y puede tapar los botones de
   la prueba justo cuando hacen falta. Pegados encima de ella siempre se ven, y
   el enunciado sigue desplazándose detrás. */
@media (max-width: 899px) {
  .sim-nav {
    position: sticky;
    bottom: calc(var(--bnav-h) + var(--sp-2));
    z-index: 5;
    background: var(--bg);
    padding: var(--sp-3) 0;
    margin-top: var(--sp-3);
  }

  /* "Enviar · faltan 3" parte en dos líneas en pantallas angostas; .btn fija una
     altura y el texto se saldría de la caja. */
  .sim-nav .btn { height: auto; min-height: 52px; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
}

/* Último minuto: el reloj deja de ser un dato más. */
.timer.urgente { color: var(--rojo-txt); }

.sim-salida { text-align: center; }

/* --------------------------------------------------- Revisión de errores -- */
.rev-list { display: grid; gap: var(--sp-3); }

/* En la revisión las alternativas ya no son botones: no invitan al clic. */
.rev .opt { cursor: default; }
.rev .opt:hover { border-color: var(--border); }
.rev .opt span b {
  display: block;
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.rev .opt.buena { border-color: var(--mint); background: var(--bg2); }
.rev .opt.buena i { background: var(--mint); border-color: var(--mint); color: var(--ink); }
/* El verde ya lo dan el borde y el sello; la etiqueta se queda en tinta normal
   porque --teal no llega a 4.5:1 sobre --bg2 en tema claro. */
.rev .opt.buena span b { color: var(--text); }

.rev .opt.mala { border-color: var(--red); }
.rev .opt.mala i { border-color: var(--red); color: var(--rojo-txt); }
.rev .opt.mala span b { color: var(--rojo-txt); }

.rev .opt.vacia i { border-style: dashed; }

.rev-acciones {
  display: grid; gap: 10px;
  margin-top: var(--sp-5);
}
@media (min-width: 700px) {
  /* max-content: cada botón ocupa lo que mide su texto, sin repartirse el ancho
     a partes iguales y partir la etiqueta más larga en dos líneas. */
  .rev-acciones { grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; }
}

/* ------------------------------------------------------------ Resultado -- */
.res-detalle { color: var(--on-dark-text); opacity: .85; font-size: .9rem; margin-top: var(--sp-3); }
.comp-sobre { font-family: var(--font-b); font-weight: 500; font-size: .75rem; color: var(--muted); }

.sim-empty .icono { margin: 0 auto var(--sp-3); color: var(--blue-txt); }

/* --------------------------------------------------- Encabezados -- */
/* El título de la portada es <h1> por semántica, pero dentro del bloque
   oscuro conserva el tamaño que tenía: el de portada sería desproporcionado. */
.sim h1 { color: #fff; font-size: 1.65rem; line-height: 1.2; margin-bottom: .6rem; }

/* En la cabecera del resultado el <h1> es el nombre del simulacro, en pequeño:
   quien manda visualmente es el puntaje. */
.res-hero .res-titulo {
  font-family: var(--font-b);
  font-size: .9rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0; opacity: .85; margin: 0;
}