/* SuperaTuOpo -- hoja de estilos publica (portada + paginas de producto).
   Mobile-first, sin dependencias externas, identidad neutral de
   plataforma (los acentos de color por cuerpo se aplican solo dentro de
   su propia pagina de producto via la variable --color-acento). */

:root {
  --color-fondo: #f6f7f9;
  --color-superficie: #ffffff;
  --color-texto: #1a1f2b;
  --color-texto-suave: #545b6a;
  --color-borde: #e2e5ea;
  --color-marca: #14203c;
  --color-acento: #1a56db;
  --color-exito: #0f766e;
  --radio: 12px;
  --sombra: 0 1px 3px rgba(20, 32, 60, 0.08), 0 1px 2px rgba(20, 32, 60, 0.06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-acento);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-marca);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}

/* =========================================================================
   Dialogo modal generico de SuperaTuOpo ("dialogo-plataforma").
   Misma familia visual que el modal "Sesion cerrada"/avisos de la portada
   (".portada-aviso-modal", mas abajo en este fichero: NO se toca, sigue
   usandose tal cual con su patron :target) -- fondo/panel azul oscuro,
   borde azul discreto, overlay oscurecido, esquinas y sombra coherentes,
   boton principal azul, boton secundario visible, X para cerrar. Pero
   definido aqui como componente global (variables --color-*, no --pp-*,
   que solo existen dentro de ".pagina-portada") para poder reutilizarlo
   en cualquier pantalla interior sin arrastrar el contexto de la portada.
   Se abre/cierra por JS añadiendo/quitando ".dialogo-plataforma--abierto"
   (no por :target, porque su contenido puede ser dinamico), y al ser
   "position:fixed" respecto al viewport aparece centrado en la pantalla
   visible sin importar el scroll interno de la pagina que lo usa.
   Primer uso: aviso de "preguntas sin responder" en
   test_temas_intento.html / test_temas.js.
   ========================================================================= */

.dialogo-plataforma {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 20, 0.72);
}

.dialogo-plataforma--abierto {
  display: flex;
}

.dialogo-plataforma__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 24px 24px;
  border-radius: 14px;
  background: rgb(10, 30, 62);
  border: 1px solid rgba(130, 190, 255, 0.5);
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dialogo-plataforma__cerrar {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.dialogo-plataforma__cerrar:hover,
.dialogo-plataforma__cerrar:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.dialogo-plataforma__titulo {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: #fff;
}

.dialogo-plataforma__texto {
  margin: 0 0 22px;
  color: #dfe8f7;
  font-size: 0.92rem;
  line-height: 1.5;
}

.dialogo-plataforma__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dialogo-plataforma__btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}

.dialogo-plataforma__btn--secundario {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #dfe8f7;
}

.dialogo-plataforma__btn--secundario:hover,
.dialogo-plataforma__btn--secundario:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.dialogo-plataforma__btn--primario {
  background: var(--color-acento);
  border-color: transparent;
  color: #fff;
}

.dialogo-plataforma__btn--primario:hover,
.dialogo-plataforma__btn--primario:focus-visible {
  background: #0f45ad;
  outline: 2px solid rgba(159, 195, 255, 0.9);
}

/* Cabecera / navegacion --------------------------------------------- */

.site-header {
  background: var(--color-marca);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-acento);
  color: #fff;
  font-weight: 800;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  width: 40px;
  height: 36px;
  cursor: pointer;
  padding: 0 8px;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.site-nav {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}

.site-nav.is-open {
  display: flex;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 8px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 720px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    padding-top: 0;
    gap: 6px;
  }
}

/* Portada publica -------------------------------------------------------
   El fondo de agentes/bandera ("portada-fondo.png") ya NO cubre toda la
   pagina: la cabecera (nav) va sobre azul limpio solido y la imagen queda
   acotada a la seccion .portada-hero, recortada por su propia altura
   (compacta a proposito: los agentes quedan arriba/derecha sin ocupar
   media portada, dejando sitio a la fila de funcionalidades y a
   Oposiciones justo debajo). Todo acotado a .pagina-portada / .portada-*:
   no afecta a otras pantallas. */

.pagina-portada {
  --pp-texto-suave: #c4d6f2;
  --pp-acento: #1a6fe8;
  --pp-acento-claro: #6fb0ff;
  --pp-foco: #9fc3ff;
  --pp-margen: clamp(24px, 4vw, 72px);
  --pp-cabecera: 58px;
  /* portada-fondo.png trae ~16% de azul vacio por encima de los agentes;
     este recorte sube la imagen esa misma proporcion para que el azul que
     se vea debajo del nav sea YA el de la propia foto, sin franja añadida. */
  --pp-hero-recorte: 7.5vw;
  background-color: #04102b;
}

.pagina-portada .wrap {
  width: 100%;
  max-width: none;
  padding-inline: var(--pp-margen);
}

.pagina-portada :focus-visible {
  outline-color: var(--pp-foco);
}

/* Cabecera solida (azul limpio): la imagen ya no llega hasta aqui, asi
   que la navegacion es perfectamente legible siempre. */
.pagina-portada .site-header {
  position: relative;
  background: #071a3d;
  border-bottom: 0;
}

.pagina-portada .site-header__inner {
  min-height: var(--pp-cabecera);
  padding-block: 9px;
}

.pagina-portada main {
  background: transparent;
}

.pagina-portada .site-footer {
  padding: 15px 0 18px;
  border-top: 1px solid rgba(120, 170, 255, 0.14);
  background: #030c20;
  color: #a9bfdd;
}

.pagina-portada .site-footer p {
  margin: 0;
}

/* Hero: texto a la izquierda; a la derecha, los agentes/bandera del nuevo
   fondo, acotados a esta seccion (no al body). background-size: 100% auto
   respeta la proporcion real de portada-fondo.png (sin deformarla) y,
   como el bloque es mas bajo que la imagen a tamano natural, el propio
   .portada-hero recorta visualmente el sobrante por abajo -- justo lo que
   se pidio: los agentes arriba/derecha, sin ocupar media portada. */

.portada-hero {
  position: relative;
  width: 100%;
  color: #fff;
  background-color: #04102b;
  background-repeat: no-repeat;
  /* Capa 1 (la de mas arriba en el listado, pero pintada bajo las demas
     por el orden de composicion de fondos CSS) funde el azul del propio
     .site-header (#071a3d) en el azul del hero en los primeros px: quita
     el corte recto que se veia justo bajo el nav SIN añadir alto ni una
     franja nueva -- es solo una capa de fondo mas dentro de la MISMA caja,
     ya del alto que tenia. */
  background-image:
    linear-gradient(180deg, #071a3d 0%, rgba(7, 26, 61, 0) 100%),
    linear-gradient(90deg, rgba(3, 10, 36, 0.55) 0%, rgba(3, 10, 36, 0) 42%),
    linear-gradient(180deg, rgba(4, 16, 43, 0) 66%, #04102b 100%),
    url("/static/img/portada-fondo.png?v=3");
  background-size: 100% 18px, 100% 100%, 100% 100%, 100% auto;
  background-position: 0 0, 0 0, 0 0, right calc(-1 * var(--pp-hero-recorte));
}

.pagina-portada .portada-hero__inner {
  display: flex;
  align-items: center;
  min-height: clamp(190px, 14.9vw, 300px);
  padding-block: 22px 16px;
}

.portada-hero__contenido {
  width: min(46%, 44rem);
}

.portada-hero__titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 2.3vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(2, 8, 30, 0.6);
}

.portada-hero__titulo span {
  display: block;
  color: var(--pp-acento-claro);
}

.portada-hero__lead {
  max-width: 36rem;
  margin: 12px 0 0;
  color: #dbe7fb;
  font-size: clamp(0.92rem, 1vw, 1.06rem);
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(2, 8, 30, 0.7);
}

.portada-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 18px 0 0;
  padding: 10px 20px;
  border-radius: 9px;
  background: var(--pp-acento);
  box-shadow: 0 10px 24px rgba(0, 74, 173, 0.4);
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
}

.portada-hero__cta:hover,
.portada-hero__cta:focus-visible {
  background: #0f5fd0;
  box-shadow: 0 0 0 2px var(--pp-foco), 0 10px 24px rgba(0, 74, 173, 0.4);
}

.portada-hero__cta svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.portada-hero__cta > span {
  margin-left: 5px;
  font-size: 1.2rem;
}

/* Herramientas: una sola fila de 6, de lado a lado del ancho util de la
   pagina (ya no anidada en la columna estrecha del texto del hero), justo
   debajo de la franja de agentes -- actua como base visual del hero. */

.portada-beneficios {
  padding: 16px 0 8px;
  border: 0;
  border-top: 1px solid rgba(120, 170, 255, 0.14);
  background: transparent;
}

.portada-beneficios__lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portada-beneficios__lista li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portada-beneficios__lista svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid rgba(120, 170, 255, 0.32);
  border-radius: 50%;
  background: rgba(10, 40, 100, 0.55);
  fill: none;
  stroke: #8cc0ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.portada-beneficios__lista span {
  min-width: 0;
}

.portada-beneficios__lista strong,
.portada-beneficios__lista small {
  display: block;
  overflow-wrap: anywhere;
}

.portada-beneficios__lista strong {
  color: #fff;
  font-size: 0.83rem;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(2, 8, 30, 0.85);
}

.portada-beneficios__lista small {
  margin-top: 1px;
  color: #c2d3ee;
  font-size: 0.72rem;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(2, 8, 30, 0.85);
}

/* Oposiciones: tres tarjetas sobre las tres zonas cromaticas del fondo ----- */

.portada-oposiciones {
  padding: 6px 0 22px;
  background: transparent;
}

.portada-oposiciones__cabecera {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}

.portada-oposiciones__cabecera h2 {
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.2;
}

.portada-oposiciones__cabecera p {
  margin: 0;
  color: var(--pp-texto-suave);
  font-size: 0.92rem;
}

.portada-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Capas: degradado tintado a la izquierda (legibilidad del texto), miniatura
   ambiental de la oposicion a la derecha (sin agentes) y tinte de base. */
.portada-card {
  --tono: 8, 30, 78;
  --miniatura: url("/static/img/portada-miniatura-policia-nacional.png");
  --borde: rgba(120, 175, 255, 0.4);
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background-color: rgb(var(--tono));
  background-image:
    linear-gradient(90deg, rgba(var(--tono), 0.94) 0%, rgba(var(--tono), 0.8) 34%, rgba(var(--tono), 0.3) 66%, rgba(var(--tono), 0.06) 100%),
    var(--miniatura);
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: 0 0, 72% center;
  box-shadow: 0 12px 30px rgba(1, 6, 20, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #fff;
}

.portada-card[data-oposicion="guardia-civil"] {
  --tono: 6, 40, 34;
  --miniatura: url("/static/img/portada-miniatura-guardia-civil.png");
  --borde: rgba(110, 220, 150, 0.4);
}

.portada-card[data-oposicion="policia-local"] {
  --tono: 12, 44, 104;
  --miniatura: url("/static/img/portada-miniatura-policia-local.png");
  --borde: rgba(130, 190, 255, 0.45);
}

/* Proximamente: algo mas apagada, borde discontinuo */
.portada-card--proximamente {
  border-style: dashed;
  box-shadow: 0 8px 22px rgba(1, 6, 20, 0.35);
}

.portada-card__contenido {
  position: relative;
  z-index: 1;
  width: 66%;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px;
}

.portada-card__estado {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  padding: 3px 10px;
  border: 1px solid rgba(190, 210, 240, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d3e0f3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.portada-card__estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.portada-card--disponible .portada-card__estado {
  border-color: #8cc0ff;
  background: #0f5fd0;
  color: #fff;
}

.portada-card--disponible .portada-card__estado::before {
  border-color: #fff;
  background: #fff;
}

.portada-card h3 {
  order: 0;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(1, 6, 20, 0.6);
}

.portada-card__escala {
  order: 1;
  margin: 3px 0 0;
  color: var(--pp-texto-suave);
  font-size: 0.88rem;
}

.portada-card__cta {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 40px;
  max-width: 100%;
  margin-top: auto;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--pp-acento);
  box-shadow: 0 6px 16px rgba(2, 10, 24, 0.4);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.portada-card__cta:hover,
.portada-card__cta:focus-visible {
  background: #0f5fd0;
  box-shadow: 0 0 0 2px var(--pp-foco), 0 6px 16px rgba(2, 10, 24, 0.4);
}

.portada-card__cta--inactivo,
.portada-card__cta--inactivo:hover {
  border: 1px dashed rgba(190, 210, 240, 0.6);
  background: rgba(4, 16, 43, 0.72);
  box-shadow: none;
  color: #e0eaf8;
  cursor: default;
}

/* "Avisame cuando este disponible" es ahora un enlace real (antes un
   <span> inerte) -- mismas clases/apariencia que antes (aria-disabled
   retirado a proposito, ya no aplica: es interactivo), solo cursor normal
   de enlace. */
.portada-card__cta--inactivo[href] {
  cursor: pointer;
}

/* Confirmacion tras registrar un aviso -- ocupa el mismo hueco (order: 3)
   que el CTA al que sustituye, sin alterar el resto de la tarjeta. */
.portada-aviso-ok {
  order: 3;
  margin: 9px 0 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(16, 140, 90, 0.25);
  border: 1px solid rgba(120, 220, 150, 0.4);
  color: #eafff0;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* Modal "avisame cuando este disponible" (Guardia Civil / Policia Local) --
   fuera de .portada-card a proposito (ver comentario en portada.html).
   Se abre/cierra solo con CSS (:target sobre su propio id), sin
   JavaScript: el enlace de la tarjeta apunta a "#aviso-<slug>" y el propio
   formulario postea a "<ruta>#aviso-<slug>", asi que tanto al abrir como
   al volver a pintar la portada tras un error de validacion el fragmento
   de la URL sigue coincidiendo con este id. */
.portada-aviso-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 20, 0.72);
}

.portada-aviso-modal:target,
.portada-aviso-modal.portada-aviso-modal--abierto {
  display: flex;
}

/* Cerrado con la "X" aunque siga siendo :target (p. ej. tras repintar la
   portada por un error de validacion): ver static/js/nav.js. */
.portada-aviso-modal.portada-aviso-modal--cerrado {
  display: none;
}

.portada-aviso-modal__panel {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 24px 24px;
  border-radius: 14px;
  background: rgb(10, 30, 62);
  border: 1px solid rgba(130, 190, 255, 0.5);
  color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.portada-aviso-modal--guardia-civil .portada-aviso-modal__panel {
  background: rgb(8, 32, 26);
  border-color: rgba(110, 220, 150, 0.45);
}

.portada-aviso-modal__cerrar {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
}

.portada-aviso-modal__cerrar:hover,
.portada-aviso-modal__cerrar:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.portada-aviso-modal h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: #fff;
}

.portada-aviso-modal__intro {
  margin: 0 0 16px;
  color: var(--pp-texto-suave);
  font-size: 0.88rem;
}

.portada-aviso-modal label {
  display: block;
  margin: 0 0 14px;
  color: #dfe8f7;
  font-size: 0.85rem;
}

.portada-aviso-modal input[type="email"],
.portada-aviso-modal input[type="password"],
.portada-aviso-modal input[type="text"],
.portada-aviso-modal select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.92rem;
}

.portada-aviso-modal select option {
  color: #04102b;
}

/* Login/registro (modales, reutilizan el mismo componente de "Avisame")
   necesitan ademas: campo con boton "Mostrar/Ocultar" en linea, texto de
   ayuda bajo un campo, lista de varios errores (registro) y el enlace de
   cambio entre modales. */
.portada-aviso-modal__campo-password {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.portada-aviso-modal__campo-password input {
  margin-top: 0;
  flex: 1 1 auto;
}

.portada-aviso-modal__toggle {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #dfe8f7;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.portada-aviso-modal__toggle:hover,
.portada-aviso-modal__toggle:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.portada-aviso-modal__ayuda {
  margin: 5px 0 0;
  color: var(--pp-texto-suave);
  font-size: 0.76rem;
  line-height: 1.35;
}

.portada-aviso-modal__errores {
  margin: 0 0 10px;
  padding: 8px 10px 8px 24px;
  border-radius: 8px;
  background: rgba(220, 60, 60, 0.18);
  border: 1px solid rgba(220, 90, 90, 0.4);
  color: #ffd8d8;
  font-size: 0.82rem;
}

.portada-aviso-modal__errores li {
  margin: 2px 0;
}

.portada-aviso-modal__alt {
  margin: 16px 0 0;
  color: var(--pp-texto-suave);
  font-size: 0.84rem;
  text-align: center;
}

.portada-aviso-modal__alt a {
  color: #9fc3ff;
  font-weight: 700;
}

.portada-aviso-modal__consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--pp-texto-suave);
  font-size: 0.8rem;
}

.portada-aviso-modal__consentimiento input {
  margin-top: 3px;
}

.portada-aviso-modal__error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(220, 60, 60, 0.18);
  border: 1px solid rgba(220, 90, 90, 0.4);
  color: #ffd8d8;
  font-size: 0.82rem;
}

.portada-aviso-modal__enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--pp-acento);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.portada-aviso-modal__enviar:hover,
.portada-aviso-modal__enviar:focus-visible {
  background: #0f5fd0;
  outline: 2px solid var(--pp-foco);
}

.avisos-baja {
  padding: 48px 0;
}

/* Portatil: se oculta la linea secundaria de las herramientas para no apilar */
@media (max-width: 1499px) {
  .portada-beneficios__lista small {
    display: none;
  }
}

@media (max-width: 1199px) {
  .portada-hero__contenido {
    width: min(50%, 40rem);
  }

  .portada-card__contenido {
    width: 72%;
  }
}

/* Tablet estrecho / movil: el fondo se reencuadra (agentes arriba) y el
   texto va debajo; las tarjetas se apilan. */
@media (max-width: 899px) {
  .portada-hero {
    background-image:
      linear-gradient(180deg, #071a3d 0%, rgba(7, 26, 61, 0) 100%),
      linear-gradient(180deg, rgba(4, 16, 43, 0) 200px, #04102b 400px),
      url("/static/img/portada-fondo.png?v=2");
    background-size: 100% 18px, 100% 400px, auto 420px;
    background-position: 0 0, 0 0, 100% top;
  }

  .pagina-portada .portada-hero__inner {
    display: block;
    min-height: 0;
    padding-block: 250px 8px;
  }

  .portada-hero__contenido {
    width: 100%;
    max-width: 38rem;
  }

  .portada-cards {
    grid-template-columns: 1fr;
  }

  .portada-beneficios__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portada-oposiciones {
    padding-top: 8px;
  }
}

@media (max-width: 639px) {
  .pagina-portada .site-header__inner {
    min-height: 64px;
  }

  .portada-hero__titulo {
    font-size: 1.7rem;
  }

  .portada-hero__lead {
    font-size: 0.95rem;
  }

  .portada-card__contenido {
    width: 80%;
  }
}

.hero__lead {
  color: #cfd6e6;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0;
}

.producto-hero {
  background: linear-gradient(180deg, var(--color-acento, var(--color-marca)), var(--color-marca));
  color: #fff;
  padding: 48px 0 56px;
}

.producto-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: #dbe3f7;
  margin: 0 0 8px;
}

.producto-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
}

/* Secciones generales --------------------------------------------------- */

section {
  padding: 44px 0;
}

h2 {
  font-size: 1.4rem;
  margin: 0 0 20px;
}

/* Tarjetas ---------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.card__estado {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--color-acento);
}

.card--disponible .card__estado {
  background: #e6f6f2;
  color: var(--color-exito);
}

.card__resumen {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  flex-grow: 1;
}

.card__link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;
}

.card--modulo p {
  color: var(--color-texto-suave);
  margin: 0;
  font-size: 0.95rem;
}

/* Listas y botones ---------------------------------------------------- */

.herramientas__lista {
  margin: 0;
  padding-left: 20px;
  color: var(--color-texto-suave);
  display: grid;
  gap: 8px;
}

.modulos__nota {
  color: var(--color-texto-suave);
  margin: -8px 0 20px;
  font-size: 0.92rem;
}

.btn {
  display: inline-block;
  margin-top: 18px;
  background: #fff;
  color: var(--color-marca);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
}

/* Pagina de error ------------------------------------------------------- */

.error-page {
  padding: 72px 0;
  text-align: center;
}

.error-page h1 {
  font-size: 1.8rem;
}

/* Pie de pagina --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-borde);
  padding: 24px 0 40px;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
}

/* =========================================================================
   FASE 2 -- autenticacion (login/registro) y dashboard privado.
   Titulares en un serif del propio sistema operativo (Georgia/Times) en
   vez de sans-serif -- una segunda familia claramente distinta de la del
   cuerpo de texto, sin cargar ninguna fuente externa (Google Fonts, etc.):
   la CSP del sitio es deliberadamente estricta (`style-src 'self'`,
   `font-src 'self'`, ver app/security_headers.py) y anadir una excepcion
   solo para poder cargar una tipografia es un cambio de superficie de
   ataque que esta fase no necesita -- Georgia ya transmite el caracter
   "documento serio" que se buscaba sin esa dependencia. Solo estas
   paginas nuevas la usan (las de FASE 1 no se han rediseñado).
   ========================================================================= */

:root {
  --fuente-display: Georgia, "Times New Roman", serif;
  --color-destacado-fondo: var(--color-marca);
  --color-destacado-texto: #dbe3f7;
  --color-ambar-claro: #ffd7a3;
}

/* Nav: cuenta / cerrar sesion ------------------------------------------- */

.nav-logout {
  margin: 0;
  padding: 0;
}

.nav-logout__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-logout__btn:hover,
.nav-logout__btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.site-nav__cta {
  font-weight: 700;
}

@media (min-width: 720px) {
  .nav-logout {
    display: inline-flex;
  }

  .nav-logout__btn {
    width: auto;
  }

  .site-nav__cta {
    background: var(--color-acento);
    padding: 8px 14px;
    border-radius: 8px;
  }
}

/* Paginas de autenticacion ------------------------------------------------ */

.auth {
  padding: 48px 0 72px;
}

.auth__wrap {
  max-width: 460px;
}

.auth__kicker {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.auth__titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 8px;
  color: var(--color-marca);
}

.auth__intro {
  color: var(--color-texto-suave);
  margin: 0 0 28px;
}

.auth__errores,
.auth__aviso {
  border-radius: var(--radio);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 0.92rem;
}

.auth__errores {
  background: #fdecec;
  color: #9c1c1c;
  border: 1px solid #f3c6c6;
}

.auth__errores ul {
  margin: 0;
  padding-left: 18px;
}

.auth__aviso {
  background: #e6f6f2;
  color: var(--color-exito);
  border: 1px solid #c7ebe2;
}

.form-auth {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font-weight: 600;
  font-size: 0.92rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo select {
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-superficie);
  color: var(--color-texto);
  transition: border-color 0.15s ease;
}

.campo input:focus-visible,
.campo select:focus-visible {
  border-color: var(--color-acento);
}

.campo__ayuda {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.campo-password {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.campo-password input {
  flex: 1;
}

.campo-password__toggle {
  flex-shrink: 0;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.campo-password__toggle:hover,
.campo-password__toggle:focus-visible {
  border-color: var(--color-acento);
  color: var(--color-acento);
}

.btn-primario {
  background: var(--color-acento);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-primario:hover {
  box-shadow: 0 6px 16px rgba(26, 86, 219, 0.28);
}

.btn-primario:active {
  transform: translateY(1px);
}

.auth__alt {
  margin-top: 24px;
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}

/* Dashboard privado -------------------------------------------------------- */

.dashboard-hero {
  background: linear-gradient(180deg, var(--color-marca), #1c2b4d);
  color: #fff;
  padding: 44px 0 40px;
  animation: dashboard-entrada 0.5s ease-out;
}

.dashboard-hero__kicker {
  text-transform: none;
  color: var(--color-destacado-texto);
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.dashboard-hero__saludo {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 12px;
}

.dashboard-hero__lead {
  color: var(--color-destacado-texto);
  max-width: 56ch;
  margin: 0;
}

.modulo-destacado {
  padding: 32px 0 8px;
}

.tile-destacada {
  background: var(--color-destacado-fondo);
  color: #fff;
  border-radius: var(--radio);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-left: 4px solid var(--color-acento);
  animation: dashboard-entrada 0.6s ease-out;
}

.tile-destacada__icono {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.tile-destacada__icono svg {
  width: 26px;
  height: 26px;
}

.tile-destacada__estado {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ambar-claro);
  margin: 0 0 6px;
}

.tile-destacada__texto h2 {
  font-family: var(--fuente-display);
  font-weight: 600;
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.tile-destacada__texto p {
  margin: 0;
  color: var(--color-destacado-texto);
  max-width: 60ch;
}

.tile-destacada__texto p:first-of-type {
  margin: 0 0 6px;
}

.modulos-indice {
  padding: 40px 0 56px;
}

.modulos-indice__titulo {
  font-size: 1.15rem;
  color: var(--color-texto-suave);
  font-weight: 600;
  margin: 0 0 18px;
}

.grid-modulos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .grid-modulos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .grid-modulos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile-modulo {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.tile-modulo:hover {
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.tile-modulo__icono {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--color-acento);
  margin-bottom: 6px;
}

.tile-modulo__icono svg {
  width: 20px;
  height: 20px;
}

.tile-modulo h3 {
  margin: 0;
  font-size: 1rem;
}

.tile-modulo p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

.tile-modulo__estado {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

@keyframes dashboard-entrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-hero,
  .tile-destacada {
    animation: none;
  }

  .tile-modulo {
    transition: none;
  }
}

/* =========================================================================
   FASE 3 -- Test por temas. Zona de concentracion (ver ARCHITECTURE.md):
   deliberadamente sin animaciones decorativas -- prioridad a legibilidad,
   contraste y comodidad tactil sobre cualquier microinteraccion. El
   estado de cada pregunta/alternativa nunca depende solo del color (el
   propio radio nativo ya distingue "marcada" sin color, y la revision
   final añade texto explicito -- "Acertaste"/"Fallaste"/"Sin responder",
   "Correcta"/"Tu respuesta" -- ademas del color de fondo).
   ========================================================================= */

.tile-destacada {
  text-decoration: none;
}

.tile-destacada:hover .tile-destacada__texto h2,
.tile-destacada:focus-visible .tile-destacada__texto h2 {
  text-decoration: underline;
}

.test-temas-selector,
.test-intento,
.test-resultado {
  padding: 40px 0 72px;
}

.test-temas-selector__kicker,
.test-intento__kicker,
.test-resultado__kicker {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.test-temas-selector__titulo,
.test-intento__titulo,
.test-resultado__titulo {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin: 0 0 10px;
  color: var(--color-marca);
}

.test-temas-selector__intro,
.test-intento__intro {
  color: var(--color-texto-suave);
  max-width: 62ch;
  margin: 0 0 28px;
}

.test-temas-selector__intro {
  max-width: none; /* escala aprobada en Fichas, comun a los tres selectores */
}

/* Selector de tema ---------------------------------------------------- */

.bloque-temas {
  margin-bottom: 32px;
}

.bloque-temas__titulo {
  font-size: 1rem;
  color: var(--color-texto-suave);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
}

.lista-temas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lista-temas__item {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lista-temas__item--vacio {
  opacity: 0.65;
}

.lista-temas__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lista-temas__numero {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-acento);
}

.lista-temas__titulo {
  font-weight: 600;
}

.lista-temas__contador {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.btn-primario--pequeno {
  padding: 10px 16px;
  font-size: 0.92rem;
}

.btn-primario:disabled {
  background: var(--color-borde);
  color: var(--color-texto-suave);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secundario {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-secundario:hover,
.btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: var(--color-acento);
}

/* Indice de preguntas --------------------------------------------------- */

.test-intento__indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  position: sticky;
  top: 66px;
  background: var(--color-fondo);
  padding: 10px 0;
  z-index: 5;
}

.test-intento__indice-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}

.test-intento__indice-item--respondida {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

.test-intento__indice-item--respondida::after {
  content: " \2713";
}

/* Preguntas del test ------------------------------------------------------ */

.lista-preguntas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.pregunta-test {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  scroll-margin-top: 110px;
}

.pregunta-test--respondida {
  border-left: 4px solid var(--color-acento);
}

.pregunta-test fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.pregunta-test__numero {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.pregunta-test legend.pregunta-test__enunciado {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-size: 1.0625rem; /* 17px: misma escala de lectura que la respuesta de Fichas */
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-texto);
}

.pregunta-test__alternativas {
  display: grid;
  gap: 8px;
}

.alternativa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.45;
}

.alternativa:hover {
  border-color: var(--color-acento);
}

.alternativa input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.alternativa:has(input:checked) {
  border-color: var(--color-acento);
  background: #eef2ff;
  font-weight: 600;
}

.pregunta-test__borrar {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
}

.pregunta-test__borrar:hover,
.pregunta-test__borrar:focus-visible {
  border-color: var(--color-acento);
  color: var(--color-acento);
}

.test-intento__acciones {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Resultado y revision ----------------------------------------------------- */

.test-resultado__resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 28px;
}

@media (min-width: 640px) {
  .test-resultado__resumen {
    grid-template-columns: repeat(4, 1fr);
  }
}

.test-resultado__dato {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 14px;
  text-align: center;
}

.test-resultado__dato dt {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  margin: 0 0 4px;
}

.test-resultado__dato dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.test-resultado__dato--acierto dd {
  color: var(--color-exito);
}

.test-resultado__dato--error dd {
  color: #b3261e;
}

.test-resultado__dato--blanco dd {
  color: var(--color-texto-suave);
}

.test-resultado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.test-resultado__revision-titulo {
  font-size: 1.2rem;
  margin: 0 0 16px;
}

.lista-revision {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.pregunta-revision {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 18px 20px;
}

.pregunta-revision--acierto {
  border-left-color: var(--color-exito);
}

.pregunta-revision--error {
  border-left-color: #b3261e;
}

.pregunta-revision--blanco {
  border-left-color: var(--color-texto-suave);
}

.pregunta-revision__estado {
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pregunta-revision--acierto .pregunta-revision__estado {
  color: var(--color-exito);
}

.pregunta-revision--error .pregunta-revision__estado {
  color: #b3261e;
}

.pregunta-revision--blanco .pregunta-revision__estado {
  color: var(--color-texto-suave);
}

.pregunta-revision__enunciado {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.pregunta-revision__alternativas {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.alternativa-revision {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-borde);
  font-size: 1rem;
  line-height: 1.45;
}

.alternativa-revision--correcta {
  border-color: var(--color-exito);
  background: #e6f6f2;
}

.alternativa-revision--elegida-incorrecta {
  border-color: #b3261e;
  background: #fdecec;
}

.etiqueta-revision {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-exito);
  color: #fff;
}

.etiqueta-revision--tu {
  background: #b3261e;
}

.pregunta-revision__explicacion {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-texto-suave);
}

.pregunta-revision__explicacion summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-acento);
}

@media (prefers-reduced-motion: reduce) {
  .lista-temas__item,
  .alternativa {
    transition: none;
  }
}

/* (max-width del selector: ver bloque "Selector secuencial" mas abajo) */
.selector-tema select { min-width: 0; max-width: 100%; }

/* Acceso PN: el CTA ocupa una fila propia, con separacion real. */
.auth__panel--acceso { display: flex; flex-direction: column; gap: 20px; }
.auth__panel--acceso > * { margin: 0; }
.auth__panel--acceso .btn-primario { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-align: center; }

/* Selector secuencial de temas, sin dependencias externas. */
:root { --ancho-modulo: 52rem; } /* ancho comun Fichas / Test / Esquemas (referencia: selector de Fichas) */
.selector-tema { width: 100%; max-width: var(--ancho-modulo); }
/* Test por temas (intento + resultado): mismo ancho y borde izquierdo que el selector. */
.test-intento #form-test-intento,
.test-resultado__resumen,
.test-resultado .lista-revision { max-width: var(--ancho-modulo); }
.buscador-tema { display: flex; align-items: center; gap: 10px; padding-left: 14px; border: 1px solid var(--color-borde); border-radius: 8px; background: var(--color-superficie); }
.buscador-tema svg { flex: 0 0 20px; color: var(--color-texto-suave); }
.buscador-tema input[type="text"] { border: 0; min-width: 0; width: 100%; font-size: 1rem; }
.buscador-tema:focus-within { outline: 3px solid var(--color-acento); outline-offset: 3px; }
/* Un unico indicador de foco: lo pinta el contenedor (:focus-within). Sin
   esto el input heredaba ademas el outline global de :focus-visible y el de
   `.selector-tema :focus-visible` -> dos contornos azules superpuestos. */
.buscador-tema input[type="text"]:focus,
.buscador-tema input[type="text"]:focus-visible { outline: none; box-shadow: none; }
.resultados-temas { list-style: none; padding: 4px; margin: 0; max-height: 17rem; overflow-y: auto; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 8px; }
.resultados-temas button { display: block; width: 100%; min-height: 48px; padding: 12px; border: 0; border-radius: 4px; background: transparent; text-align: left; font: inherit; color: var(--color-texto); cursor: pointer; overflow-wrap: anywhere; }
.resultados-temas button:hover { background: var(--color-fondo); }
.selector-tema__control { border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; box-shadow: var(--sombra); }
.selector-tema__flecha { grid-column: 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; min-width: 40px; padding: 0; border: 1px solid var(--color-borde); border-radius: 8px; background: var(--color-fondo); color: var(--color-marca); font: inherit; font-weight: 600; cursor: pointer; }
.selector-tema__flecha#tema-anterior { grid-row: 1; }
.selector-tema__flecha#tema-siguiente { grid-row: 2; align-self: end; }
.selector-tema__flecha span { font-size: 1.4rem; line-height: 1; }
.selector-tema button:disabled { opacity: .5; cursor: not-allowed; }
.selector-tema__tarjeta { grid-column: 1; grid-row: 1 / 3; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 2px 0; text-align: left; touch-action: pan-x pinch-zoom; }
.selector-tema__numero { margin: 0; font-weight: 700; color: var(--color-acento); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.selector-tema__tarjeta h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; color: var(--color-marca); overflow-wrap: anywhere; }
.selector-tema__meta { display: flex; flex-wrap: wrap; gap: 0 .3em; margin: 0; font-size: .9rem; line-height: 1.4; color: var(--color-texto-suave); }
.selector-tema__cantidad, .selector-tema__posicion { margin: 0; color: inherit; }
.selector-tema__posicion { font-size: .9rem; }
.selector-tema :focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.selector-tema > .btn-primario { min-height: 52px; white-space: normal; }


/* =========================================================================
   FASE 4 -- Fichas de repaso y Esquemas. Misma zona de concentracion que
   FASE 3: sin animaciones decorativas; prioridad a legibilidad. El
   selector de tema es el MISMO componente (.selector-tema, arriba).
   ========================================================================= */

.tile-modulo--activo { text-decoration: none; color: inherit; border-color: var(--color-acento); }
.tile-modulo--activo:hover h3, .tile-modulo--activo:focus-visible h3 { text-decoration: underline; }
.tile-modulo--activo .tile-modulo__estado { color: var(--color-exito); font-weight: 600; }

.test-temas-selector__kicker a, .migas a { color: inherit; }
.wrap--lectura { max-width: 48rem; }
.migas { font-size: .85rem; color: var(--color-texto-suave); margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Sesion de fichas */
.fichas-sesion, .esquema { padding: 32px 0 72px; }
.fichas-sesion__ronda { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: #fdf1e3; color: #7a4a0c; font-size: .85rem; font-weight: 600; }
.fichas-progreso { margin: 8px 0 18px; }
.fichas-progreso__texto { margin: 0 0 6px; font-weight: 700; color: var(--color-marca); }
.fichas-progreso__barra { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--color-borde); overflow: hidden; -webkit-appearance: none; appearance: none; }
.fichas-progreso__barra::-webkit-progress-bar { background: var(--color-borde); border-radius: 999px; }
.fichas-progreso__barra::-webkit-progress-value { background: var(--color-acento); border-radius: 999px; }
.fichas-progreso__barra::-moz-progress-bar { background: var(--color-acento); border-radius: 999px; }
.ficha { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(20px, 5vw, 40px); display: flex; flex-direction: column; gap: 20px; min-height: 280px; }
.ficha:focus { outline: none; }
.ficha { scroll-margin-top: 84px; } /* el ancla #ficha no queda bajo la cabecera fija */
.ficha__subtema { margin: 0; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); overflow-wrap: anywhere; }
.ficha__anverso { margin: 0; font-family: var(--fuente); font-weight: 700; font-size: 1.0625rem; line-height: 1.5; color: var(--color-marca); overflow-wrap: anywhere; } /* misma escala computada que el enunciado del Test (.pregunta-test__enunciado): sans del sistema, 17px, 1.5 -- peso 700 para destacar frente a la respuesta (400) */
.ficha__reverso { border-top: 1px solid var(--color-borde); padding-top: 18px; }
.ficha__reverso-etiqueta { margin: 0 0 10px; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-exito); }
.ficha__referencia { margin: 12px 0 0; font-size: .88rem; color: var(--color-texto-suave); }
.ficha__pregunta-marcado { margin: 0; font-size: 1rem; font-weight: 600; text-align: center; }
.ficha__reverso .contenido-md { font-size: 1.0625rem; line-height: 1.6; color: var(--color-texto); }
.ficha__acciones { display: flex; justify-content: center; }
.ficha__acciones form { margin: 0; }
/* Ficha cerrada: el formulario de "Ver respuesta" es hijo directo de .ficha (en la ficha revelada los formularios van dentro de .ficha__acciones--marcar, asi que esta regla no les afecta). Ocupa el espacio libre de la tarjeta y centra el boton en vertical entre la pregunta y el borde inferior. */
.ficha > form.ficha__acciones { flex: 1; align-items: center; padding: calc(clamp(20px, 5vw, 40px) - 20px) 0 0; } /* padding-top = padding de la tarjeta - gap: mismo hueco encima y debajo del boton */
.ficha__boton { min-height: 52px; min-width: 220px; }
.ficha__acciones--marcar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ficha__acciones--marcar button { width: 100%; }
.btn-ficha { min-height: 56px; padding: 12px 16px; border-radius: 8px; border: 2px solid; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; background: var(--color-superficie); }
.btn-ficha--fallada { border-color: #b3261e; color: #b3261e; }
.btn-ficha--fallada:hover, .btn-ficha--fallada:focus-visible { background: #fbeceb; }
.btn-ficha--sabida { border-color: var(--color-exito); background: var(--color-exito); color: #fff; }
.btn-ficha--sabida:hover, .btn-ficha--sabida:focus-visible { background: #0b5d57; }
.btn-ficha:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.fichas-sesion__nota { margin: 18px 0 12px; font-size: .88rem; color: var(--color-texto-suave); }
.fichas-sesion__salidas, .esquema__navegacion { display: flex; flex-wrap: wrap; gap: 10px; }
.fichas-resultado__mensaje { margin: 0 0 20px; font-weight: 600; color: var(--color-exito); }
.fichas-resultado__falladas { margin: 0; padding-left: 1.4rem; display: grid; gap: 8px; }
.fichas-resultado__falladas li { overflow-wrap: anywhere; }

/* Contenido Markdown renderizado (reverso de fichas y esquemas) */
.contenido-md { line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
.contenido-md > :first-child { margin-top: 0; }
.contenido-md > :last-child { margin-bottom: 0; }
.contenido-md p, .contenido-md ul, .contenido-md ol, .contenido-md blockquote, .contenido-md pre, .contenido-md .md-tabla { margin: 0 0 14px; }
.contenido-md ul, .contenido-md ol { padding-left: 1.4rem; }
.contenido-md li { margin: 4px 0; }
.contenido-md li > ul, .contenido-md li > ol { margin: 4px 0 0; }
.contenido-md strong { color: var(--color-marca); }
.contenido-md code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }
.contenido-md pre { background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 8px; padding: 14px; overflow-x: auto; max-width: 100%; }
.contenido-md pre code { border: 0; padding: 0; background: none; white-space: pre; overflow-wrap: normal; }
.contenido-md blockquote { border-left: 4px solid var(--color-acento); background: #eef3fd; border-radius: 0 8px 8px 0; padding: 10px 14px; }
.contenido-md blockquote > :last-child { margin-bottom: 0; }
.contenido-md hr { border: 0; border-top: 1px solid var(--color-borde); margin: 24px 0; }
.contenido-md h2, .contenido-md h3, .contenido-md h4, .contenido-md h5, .contenido-md h6 { color: var(--color-marca); line-height: 1.3; margin: 28px 0 10px; }
.contenido-md h2 { font-family: var(--fuente-display); font-size: clamp(1.25rem, 3vw, 1.5rem); }
.contenido-md h3 { font-size: 1.15rem; padding-bottom: 4px; border-bottom: 1px solid var(--color-borde); }
.contenido-md h4 { font-size: 1.02rem; }
.contenido-md h5, .contenido-md h6 { font-size: .95rem; }
.md-tabla { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-borde); border-radius: 8px; background: var(--color-superficie); -webkit-overflow-scrolling: touch; }
.md-tabla:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.md-tabla table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.md-tabla th, .md-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; min-width: 8rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.md-tabla th { background: var(--color-fondo); color: var(--color-marca); font-weight: 700; }
.md-tabla tr:last-child td { border-bottom: 0; }

/* Esquemas */
.esquema__titulo { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); line-height: 1.3; margin: 0 0 20px; color: var(--color-marca); overflow-wrap: anywhere; }
.contenido-md--esquema { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: clamp(16px, 4vw, 36px); margin-bottom: 24px; font-size: 1.0625rem; line-height: 1.65; } /* 17px: misma escala de lectura que la respuesta de Fichas */

@media (max-width: 480px) {
  .ficha__acciones--marcar { grid-template-columns: 1fr; }
  .ficha__acciones--marcar form:last-child { order: -1; }
  .md-tabla th, .md-tabla td { min-width: 7rem; font-size: .88rem; }
}

/* =========================================================================
   FASE 5 -- ExamEngine (Simulacros; Examenes oficiales reutilizara esto).
   Las preguntas/opciones/tarjetas usan las clases de Test por temas sin
   tocarlas (.pregunta-test, .alternativa, .lista-preguntas...); aqui solo
   va lo NUEVO del examen: barra fija con cuenta atras, indice 1-N,
   dialogo de confirmacion, resultado y pagina de inicio. Todo acotado a
   .examen / .examen-* / .pagina-examen para no afectar a otros modulos.
   ========================================================================= */

.examen .wrap > *,
.examen-resultado .wrap > * { max-width: var(--ancho-modulo); }
.examen .test-intento__intro { max-width: var(--ancho-modulo); margin-bottom: 20px; }

/* Barra fija: cuenta atras + progreso + indice + finalizar */
.examen-barra { position: sticky; top: 72px; z-index: 6; margin: 0 0 20px; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.examen-barra__fila { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 8px 10px 8px 16px; }
.examen-reloj { margin: 0; display: flex; align-items: baseline; gap: 10px; color: var(--color-marca); }
.examen-reloj__etiqueta { font-size: .85rem; color: var(--color-texto-suave); }
.examen-reloj__valor { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.examen-reloj--final .examen-reloj__valor { color: #b3261e; }
.examen-progreso { margin: 0; font-size: .9rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.examen-progreso span:first-child { font-weight: 700; color: var(--color-marca); }
.examen-barra__acciones { margin-left: auto; display: flex; gap: 8px; }
.examen-boton { min-height: 40px; padding: 8px 14px; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.examen .btn-secundario.examen-boton { background: var(--color-superficie); cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; }

/* Indice 1-N: rejilla de 10 columnas; con JS es un panel desplegable */
.examen-indice { border-top: 1px solid var(--color-borde); padding: 12px 16px 14px; }
.examen--js .examen-indice { display: none; }
.examen--js .examen-indice.examen-indice--abierto { display: block; }
.examen-indice__rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.examen-indice__item { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; border: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-texto); text-decoration: none; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.examen-indice__item:hover { border-color: var(--color-acento); color: var(--color-acento); }
.examen-indice__item--respondida { background: var(--color-acento); border-color: var(--color-acento); color: #fff; }
.examen-indice__item--respondida:hover { color: #fff; }
.examen-indice__item--actual { outline: 2px solid var(--color-marca); outline-offset: 1px; }
.examen-indice__leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: .8rem; color: var(--color-texto-suave); }
.examen-indice__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.examen-indice__muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--color-borde); background: var(--color-superficie); }
.examen-indice__muestra--respondida { background: var(--color-acento); border-color: var(--color-acento); }
.examen-indice__muestra--actual { outline: 2px solid var(--color-marca); outline-offset: 1px; }

/* Las anclas #pregunta-N quedan bajo cabecera + barra, no tapadas */
.examen .pregunta-test { scroll-margin-top: 150px; }
.examen-preguntas { border: 0; margin: 0; padding: 0; min-width: 0; }
.examen--bloqueado .lista-preguntas { opacity: .6; }
.examen-aviso { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: #fdecec; color: #8a1c15; font-weight: 600; }

/* Confirmacion de finalizar */
.examen-dialogo { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 22px 22px 18px; box-shadow: 0 12px 40px rgba(20, 32, 60, .25); color: var(--color-texto); }
.examen-dialogo::backdrop { background: rgba(20, 32, 60, .45); }
.examen-dialogo h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--color-marca); }
.examen-dialogo p { margin: 0 0 18px; color: var(--color-texto-suave); line-height: 1.5; }
.examen-dialogo__acciones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.examen-dialogo__acciones .btn-secundario { cursor: pointer; font: inherit; font-weight: 700; background: var(--color-superficie); }

/* Resultado */
.examen-puntuacion { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 16px 20px; margin: 0 0 12px; }
.examen-puntuacion__etiqueta { margin: 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); }
.examen-puntuacion__valor { margin: 2px 0 4px; color: var(--color-marca); font-variant-numeric: tabular-nums; }
.examen-puntuacion__valor strong { font-size: 2rem; }
.examen-puntuacion__valor span { font-size: 1.05rem; color: var(--color-texto-suave); }
.examen-puntuacion__formula { margin: 0; font-size: .85rem; color: var(--color-texto-suave); }
.examen-resultado .test-resultado__resumen { margin-bottom: 12px; }
@media (min-width: 640px) { .examen-resultado__resumen { grid-template-columns: repeat(3, 1fr); } }
.examen-resultado__nota { margin: 0 0 20px; font-size: .9rem; color: var(--color-texto-suave); }
.examen-resultado .test-resultado__acciones { margin-top: 20px; }
.examen-resultado__tema { font-weight: 600; color: var(--color-texto-suave); text-transform: none; letter-spacing: 0; }
.examen-resultado .test-resultado__kicker a { color: inherit; }

/* Inicio de simulacros + historial */
.examen-inicio { display: flex; flex-direction: column; gap: 18px; }
.examen-inicio form { margin: 0; }
.examen-inicio__cta { width: 100%; min-height: 52px; }
.examen-inicio__tarjeta { display: block; }
.examen-historial__titulo { margin: 36px 0 12px; font-size: 1.1rem; color: var(--color-marca); }
.examen-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: var(--ancho-modulo); }
.examen-historial__item { display: grid; grid-template-columns: 6.5rem 7rem minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 10px; font-size: .92rem; }
.examen-historial__fecha, .examen-historial__detalle { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.examen-historial__nota { color: var(--color-marca); font-variant-numeric: tabular-nums; }
.examen-historial__nota strong { font-size: 1.05rem; }
.examen-historial__enlace { font-weight: 600; }
.examen-historial__vacio { color: var(--color-texto-suave); margin: 0; }

@media (max-width: 719px) {
  .examen-barra { top: 64px; }
  .examen-barra__fila { padding: 8px 10px 8px 12px; gap: 8px 12px; }
  .examen-reloj__etiqueta { font-size: .78rem; }
  .examen-progreso__texto { display: none; }
  .examen-barra__acciones { width: 100%; margin-left: 0; }
  .examen-barra__acciones .examen-boton { flex: 1; justify-content: center; }
  .examen-boton { min-height: 36px; padding: 6px 12px; }
  .examen-boton__extra { display: none; }
  .examen-indice { padding: 10px 12px 12px; }
  .examen-indice__rejilla { gap: 4px; max-width: none; }
  .examen-indice__item { height: 30px; font-size: .78rem; }
  .examen .pregunta-test { scroll-margin-top: 190px; }
  .examen-historial__item { grid-template-columns: 1fr auto; }
  .examen-historial__detalle { grid-column: 1 / -1; }
}

/* Test por temas -- historial "Mis tests" (reutiliza .examen-historial de
   Simulacros) y boton "Repetir preguntas falladas" en el resultado. */
.examen-historial__item--tema { grid-template-columns: 6.5rem 7.5rem 4.5rem minmax(0, 1fr) auto; }
.examen-historial__tema { color: var(--color-marca); font-weight: 600; white-space: nowrap; }
.examen-historial__etiqueta { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #eef2ff; color: var(--color-acento); font-size: .72rem; font-weight: 700; vertical-align: 1px; }
.test-temas-selector .examen-historial__titulo { margin-top: 40px; }
.test-resultado__acciones form { margin: 0; }
.btn-secundario--boton { background: transparent; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 719px) {
  .examen-historial__item--tema { grid-template-columns: auto auto 1fr; }
  .examen-historial__item--tema .examen-historial__nota { text-align: right; }
  .examen-historial__item--tema .examen-historial__detalle { grid-column: 1 / -1; }
}

/* "Repetir test" (encargo 28 sept 2026): ocupa la MISMA celda "auto" del
   grid que antes solo tenia "Ver resultado" -- el numero de columnas del
   grid (".examen-historial__item--tema" arriba) no cambia, "acciones" es
   un unico item flex con los dos controles dentro, para no alterar la
   altura compacta de la fila ni el layout ya validado. El boton "Repetir
   test" reutiliza la MISMA ligereza visual que "Ver resultado"
   (".examen-historial__enlace"): sin fondo, sin borde, mismo peso/tamaño
   de letra y color de enlace -- nunca un boton grande. */
.examen-historial__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.examen-historial__form-repetir {
  margin: 0;
}

.examen-historial__enlace--boton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-acento);
  text-decoration: underline;
  cursor: pointer;
}

.examen-historial__enlace--boton:hover,
.examen-historial__enlace--boton:focus-visible {
  color: var(--color-marca);
}

@media (max-width: 719px) {
  .examen-historial__item--tema .examen-historial__acciones {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Test por temas -- acceso "Mis tests" en el selector y pantalla Mis tests
   con paginacion (reutiliza .examen-historial). */
.test-temas-selector__secundario { max-width: var(--ancho-modulo); margin: 16px 0 0; }
.test-temas-selector__mis-tests { padding: 8px 16px; font-size: .92rem; }
.mis-tests .migas { margin-bottom: 10px; }
.mis-tests__historial { max-width: var(--ancho-modulo); }
.mis-tests__total { margin: 0 0 10px; font-size: .88rem; color: var(--color-texto-suave); }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; font-size: .92rem; }
.paginacion__enlace { font-weight: 600; text-decoration: none; padding: 8px 4px; }
.paginacion__enlace:hover { text-decoration: underline; }
.paginacion__enlace--inactivo { color: var(--color-texto-suave); opacity: .55; }
.paginacion__estado { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.mis-tests__volver { margin: 28px 0 0; }

/* FASE 5 -- Examenes oficiales: selector compacto de convocatorias
   (EB42 -> EB36). Unica pieza nueva del modulo; todo lo demas reutiliza
   .examen-* / .examen-historial / .test-temas-selector. */
.examen-convocatorias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: var(--ancho-modulo); }
.examen-convocatorias__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto 7.5rem; align-items: center; gap: 4px 16px; padding: 10px 12px 10px 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 10px; font-size: .92rem; }
.examen-convocatorias__item--abierto { border-color: var(--color-acento); }
.examen-convocatorias__codigo { font-weight: 700; color: var(--color-marca); font-size: 1rem; letter-spacing: .02em; }
.examen-convocatorias__descripcion { color: var(--color-texto); overflow-wrap: anywhere; }
.examen-convocatorias__meta { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.examen-convocatorias__item--abierto .examen-convocatorias__meta { color: var(--color-acento); font-weight: 600; }
.examen-convocatorias__accion { margin: 0; }
.examen-convocatorias__boton { width: 100%; min-height: 38px; padding: 6px 12px; font-size: .92rem; }
.examen-convocatorias__boton[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 719px) {
  .examen-convocatorias__item { grid-template-columns: 3.8rem minmax(0, 1fr) 6.5rem; }
  .examen-convocatorias__meta { grid-column: 2 / 3; grid-row: 2; white-space: normal; }
  .examen-convocatorias__accion { grid-column: 3; grid-row: 1 / 3; }
}

/* Examenes oficiales -- capa de vigencia actual en la revision del
   resultado y vuelta al listado. Solo clases nuevas .examen-vigencia*. */
.examen-vigencia-aviso { max-width: var(--ancho-modulo); margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--color-borde); border-left: 4px solid var(--color-acento); border-radius: 8px; background: var(--color-superficie); font-size: .92rem; color: var(--color-texto); }
.examen-vigencia-aviso p { margin: 0 0 4px; }
.examen-vigencia-aviso p:last-child { margin-bottom: 0; }
.examen-vigencia { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: #f4f6fa; border: 1px solid var(--color-borde); font-size: .9rem; color: var(--color-texto); }
.examen-vigencia p { margin: 0 0 4px; }
.examen-vigencia p:last-child { margin-bottom: 0; }
.examen-vigencia--vigente { background: #eef8f3; border-color: #cfe8dc; }
.examen-vigencia--actualizada { background: #fff6e6; border-color: #f2d9a6; }
.examen-vigencia--no_utilizable { background: #fdecec; border-color: #f3c7c3; }
.examen-vigencia__alerta { font-weight: 600; color: #7a4b00; }
.examen-vigencia--no_utilizable .examen-vigencia__alerta { color: #8a1c15; }
.examen-vigencia__nota { color: var(--color-texto); }
.examen-vigencia__fuente { font-size: .8rem; color: var(--color-texto-suave); }
.examen-vigencia__letra { font-weight: 700; color: var(--color-marca); }


/* =========================================================================
   FASE 6 -- Psicotecnicos. Todo acotado a clases .psico-* (y a
   .pagina-psico*) para no tocar ningun modulo aprobado. La simulacion
   reutiliza tal cual las clases .examen-* / .pregunta-test / .alternativa
   del ExamEngine y solo añade aqui lo propio de las figuras y opciones.
   Tres registros visuales: portada mas visual (hero navy con figuras del
   banco), interior del ejercicio sobrio y resultados con tarjetas/metricas.
   ========================================================================= */

:root {
  --psico-navy: #071d38;
  --psico-navy-2: #0c2b52;
  --psico-azul: #1682ff;
  --psico-azul-suave: #e8f1ff;
  --psico-texto-claro: #dbe7fb;
  --psico-ok: #0f766e;
  --psico-ok-fondo: #e6f6f2;
  --psico-ko: #b3261e;
  --psico-ko-fondo: #fdecec;
  --psico-lento: #9a4b00;
  --psico-lento-fondo: #fff3e2;
}

/* ---- Figuras del banco (SVG en linea, heredan currentColor) ---- */
.psico-fig { width: 100%; color: var(--color-marca); }
.psico-fig svg { display: block; width: 100%; height: auto; }
.psico-fig--centrada { margin-inline: auto; }
.psico-fig--enunciado { margin-block: 6px 16px; }
.psico-fig--opcion { margin-inline: auto; }
.psico-w-40 { max-width: 40px; }
.psico-w-60 { max-width: 60px; }
.psico-w-80 { max-width: 80px; }
.psico-w-100 { max-width: 100px; }
.psico-w-120 { max-width: 120px; }
.psico-w-140 { max-width: 140px; }
.psico-w-160 { max-width: 160px; }
.psico-w-180 { max-width: 180px; }
.psico-w-200 { max-width: 200px; }
.psico-w-220 { max-width: 220px; }
.psico-w-240 { max-width: 240px; }
.psico-w-260 { max-width: 260px; }
.psico-w-280 { max-width: 280px; }
.psico-w-300 { max-width: 300px; }
.psico-w-320 { max-width: 320px; }
.psico-w-340 { max-width: 340px; }
.psico-w-360 { max-width: 360px; }
.psico-w-380 { max-width: 380px; }
.psico-w-400 { max-width: 400px; }
.psico-w-420 { max-width: 420px; }
.psico-w-440 { max-width: 440px; }
.psico-w-460 { max-width: 460px; }
.psico-w-480 { max-width: 480px; }
.psico-w-500 { max-width: 500px; }
.psico-w-520 { max-width: 520px; }
.psico-w-540 { max-width: 540px; }
.psico-w-560 { max-width: 620px; }
.psico-w-580 { max-width: 580px; }
.psico-w-600 { max-width: 600px; }
.psico-w-620 { max-width: 620px; }
.psico-w-640 { max-width: 640px; }
.psico-w-660 { max-width: 660px; }
.psico-w-680 { max-width: 680px; }
.psico-w-700 { max-width: 700px; }
.psico-w-720 { max-width: 720px; }

/* ---- Portada: hero ---- */
/* (fondo de main en Psicotecnicos: lo aporta ".pagina-aula-estudio main") */
.psico-hero { background: radial-gradient(120% 140% at 85% 20%, #123a6d 0%, var(--psico-navy-2) 38%, var(--psico-navy) 100%); color: #fff; overflow: hidden; }
.psico-hero__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: center; padding-top: 32px; padding-bottom: 36px; max-width: 1560px; }
.psico-hero__texto { grid-column: 1 / -1; order: -1; min-width: 0; }
.psico-hero__lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.psico-hero__migas { font-size: .85rem; color: var(--psico-texto-claro); margin: 0 0 18px; }
.psico-hero__migas a { color: inherit; }
.psico-hero__kicker { margin: 0 0 6px; font-size: .9rem; color: #9fc3ff; font-weight: 600; letter-spacing: .02em; }
.psico-hero__titulo { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.15; margin: 0 0 12px; }
.psico-hero__lead { margin: 0 0 22px; color: var(--psico-texto-claro); font-size: 1.02rem; max-width: 56ch; }
.psico-hero__lead strong { color: #fff; }
.psico-hero__datos { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.psico-hero__datos li { display: flex; flex-direction: column; min-width: 92px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); }
.psico-hero__datos strong { font-size: 1.3rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.psico-hero__datos span { font-size: .8rem; color: var(--psico-texto-claro); }
.psico-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.psico-hero__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 10px; background: var(--psico-azul); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 74, 173, .35); }
.psico-hero__cta:hover, .psico-hero__cta:focus-visible { background: #3694ff; }
.psico-hero__secundario { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; text-decoration: none; }
.psico-hero__secundario:hover, .psico-hero__secundario:focus-visible { background: rgba(255,255,255,.08); }
.psico-hero :focus-visible { outline-color: #9fc3ff; }

/* Collage de figuras reales del banco */
.psico-collage__tarjeta { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); color: #cfe0ff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.psico-collage__tarjeta svg { display: block; width: 100%; height: auto; max-height: 190px; }
.psico-collage__etiqueta { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fb6f5; }
.psico-collage__tarjeta--cubos svg { max-height: 120px; }
.psico-collage__serie { margin: 0; font-size: 1.08rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---- Portada: modos ---- */
.psico-modos { padding: 32px 0 64px; }
.psico-modos .wrap { max-width: 1560px; }
.psico-modo { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 16px; padding: 22px 24px 24px; box-shadow: var(--sombra); scroll-margin-top: 90px; }
.psico-modo--categoria { border-top: 4px solid var(--psico-azul); }
.psico-modo--mixto { border-top: 4px solid #5b8def; }
.psico-modo--simulacion { border-top: 4px solid var(--psico-navy); }
.psico-modo__cabecera { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.psico-modo__numero { flex: 0 0 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--psico-navy); color: #fff; font-weight: 700; }
.psico-modo__cabecera h2 { margin: 2px 0 4px; font-size: 1.25rem; color: var(--color-marca); }
.psico-modo__cabecera p { margin: 0; color: var(--color-texto-suave); max-width: 72ch; }
.psico-modos__pareja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: stretch; }
.psico-modos__pareja .psico-modo { display: flex; flex-direction: column; }
.psico-modos__pareja .psico-form { display: flex; flex-direction: column; flex: 1; }
.psico-modos__pareja .psico-resumen { margin-top: auto; }
.psico-form { margin: 0; }
.psico-paso { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.psico-paso__titulo { padding: 0; margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--color-marca); display: flex; align-items: center; gap: 8px; }
.psico-paso__titulo span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--psico-azul-suave); color: var(--psico-azul); font-size: .78rem; }
.psico-pasos-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 24px; }

.psico-categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.psico-categoria { position: relative; display: block; cursor: pointer; }
.psico-categoria input, .psico-pastilla input, .psico-perfil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.psico-categoria__cuerpo { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-superficie); transition: border-color .12s ease, box-shadow .12s ease; }
.psico-categoria__nombre { font-weight: 700; color: var(--color-marca); }
.psico-categoria__desc { font-size: .84rem; line-height: 1.4; color: var(--color-texto-suave); }
.psico-categoria__n { margin-top: auto; padding-top: 4px; font-size: .8rem; font-weight: 600; color: var(--psico-azul); }
.psico-categoria:hover .psico-categoria__cuerpo { border-color: var(--psico-azul); }
.psico-categoria input:checked + .psico-categoria__cuerpo { border-color: var(--psico-azul); background: var(--psico-azul-suave); box-shadow: inset 0 0 0 1px var(--psico-azul); }
.psico-categoria input:focus-visible + .psico-categoria__cuerpo, .psico-pastilla input:focus-visible + span, .psico-perfil input:focus-visible + .psico-perfil__cuerpo { outline: 3px solid var(--psico-azul); outline-offset: 2px; }
.psico-categoria input:disabled + .psico-categoria__cuerpo { opacity: .5; cursor: not-allowed; }

.psico-pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.psico-pastilla { position: relative; cursor: pointer; }
.psico-pastilla span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1px solid var(--color-borde); border-radius: 999px; background: var(--color-superficie); font-weight: 600; font-size: .95rem; color: var(--color-texto); }
.psico-pastilla:hover span { border-color: var(--psico-azul); }
.psico-pastilla input:checked + span { background: var(--psico-navy); border-color: var(--psico-navy); color: #fff; }

.psico-perfiles { display: grid; gap: 8px; }
.psico-perfil { position: relative; display: block; cursor: pointer; }
.psico-perfil__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 14px; border: 1px solid var(--color-borde); border-radius: 12px; }
.psico-perfil__nombre { font-weight: 700; color: var(--color-marca); }
.psico-perfil__meta { font-size: .85rem; font-weight: 600; color: var(--psico-azul); }
.psico-perfil__desc { font-size: .85rem; color: var(--color-texto-suave); }
.psico-perfil:hover .psico-perfil__cuerpo { border-color: var(--psico-azul); }
.psico-perfil input:checked + .psico-perfil__cuerpo { border-color: var(--psico-navy); background: #f1f5fc; box-shadow: inset 0 0 0 1px var(--psico-navy); }

.psico-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: #f4f7fc; border: 1px solid #e3e9f3; }
.psico-resumen--solo-boton { justify-content: flex-end; background: transparent; border: 0; padding: 0; }
.psico-resumen__texto { margin: 0; color: var(--color-texto-suave); }
.psico-resumen__texto strong { color: var(--color-marca); }
.psico-resumen__boton { min-height: 46px; cursor: pointer; border: 0; font: inherit; font-weight: 700; }
.psico-resumen__boton:disabled { opacity: .55; cursor: not-allowed; }
.psico-nota { font-size: .85rem; color: var(--color-texto-suave); line-height: 1.5; margin: 8px 0 0; }
.psico-pie-nota { margin: 26px 0 0; font-size: .85rem; color: var(--color-texto-suave); max-width: 90ch; }

/* ---- Sesion de entrenamiento (zona de concentracion) ---- */
.psico-sesion { padding: 20px 0 56px; }
.psico-sesion__wrap { max-width: 860px; }
.psico-barra { position: sticky; top: 72px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 16px 0; margin-bottom: 16px; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.psico-barra__info { min-width: 0; }
.psico-barra__ruta { margin: 0; font-size: .85rem; color: var(--color-texto-suave); }
.psico-barra__ruta a { color: inherit; }
.psico-barra__progreso { margin: 2px 0 0; font-size: .95rem; color: var(--color-texto); }
.psico-barra__progreso strong { color: var(--color-marca); }
.psico-barra__categoria { color: var(--color-texto-suave); font-size: .88rem; }
.psico-reloj { margin: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; color: var(--color-marca); }
.psico-reloj__etiqueta { font-size: .75rem; color: var(--color-texto-suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.psico-reloj__valor { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.psico-reloj--memoria .psico-reloj__valor { color: var(--psico-azul); }
.psico-reloj--final .psico-reloj__valor { color: var(--psico-ko); }
.psico-barra__avance { grid-column: 1 / -1; width: calc(100% + 32px); margin: 8px -16px 0; height: 5px; border: 0; appearance: none; -webkit-appearance: none; background: #edf1f7; display: block; }
.psico-barra__avance::-webkit-progress-bar { background: #edf1f7; }
.psico-barra__avance::-webkit-progress-value { background: var(--psico-azul); }
.psico-barra__avance::-moz-progress-bar { background: var(--psico-azul); }
.psico-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; vertical-align: 1px; background: var(--psico-azul-suave); color: var(--psico-azul); white-space: nowrap; }
.psico-chip--repaso { background: #efe9ff; color: #5b3cc4; }
.psico-chip--ok { background: var(--psico-ok-fondo); color: var(--psico-ok); }
.psico-chip--ko { background: var(--psico-ko-fondo); color: var(--psico-ko); }
.psico-chip--lenta { background: var(--psico-lento-fondo); color: var(--psico-lento); }

.psico-ejercicio { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 14px; padding: 22px 24px 24px; }
.psico-instrucciones { margin: 0 0 12px; color: var(--color-texto-suave); font-size: .95rem; }
.psico-texto-base { margin: 0 0 14px; padding: 14px 16px; border-left: 4px solid var(--psico-azul); border-radius: 8px; background: #f6f8fc; }
.psico-texto-base p { margin: 0; line-height: 1.65; }
.psico-enunciado { margin: 0 0 18px; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--color-texto); white-space: pre-line; overflow-wrap: anywhere; }
.psico-enunciado--mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; letter-spacing: .02em; }
.psico-tabla-envoltorio { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.psico-tabla { border-collapse: collapse; min-width: min(100%, 420px); font-size: .98rem; font-variant-numeric: tabular-nums; }
.psico-tabla caption { text-align: left; font-weight: 700; font-size: .9rem; color: var(--color-marca); padding: 0 0 6px; }
.psico-tabla th, .psico-tabla td { border: 1px solid var(--color-borde); padding: 7px 12px; text-align: left; }
.psico-tabla th { background: #f3f6fb; font-size: .88rem; color: var(--color-marca); }
.psico-tabla--mono td { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; white-space: nowrap; letter-spacing: .04em; }

/* Opciones del entrenamiento: botones grandes (raton y tactil) */
.psico-opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; min-width: 0; }
.psico-opciones--visuales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psico-opcion { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: 1.02rem; text-align: left; line-height: 1.4; }
button.psico-opcion { cursor: pointer; transition: border-color .1s ease, background .1s ease; }
button.psico-opcion:hover { border-color: var(--psico-azul); background: #f7faff; }
button.psico-opcion:active { background: var(--psico-azul-suave); }
.psico-opciones--visuales .psico-opcion { flex-direction: column; justify-content: flex-start; padding: 10px 10px 12px; }
.psico-opcion__letra { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #eef2f8; color: var(--color-marca); font-weight: 700; font-size: .95rem; }
.psico-opciones--visuales .psico-opcion__letra { align-self: flex-start; }
.psico-opcion__texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.psico-opcion__texto--mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; letter-spacing: .03em; }
.psico-opcion--correcta { border-color: var(--psico-ok); background: var(--psico-ok-fondo); }
.psico-opcion--correcta .psico-opcion__letra { background: var(--psico-ok); color: #fff; }
.psico-opcion--incorrecta { border-color: var(--psico-ko); background: var(--psico-ko-fondo); }
.psico-opcion--incorrecta .psico-opcion__letra { background: var(--psico-ko); color: #fff; }
.psico-etiqueta { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--color-marca); color: #fff; white-space: nowrap; }
.psico-etiqueta--ok { background: var(--psico-ok); }
.psico-etiqueta--ko { background: var(--psico-ko); }
.psico-opciones--visuales .psico-etiqueta { align-self: center; }
.psico-acciones-pregunta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.psico-boton-blanco { min-height: 42px; padding: 8px 14px; border: 1px dashed #b8c2d3; border-radius: 10px; background: transparent; color: var(--color-texto-suave); font: inherit; font-size: .92rem; cursor: pointer; }
.psico-boton-blanco:hover, .psico-boton-blanco:focus-visible { border-color: var(--psico-azul); color: var(--psico-azul); }
.psico-atajos { margin: 0; font-size: .8rem; color: var(--color-texto-suave); }
.psico-sesion--enviando .psico-opciones { opacity: .7; pointer-events: none; }

/* Memoria */
.psico-memoria__aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--psico-azul-suave); color: var(--color-marca); }
.psico-memoria__contenido { margin: 0 0 16px; }
.psico-memoria__titulo { margin: 0 0 10px; font-weight: 700; color: var(--color-marca); }
.psico-memoria__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.psico-memoria__lista li { padding: 10px 12px; border: 1px solid var(--color-borde); border-radius: 10px; background: #fbfcfe; font-size: 1.05rem; font-weight: 600; text-align: center; }
.psico-memoria__ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; }
.psico-memoria__ficha div { padding: 10px 12px; border: 1px solid var(--color-borde); border-radius: 10px; background: #fbfcfe; }
.psico-memoria__ficha dt { font-size: .8rem; color: var(--color-texto-suave); }
.psico-memoria__ficha dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--color-marca); }
.psico-memoria__accion { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.psico-memoria__accion .btn-primario { min-height: 46px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.psico-memoria__oculto { margin: 0 0 10px; font-size: .85rem; color: var(--color-texto-suave); font-style: italic; }
.psico-memoria-revision { margin: 14px 0 0; }
.psico-memoria-revision summary { cursor: pointer; font-weight: 600; color: var(--psico-azul); }
.psico-memoria-revision .psico-memoria__contenido { margin-top: 10px; }

/* Correccion inmediata */
.psico-correccion { margin-top: 20px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--color-borde); border-left: 5px solid var(--color-texto-suave); background: #fbfcfe; scroll-margin-top: 150px; }
.psico-correccion:focus { outline: none; }
.psico-correccion--acierto { border-left-color: var(--psico-ok); }
.psico-correccion--error { border-left-color: var(--psico-ko); }
.psico-correccion__estado { margin: 0 0 6px; font-size: 1.25rem; }
.psico-correccion--acierto .psico-correccion__estado { color: var(--psico-ok); }
.psico-correccion--error .psico-correccion__estado { color: var(--psico-ko); }
.psico-correccion--blanco .psico-correccion__estado { color: var(--color-texto-suave); }
.psico-correccion__respuesta { margin: 0 0 12px; }
.psico-tiempos { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.psico-tiempos div { min-width: 130px; padding: 8px 14px; border-radius: 10px; background: var(--color-superficie); border: 1px solid var(--color-borde); }
.psico-tiempos dt { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); }
.psico-tiempos dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--color-marca); font-variant-numeric: tabular-nums; }
.psico-tiempos__balance dd { color: var(--psico-ok); font-size: 1rem; }
.psico-tiempos__balance--lento { background: var(--psico-lento-fondo) !important; border-color: #f1d3a6 !important; }
.psico-tiempos__balance--lento dd { color: var(--psico-lento); }
.psico-nota--objetivo { margin-top: 6px; font-size: .8rem; }
.psico-explicacion, .psico-metodo { margin-top: 16px; }
.psico-explicacion h3, .psico-metodo h3 { margin: 0 0 4px; font-size: .95rem; color: var(--color-marca); }
.psico-explicacion p, .psico-metodo p { margin: 0; line-height: 1.6; white-space: pre-line; }
.psico-metodo { padding: 12px 14px; border-radius: 10px; background: var(--psico-azul-suave); border: 1px solid #cfe0ff; }
.psico-metodo h3 { color: #0b4fb3; }
.psico-correccion__acciones { margin-top: 18px; display: flex; justify-content: flex-end; }
.psico-siguiente { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.psico-siguiente:hover, .psico-siguiente:focus-visible { text-decoration: underline; }
.psico-sesion__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.psico-sesion__pie form { margin: 0; }
.psico-enlace-suave { color: var(--color-texto-suave); font-size: .9rem; }
.psico-boton-terminar { background: transparent; border: 0; color: var(--color-texto-suave); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; padding: 8px 4px; min-height: 40px; }
.psico-boton-terminar:hover, .psico-boton-terminar:focus-visible { color: var(--psico-ko); }

/* ---- Simulacion (sobre las clases del ExamEngine) ---- */
.psico-simulacion .psico-enunciado { font-size: 1.0625rem; margin-bottom: 14px; }
.psico-sim-ejercicio__cat { font-weight: 600; text-transform: none; letter-spacing: 0; }
.psico-sim-opciones--visuales, .psico-sim-opciones.psico-opciones--visuales { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.psico-sim-opcion { align-items: center; }
.psico-sim-opcion__contenido { flex: 1; min-width: 0; }
.psico-opciones--visuales .psico-sim-opcion { flex-wrap: wrap; justify-content: flex-start; }
.psico-opciones--visuales .psico-sim-opcion .psico-sim-opcion__contenido { flex-basis: 100%; }
.psico-sim-opcion .psico-opcion__letra { flex-basis: 26px; width: 26px; height: 26px; font-size: .85rem; }

/* ---- Resultados ---- */
.psico-resultado { padding: 32px 0 64px; }
.psico-resultado .wrap, .psico-mis .wrap { max-width: 1080px; }
.psico-resultado__kicker { margin: 0 0 4px; font-size: .88rem; color: var(--color-texto-suave); }
.psico-resultado__kicker a { color: inherit; }
.psico-resultado__titulo { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 1.95rem); color: var(--color-marca); margin: 0 0 16px; }
.psico-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff6e6; border: 1px solid #f2d9a6; color: #6b4200; }
.psico-aviso--suave { background: #f4f6fa; border-color: var(--color-borde); color: var(--color-texto); }
.psico-metricas { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.psico-metrica { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 14px; padding: 14px 16px; }
.psico-metrica--principal { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--psico-navy-2), var(--psico-navy)); color: #fff; border: 0; }
.psico-metrica__etiqueta { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-texto-suave); }
.psico-metrica--principal .psico-metrica__etiqueta { color: #9fc3ff; }
.psico-metrica__valor { margin: 4px 0 2px; color: var(--color-marca); font-variant-numeric: tabular-nums; }
.psico-metrica__valor strong { font-size: 1.6rem; }
.psico-metrica--principal .psico-metrica__valor { color: #fff; }
.psico-metrica--principal .psico-metrica__valor strong { font-size: 2.6rem; }
.psico-metrica__valor span { font-size: 1.1rem; opacity: .8; }
.psico-metrica__detalle { margin: 0; font-size: .82rem; color: var(--color-texto-suave); }
.psico-reparto { display: block; width: 100%; height: 12px; margin: 12px 0 8px; border-radius: 6px; overflow: hidden; }
.psico-reparto__acierto { fill: #34d399; }
.psico-reparto__error { fill: #f87171; }
.psico-reparto__blanco { fill: rgba(255,255,255,.28); }
.psico-leyenda { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .85rem; color: var(--psico-texto-claro); }
.psico-leyenda__punto { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: -6px; }
.psico-leyenda__punto--acierto { background: #34d399; }
.psico-leyenda__punto--error { background: #f87171; }
.psico-leyenda__punto--blanco { background: rgba(255,255,255,.45); }
.psico-formula { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-borde); border-left: 4px solid var(--psico-navy); background: var(--color-superficie); }
.psico-formula p { margin: 0; }
.psico-resultado__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }
.psico-resultado__acciones form { margin: 0; }
.psico-resultado__acciones .btn-primario, .psico-resultado__acciones .btn-secundario { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font: inherit; font-weight: 700; }
.psico-resultado__acciones button.btn-primario { border: 0; }
.psico-resultado__seccion { margin: 32px 0 12px; font-size: 1.2rem; color: var(--color-marca); }
.psico-desglose-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.psico-desglose, .psico-historial { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; font-size: .95rem; }
.psico-desglose th, .psico-desglose td, .psico-historial th, .psico-historial td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.psico-desglose thead th, .psico-historial thead th { background: #f3f6fb; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); }
.psico-desglose tbody tr:last-child > *, .psico-historial tbody tr:last-child > * { border-bottom: 0; }
.psico-desglose tbody th { font-weight: 700; color: var(--color-marca); }
.psico-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.psico-desglose__precision { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.psico-desglose__precision span { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2em; text-align: right; }
.psico-minibarra { display: block; flex: 1; width: 100%; min-width: 70px; height: 8px; }
.psico-minibarra__fondo { fill: #e8edf5; }
.psico-minibarra__relleno { fill: var(--psico-ok); }
.psico-minibarra--baja .psico-minibarra__relleno { fill: var(--psico-ko); }
.psico-dificultades { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 620px; }
.psico-dificultades li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem; align-items: center; gap: 12px; }
.psico-dificultades__nombre { font-weight: 700; color: var(--color-marca); }
.psico-dificultades__dato { font-size: .9rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }

.psico-revision { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.psico-revision__item { background: var(--color-superficie); border: 1px solid var(--color-borde); border-left: 4px solid var(--color-texto-suave); border-radius: 10px; }
.psico-revision__item--acierto { border-left-color: var(--psico-ok); }
.psico-revision__item--error { border-left-color: var(--psico-ko); }
.psico-revision__item summary { display: grid; grid-template-columns: 2rem 6rem minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.psico-revision__item summary::-webkit-details-marker { display: none; }
.psico-revision__item summary::after { content: "▾"; grid-column: 5; color: var(--color-texto-suave); }
.psico-revision__item details[open] summary::after { content: "▴"; }
.psico-revision__num { font-weight: 700; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.psico-revision__estado { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.psico-revision__item--acierto .psico-revision__estado { color: var(--psico-ok); }
.psico-revision__item--error .psico-revision__estado { color: var(--psico-ko); }
.psico-revision__item--blanco .psico-revision__estado { color: var(--color-texto-suave); }
.psico-revision__tema { color: var(--color-texto); font-size: .92rem; overflow-wrap: anywhere; }
.psico-revision__tiempo { font-size: .88rem; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.psico-revision__cuerpo { padding: 4px 16px 16px; border-top: 1px solid var(--color-borde); }
.psico-revision__cuerpo .psico-instrucciones { margin-top: 12px; }
.psico-revision__cuerpo .psico-enunciado { font-size: 1.02rem; }

/* ---- Mis psicotecnicos ---- */
.psico-mis { padding: 32px 0 64px; }
.psico-mis__intro { color: var(--color-texto-suave); margin: -6px 0 18px; }
.psico-historial__fecha { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-texto-suave); }
.psico-historial__modo { font-weight: 600; color: var(--color-marca); }
.psico-historial__ok { color: var(--psico-ok); font-weight: 700; }
.psico-historial__ko { color: var(--psico-ko); font-weight: 700; }
.psico-historial__blancos { display: block; font-size: .75rem; font-weight: 400; color: var(--color-texto-suave); }
.psico-historial__accion { text-align: right; white-space: nowrap; }
.psico-historial__accion a { font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 979px) {
  .psico-hero__inner { padding-top: 28px; }
  .psico-collage__tarjeta svg { max-height: 150px; }
  .psico-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psico-modos__pareja { grid-template-columns: 1fr; }
  .psico-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psico-metrica--principal { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 719px) {
  .psico-hero__lado { display: none; }
  .psico-hero__inner { padding-top: 20px; padding-bottom: 28px; }
  .psico-hero__datos li { min-width: 0; flex: 1 1 40%; }
  .psico-modo { padding: 18px 16px 18px; border-radius: 14px; }
  .psico-pasos-fila { grid-template-columns: 1fr; }
  .psico-categorias { gap: 8px; }
  .psico-categoria__desc { display: none; }
  .psico-categoria__cuerpo { padding: 10px 12px; }
  .psico-resumen { flex-direction: column; align-items: stretch; }
  .psico-resumen__boton { width: 100%; }
  .psico-sesion { padding-top: 12px; }
  .psico-barra { top: 64px; padding: 8px 12px 0; }
  .psico-barra__avance { width: calc(100% + 24px); margin: 6px -12px 0; }
  .psico-barra__categoria { display: block; font-size: .8rem; }
  .psico-barra__sep { display: none; }
  .psico-reloj__valor { font-size: 1.2rem; }
  .psico-ejercicio { padding: 16px 14px 18px; border-radius: 12px; }
  .psico-enunciado { font-size: 1.05rem; }
  .psico-opciones--visuales, .psico-sim-opciones.psico-opciones--visuales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psico-opcion { min-height: 52px; }
  .psico-atajos { display: none; }
  .psico-tiempos div { flex: 1 1 40%; min-width: 0; }
  .psico-correccion { padding: 14px 14px; }
  .psico-correccion__acciones .psico-siguiente { width: 100%; justify-content: center; }
  .psico-metricas { gap: 8px; }
  .psico-metrica { padding: 12px; }
  .psico-metrica__valor strong { font-size: 1.35rem; }
  .psico-metrica--principal .psico-metrica__valor strong { font-size: 2.2rem; }
  .psico-resultado__acciones > * { flex: 1 1 100%; }
  .psico-resultado__acciones .btn-primario, .psico-resultado__acciones .btn-secundario { width: 100%; justify-content: center; }
  /* Tablas -> tarjetas apiladas en movil */
  .psico-desglose thead, .psico-historial thead { display: none; }
  .psico-desglose, .psico-desglose tbody, .psico-desglose tr, .psico-historial, .psico-historial tbody, .psico-historial tr { display: block; width: 100%; }
  .psico-desglose tr, .psico-historial tr { padding: 10px 12px; border-bottom: 1px solid var(--color-borde); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .psico-desglose tbody tr:last-child, .psico-historial tbody tr:last-child { border-bottom: 0; }
  .psico-desglose th, .psico-desglose td, .psico-historial td { display: block; padding: 0; border: 0; text-align: left !important; }
  .psico-desglose tbody th { grid-column: 1 / -1; }
  .psico-desglose td[data-etiqueta]::before, .psico-historial td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-texto-suave); }
  .psico-desglose td[data-etiqueta="Precisión"], .psico-desglose td[data-etiqueta="Lectura"] { grid-column: 1 / -1; }
  .psico-historial td[data-etiqueta="Modo"] { grid-column: 1 / -1; }
  .psico-historial__accion { grid-column: 1 / -1; text-align: left !important; padding-top: 4px !important; }
  .psico-revision__item summary { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .psico-revision__tema { grid-column: 2 / 4; grid-row: 2; font-size: .85rem; }
  .psico-revision__tiempo { grid-column: 3; grid-row: 1; }
  .psico-revision__item summary::after { grid-column: 4; grid-row: 1; }
  .psico-revision__cuerpo { padding: 4px 12px 14px; }
  .psico-dificultades li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .psico-dificultades__dato { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .psico-categoria__cuerpo, button.psico-opcion { transition: none; }
}
.pagina-psico a.btn-primario, .pagina-psico a.btn-secundario { text-decoration: none; }

.psico-historial { font-size: .9rem; }
.psico-historial th, .psico-historial td { padding: 10px 10px; }
.psico-sim-ejercicio, .psico-sim-ejercicio fieldset, .psico-sim-ejercicio__cuerpo, .psico-ejercicio, .psico-opciones { min-width: 0; }
.psico-sim-opcion { min-width: 0; }


/* ---- Psicotecnicos: portada desktop compacta (solo .psico-*, no toca el .wrap global) ---- */
.psico-hero__lado { display: none; }
.psico-hero__acciones { justify-content: flex-start; }
.psico-hero__tiempo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 10px; border: 1px solid rgba(22,130,255,.45); background: rgba(22,130,255,.18); color: var(--psico-texto-claro); font-size: .9rem; line-height: 1.25; }
.psico-hero__tiempo svg { flex: 0 0 20px; width: 20px; height: 20px; color: #fff; }
.psico-hero__tiempo strong { color: #fff; }

@media (min-width: 900px) {
  .psico-hero__inner { padding-top: 18px; padding-bottom: 20px; }
  .psico-hero__texto { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; row-gap: 8px; align-items: center; }
  .psico-hero__titulo { grid-column: 1; grid-row: 1; margin: 0; font-size: 2rem; line-height: 1.1; }
  .psico-hero__datos { grid-column: 2; grid-row: 1; align-self: center; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
  .psico-hero__datos li { min-width: 0; padding: 6px 10px; border-radius: 10px; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
  .psico-hero__datos strong { font-size: 1.2rem; }
  .psico-hero__datos span { font-size: .85rem; }
  .psico-hero__lead { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none; font-size: .92rem; line-height: 1.4; }
  .psico-hero__acciones { grid-column: 1 / -1; grid-row: 3; gap: 10px; flex-wrap: wrap; }
  .psico-hero__cta, .psico-hero__secundario { min-height: 40px; padding: 6px 16px; font-size: .95rem; white-space: nowrap; }
}

@media (min-width: 1280px) {
  .psico-hero__inner { grid-template-columns: minmax(190px, 18%) minmax(0, 1fr) minmax(190px, 18%); gap: 24px; padding: 14px 32px; align-items: center; }
  .psico-hero__texto { grid-column: auto; order: 0; }
  .psico-hero__lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .psico-hero__lado .psico-collage__tarjeta { padding: 8px 10px; gap: 4px; border-radius: 12px; box-shadow: none; min-width: 0; }
  .psico-hero__lado .psico-collage__tarjeta svg { width: auto; max-width: 100%; max-height: 64px; margin: 0 auto; }
  .psico-hero__lado .psico-collage__tarjeta .psico-fig { max-width: none; width: auto; }
  .psico-hero__lado .psico-collage__etiqueta { font-size: .68rem; }
  .psico-hero__lado .psico-collage__serie { font-size: .88rem; line-height: 1.35; }
}

@media (min-width: 1100px) {
  .psico-modos { padding: 18px 0 40px; }
  .psico-modos .wrap { padding-inline: 32px; }
  .psico-modo { padding: 16px 24px 18px; }
  .psico-modo__cabecera { margin-bottom: 10px; gap: 12px; align-items: center; }
  .psico-modo__numero { flex-basis: 32px; height: 32px; }
  .psico-modo__cabecera h2 { font-size: 1.25rem; margin: 0 0 2px; }
  .psico-modo__cabecera p { font-size: .95rem; line-height: 1.4; max-width: none; }
  .psico-paso { margin-bottom: 8px; }
  .psico-paso__titulo { font-size: .95rem; margin-bottom: 8px; }
  .psico-categorias { gap: 12px; }
  .psico-categoria__cuerpo { padding: 8px 16px; gap: 2px; }
  .psico-categoria__nombre { font-size: 1.05rem; }
  .psico-categoria__desc { font-size: .92rem; line-height: 1.35; }
  .psico-categoria__n { font-size: .88rem; padding-top: 2px; }
  .psico-pastilla span { font-size: .92rem; min-height: 34px; padding: 3px 12px; }
  .psico-resumen { padding: 8px 12px; margin-top: 0; }
  .psico-resumen__texto { font-size: .92rem; }
  .psico-resumen__boton { min-height: 40px; font-size: .95rem; padding-inline: 20px; }
  .psico-nota, .psico-pie-nota { font-size: .9rem; }

  /* Categoria: dificultad + cantidad + resumen/boton en una franja */
  .psico-modo--categoria .psico-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: center; }
  .psico-modo--categoria .psico-form > .psico-paso:first-of-type { grid-column: 1 / -1; }
  .psico-modo--categoria .psico-pasos-fila { display: flex; gap: 8px 28px; }
  .psico-modo--categoria .psico-pasos-fila .psico-paso, .psico-modo--mixto .psico-paso { margin: 0; }
  .psico-modo--mixto .psico-paso__titulo { float: left; margin-right: 12px; line-height: 34px; }
  .psico-modo--mixto .psico-pastillas { overflow: hidden; }
  .psico-modo--categoria .psico-form > .psico-paso:first-of-type { display: block; margin-bottom: 8px; }
  .psico-modo--categoria .psico-paso__titulo { margin: 0 0 6px; white-space: nowrap; }
  .psico-modo--categoria .psico-form > .psico-paso:first-of-type .psico-paso__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .psico-modo--categoria .psico-resumen { margin: 0; }
  .psico-modo--categoria .psico-resumen__texto { flex: 1 1 200px; }

  /* Mixto + Simulacion: dos bloques bajos y equilibrados */
  .psico-modos__pareja { gap: 20px; margin-top: 16px; }
  .psico-modo--mixto .psico-form { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dif res" "can res"; gap: 6px 20px; align-items: center; }
  .psico-modo--mixto .psico-paso:nth-of-type(1) { grid-area: dif; }
  .psico-modo--mixto .psico-paso:nth-of-type(2) { grid-area: can; }
  .psico-modo--mixto .psico-resumen { grid-area: res; flex-wrap: nowrap; gap: 12px; margin: 0; }
  .psico-modo--mixto .psico-resumen__boton { white-space: nowrap; }
  .psico-modo--simulacion .psico-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
  .psico-modo--simulacion .psico-form > .psico-paso { grid-column: 1 / -1; margin: 0; }
  .psico-modo--simulacion .psico-paso__titulo { margin-bottom: 6px; }
  .psico-modo--simulacion .psico-perfiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .psico-perfil__cuerpo { padding: 8px 12px; }
  .psico-perfil__nombre { font-size: 1rem; }
  .psico-perfil__meta, .psico-perfil__desc { font-size: .88rem; line-height: 1.3; }
  .psico-modo--simulacion .psico-nota { margin: 0; font-size: .85rem; line-height: 1.35; }
  .psico-modo--simulacion .psico-resumen--solo-boton { margin: 0; }
  .psico-pie-nota { margin-top: 16px; }
}


/* ---- Psicotecnicos: pulido final de la portada (solo .psico-*) ---- */
.psico-sim-pie { display: contents; }

@media (min-width: 1280px) {
  /* Figuras laterales: mismo peso a izquierda y derecha, sin alterar la altura del hero */
  .psico-hero__lado { align-self: center; align-items: stretch; }
  .psico-hero__lado--der { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .psico-hero__lado .psico-collage__tarjeta { height: 104px; justify-content: space-between; }
  .psico-hero__lado .psico-collage__tarjeta svg { max-height: 68px; }
  .psico-hero__lado .psico-collage__tarjeta--serie { justify-content: center; gap: 8px; }
  .psico-hero__lado .psico-collage__serie { font-size: .95rem; }
  .psico-hero__texto { row-gap: 10px; }
}

@media (min-width: 1100px) {
  /* Pareja Mixto + Simulacion: mismo padding, cabeceras alineadas, panel de accion coherente */
  .psico-modos__pareja { align-items: stretch; }
  .psico-modos__pareja .psico-modo { padding: 16px 24px 18px; }
  .psico-modos__pareja .psico-modo__cabecera { min-height: 56px; margin-bottom: 10px; }
  .psico-modos__pareja .psico-modo__cabecera p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .psico-modos__pareja .psico-form { flex: 1; }

  /* Mixto: pastillas a la izquierda, panel de resumen + boton ocupando toda la altura restante */
  .psico-modo--mixto .psico-form { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px 24px; align-items: center; align-content: center; }
  .psico-modo--mixto .psico-pastilla span { min-height: 38px; }
  .psico-modo--mixto .psico-resumen { align-self: center; flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; padding: 14px 18px; margin: 0; }
  .psico-modo--mixto .psico-resumen__texto { font-size: .95rem; }
  .psico-modo--mixto .psico-resumen__boton { width: 100%; }

  /* Simulacion: baterias comparables (nombre > meta > descripcion) y pie integrado */
  .psico-modo--simulacion .psico-form { grid-template-columns: 1fr; gap: 10px; align-content: space-between; }
  .psico-modo--simulacion .psico-perfiles { gap: 10px; }
  .psico-modo--simulacion .psico-perfil__cuerpo { height: 100%; padding: 10px 14px; gap: 3px; }
  .psico-modo--simulacion .psico-perfil__nombre { font-size: 1.02rem; }
  .psico-modo--simulacion .psico-perfil__meta { font-size: .9rem; }
  .psico-modo--simulacion .psico-perfil__desc { font-size: .85rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .psico-modo--simulacion .psico-sim-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 12px; background: #f4f7fc; border: 1px solid #e3e9f3; }
  .psico-modo--simulacion .psico-sim-pie .psico-nota { flex: 1 1 auto; font-size: .8rem; line-height: 1.3; }
  .psico-modo--simulacion .psico-sim-pie .psico-resumen--solo-boton { flex: 0 0 auto; }
}


/* ---- Psicotecnicos: portada en azul integrado (SOLO .pagina-psico-inicio) ----
   Cambia unicamente la "piel": fondo navy continuo (hero + modos + pie), tarjetas
   navy sobre navy, agentes PN decorativos a la derecha del hero y las cuatro
   figuras agrupadas a la izquierda. No toca estructura, tamanos ni JS. */
.pagina-psico-inicio {
  --pi-texto: #ffffff;
  --pi-texto-suave: #bfd2ee;
  --pi-acento: #1571e8;
  --pi-acento-claro: #6fb0ff;
  --pi-foco: #9fc3ff;
  --pi-borde: rgba(120, 170, 255, .24);
  --pi-borde-fuerte: rgba(140, 190, 255, .5);
  --pi-superficie: linear-gradient(160deg, rgba(38, 92, 160, .30), rgba(14, 46, 88, .46));
  --pi-superficie-interior: rgba(255, 255, 255, .045);
  /* Fondo, cabecera, main y pie: ya NO se definen aqui -- los aporta el
     sistema PN compartido (".pagina-aula-estudio", mas abajo). */
}
.pagina-psico-inicio .psico-hero { position: relative; background: transparent; }
.pagina-psico-inicio .psico-hero__texto, .pagina-psico-inicio .psico-hero__lado { position: relative; z-index: 1; }

/* Agentes de Policia Nacional (recurso existente de la portada): decoracion pura */
.psico-hero__agentes { display: none; }

.pagina-psico-inicio .psico-collage__tarjeta { background: var(--pi-superficie); border-color: var(--pi-borde); color: #cfe0ff; }
.pagina-psico-inicio .psico-collage__etiqueta { color: #9cc3fb; }

@media (min-width: 1280px) {
  .pagina-psico-inicio .psico-hero__inner { grid-template-columns: minmax(210px, 17%) minmax(0, 1fr) minmax(140px, 12%); }
  .psico-hero__agentes { display: block; align-self: stretch; }
  /* Imagen del agente PN retirada: Psicotecnicos usa solo el fondo PN compartido. */
  /* Figuras 2x2 compactas a la izquierda: no aumentan la altura del hero */
  .pagina-psico-inicio .psico-hero__lado--izq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 60px; gap: 8px; align-self: center; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__tarjeta { height: 60px; padding: 5px 8px; gap: 2px; justify-content: space-between; overflow: hidden; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__etiqueta { font-size: .58rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__tarjeta svg { max-height: 30px; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__serie { font-size: .72rem; letter-spacing: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__tarjeta { padding-inline: 4px; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__etiqueta { font-size: .52rem; }
  .pagina-psico-inicio .psico-hero__lado--izq .psico-collage__serie { font-size: .6rem; }
}

/* ---- Modos: tarjetas navy sobre navy ---- */
.pagina-psico-inicio .psico-modo { background: var(--pi-superficie); border-color: var(--pi-borde); box-shadow: 0 10px 28px rgba(2, 10, 24, .35); color: var(--pi-texto); }
.pagina-psico-inicio .psico-modo--categoria { border-top-color: #1682ff; }
.pagina-psico-inicio .psico-modo--mixto { border-top-color: #5b8def; }
.pagina-psico-inicio .psico-modo--simulacion { border-top-color: #8fb6f5; }
.pagina-psico-inicio .psico-modo__numero { background: var(--pi-acento); color: #fff; }
.pagina-psico-inicio .psico-modo__cabecera h2 { color: var(--pi-texto); }
.pagina-psico-inicio .psico-modo__cabecera p { color: var(--pi-texto-suave); }
.pagina-psico-inicio .psico-paso__titulo { color: #eaf2ff; }
.pagina-psico-inicio .psico-paso__titulo span { background: rgba(22, 130, 255, .28); color: #b5d3ff; }
.pagina-psico-inicio .psico-nota, .pagina-psico-inicio .psico-pie-nota { color: var(--pi-texto-suave); }

/* Contraste (29 sept 2026): paneles grandes AZULES; recuadros interiores de
   informacion/opciones BLANCOS con texto oscuro. Solo colores: nada de
   geometria. Seleccion = borde azul + check azul (tarjeta sigue blanca). */
.pagina-psico-inicio {
  --pi-blanco-borde: rgba(21, 80, 160, .22);
  --pi-blanco-texto: #10233f;
  --pi-blanco-suave: #47586f;
  --pi-blanco-acento: #1571e8;
}

/* Categorias */
.pagina-psico-inicio .psico-categoria__cuerpo { position: relative; background: #fff; border-color: var(--pi-blanco-borde); }
.pagina-psico-inicio .psico-categoria__nombre { color: var(--pi-blanco-texto); }
.pagina-psico-inicio .psico-categoria__desc { color: var(--pi-blanco-suave); }
.pagina-psico-inicio .psico-categoria__n { color: var(--pi-blanco-acento); }
.pagina-psico-inicio .psico-categoria:hover .psico-categoria__cuerpo { border-color: var(--pi-blanco-acento); background: #fff; }
.pagina-psico-inicio .psico-categoria input:checked + .psico-categoria__cuerpo { border-color: var(--pi-blanco-acento); background: #fff; box-shadow: inset 0 0 0 2px var(--pi-blanco-acento), 0 0 0 1px rgba(111, 176, 255, .35); }
.pagina-psico-inicio .psico-categoria input:checked + .psico-categoria__cuerpo::after,
.pagina-psico-inicio .psico-perfil input:checked + .psico-perfil__cuerpo::after {
  content: "\2713"; position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--pi-blanco-acento); color: #fff; font-size: .7rem; font-weight: 800; line-height: 1;
}
.pagina-psico-inicio .psico-categoria input:focus-visible + .psico-categoria__cuerpo,
.pagina-psico-inicio .psico-pastilla input:focus-visible + span,
.pagina-psico-inicio .psico-perfil input:focus-visible + .psico-perfil__cuerpo { outline: 3px solid var(--pi-foco); outline-offset: 2px; }
.pagina-psico-inicio .psico-categoria input:disabled + .psico-categoria__cuerpo { opacity: .5; border-style: dashed; cursor: not-allowed; }

/* Dificultad / cantidad */
.pagina-psico-inicio .psico-pastilla span { background: #fff; border-color: var(--pi-blanco-borde); color: var(--pi-blanco-texto); }
.pagina-psico-inicio .psico-pastilla:hover span { border-color: var(--pi-blanco-acento); background: #fff; color: var(--pi-blanco-texto); }
.pagina-psico-inicio .psico-pastilla input:checked + span { background: var(--pi-acento); border-color: var(--pi-acento); color: #fff; box-shadow: 0 0 0 1px rgba(159, 195, 255, .35); }

/* Baterias de simulacion */
.pagina-psico-inicio .psico-perfil__cuerpo { position: relative; background: #fff; border-color: var(--pi-blanco-borde); }
.pagina-psico-inicio .psico-perfil__nombre { color: var(--pi-blanco-texto); }
.pagina-psico-inicio .psico-perfil__meta { color: var(--pi-blanco-acento); }
.pagina-psico-inicio .psico-perfil__desc { color: var(--pi-blanco-suave); }
.pagina-psico-inicio .psico-perfil:hover .psico-perfil__cuerpo { border-color: var(--pi-blanco-acento); background: #fff; }
.pagina-psico-inicio .psico-perfil input:checked + .psico-perfil__cuerpo { border-color: var(--pi-blanco-acento); background: #fff; box-shadow: inset 0 0 0 2px var(--pi-blanco-acento); }

/* Resumen + botones */
.pagina-psico-inicio .psico-resumen { background: #fff; border-color: var(--pi-blanco-borde); }
.pagina-psico-inicio .psico-resumen--solo-boton { background: transparent; border: 0; }
.pagina-psico-inicio .psico-resumen__texto { color: var(--pi-blanco-suave); }
.pagina-psico-inicio .psico-resumen__texto strong { color: var(--pi-blanco-texto); }
.pagina-psico-inicio .psico-modo .btn-primario { background: var(--pi-acento); color: #fff; }
.pagina-psico-inicio .psico-modo .btn-primario:hover { background: #2a83f5; box-shadow: 0 6px 16px rgba(2, 10, 24, .45); }
.pagina-psico-inicio .psico-modo .btn-primario:focus-visible { outline: 3px solid var(--pi-foco); outline-offset: 2px; }
.pagina-psico-inicio .psico-modo .psico-resumen__boton:disabled { background: #e6ecf6; color: #6b7d99; border: 1px dashed rgba(71, 88, 111, .5); box-shadow: none; opacity: 1; cursor: not-allowed; }
@media (min-width: 1100px) {
  .pagina-psico-inicio .psico-modo--simulacion .psico-sim-pie { background: #fff; border-color: var(--pi-blanco-borde); }
  .pagina-psico-inicio .psico-modo--simulacion .psico-sim-pie .psico-nota { color: var(--pi-blanco-suave); }
}

/* Empezar + Continuar (los tres modos): dos botones simetricos dentro del mismo
   recuadro blanco de accion. "Continuar" = borde azul (activo) o gris discontinuo
   (sin sesion pendiente), mismo alto que "Empezar". */
.psico-resumen__acciones { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; min-width: 0; }
.psico-resumen__acciones > .psico-resumen__boton { flex: 1 1 130px; width: auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }
.psico-modo--mixto .psico-resumen__acciones { width: 100%; }
@media (min-width: 1100px) {
  /* Categoria: el texto arriba y los dos botones debajo, a todo el ancho del recuadro blanco */
  .psico-modo--categoria .psico-resumen { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .psico-modo--categoria .psico-resumen__texto { flex: 0 0 auto; }
  /* Mixto: el recuadro blanco pasa bajo las pastillas y ocupa todo el ancho (texto a la izquierda,
     dos botones iguales a la derecha): en la columna derecha estrecha no cabian dos botones. */
  .psico-modo--mixto .psico-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "dif" "can" "res"; align-content: center; gap: 10px; }
  .psico-modo--mixto .psico-resumen { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; align-self: stretch; padding: 8px 12px; }
  .psico-modo--mixto .psico-resumen__texto { flex: 1 1 auto; }
  .psico-modo--mixto .psico-resumen__acciones { width: auto; flex: 0 0 auto; }
  .psico-modo--mixto .psico-resumen__acciones > .psico-resumen__boton { flex: 0 0 148px; }
  /* Simulacion: los dos botones reparten todo el recuadro blanco */
  .psico-modo--simulacion .psico-sim-pie .psico-resumen--solo-boton { flex: 1 1 auto; }
  .psico-modo--simulacion .psico-resumen__acciones { width: 100%; }
}
@media (max-width: 479px) {
  .psico-resumen__acciones { flex-direction: column; flex-wrap: nowrap; }
  .psico-resumen__acciones > .psico-resumen__boton { flex: 0 0 auto; }
}
.pagina-psico-inicio .psico-modo a.psico-continuar:focus-visible { outline: 3px solid var(--pi-foco); outline-offset: 2px; }
.pagina-psico-inicio .psico-modo .psico-continuar:disabled { background: #e6ecf6; color: #6b7d99; border: 1px dashed rgba(71, 88, 111, .5); box-shadow: none; opacity: 1; cursor: not-allowed; }

/* =========================================================================
   Aula de estudio -- dashboard privado de Policia Nacional (rediseño).
   Fondo real (recurso definitivo, sin editar) en /static/img/aula-estudio/,
   colocado solo con CSS -- igual que .pagina-portada (ver mas arriba).
   Acotado a .pagina-aula-estudio: no afecta a otras pantallas.
   ========================================================================= */

.pagina-aula-estudio {
  background-color: #011032;
  background-image:
    linear-gradient(180deg, rgba(1, 12, 36, 0.25) 0%, rgba(1, 12, 36, 0) 55%),
    url("/static/img/aula-estudio/fondo.png");
  background-repeat: no-repeat;
  background-position: top right, top right;
  background-size: 100% auto, 100% auto;
}

.pagina-aula-estudio .site-header {
  position: relative;
  background: linear-gradient(180deg, rgba(1, 10, 30, 0.55), rgba(1, 10, 30, 0));
  border-bottom: 0;
}

.pagina-aula-estudio .site-header__inner {
  min-height: 52px;
  padding-block: 10px;
}

/* AJUSTE FINAL -- Aula de estudio: la cabecera reutiliza EXACTAMENTE el
   mismo patron ya aprobado en la pantalla de realizacion de Test por temas
   (".pagina-test-temas--intento .site-header .wrap" mas abajo en este
   fichero): marca a la izquierda, navegacion al extremo derecho, sin
   quedar centrada dentro del ancho del mosaico de 1080px. Acotado a
   ".pagina-dashboard" (unica clase de esta pantalla) para no afectar a
   Test por temas, Simulacros ni el resto de pantallas que tambien llevan
   ".pagina-aula-estudio". El header en si (base.html) no cambia para
   nadie mas. */
.pagina-dashboard .site-header .wrap,
.pagina-psico-inicio .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* AJUSTE -- Selector de "Test por temas": mismo patron de cabecera que
   Aula de estudio (ver regla anterior). Acotado a
   ".pagina-test-temas-selector" (clase exclusiva de test_temas_selector.html)
   para no afectar a la pantalla de realizacion del test (que ya tiene su
   propia regla en ".pagina-test-temas--intento" mas abajo) ni a
   Fichas/Esquemas. */
.pagina-test-temas-selector .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-aula-estudio main {
  background: transparent;
}

.pagina-aula-estudio .site-footer {
  background: #020c22;
  color: #9fb3d6;
  border-top: 1px solid rgba(120, 170, 255, 0.14);
}

.aula-estudio {
  padding: 14px 0 56px;
}

/* AJUSTE FINAL -- encabezado del Aula simplificado a solo "Aula de
   estudio", centrado respecto al mosaico (ver ".wrap" = mismo contenedor
   de 1080px que el grid de tarjetas) y con una separacion vertical
   compacta hacia el mosaico -- ya no hay raya azul ni textos secundarios
   que compensar en altura. */
.aula-estudio__cabecera {
  padding: 0 0 16px;
  color: #fff;
  text-align: center;
}

.aula-estudio__titulo {
  display: inline-block;
  margin: 0;
  font-family: var(--fuente-display, Georgia, "Times New Roman", serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
}

.grid-aula {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .grid-aula {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .grid-aula {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile-aula {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radio);
  border: 1px solid rgba(75, 115, 185, 0.35);
  background: #0d1b36;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.tile-aula--activo:hover,
.tile-aula--activo:focus-visible {
  border-color: var(--color-acento);
  box-shadow: 0 10px 26px rgba(2, 10, 30, 0.45);
  transform: translateY(-2px);
}

.tile-aula--bloqueado {
  filter: grayscale(1);
  opacity: 0.55;
  cursor: not-allowed;
}

.tile-aula__miniatura {
  height: 148px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.tile-aula__miniatura--test-por-temas { background-image: url("/static/img/aula-estudio/miniatura-test-por-temas.png"); }
.tile-aula__miniatura--simulacros { background-image: url("/static/img/aula-estudio/miniatura-simulacros.png"); }
.tile-aula__miniatura--examenes-oficiales { background-image: url("/static/img/aula-estudio/miniatura-examenes-oficiales.png"); }
.tile-aula__miniatura--fichas-repaso { background-image: url("/static/img/aula-estudio/miniatura-fichas-repaso.png"); }
.tile-aula__miniatura--esquemas { background-image: url("/static/img/aula-estudio/miniatura-esquemas.png"); }
.tile-aula__miniatura--psicotecnicos { background-image: url("/static/img/aula-estudio/miniatura-psicotecnicos.png"); }

.tile-aula__miniatura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 32, 0.15) 0%, rgba(6, 14, 32, 0.78) 78%, #0d1b36 100%);
}

.tile-aula__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.tile-aula__icono {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tile-aula__icono svg {
  width: 19px;
  height: 19px;
}

.tile-aula h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
}

.tile-aula p {
  margin: 0;
  color: #b7c6e6;
  font-size: 0.88rem;
  line-height: 1.4;
}

.tile-aula__flecha {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(6, 16, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.tile-aula__flecha svg {
  width: 15px;
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .tile-aula {
    transition: none;
  }
}

/* =========================================================================
   Prueba visual -- selector "Test por temas" reutilizando el lenguaje del
   Aula de estudio (mismo fondo azul PN, misma cabecera compacta) con el
   selector de tema en blanco. Acotado a la combinacion
   ".pagina-aula-estudio.pagina-test-temas" -- test_temas_selector.html y
   (desde el rediseño de la pantalla de realizacion) test_temas_intento.html
   llevan ambas clases a la vez. Fichas y Esquemas comparten el componente
   `.selector-tema` / `.buscador-tema` / `.test-temas-selector*` pero solo
   tienen `.pagina-test-temas`, así que no heredan nada de este bloque. No
   se toca el markup del macro compartido (_selector_tema.html) ni su JS
   (selector_temas.js): el reordenado buscador -> selector -> CTA se hace
   con `order` en flex. Las reglas de esta seccion son todas de
   `.test-temas-selector*` (selector de tema); las de la pantalla de
   realizacion del test viven aparte, en el bloque
   ".pagina-test-temas--intento" al final de este fichero.
   ========================================================================= */

.pagina-aula-estudio.pagina-test-temas {
  /* Aprovecha mas ancho que el resto de pantallas que usan este mismo
     componente (Fichas/Esquemas no se ven afectados: variable acotada a
     esta pagina). */
  --ancho-modulo: 64rem;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector {
  padding: 22px 0 56px;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__kicker {
  color: #9fb3d6;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__kicker a {
  color: #cfe0fb;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__titulo {
  display: inline-block;
  margin: 0 0 14px;
  color: #fff;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__titulo::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--color-acento);
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__intro {
  color: #b7c6e6;
}

.pagina-aula-estudio.pagina-test-temas .auth__errores,
.pagina-aula-estudio.pagina-test-temas .auth__aviso {
  background: rgba(8, 18, 42, 0.6);
  border-color: rgba(120, 170, 255, 0.3);
}

.pagina-aula-estudio.pagina-test-temas .auth__errores {
  color: #ffd3d3;
}

.pagina-aula-estudio.pagina-test-temas .auth__aviso {
  color: #bfe9de;
}

/* Reordenar visualmente: buscador -> selector blanco -> Crear test.
   El DOM del macro no cambia -- solo el orden de pintado (flex `order`),
   asi que la tabulacion/teclado siguen su recorrido natural del markup. */
.pagina-aula-estudio.pagina-test-temas .selector-tema .campo {
  order: 1;
}

.pagina-aula-estudio.pagina-test-temas .selector-tema__control {
  order: 2;
}

.pagina-aula-estudio.pagina-test-temas .selector-tema > .btn-primario {
  order: 3;
  align-self: flex-start;
  min-width: 260px;
}

/* Buscador integrado en el entorno azul -- no debe competir con el
   selector blanco. */
.pagina-aula-estudio.pagina-test-temas .buscador-tema {
  background: rgba(8, 18, 42, 0.55);
  border-color: rgba(120, 170, 255, 0.3);
}

.pagina-aula-estudio.pagina-test-temas .buscador-tema svg {
  color: #9fb3d6;
}

.pagina-aula-estudio.pagina-test-temas .buscador-tema input[type="text"] {
  background: transparent;
  color: #fff;
}

.pagina-aula-estudio.pagina-test-temas .buscador-tema input[type="text"]::placeholder {
  color: #8ba0c4;
}

.pagina-aula-estudio.pagina-test-temas .buscador-tema:focus-within {
  border-color: var(--color-acento);
}

.pagina-aula-estudio.pagina-test-temas #busqueda-estado {
  color: #9fb3d6;
}

.pagina-aula-estudio.pagina-test-temas .resultados-temas {
  background: #0d1b36;
  border-color: rgba(120, 170, 255, 0.3);
}

.pagina-aula-estudio.pagina-test-temas .resultados-temas button {
  color: #fff;
}

.pagina-aula-estudio.pagina-test-temas .resultados-temas button:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Selector de tema: decision principal de esta prueba -- se mantiene
   blanco (ya es su color por defecto, `--color-superficie`), solo se
   reafirma el contraste sobre el nuevo fondo azul. */
.pagina-aula-estudio.pagina-test-temas .selector-tema__control {
  border-color: rgba(20, 32, 60, 0.08);
  box-shadow: 0 14px 32px rgba(2, 8, 24, 0.35);
}

/* "Mis tests": secundario integrado en el entorno azul, ya no aislado. */
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__mis-tests {
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__mis-tests:hover,
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__mis-tests:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

/* Fila secundaria bajo el CTA principal (27 sept 2026): "Aula de estudio"
   + "Mis tests" en una misma fila, para poder salir de Test por temas sin
   iniciar un test. NO toca "Crear test de 10 preguntas" (boton primario
   del formulario, sin cambios de tamaño/posicion) ni el href/funcionamiento
   de "Mis tests" (misma ruta de siempre).

   Ancho: fila en linea (inline-flex, no se estira al ancho del modulo) --
   con el mismo padding/tipografia de boton secundario ya validado en "Mis
   tests" (8px 16px, .92rem) para los dos botones, su ancho total (los 2
   botones + el hueco entre ellos) queda de forma natural muy proximo al
   del boton primario de arriba, sin necesidad de fijar un ancho a mano ni
   tocar ese boton. "flex-wrap:wrap" es solo red de seguridad en anchos muy
   estrechos -- en la practica ambos textos son cortos y no llegan a
   envolver. */
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__fila-secundaria {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__fila-secundaria .btn-secundario {
  flex: 1 1 0%;
  justify-content: center;
  white-space: nowrap;
}

/* "Aula de estudio": mismo tratamiento visual ya validado para "Mis tests"
   en esta misma fila (fondo integrado en el azul, borde azul, texto
   blanco, mismos estados hover/focus) -- ver ".test-temas-selector__mis-tests"
   arriba, mismo bloque de reglas duplicado a proposito para el nuevo boton. */
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__aula {
  padding: 8px 16px;
  font-size: .92rem;
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__aula:hover,
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__aula:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

/* =========================================================================
   Correccion final -- selector "Test por temas" (direccion visual ya
   aprobada, sin rediseñar). Acotado a ".pagina-aula-estudio.pagina-test-temas"
   como el resto de este bloque: no toca Aula de estudio (solo
   `.pagina-aula-estudio`) ni Fichas/Esquemas (solo `.pagina-test-temas`).
   ========================================================================= */

/* 1-2. Footer siempre al fondo del viewport, sin banda solida: el body
   pasa a ser el contenedor flex de altura completa (header/main/footer
   son sus 3 hijos directos en base.html), `main` crece para ocupar el
   hueco sobrante y el fondo azul (ya puesto en el body) sigue visible
   detras del footer en vez de una franja de color solido. */
.pagina-aula-estudio.pagina-test-temas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pagina-aula-estudio.pagina-test-temas main {
  flex: 1 0 auto;
}

.pagina-aula-estudio.pagina-test-temas .site-footer {
  flex-shrink: 0;
  background: transparent;
  border-top: 0;
  padding: 16px 0 22px;
}

.pagina-aula-estudio.pagina-test-temas .site-footer p {
  color: rgba(191, 208, 242, 0.55);
  font-size: 0.78rem;
}

/* 3. Mas aire vertical entre bloques (sin huecos enormes). */
.pagina-aula-estudio.pagina-test-temas .test-temas-selector__intro {
  margin-bottom: 36px;
}

.pagina-aula-estudio.pagina-test-temas .selector-tema {
  gap: 28px;
}

.pagina-aula-estudio.pagina-test-temas .test-temas-selector__secundario {
  margin-top: 28px;
}

/* 4. Selector blanco: algo mas de respiracion interior, sin agrandarlo. */
.pagina-aula-estudio.pagina-test-temas .selector-tema__control {
  padding: 22px 24px;
  column-gap: 16px;
}

.pagina-aula-estudio.pagina-test-temas .selector-tema__tarjeta {
  gap: 11px;
}

/* =========================================================================
   Test por temas -- pantalla de REALIZACION del test (cierre definitivo:
   arquitectura de viewport fijo). Mismo fondo/cabecera que el selector de
   arriba (ambas plantillas llevan ".pagina-aula-estudio.pagina-test-temas"):
   aqui solo van las reglas propias de esta pantalla, acotadas ademas con
   el modificador ".pagina-test-temas--intento" (solo test_temas_intento.html)
   para no afectar ni al selector ni a la pantalla de resultado, que
   comparten alguna clase de nombre parecido (.test-intento__kicker /
   __titulo / __intro siguen definidas mas arriba para Resultado).
   No se toca la logica del test (test_temas.js, routes_test_temas.py):
   solo maquetacion.

   Scroll: arquitectura ESTRUCTURAL, no superposicion. La pagina exterior
   (html/body) NO tiene scroll propio en esta pantalla -- ocupa exactamente
   100vh y usa "overflow:hidden". Dentro, un flex column de dos zonas:

     ZONA SUPERIOR FIJA        (.test-intento__fijo)     flex: 0 0 auto
     ZONA DE PREGUNTAS         (.test-intento__scroll)   flex: 1 1 auto,
                                                          overflow-y: auto

   Las preguntas nunca pueden pasar por detras de la zona superior porque
   son fisicamente otro contenedor que empieza debajo de ella -- no hay
   ningun "sticky" superpuesto sobre contenido que seguir tapando, ni un
   panel de fondo para ocultar lo que se cuela debajo. La rueda del raton
   funciona ademas desde cualquier punto de la pantalla (fondo azul
   izquierdo/derecho incluido) gracias a un pequeño script al final de
   test_temas_intento.html que redirige el delta vertical al contenedor de
   preguntas cuando el evento no ha ocurrido ya dentro de el -- sin volver
   a hacer scrollable el documento (ver comentario junto al <script> en la
   plantilla). Esto reemplaza el enfoque de la ronda anterior (pagina
   entera desplazandose + bloque sticky con fondo solido), que dejaba
   pasar las preguntas por detras de los controles.
   ========================================================================= */

/* Viewport fijo: el body de esta pantalla (ya es flex column por
   ".pagina-aula-estudio.pagina-test-temas" mas arriba) pasa de
   "min-height:100vh" a una altura exacta y sin scroll propio. Nota de
   especificidad: ".pagina-aula-estudio.pagina-test-temas" (el selector
   compartido con el selector de temas) tiene 2 clases; un selector de
   1 sola clase como ".pagina-test-temas--intento" pierde el empate en
   propiedades que coincidan (p.ej. "flex" en <main>, ver mas abajo).
   Por eso aqui y en <main> se usa la combinacion de 3 clases para
   garantizar que esta pantalla gana siempre frente a la regla
   compartida. */
.pagina-aula-estudio.pagina-test-temas.pagina-test-temas--intento {
  height: 100vh;
  overflow: hidden;
}

/* El <main> (ya es flex:1 0 auto por la regla compartida de arriba) debe
   quedarse dentro de esa altura exacta en vez de crecer con el contenido,
   y ser el tambien un flex column para que ".test-intento" pueda ocupar
   todo el alto restante. Combinacion de 3 clases (ver nota de
   especificidad arriba): la regla compartida ya trae "flex:1 0 auto" con
   la misma especificidad de 2 clases que tendria ".pagina-test-temas
   --intento main", así que sin esto pierde el empate y el flex-shrink:0
   compartido deja que <main> crezca sin limite con el contenido. */
.pagina-aula-estudio.pagina-test-temas.pagina-test-temas--intento main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* El footer no tiene sitio en una pantalla de altura fija -- se oculta
   solo aqui (el resto de Aula de estudio conserva su footer normal). */
.pagina-test-temas--intento .site-footer {
  display: none;
}

/* Cabecera global: mismo reparto que la portada -- marca al extremo
   izquierdo, navegacion al extremo derecho -- en vez de quedar centrado
   dentro del .wrap de 1080px que comparten el resto de pantallas. Acotado
   a esta pantalla via el modificador del body; el header en si (base.html)
   no cambia para nadie mas. Con el viewport fijo de arriba la cabecera ya
   no necesita "position:sticky": como la pagina nunca se desplaza, se
   queda donde esta sin ayuda extra. */
.pagina-test-temas--intento .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-test-temas--intento .site-header {
  flex: 0 0 auto;
}

/* ".test-intento" ocupa todo el alto restante bajo la cabecera general y
   reparte ese alto entre sus dos zonas (fija / preguntas). */
.pagina-test-temas--intento .test-intento {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Misma anchura principal que el selector aprobado (--ancho-modulo pasa a
   64rem dentro de ".pagina-aula-estudio.pagina-test-temas", ver arriba). */
.pagina-test-temas--intento .test-intento__wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: var(--ancho-modulo);
  width: 100%;
  padding-top: 20px;
  padding-bottom: 0;
}

/* Zona superior fija: titulo + explicacion + barra 1-10/botones. Bloque
   normal (flex:0 0 auto, sin position:sticky ni fondo propio) -- se ve
   directamente sobre el fondo grafico azul PN de la pagina, como antes de
   la ronda anterior. No necesita ningun truco de superposicion porque las
   preguntas jamas comparten espacio con el: viven en el otro contenedor,
   debajo. */
.pagina-test-temas--intento .test-intento__fijo {
  flex: 0 0 auto;
  padding: 0 0 14px;
}

.pagina-test-temas--intento .test-intento__cabecera {
  margin: 0 0 14px;
}

.pagina-test-temas--intento .test-intento__tema {
  margin: 0 0 4px;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw + .6rem, 1.4rem);
  color: #fff;
}

.pagina-test-temas--intento .test-intento__intro {
  margin: 0;
  max-width: none;
  font-size: .82rem;
  color: #b7c6e6;
}

/* Fila 1-10 + acciones: SIEMPRE en ese orden y en una sola fila en
   escritorio -- [1][2]...[10]   [Volver a Mis tests][Elegir tema][Aula de
   estudio][Corregir test], los cuatro botones a la derecha y "Corregir
   test" como ultimo elemento visual de la fila. Sin caja/rectangulo
   blanco (ni azul) de fondo: cada control trae ya su propio color y el
   fondo PN queda visible alrededor y entre ellos. El indice YA tenia su
   logica propia -- esa logica y sus estados (test_temas.js /
   .test-intento__indice-item--respondida) no se tocan, solo pasa a
   compartir fila con los botones.

   Ajuste 28 sept 2026 (encargo "Volver a Mis tests"): al añadir un cuarto
   boton, en vez de comprimir el grupo contra los numeros (como antes, con
   un margin-left fijo), la fila pasa a "justify-content: space-between" --
   el indice 1-10 se queda pegado a la izquierda (con su propio scroll
   horizontal si no cupiera, ver ".test-intento__indice" mas abajo, sin
   tocar esa logica) y el grupo de 4 botones se empuja entero al extremo
   derecho, cuyo borde coincide con el de las tarjetas de preguntas de mas
   abajo (mismo ".test-intento__wrap", sin padding lateral propio en
   ninguna de las dos zonas). "gap" seguye actuando como separacion MINIMA
   entre ambos bloques aunque no sobre espacio (pantallas mas estrechas). */
.pagina-test-temas--intento .test-intento__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 0;
  padding: 6px 0 0;
}

.pagina-test-temas--intento .test-intento__indice {
  position: static;
  margin: 0;
  padding: 2px;
  background: transparent;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* Grupo de acciones (Volver a Mis tests + Elegir tema + Aula de estudio +
   Corregir test): un unico bloque que ".test-intento__barra" (arriba)
   empuja entero al extremo derecho de la fila con "space-between" -- este
   elemento ya no necesita su propio margen para separarse de los
   numeros, el "gap" del padre ya garantiza una separacion limpia minima
   aunque la pantalla vaya justa de espacio. Los cuatro botones siguen
   sintiendose como un unico grupo de controles, con "Corregir test"
   siempre el ultimo. */
.pagina-test-temas--intento .test-intento__acciones-barra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagina-test-temas--intento .test-intento__corregir {
  flex: 0 0 auto;
  padding: 10px 18px;
  box-shadow: 0 6px 16px rgba(2, 8, 24, .35);
}

/* "Volver a Mis tests", "Elegir tema" y "Aula de estudio": mismo tamaño
   que "Corregir test" pero claramente secundarios -- mismo tratamiento ya
   usado en esta pantalla azul para acciones secundarias (ver
   ".test-temas-selector__mis-tests" del selector aprobado). Se
   distinguen solo por texto, no por color: "Corregir test" sigue siendo
   la unica accion primaria azul de la fila. "Volver a Mis tests" reutiliza
   EXACTAMENTE la misma regla (mismo alto/tipografia/borde/radio/fondo/
   alineacion vertical que las otras dos, punto explicito del encargo) --
   nunca una clase ni un estilo aparte. */
.pagina-test-temas--intento .test-intento__volver-mis-tests,
.pagina-test-temas--intento .test-intento__elegir-tema,
.pagina-test-temas--intento .test-intento__aula-estudio {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-test-temas--intento .test-intento__volver-mis-tests:hover,
.pagina-test-temas--intento .test-intento__volver-mis-tests:focus-visible,
.pagina-test-temas--intento .test-intento__elegir-tema:hover,
.pagina-test-temas--intento .test-intento__elegir-tema:focus-visible,
.pagina-test-temas--intento .test-intento__aula-estudio:hover,
.pagina-test-temas--intento .test-intento__aula-estudio:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

/* Zona de preguntas: el UNICO elemento con scroll propio de esta
   pantalla. Ocupa todo el alto restante bajo la zona fija (flex:1 1 auto
   + min-height:0 para que no se desborde) y solo el se desplaza -- la
   pagina exterior nunca se mueve. Barra de scroll oculta solo aqui
   (Firefox/WebKit); el scroll en si (rueda -- redirigida desde cualquier
   punto por el script de la plantilla --, trackpad, tactil, salto por
   numero) sigue funcionando igual. */
.pagina-test-temas--intento .test-intento__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 32px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
}

.pagina-test-temas--intento .test-intento__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
}

/* Pequeño margen de cortesia al saltar por numero -- ya no hace falta
   cubrir ninguna cabecera (las preguntas viven en su propio contenedor,
   sin nada fijo superpuesto encima), solo un respiro visual. */
.pagina-test-temas--intento .pregunta-test {
  scroll-margin-top: 12px;
}

@media (max-width: 719px) {
  .pagina-test-temas--intento .test-intento__wrap {
    padding-top: 14px;
  }

  /* En movil no cabe todo en una sola fila con tres botones -- se
     permite que la fila haga wrap: los numeros arriba (con su propio
     scroll horizontal si hace falta) y el grupo de acciones debajo,
     ocupando el ancho completo. Adaptacion limpia, no rota el layout. */
  .pagina-test-temas--intento .test-intento__barra {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .pagina-test-temas--intento .test-intento__acciones-barra {
    flex: 1 1 100%;
    flex-wrap: wrap;
    margin-left: 0;
    gap: 8px;
  }

  .pagina-test-temas--intento .test-intento__corregir,
  .pagina-test-temas--intento .test-intento__volver-mis-tests,
  .pagina-test-temas--intento .test-intento__elegir-tema,
  .pagina-test-temas--intento .test-intento__aula-estudio {
    padding: 9px 14px;
    font-size: .92rem;
  }
}

/* =========================================================================
   Test por temas -- pantalla de RESULTADO / CORRECCION (cierre visual:
   mismo lenguaje ya validado en la pantalla de intento de arriba). Ambas
   plantillas comparten ".pagina-aula-estudio.pagina-test-temas" (fondo PN,
   cabecera compacta, --ancho-modulo:64rem), pero esta seccion va acotada
   ademas al modificador EXCLUSIVO ".pagina-test-temas-resultado" (solo
   test_temas_resultado.html) -- distinto de ".pagina-test-temas--resultado",
   que examen_resultado.html tambien lleva y con el que comparte TODO el
   vocabulario de componentes (.test-resultado*, .lista-revision,
   .pregunta-revision*): si se acotara con ese modificador compartido, los
   cambios se colarian en la pantalla de examenes oficiales. No se toca la
   logica de resultados/revision (routes_test_temas.py / motor de
   preguntas): solo maquetacion y color.

   Misma arquitectura de "zona superior fija + una unica zona con scroll
   propio" que la pantalla de intento (ver bloque
   ".pagina-test-temas--intento" mas arriba, mismo razonamiento):

     ZONA SUPERIOR FIJA   (.test-resultado__fijo)    flex: 0 0 auto
     REVISION (scroll)    (.test-resultado__scroll)  flex: 1 1 auto,
                                                       overflow-y: auto

   Nota de especificidad: igual que en intento, ".pagina-aula-estudio
   .pagina-test-temas" (2 clases, ver mas arriba) ya fija "display:flex" +
   "min-height:100vh" en el body y "flex:1 0 auto" en <main> -- un selector
   de 1 sola clase como ".pagina-test-temas-resultado" perderia el empate
   de especificidad en esas propiedades. Por eso el viewport fijo y el
   flex de <main> usan aqui tambien la combinacion de 3 clases
   ".pagina-aula-estudio.pagina-test-temas.pagina-test-temas-resultado".

   Solo en ESCRITORIO (min-width: 900px): en movil el body/main conservan
   el flex-column normal de ".pagina-aula-estudio.pagina-test-temas" (sin
   "overflow:hidden"), así que la pagina se desplaza de forma natural en
   vez de forzar una zona de revision diminuta (punto 10 del encargo). El
   script "test_temas_resultado_scroll.js" detecta este caso (el
   contenedor de revision no tiene "overflow-y:auto" calculado) y no
   interfiere con el scroll nativo de la pagina.
   ========================================================================= */

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-test-temas-resultado {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-test-temas-resultado main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-test-temas-resultado .site-footer {
    display: none;
  }

  .pagina-test-temas-resultado .test-resultado {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-test-temas-resultado .test-resultado__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-test-temas-resultado .test-resultado__fijo {
    flex: 0 0 auto;
    padding: 0 0 10px;
  }

  .pagina-test-temas-resultado .test-resultado__resumen {
    margin: 0 0 12px;
    max-width: none;
  }

  .pagina-test-temas-resultado .test-resultado__acciones {
    margin: 0 0 14px;
  }

  .pagina-test-temas-resultado .test-resultado__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-test-temas-resultado .test-resultado__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-test-temas-resultado .test-resultado .lista-revision {
    max-width: none;
  }

  .pagina-test-temas-resultado .pregunta-revision {
    scroll-margin-top: 12px;
  }
}

/* Cabecera global a ancho completo -- mismo patron ya aprobado en el resto
   de pantallas de Aula de estudio / Test por temas. Se aplica en todos los
   anchos (no solo escritorio), igual que en el selector y en intento. */
.pagina-test-temas-resultado .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* Legibilidad sobre el fondo azul PN: textos que quedan fuera de tarjetas
   blancas pasan a blanco/claro. Los textos DENTRO de tarjetas blancas
   (.test-resultado__dato, .pregunta-revision*) no se tocan -- conservan
   var(--color-texto)/var(--color-texto-suave) tal cual ya funcionan. */
.pagina-test-temas-resultado .test-resultado__kicker {
  color: #b7c6e6;
}

.pagina-test-temas-resultado .test-resultado__titulo {
  color: #fff;
}

/* Estadisticas MUY compactas -- etiqueta y valor en la misma linea (antes
   iban apiladas dentro de la tarjeta, con mucha altura). Acotado a esta
   pantalla: ".test-resultado__dato" tal cual (sin acotar) sigue igual en
   examen_resultado.html, que no lleva ".pagina-test-temas-resultado". Se
   aplica en todos los anchos -- tambien ayuda a subir el area de preguntas
   en movil, donde no hay viewport fijo pero interesa igualmente aprovechar
   el alto. Colores semanticos de "dd" (verde/rojo/neutro) no se tocan --
   siguen viniendo de ".test-resultado__dato--acierto/error/blanco dd" mas
   arriba en este fichero. */
.pagina-test-temas-resultado .test-resultado__resumen {
  margin: 0 0 12px;
}

.pagina-test-temas-resultado .test-resultado__dato {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 6px;
  padding: 9px 12px;
  text-align: left;
}

.pagina-test-temas-resultado .test-resultado__dato dt {
  margin: 0;
  font-size: .78rem;
  white-space: nowrap;
}

.pagina-test-temas-resultado .test-resultado__dato dt::after {
  content: ":";
}

.pagina-test-temas-resultado .test-resultado__dato dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}

.pagina-test-temas-resultado .test-resultado__acciones {
  margin: 0 0 14px;
}

/* Ajuste -- "Resultado del test" + las 4 estadisticas en una sola linea,
   SOLO quando hay sitio (misma condicion que el viewport fijo de mas
   arriba: min-width:900px). Colocado deliberadamente DESPUES del bloque
   "Estadisticas MUY compactas" de arriba (misma especificidad en los
   selectores que coinciden: ".pagina-test-temas-resultado .test-resultado__
   resumen") para ganar el empate en cascada sobre el margen movil de ahi
   arriba. Por debajo de 900px no se toca nada de lo anterior: el titulo
   conserva su tamaño/margen de siempre y ".test-resultado__resumen" sigue
   siendo el grid de 2 columnas ya validado (envueltos ahora en
   ".test-resultado__linea-resumen", un <div> sin estilo propio fuera de
   este media query, así que en movil el flujo por defecto -- h1 y luego dl,
   apilados -- queda exactamente igual que antes de añadir ese contenedor). */
@media (min-width: 900px) {
  .pagina-test-temas-resultado .test-resultado__linea-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 8px;
    margin: 0 0 14px;
  }

  .pagina-test-temas-resultado .test-resultado__titulo {
    margin: 0;
    font-size: 1.75rem; /* ~28px: mas compacto para compartir la fila */
    flex: 0 0 auto;
  }

  .pagina-test-temas-resultado .test-resultado__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  /* Ajuste -- las 4 tarjetas crecen para repartirse el ancho restante de la
     fila (antes quedaban "flex:0 0 auto", ajustadas solo a su contenido, y
     la fila de estadisticas terminaba mucho antes que la de botones). Con
     "flex:1 1 0%" las cuatro reparten a partes iguales el espacio extra que
     sobra en ".test-resultado__resumen" (que ya ocupa, como fila, el mismo
     ancho que ".test-resultado__acciones" -- ambas son hijas directas del
     mismo ".wrap" a ancho completo): el conjunto crece hasta terminar a la
     altura del ultimo boton ("Aula de estudio") sin tocar la altura de la
     tarjeta (eso lo sigue fijando el padding vertical de mas arriba, sin
     cambios). "justify-content:center" en cada tarjeta (ver mas arriba)
     centra etiqueta+valor dentro del hueco ya mas ancho, sin dejar el
     numero pegado a un lado. */
  .pagina-test-temas-resultado .test-resultado__dato {
    flex: 1 1 0%;
  }

  /* Ajuste -- fila de botones alineada con el mismo ancho que la fila de
     estadisticas de arriba y las tarjetas de preguntas de abajo (las 3
     comparten el mismo ".wrap" a ancho completo, pero esta fila -- a
     diferencia de las otras dos -- no se estiraba: los 5
     controles ocupaban solo su ancho de contenido y la fila terminaba
     antes por la derecha, creando un escalon). "flex:1 1 0%" en cada
     hijo directo (los 2 <form> y los 3 <a class="btn-secundario">) reparte
     el espacio sobrante entre los 5 igual que se hizo arriba con las
     tarjetas; como cada uno conserva su min-content como minimo, el texto
     de "Repasar falladas y en blanco (...)" nunca se parte en dos lineas.
     "width:100%" en el boton interior de cada <form> hace que el boton
     rellene visualmente la caja del <form> ya crecida (el <form> en si no
     tiene fondo/click propio). Los <a class="btn-secundario"> ya son ellos
     mismos el control visual, así que "flex" les basta. */
  .pagina-test-temas-resultado .test-resultado__acciones {
    flex-wrap: nowrap;
  }

  .pagina-test-temas-resultado .test-resultado__acciones > * {
    flex: 1 1 0%;
  }

  .pagina-test-temas-resultado .test-resultado__acciones .btn-primario,
  .pagina-test-temas-resultado .test-resultado__acciones .btn-secundario {
    width: 100%;
    white-space: nowrap;
    justify-content: center;
  }
}

/* "Mis tests" / "Cambiar de tema" / "Aula de estudio": mismo tratamiento secundario ya usado
   sobre fondo azul en "Elegir tema" / "Aula de estudio" de la pantalla de
   intento (ver ".test-intento__elegir-tema" mas arriba). Cubre tanto los
   <a class="btn-secundario"> como el <button class="btn-secundario
   btn-secundario--boton"> de "Repasar falladas y en blanco". */
.pagina-test-temas-resultado .test-resultado__acciones .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-test-temas-resultado .test-resultado__acciones .btn-secundario:hover,
.pagina-test-temas-resultado .test-resultado__acciones .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

/* =========================================================================
   Simulacros / Examenes oficiales -- pantalla de RESULTADO (rediseño
   27 sept 2026, extendido a Examenes oficiales el mismo dia). Mismo
   fondo/cabecera azul PN ya validado (".pagina-aula-estudio") + misma
   arquitectura de "zona superior fija + revision con scroll propio" ya
   validada en "Resultado del test" (ver ".pagina-test-temas-resultado" mas
   arriba, mismo razonamiento y mismo gate min-width:900px / scroll natural
   en movil).

   Todo este bloque va acotado a DOS clases exclusivas -- nunca al selector
   base sin cualificar -- para no afectar a ninguna otra pantalla:
   ".pagina-examen-resultado-simulacro" (Simulacros, `codigo_examen is not
   defined` en examen_resultado.html) y ".pagina-examen-resultado-oficial"
   (Examenes oficiales, mismo `if`/`else`, ver routes_examenes_oficiales.py).
   Cada selector de aqui abajo repite el mismo bloque de declaraciones para
   ambas clases -- mismo patron, sin CSS paralelo -- asi que cualquier ajuste
   futuro de maquetacion/color debe tocar las dos lineas del selector a la
   vez para que ambas pantallas seguan pareciendo el mismo producto. No se
   toca el calculo de resultados ni la revision (routes_simulacros.py /
   routes_examenes_oficiales.py / app/engine): solo maquetacion y color.
   ========================================================================= */

.pagina-aula-estudio.pagina-examen-resultado-simulacro,
.pagina-aula-estudio.pagina-examen-resultado-oficial {
  /* Mas ancho que el resto de pantallas que usan --ancho-modulo (52rem):
     hay sitio de sobra con la franja puntuacion+estadisticas en una sola
     fila, y asi tambien las tarjetas de preguntas aprovechan mejor el
     ancho disponible en vez de dejar hueco muerto a la derecha. */
  --ancho-modulo: 74rem;

  /* CORRECCION DE SCROLL (27 sept 2026): esta pantalla NO lleva
     ".pagina-test-temas" (solo ".pagina-aula-estudio.pagina-examen-
     resultado-simulacro"), asi que nunca heredaba el
     "display:flex; flex-direction:column; min-height:100vh" que
     ".pagina-aula-estudio.pagina-test-temas" da mas arriba en este
     fichero a las demas pantallas del modulo. Sin body como contenedor
     flex, el "flex:1 1 auto" que el bloque de escritorio de aqui abajo
     pone en <main> no tenia ningun efecto: <main> crecia a su alto de
     contenido real (las 100 preguntas) y el "overflow:hidden" del body
     en escritorio (ver mas abajo) simplemente recortaba ese sobrante en
     vez de convertirlo en una zona con scroll -- de ahi que solo se
     vieran las primeras preguntas y la rueda del raton no tuviera nada
     que desplazar. Misma declaracion base que ".pagina-aula-estudio
     .pagina-test-temas", aqui bajo la clase propia de esta pantalla para
     no tocar ninguna otra. Sin cambio visual: en movil equivale al
     apilado normal de header/main/footer que ya habia. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-examen-resultado-simulacro,
  .pagina-aula-estudio.pagina-examen-resultado-oficial {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-examen-resultado-simulacro main,
  .pagina-aula-estudio.pagina-examen-resultado-oficial main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-examen-resultado-simulacro .site-footer,
  .pagina-examen-resultado-oficial .site-footer {
    display: none;
  }

  .pagina-examen-resultado-simulacro .examen-resultado,
  .pagina-examen-resultado-oficial .examen-resultado {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__wrap,
  .pagina-examen-resultado-oficial .examen-resultado__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__fijo,
  .pagina-examen-resultado-oficial .examen-resultado__fijo {
    flex: 0 0 auto;
    padding: 0 0 10px;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__scroll,
  .pagina-examen-resultado-oficial .examen-resultado__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-examen-resultado-simulacro .examen-resultado__scroll::-webkit-scrollbar,
  .pagina-examen-resultado-oficial .examen-resultado__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-examen-resultado-simulacro .lista-revision,
  .pagina-examen-resultado-oficial .lista-revision {
    max-width: none;
  }

  .pagina-examen-resultado-simulacro .pregunta-revision,
  .pagina-examen-resultado-oficial .pregunta-revision {
    scroll-margin-top: 12px;
  }
}

/* Cabecera global a ancho completo -- mismo patron ya aprobado en el resto
   de pantallas de Aula de estudio / Test por temas / Simulacros. Se aplica
   en todos los anchos, igual que en esas pantallas. */
.pagina-examen-resultado-simulacro .site-header .wrap,
.pagina-examen-resultado-oficial .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* Legibilidad sobre el fondo azul PN (punto 8 del encargo): el titulo, que
   antes estaba sobre fondo blanco/claro, pasa a blanco. El resto de textos
   fuera de tarjetas (kicker, nota de tiempo agotado) ya no existen en esta
   variante -- ver plantilla -- y dentro de tarjetas blancas
   (.test-resultado__dato, .pregunta-revision*) no se toca nada: siguen
   con var(--color-texto)/var(--color-texto-suave) tal cual ya funcionan. */
.pagina-examen-resultado-simulacro .examen-resultado__titulo,
.pagina-examen-resultado-oficial .examen-resultado__titulo {
  color: #fff;
}

/* Punto 3 del encargo: "Resultado del simulacro" + los 3 accesos
   (Nuevo simulacro / Mis simulacros / Aula de estudio) en una sola fila,
   con altura y aspecto coherentes entre ellos. En movil se permite el
   wrap natural (fila de botones debajo del titulo) en vez de forzar una
   sola linea ilegible (punto 12 del encargo). */
.pagina-examen-resultado-simulacro .examen-resultado__cabecera,
.pagina-examen-resultado-oficial .examen-resultado__cabecera {
  margin: 0 0 14px;
}

.pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera,
.pagina-examen-resultado-oficial .examen-resultado__acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.pagina-examen-resultado-simulacro .examen-resultado__form-cabecera,
.pagina-examen-resultado-oficial .examen-resultado__form-cabecera {
  margin: 0;
}

.pagina-examen-resultado-simulacro .examen-resultado__boton-cabecera,
.pagina-examen-resultado-oficial .examen-resultado__boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  white-space: nowrap;
}

/* "Mis simulacros" / "Aula de estudio": mismo tratamiento secundario ya
   usado sobre fondo azul en el resto de pantallas del modulo (ver
   ".pagina-test-temas-resultado .test-resultado__acciones .btn-secundario"
   mas arriba) -- sin esto el boton secundario por defecto (texto oscuro,
   pensado para fondo blanco) quedaria casi invisible sobre el azul. */
.pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera .btn-secundario,
.pagina-examen-resultado-oficial .examen-resultado__acciones-cabecera .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera .btn-secundario:hover,
.pagina-examen-resultado-oficial .examen-resultado__acciones-cabecera .btn-secundario:hover,
.pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera .btn-secundario:focus-visible,
.pagina-examen-resultado-oficial .examen-resultado__acciones-cabecera .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

@media (min-width: 900px) {
  .pagina-examen-resultado-simulacro .examen-resultado__cabecera,
  .pagina-examen-resultado-oficial .examen-resultado__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__titulo,
  .pagina-examen-resultado-oficial .examen-resultado__titulo {
    margin: 0;
    font-size: 1.6rem; /* ligeramente mas compacto para compartir la fila */
    flex: 0 0 auto;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera,
  .pagina-examen-resultado-oficial .examen-resultado__acciones-cabecera {
    margin: 0;
    flex-wrap: nowrap;
  }
}

/* "Repasar falladas y en blanco (N)" en la fila superior de cabecera
   (correccion puntual 28 sept 2026, punto 1 del encargo de correccion):
   ya NO es una segunda fila aparte -- pasa a ser un boton mas dentro de
   ".examen-resultado__acciones-cabecera" (comparte sus reglas de arriba,
   ".examen-resultado__boton-cabecera"), junto a "Nuevo simulacro" /
   "Mis simulacros" / "Aula de estudio". Con 4 accesos en vez de 3 hace
   falta encogerlos un poco para que quepan en una sola linea en
   escritorio sin partir la fila -- exclusivo de
   ".pagina-examen-resultado-simulacro" (nunca
   ".pagina-examen-resultado-oficial", que conserva sus 3 accesos y el
   tamaño de siempre, ver las reglas compartidas mas arriba). */
.pagina-examen-resultado-simulacro .examen-resultado__boton-cabecera {
  min-height: 40px;
  padding: 9px 14px;
  font-size: .86rem;
}

.pagina-examen-resultado-simulacro .examen-resultado__boton-cabecera:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pagina-examen-resultado-simulacro .examen-resultado__boton-cabecera:disabled:hover {
  border-color: rgba(120, 170, 255, .35);
  color: #dbe7fb;
  background: rgba(8, 18, 42, .5);
}

@media (min-width: 900px) and (max-width: 1099px) {
  /* Con 4 botones no siempre caben en una sola linea entre 900 y 1100px
     de ancho -- se permite un wrap natural en ese rango estrecho en vez
     de forzar "nowrap" (heredado de la regla compartida de arriba) y
     desbordar o apretar ilegible. A partir de 1100px vuelve a caber todo
     en una sola linea con el tamaño reducido de arriba. */
  .pagina-examen-resultado-simulacro .examen-resultado__acciones-cabecera {
    flex-wrap: wrap;
  }
}

/* Punto 5 del encargo (el cambio principal): puntuacion + las 6
   estadisticas en UNA SOLA FRANJA horizontal en escritorio, con la misma
   altura total a ambos lados. En movil/tablet la franja se apila
   (puntuacion arriba, estadisticas debajo en su grid habitual) -- punto 12
   del encargo. */
.pagina-examen-resultado-simulacro .examen-resultado__franja,
.pagina-examen-resultado-oficial .examen-resultado__franja {
  margin: 0 0 14px;
}

.pagina-examen-resultado-simulacro .examen-resultado__puntuacion,
.pagina-examen-resultado-oficial .examen-resultado__puntuacion {
  margin: 0 0 10px;
  padding: 14px 18px;
}

.pagina-examen-resultado-simulacro .examen-resultado__puntuacion .examen-puntuacion__valor strong,
.pagina-examen-resultado-oficial .examen-resultado__puntuacion .examen-puntuacion__valor strong {
  font-size: 1.7rem;
}

.pagina-examen-resultado-simulacro .examen-resultado__resumen,
.pagina-examen-resultado-oficial .examen-resultado__resumen {
  margin: 0;
}

@media (min-width: 900px) {
  .pagina-examen-resultado-simulacro .examen-resultado__franja,
  .pagina-examen-resultado-oficial .examen-resultado__franja {
    display: flex;
    align-items: stretch;
    gap: 16px;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__puntuacion,
  .pagina-examen-resultado-oficial .examen-resultado__puntuacion {
    flex: 0 0 clamp(230px, 26%, 320px);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__resumen,
  .pagina-examen-resultado-oficial .examen-resultado__resumen {
    flex: 1 1 auto;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__resumen .test-resultado__dato,
  .pagina-examen-resultado-oficial .examen-resultado__resumen .test-resultado__dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__resumen .test-resultado__dato dt,
  .pagina-examen-resultado-oficial .examen-resultado__resumen .test-resultado__dato dt {
    font-size: .76rem;
  }

  .pagina-examen-resultado-simulacro .examen-resultado__resumen .test-resultado__dato dd,
  .pagina-examen-resultado-oficial .examen-resultado__resumen .test-resultado__dato dd {
    font-size: 1.2rem;
  }
}

/* Punto 8 del encargo de Examenes oficiales (punto 9 del encargo original
   de Simulacros) -- contraste de "Ver explicación": acotado a ESTAS dos
   pantallas. ".pregunta-revision__explicacion" sin acotar (mas arriba en
   este fichero) se comparte ademas con "Resultado del test" y Fichas --
   cambiar ese color ahi se saldria del encargo. Si se decide mas adelante
   aplicarlo tambien a esas otras pantallas, hacerlo ahi de forma explicita
   (no heredado de aqui). */
.pagina-examen-resultado-simulacro .pregunta-revision__explicacion,
.pagina-examen-resultado-oficial .pregunta-revision__explicacion {
  color: var(--color-texto);
}

/* =========================================================================
   Test por temas -- pantalla "MIS TESTS" (cierre visual: mismo lenguaje ya
   validado en intento/resultado de arriba). Comparte
   ".pagina-aula-estudio.pagina-test-temas" (fondo PN, cabecera compacta,
   --ancho-modulo:64rem) y va acotada ademas al modificador EXCLUSIVO
   ".pagina-mis-tests" (solo test_temas_mis_tests.html). No se toca la logica
   de tests/repasos (routes_test_temas.py / app/engine): solo maquetacion y
   color; el historial de UN tema a la vez (selector numerico + filtrado)
   ya esta resuelto en la ruta (historial_tests_de_un_tema).

   Misma arquitectura de "zona superior fija + una unica zona con scroll
   propio" que intento/resultado:

     ZONA SUPERIOR FIJA   (.mis-tests__fijo)     flex: 0 0 auto
     LISTA (scroll)        (.mis-tests__scroll)   flex: 1 1 auto,
                                                    overflow-y: auto

   Solo en ESCRITORIO (min-width: 900px): en movil el body/main conservan el
   flex-column normal de ".pagina-aula-estudio.pagina-test-temas" (sin
   "overflow:hidden"), así que la pagina se desplaza de forma natural. El
   script "test_temas_mis_tests_scroll.js" detecta este caso (el contenedor
   de la lista no tiene "overflow-y:auto" calculado) y no interfiere con el
   scroll nativo de la pagina.
   ========================================================================= */

/* Cabecera global a ancho completo -- mismo patron ya aprobado en el resto
   de pantallas de Aula de estudio / Test por temas. Se aplica en todos los
   anchos, igual que en selector/intento/resultado. */
.pagina-mis-tests .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-mis-tests {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-mis-tests main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-mis-tests .site-footer {
    display: none;
  }

  .pagina-mis-tests .mis-tests {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-mis-tests .mis-tests__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-mis-tests .mis-tests__fijo {
    flex: 0 0 auto;
    padding: 0 0 14px;
  }

  .pagina-mis-tests .mis-tests__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-mis-tests .mis-tests__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-mis-tests .examen-historial {
    max-width: none;
  }
}

/* Sin viewport fijo (movil, o pantallas por debajo de 900px): la pantalla
   completa se desplaza con scroll natural de documento -- ver nota de
   arriba. */
.mis-tests {
  padding: 22px 0 56px;
}

/* Legibilidad sobre el fondo azul PN: textos que quedan fuera de la tarjeta
   blanca de cada tema pasan a blanco/claro -- las tarjetas en si
   (.examen-historial__item) no se tocan, siguen blancas e individuales. */
.mis-tests__titulo {
  margin: 0 0 10px;
  color: #fff;
}

.mis-tests__intro {
  margin: 0 0 16px;
  color: #b7c6e6;
}

.mis-tests__linea-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 18px;
}

.mis-tests__total {
  margin: 0;
  font-size: .92rem;
  color: #b7c6e6;
}

.mis-tests__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Mismo tratamiento secundario ya usado sobre fondo azul en intento/
   resultado ("Elegir tema" / "Cambiar de tema" / "Aula de estudio"). */
.mis-tests__acciones .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.mis-tests__acciones .btn-secundario:hover,
.mis-tests__acciones .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

.pagina-mis-tests .examen-historial__vacio {
  color: #dbe7fb;
}

/* Selector numerico de tema en "Mis tests" (cierre 28 sept 2026): reutiliza
   el buscador compacto ya validado en ".buscador-tema" (Test por temas /
   Fichas / Esquemas, ver mas arriba ".pagina-aula-estudio.pagina-test-temas
   .buscador-tema" -- mismo color/contraste de la CAJA sobre el fondo azul,
   sin tocar esas reglas compartidas) pero con un <input type="number"> real
   en vez de type="text": ese input necesita SUS PROPIAS reglas de estilo
   (mas abajo), scoped a ".mis-tests__buscador", porque las reglas oscuras ya
   existentes solo seleccionan "input[type='text']" y no alcanzan a este
   input numerico -- sin esto se veria con el estilo por defecto del
   navegador (fondo claro, sin transparencia) encima del fondo azul.

   Fila superior en una sola linea (punto 5 del encargo): ".mis-tests__selector"
   y ".mis-tests__acciones" son ambos hijos directos de
   ".mis-tests__linea-superior" (flex, space-between, ver arriba), asi que
   quedan en la misma fila: [ buscador ] [ Volver a Test por temas ] [ Aula
   de estudio ]. El buscador se mantiene COMPACTO (no ocupa el ancho
   completo de la fila) para que los tres elementos quepan equilibrados. */
.mis-tests__selector {
  display: flex;
  align-items: center;
  margin: 0;
}

.mis-tests__buscador.buscador-tema {
  max-width: 128px;
  flex: 0 1 auto;
  gap: 8px;
  padding-left: 12px;
}

.mis-tests__buscador-etiqueta {
  font-size: .84rem;
  color: #dbe7fb;
  white-space: nowrap;
}

/* El input type="number" no hereda las reglas de arriba pensadas para
   type="text" (selector .buscador-tema input[type="text"]): se repiten aqui,
   scoped SOLO a esta pantalla, para no afectar a Fichas/Esquemas/selector. */
.mis-tests__buscador input[type="number"] {
  border: 0;
  min-width: 0;
  width: 44px;
  font-size: 1rem;
  padding: 8px 0;
  background: transparent;
  color: #fff;
  -moz-appearance: textfield;
}

.mis-tests__buscador input[type="number"]::-webkit-outer-spin-button,
.mis-tests__buscador input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mis-tests__buscador input[type="number"]:focus,
.mis-tests__buscador input[type="number"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =========================================================================
   Simulacros -- pantalla principal/selector (rediseño visual, 27 sept 2026).
   Reutiliza EXACTAMENTE el fondo azul de Policia Nacional / cabecera ya
   validados en Aula de estudio y Test por temas (".pagina-aula-estudio",
   ver mas arriba: fondo, gradiente de cabecera, footer, main transparente
   -- nada de eso se toca aqui, solo se hereda). Acotado a
   ".pagina-simulacros-selector" (exclusiva de simulacros_inicio.html): no
   afecta a "Mis simulacros" (.pagina-mis-simulacros, que desde el rediseño
   del 27 sept 2026 tiene su PROPIO bloque de fondo azul PN mas abajo,
   ".pagina-mis-simulacros" tras la fila secundaria de aqui) ni a la
   pantalla de realizacion del simulacro (examen_intento.html /
   examen_resultado.html, ninguna lleva ".pagina-aula-estudio" en este
   bloque). A proposito esta pantalla NO combina con
   ".pagina-test-temas": ese bloque compartido (mas arriba,
   ".pagina-aula-estudio.pagina-test-temas") tambien retoca el padding/gap
   del selector de tema y la tarjeta blanca, que aqui deben quedar
   intactos -- por eso se duplican aqui solo las reglas de color/cabecera/
   boton secundario que sí aplican, igual que ya se hizo para el boton
   "Aula de estudio" de Test por temas (ver ".test-temas-selector__aula"
   mas arriba, mismo tratamiento visual, reglas repetidas a proposito). */

.pagina-simulacros-selector .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-simulacros-selector {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pagina-simulacros-selector main {
  flex: 1 0 auto;
}

.pagina-simulacros-selector .site-footer {
  flex-shrink: 0;
  background: transparent;
  border-top: 0;
  padding: 16px 0 22px;
}

.pagina-simulacros-selector .site-footer p {
  color: rgba(191, 208, 242, 0.55);
  font-size: 0.78rem;
}

.pagina-simulacros-selector .test-temas-selector {
  padding: 22px 0 56px;
}

/* Titulo/intro: texto claro sobre el fondo azul oscuro -- mismos colores
   ya validados en Test por temas (ver ".pagina-aula-estudio.pagina-test-temas
   .test-temas-selector__titulo/__intro" mas arriba). Mismo tamaño/jerarquia
   de siempre, solo cambia el color. */
.pagina-simulacros-selector .test-temas-selector__titulo {
  color: #fff;
}

.pagina-simulacros-selector .test-temas-selector__intro {
  color: #b7c6e6;
}

.pagina-simulacros-selector .auth__errores,
.pagina-simulacros-selector .auth__aviso {
  background: rgba(8, 18, 42, 0.6);
  border-color: rgba(120, 170, 255, 0.3);
}

.pagina-simulacros-selector .auth__errores {
  color: #ffd3d3;
}

.pagina-simulacros-selector .auth__aviso {
  color: #bfe9de;
}

/* Fila secundaria "Mis simulacros" + "Aula de estudio": mismos botones,
   misma altura/ancho/padding/borde/radio/tipografia (comparten la clase
   base .btn-secundario), simetricos gracias a flex:1 1 0% sobre los dos.
   Texto BLANCO en ambos sobre el fondo azul oscuro -- se fija aqui para
   los DOS por igual (no por clase individual) para evitar el problema de
   texto negro/gris heredado que ya tuvimos en Test por temas. */
.pagina-simulacros-selector .test-temas-selector__fila-secundaria {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pagina-simulacros-selector .test-temas-selector__fila-secundaria .btn-secundario {
  flex: 1 1 0%;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: .92rem;
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-simulacros-selector .test-temas-selector__fila-secundaria .btn-secundario:hover,
.pagina-simulacros-selector .test-temas-selector__fila-secundaria .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

/* =========================================================================
   Simulacros -- pantalla "MIS SIMULACROS" (rediseño visual, 27 sept 2026).
   Mismo fondo/cabecera azul PN ya validado (".pagina-aula-estudio", ver mas
   arriba) + misma arquitectura de "zona superior fija + unica zona con
   scroll propio" ya validada en "Mis tests" (".pagina-mis-tests", ver mas
   arriba), con la cabecera (titulo a la izquierda + accesos a la derecha,
   en una sola fila) igual que la ya validada en "Resultado del simulacro"
   (".pagina-examen-resultado-simulacro .examen-resultado__cabecera", ver
   mas arriba). Acotado a su propia clase exclusiva
   ".pagina-mis-simulacros" (solo simulacros_mis.html): no toca "Mis tests"
   ni ninguna otra pantalla. No se toca el historial
   (routes_simulacros.py / app/engine) ni la paginacion
   (app/web/paginacion.py / _paginacion.html): solo maquetacion y color. A
   proposito se mantienen TODOS los intentos, paginados, sin deduplicar por
   tema (a diferencia de "Mis tests") -- ver `simulacros_mis_simulacros` en
   routes_simulacros.py, sin tocar.

   Estructura (igual que "Mis tests"):
     ZONA FIJA      (.mis-simulacros__fijo)    flex: 0 0 auto
     LISTA (scroll) (.mis-simulacros__scroll)  flex: 1 1 auto,
                                                 overflow-y: auto

   Solo en ESCRITORIO (min-width: 900px): en movil el body/main conservan
   el flex-column normal de ".pagina-aula-estudio.pagina-test-temas" (sin
   "overflow:hidden"), así que la pagina se desplaza de forma natural. El
   script "simulacros_mis_scroll.js" (archivo propio, no toca
   "test_temas_mis_tests_scroll.js") detecta este caso (el contenedor de la
   lista no tiene "overflow-y:auto" calculado) y no interfiere con el
   scroll nativo de la pagina.
   ========================================================================= */

.pagina-mis-simulacros .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-mis-simulacros {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-mis-simulacros main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-mis-simulacros .site-footer {
    display: none;
  }

  .pagina-mis-simulacros .mis-simulacros {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-mis-simulacros .mis-simulacros__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-mis-simulacros .mis-simulacros__fijo {
    flex: 0 0 auto;
    padding: 0 0 14px;
  }

  .pagina-mis-simulacros .mis-simulacros__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-mis-simulacros .mis-simulacros__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-mis-simulacros .examen-historial {
    max-width: none;
  }

  /* Punto 3 del encargo: titulo a la izquierda + los 2 accesos (Volver a
     Simulacros / Aula de estudio) a la derecha, en una sola fila -- mismo
     patron que ".pagina-examen-resultado-simulacro .examen-resultado__
     cabecera" ya validado en "Resultado del simulacro". En movil se
     permite el wrap natural (accesos debajo del titulo). */
  .pagina-mis-simulacros .mis-simulacros__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .pagina-mis-simulacros .mis-simulacros__titulo {
    margin: 0;
    font-size: 1.6rem; /* ligeramente mas compacto para compartir la fila, igual que en Resultado del simulacro */
    flex: 0 0 auto;
  }

  .pagina-mis-simulacros .mis-simulacros__acciones-cabecera {
    margin: 0;
    flex-wrap: nowrap;
  }
}

/* Sin viewport fijo (movil, o pantallas por debajo de 900px): la pantalla
   completa se desplaza con scroll natural de documento -- ver nota de
   arriba. */
.mis-simulacros {
  padding: 22px 0 56px;
}

.mis-simulacros__cabecera {
  margin: 0 0 14px;
}

.mis-simulacros__acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

/* Los dos botones con la misma altura y el mismo aspecto entre si (punto 3
   del encargo): mismo tratamiento que ".examen-resultado__boton-cabecera"
   ya validado en "Resultado del simulacro". */
.mis-simulacros__boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  white-space: nowrap;
}

/* Legibilidad sobre el fondo azul PN (puntos 2, 3 y 7 del encargo): texto
   blanco/claro y boton secundario claro, mismo tratamiento ya usado sobre
   fondo azul en el resto de pantallas del modulo (ver ".mis-tests__acciones
   .btn-secundario" / ".examen-resultado__acciones-cabecera .btn-secundario"
   mas arriba). Las tarjetas de cada simulacro (.examen-historial__item) no
   se tocan, siguen blancas e individuales. */
.mis-simulacros__titulo {
  margin: 0 0 10px;
  color: #fff;
}

.mis-simulacros__intro {
  margin: 0 0 16px;
  color: #b7c6e6;
}

.mis-simulacros__total {
  margin: 0;
  font-size: .92rem;
  color: #b7c6e6;
}

.mis-simulacros__acciones-cabecera .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.mis-simulacros__acciones-cabecera .btn-secundario:hover,
.mis-simulacros__acciones-cabecera .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

.pagina-mis-simulacros .examen-historial__vacio {
  color: #dbe7fb;
}

/* Punto 5 del encargo: se mantienen TODOS los simulacros, paginados (sin
   deduplicar). Por defecto ".paginacion__estado"/".paginacion__enlace--
   inactivo" usan var(--color-texto-suave) (pensado para fondo blanco) --
   aqui, sobre fondo azul, pasan a claro para mantener el contraste (punto
   8 del encargo, "ningun texto oscuro sobre fondo azul"). No se toca la
   logica de paginacion (app/web/paginacion.py / _paginacion.html), solo el
   color. */
.pagina-mis-simulacros .paginacion__enlace {
  color: #dbe7fb;
}

.pagina-mis-simulacros .paginacion__enlace--inactivo,
.pagina-mis-simulacros .paginacion__estado {
  color: #8fa3c9;
}

/* =========================================================================
   Examenes oficiales -- pantalla "MIS EXAMENES OFICIALES" (rediseño visual,
   27 sept 2026). Mismo patron EXACTO ya validado en "Mis simulacros"
   (".pagina-mis-simulacros", ver bloque de arriba): mismo fondo/cabecera
   azul PN (".pagina-aula-estudio"), misma arquitectura de "zona superior
   fija + unica zona con scroll propio", misma cabecera (titulo a la
   izquierda + accesos a la derecha, en una sola fila). Acotado a su propia
   clase exclusiva ".pagina-mis-examenes-oficiales" (solo
   examenes_oficiales_mis.html): no toca "Mis simulacros" ni ninguna otra
   pantalla. No se toca el historial (routes_examenes_oficiales.py /
   app/engine) ni la paginacion (app/web/paginacion.py / _paginacion.html):
   solo maquetacion y color. A proposito se mantienen TODOS los intentos,
   paginados, sin deduplicar por convocatoria (si el usuario ha hecho EB40
   tres veces, aparecen los tres) -- ver `examenes_oficiales_mis` en
   routes_examenes_oficiales.py, sin tocar.

   Estructura (igual que "Mis simulacros"):
     ZONA FIJA      (.mis-examenes-oficiales__fijo)    flex: 0 0 auto
     LISTA (scroll) (.mis-examenes-oficiales__scroll)  flex: 1 1 auto,
                                                         overflow-y: auto

   Solo en ESCRITORIO (min-width: 900px): en movil el body/main conservan
   el flex-column normal de ".pagina-aula-estudio.pagina-test-temas" (sin
   "overflow:hidden"), así que la pagina se desplaza de forma natural. El
   script "examenes_oficiales_mis_scroll.js" (archivo propio, no toca
   "simulacros_mis_scroll.js" ni "test_temas_mis_tests_scroll.js") detecta
   este caso (el contenedor de la lista no tiene "overflow-y:auto"
   calculado) y no interfiere con el scroll nativo de la pagina.
   ========================================================================= */

.pagina-mis-examenes-oficiales .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-mis-examenes-oficiales {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-mis-examenes-oficiales main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-mis-examenes-oficiales .site-footer {
    display: none;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__fijo {
    flex: 0 0 auto;
    padding: 0 0 14px;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-mis-examenes-oficiales .examen-historial {
    max-width: none;
  }

  /* Titulo a la izquierda + los 2 accesos (Volver a Exámenes oficiales /
     Aula de estudio) a la derecha, en una sola fila -- mismo patron que
     ".pagina-mis-simulacros .mis-simulacros__cabecera" ya validado. En
     movil se permite el wrap natural (accesos debajo del titulo). */
  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__titulo {
    margin: 0;
    font-size: 1.6rem; /* ligeramente mas compacto para compartir la fila, igual que en Mis simulacros */
    flex: 0 0 auto;
  }

  .pagina-mis-examenes-oficiales .mis-examenes-oficiales__acciones-cabecera {
    margin: 0;
    flex-wrap: nowrap;
  }
}

/* Sin viewport fijo (movil, o pantallas por debajo de 900px): la pantalla
   completa se desplaza con scroll natural de documento -- ver nota de
   arriba. */
.mis-examenes-oficiales {
  padding: 22px 0 56px;
}

.mis-examenes-oficiales__cabecera {
  margin: 0 0 14px;
}

.mis-examenes-oficiales__acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

/* Los dos botones con la misma altura y el mismo aspecto entre si: mismo
   tratamiento que ".mis-simulacros__boton-cabecera" ya validado en "Mis
   simulacros". */
.mis-examenes-oficiales__boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  white-space: nowrap;
}

/* Legibilidad sobre el fondo azul PN: texto blanco/claro y boton secundario
   claro, mismo tratamiento ya usado sobre fondo azul en el resto de
   pantallas del modulo (ver ".mis-simulacros__acciones-cabecera
   .btn-secundario" mas arriba). Las tarjetas de cada examen
   (.examen-historial__item) no se tocan, siguen blancas e individuales. */
.mis-examenes-oficiales__titulo {
  margin: 0 0 10px;
  color: #fff;
}

.mis-examenes-oficiales__intro {
  margin: 0 0 16px;
  color: #b7c6e6;
}

.mis-examenes-oficiales__total {
  margin: 0;
  font-size: .92rem;
  color: #b7c6e6;
}

.mis-examenes-oficiales__acciones-cabecera .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.mis-examenes-oficiales__acciones-cabecera .btn-secundario:hover,
.mis-examenes-oficiales__acciones-cabecera .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

.pagina-mis-examenes-oficiales .examen-historial__vacio {
  color: #dbe7fb;
}

.pagina-mis-examenes-oficiales .paginacion__enlace {
  color: #dbe7fb;
}

.pagina-mis-examenes-oficiales .paginacion__enlace--inactivo,
.pagina-mis-examenes-oficiales .paginacion__estado {
  color: #8fa3c9;
}

/* =========================================================================
   Simulacros -- pantalla de REALIZACION de las 100 preguntas (rediseño 27
   sept 2026). Mismo fondo/cabecera azul de Policia Nacional ya validado
   (".pagina-aula-estudio", ver mas arriba) + misma arquitectura de
   viewport fijo de dos zonas ya validada en Test por temas (ver
   ".pagina-test-temas--intento" mas arriba en este fichero) -- copiada
   aqui bajo su propia clase exclusiva ".pagina-examen-intento" (solo
   examen_intento.html) para no tocar ni una linea de lo ya aprobado en
   Test por temas ni en el selector de Simulacros
   (".pagina-simulacros-selector", justo arriba). ExamEngine es compartido
   con Examenes oficiales (routes_simulacros.py / examen_intento.html): el
   dia que esa pantalla reutilice esta misma plantilla, hereda este mismo
   diseño sin cambios.

   Estructura (igual que Test por temas):
     ZONA SUPERIOR FIJA  (.examen__fijo)    flex: 0 0 auto -- titulo +
                                             "Iniciar simulacro", instruc-
                                             ciones y barra (reloj /
                                             progreso / indice / finalizar
                                             / aula de estudio).
     ZONA DE PREGUNTAS   (.examen__scroll)  flex: 1 1 auto, overflow-y:
                                             auto -- UNICO contenedor con
                                             scroll propio; la rueda del
                                             raton se redirige a el desde
                                             cualquier punto de la pantalla
                                             (ver static/js/examen_scroll.js,
                                             mismo patron que
                                             test_temas_scroll.js). No se
                                             ensancha el contenedor general
                                             del examen: sigue capado por
                                             --ancho-modulo (regla
                                             compartida ".examen .wrap > *"
                                             de mas arriba, sin tocar).
   ========================================================================= */

.pagina-aula-estudio.pagina-examen-intento {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.pagina-examen-intento main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pagina-examen-intento .site-footer {
  display: none;
}

.pagina-examen-intento .site-header {
  flex: 0 0 auto;
}

.pagina-examen-intento .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-examen-intento .examen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.pagina-examen-intento .examen__wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-bottom: 0;
}

.pagina-examen-intento .examen__fijo {
  flex: 0 0 auto;
  padding: 0 0 14px;
}

/* Titulo + "Iniciar simulacro" en la misma fila (punto 4 del encargo):
   titulo a la izquierda, boton a la derecha -- cae aprox. en la misma
   columna que "Finalizar simulacro" en la barra de debajo (tambien
   empujada a la derecha, ver ".examen-barra__acciones"). */
.pagina-examen-intento .examen__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 10px;
}

.pagina-examen-intento .examen__titulo {
  margin: 0;
  color: #fff;
}

.pagina-examen-intento .examen__form-iniciar {
  margin: 0;
  flex: 0 0 auto;
}

.pagina-examen-intento .examen__iniciar {
  padding: 10px 18px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(2, 8, 24, .35);
}

.pagina-examen-intento .examen__intro {
  margin: 0 0 14px;
  max-width: none;
  color: #b7c6e6;
  font-size: .82rem;
}

/* Barra (reloj / progreso / indice / finalizar / aula de estudio): sin
   tarjeta blanca de fondo -- vive directamente sobre el fondo azul, mismo
   lenguaje que ".pagina-test-temas--intento .test-intento__barra" (cada
   control trae ya su propio color). Ya no necesita "position:sticky": con
   el viewport fijo la barra vive en la zona superior fija, que nunca se
   desplaza. */
.pagina-examen-intento .examen-barra {
  position: static;
  top: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.pagina-examen-intento .examen-barra__fila {
  padding: 6px 0 0;
}

.pagina-examen-intento .examen-reloj,
.pagina-examen-intento .examen-reloj__valor {
  color: #fff;
}

.pagina-examen-intento .examen-reloj__etiqueta {
  color: #b7c6e6;
}

.pagina-examen-intento .examen-reloj--final .examen-reloj__valor {
  color: #ff8a80;
}

.pagina-examen-intento .examen-progreso {
  color: #b7c6e6;
}

.pagina-examen-intento .examen-progreso span:first-child {
  color: #fff;
}

/* Botones secundarios de la barra (Indice / Aula de estudio): MISMO
   tratamiento ya aprobado para acciones secundarias sobre fondo azul PN
   (ver ".test-intento__elegir-tema" / ".pagina-simulacros-selector
   .test-temas-selector__fila-secundaria .btn-secundario" mas arriba en
   este fichero) -- nunca el texto oscuro que hereda ".btn-secundario"
   base sobre el fondo azul (el bug que ya se corrigio en esas dos
   pantallas). */
.pagina-examen-intento .examen .btn-secundario.examen-boton {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-examen-intento .examen .btn-secundario.examen-boton:hover,
.pagina-examen-intento .examen .btn-secundario.examen-boton:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

.pagina-examen-intento .examen-indice {
  border-top: 1px solid rgba(120, 170, 255, .25);
}

.pagina-examen-intento .examen-indice__leyenda {
  color: #b7c6e6;
}

.pagina-examen-intento .examen-indice__muestra {
  background: rgba(8, 18, 42, .5);
  border-color: rgba(120, 170, 255, .35);
}

/* Preparado / no iniciado todavia (punto 3 del encargo): el fieldset de
   preguntas llega "disabled" desde el servidor mientras no se pulsa
   "Iniciar simulacro" -- esto es solo la senal visual de ese estado real
   (el candado de verdad esta en el servidor, ver
   exam_engine.responder_en_examen). */
.pagina-examen-intento fieldset#examen-preguntas:disabled {
  opacity: .55;
}

/* Zona de preguntas: UNICO contenedor con scroll propio de esta pantalla
   (mismo patron que ".pagina-test-temas--intento .test-intento__scroll"). */
.pagina-examen-intento .examen__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 32px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
}

.pagina-examen-intento .examen__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
}

.pagina-examen-intento .examen .pregunta-test {
  scroll-margin-top: 12px;
}

/* Indice 20 x 5 en escritorio (punto 7 del encargo): 100 numeros en 5
   filas de 20 en vez de las ~10 columnas de antes, aprovechando el ancho
   YA disponible del panel (sin ensanchar el contenedor general del
   examen: solo se ajustan tamaño/gap/tipografia de cada celda y se quita
   el "max-width" que antes dejaba el panel angosto con mucho hueco a la
   derecha). Por debajo de 1024px no es razonable mantener 20 columnas --
   cae a 10 y luego a 5, igual de legible y sin romper la pantalla (20x5
   es sobre todo para escritorio, ver punto 7 del encargo). */
.pagina-examen-intento .examen-indice__rejilla {
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 5px;
  max-width: none;
}

.pagina-examen-intento .examen-indice__item {
  height: 30px;
  font-size: .76rem;
}

@media (max-width: 1023px) {
  .pagina-examen-intento .examen-indice__rejilla {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .pagina-examen-intento .examen-indice__item {
    height: 32px;
    font-size: .82rem;
  }
}

@media (max-width: 479px) {
  .pagina-examen-intento .examen-indice__rejilla {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .pagina-examen-intento .examen__wrap {
    padding-top: 14px;
  }

  .pagina-examen-intento .examen__cabecera {
    gap: 10px;
  }

  .pagina-examen-intento .examen__form-iniciar {
    flex: 1 1 100%;
  }

  .pagina-examen-intento .examen__iniciar {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* "Repasar falladas y en blanco" (28 sept 2026, mejora funcional final de
   Simulacros): reutiliza TAL CUAL todo el bloque ".pagina-examen-intento"
   de arriba (misma pantalla base, ver examen_repaso.html) bajo la clase
   adicional ".pagina-examen-repaso" -- la UNICA regla nueva es este aviso,
   para que quede visualmente claro que es un repaso sin cronometro y no un
   nuevo simulacro completo (punto 3 del encargo). Nunca afecta a
   ".pagina-examen-intento" sola: el elemento ".examen-repaso__aviso" solo
   existe en esta plantilla nueva. */
.pagina-examen-repaso .examen-repaso__aviso {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 196, 84, .16);
  border: 1px solid rgba(255, 196, 84, .4);
  color: #ffe4ad;
  font-size: .82rem;
}

/* =========================================================================
   Examenes oficiales -- pantalla inicial/selector de convocatorias
   (rediseño visual, 27 sept 2026). Reutiliza EXACTAMENTE el fondo azul de
   Policia Nacional / cabecera ya validados en Aula de estudio, Test por
   temas y Simulacros (".pagina-aula-estudio", ver mas arriba: fondo,
   gradiente de cabecera, footer, main transparente -- nada de eso se toca
   aqui, solo se hereda), con la cabecera (titulo a la izquierda + los 2
   accesos "Mis examenes oficiales" / "Aula de estudio" a la derecha, en
   una sola fila) igual que la ya validada en "Resultado del simulacro" /
   "Mis simulacros" (".examen-resultado__cabecera" /
   ".mis-simulacros__cabecera", ver mas arriba). Acotado a su propia clase
   de body EXCLUSIVA ".pagina-examenes-oficiales-selector" (solo
   examenes_oficiales_inicio.html): no combina con ".pagina-test-temas" a
   proposito (ese bloque compartido, mas arriba, tambien retoca el
   selector de tema/buscador y el titulo con raya de acento, que aqui no
   aplican) ni afecta a "Mis examenes oficiales" (pantalla aparte, sin
   estas clases) ni a la realizacion/resultado del examen oficial (que
   siguen su propia variante sin tocar, ver nota en examen_resultado.html).
   No se toca el listado de convocatorias (.examen-convocatorias*, mas
   arriba): las tarjetas siguen blancas e individuales, sin cambios de
   datos/estados (routes_examenes_oficiales.py / app/engine). */

.pagina-examenes-oficiales-selector .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-examenes-oficiales-selector {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pagina-examenes-oficiales-selector main {
  flex: 1 0 auto;
}

.pagina-examenes-oficiales-selector .site-footer {
  flex-shrink: 0;
  background: transparent;
  border-top: 0;
  padding: 16px 0 22px;
}

.pagina-examenes-oficiales-selector .site-footer p {
  color: rgba(191, 208, 242, 0.55);
  font-size: 0.78rem;
}

.pagina-examenes-oficiales-selector .test-temas-selector {
  padding: 22px 0 56px;
}

/* Titulo/intro: texto claro sobre el fondo azul oscuro -- mismos colores
   ya validados en el resto del modulo (ver ".pagina-simulacros-selector
   .test-temas-selector__titulo/__intro" mas arriba). */
.pagina-examenes-oficiales-selector .test-temas-selector__titulo {
  color: #fff;
}

/* Correccion de simetria (27 sept 2026): la cabecera y el texto
   explicativo deben compartir EXACTAMENTE la misma anchura que las
   tarjetas de convocatorias (.examen-convocatorias, ver mas arriba, que
   usa `max-width: var(--ancho-modulo)` sin ensanchar nada aqui) -- de lo
   contrario ambos se estiran hasta el ancho completo de `.wrap` (la regla
   generica ".test-temas-selector__intro { max-width: none }" de mas
   arriba estaba pensada para Fichas y aqui rompia la simetria) y quedan
   por delante del borde derecho de las filas EB40/EB37/EB36. Sin tocar
   `--ancho-modulo` (sigue en su valor por defecto, 52rem, heredado de
   :root) ni el ancho/alto de las propias tarjetas. */
.pagina-examenes-oficiales-selector .test-temas-selector__intro {
  color: #b7c6e6;
  max-width: var(--ancho-modulo);
}

.pagina-examenes-oficiales-selector .auth__errores,
.pagina-examenes-oficiales-selector .auth__aviso {
  background: rgba(8, 18, 42, 0.6);
  border-color: rgba(120, 170, 255, 0.3);
}

.pagina-examenes-oficiales-selector .auth__errores {
  color: #ffd3d3;
}

.pagina-examenes-oficiales-selector .auth__aviso {
  color: #bfe9de;
}

/* Cabecera: titulo a la izquierda + "Mis examenes oficiales"/"Aula de
   estudio" a la derecha. El acceso "Mis examenes oficiales" que antes
   vivia debajo del listado se elimina de esa posicion (no se duplica) --
   ver examenes_oficiales_inicio.html, misma ruta `rutas.mis` de siempre. */
.pagina-examenes-oficiales-selector .examenes-oficiales__cabecera {
  margin: 0 0 14px;
  max-width: var(--ancho-modulo);
}

.pagina-examenes-oficiales-selector .examenes-oficiales__acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.pagina-examenes-oficiales-selector .examenes-oficiales__boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  white-space: nowrap;
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-examenes-oficiales-selector .examenes-oficiales__boton-cabecera:hover,
.pagina-examenes-oficiales-selector .examenes-oficiales__boton-cabecera:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

@media (min-width: 900px) {
  .pagina-examenes-oficiales-selector .examenes-oficiales__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  .pagina-examenes-oficiales-selector .test-temas-selector__titulo {
    margin: 0;
    font-size: 1.6rem; /* ligeramente mas compacto para compartir la fila, igual que en Mis simulacros / Resultado del simulacro */
    flex: 0 0 auto;
  }

  .pagina-examenes-oficiales-selector .examenes-oficiales__acciones-cabecera {
    margin: 0;
    flex-wrap: nowrap;
  }
}

/* =========================================================================
   Fichas de repaso -- REDISEÑO del selector (encargo "REDISEÑO + MEJORA
   FUNCIONAL -- FICHAS DE REPASO"). Esta plantilla ahora lleva tambien
   ".pagina-aula-estudio" ademas de ".pagina-test-temas" (ver
   fichas_selector.html), asi que hereda SIN CSS nuevo todo el bloque
   ".pagina-aula-estudio.pagina-test-temas" de mas arriba (fondo azul PN,
   cabecera, buscador, tarjeta blanca) -- exactamente el mismo lenguaje
   visual ya validado en Test por temas. Esquemas NO se ve afectado: solo
   tiene ".pagina-test-temas", nunca ".pagina-aula-estudio". Aqui solo van
   las reglas NUEVAS y exclusivas de Fichas: ocultar el boton real del
   formulario compartido (ver nota en fichas_selector.html) y la fila de 4
   botones. Acotado a ".pagina-fichas" (clase exclusiva de las 3 plantillas
   de Fichas): no toca Test por temas/Simulacros/Examenes oficiales/
   Esquemas.
   ========================================================================= */

/* Cabecera global a ancho completo (correccion 28 sept 2026): mismo patron
   YA APROBADO y reutilizado tal cual en el resto de pantallas interiores PN
   (".pagina-test-temas-selector"/".pagina-test-temas--intento"/
   ".pagina-test-temas-resultado"/".pagina-mis-tests"/".pagina-mis-fichas",
   ver esas reglas mas arriba en este fichero) -- la cabecera dejaba de
   quedar centrada en el `.wrap` de 1080px de siempre y pasa a aprovechar
   todo el ancho disponible, igual que ya hace "Mis fichas". Acotado a
   ".pagina-fichas" (clase EXCLUSIVA ya existente, compartida por las 3
   plantillas de Fichas -- selector/sesion/resultado -- ver el comentario
   de arriba), asi que no hace falta ninguna clase nueva ni tocar
   ".pagina-mis-fichas" (que ya tenia este mismo ajuste por separado). No
   toca la navegacion superior en si (enlaces/orden/contenido de
   base.html), solo su ancho. */
.pagina-fichas .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* El macro _selector_tema.html (compartido, sin tocar) sigue renderizando
   su propio <button type="submit"> dentro del <form> -- aqui se oculta
   SOLO en Fichas: el boton visible equivalente ("Iniciar fichas" en la
   fila de 4 botones de abajo) vive fuera del <form> y lo envia via el
   atributo `form="selector-tema"`, asi que el de dentro ya no hace falta
   verlo. No se toca el markup del macro ni `selector_temas.js` (que sigue
   habilitando/deshabilitando este boton oculto sin problema, aunque ya no
   se vea). */
.pagina-fichas .selector-tema > .btn-primario {
  display: none;
}

.fichas-selector__acciones {
  /* Bug real (no visual, funcional-de-maquetacion): esta fila no tenia
     `max-width`, asi que ocupaba el ancho COMPLETO de `.wrap` (1080px con
     su padding) mientras que la tarjeta/selector de arriba
     (".selector-tema", ver mas arriba en este fichero) esta topada a
     `--ancho-modulo` (64rem en esta pantalla, mas estrecho que `.wrap`) --
     de ahi que la fila sobresaliera por el lado derecho. Mismo ancho EXACTO
     que ".selector-tema" (ninguno de los dos usa `margin:auto`, los dos
     quedan a ras del borde izquierdo de `.wrap`), asi ambos bordes
     coinciden exactamente con los de la tarjeta blanca. */
  width: 100%;
  max-width: var(--ancho-modulo);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Los 4 botones con la MISMA altura y alineados (punto 4 del encargo),
   cualquiera que sea su tratamiento de color (primario/secundario) o si
   son <button> o <a>; en escritorio reparten el ancho a partes iguales y
   caben en una sola fila, en movil envuelven de forma natural. */
.fichas-selector__boton[hidden] {
  display: none;
}

.fichas-selector__boton {
  flex: 1 1 200px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

/* "Continuar fichas" deshabilitado (ningun tema, o el tema seleccionado sin
   sesion abierta -- ver fichas_selector.js): se mantiene SIEMPRE visible en
   la fila (punto 6 del encargo: el usuario debe entender que la opcion
   existe aunque no este disponible todavia), solo atenuado. */
.fichas-selector__boton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.fichas-selector__boton:disabled:hover,
.fichas-selector__boton:disabled:focus-visible {
  border-color: rgba(120, 170, 255, .35);
  background: rgba(8, 18, 42, .5);
  color: #dbe7fb;
}

/* =========================================================================
   Fichas -- pantalla interior de sesion (rediseño visual controlado,
   encargo "REDISEÑO VISUAL MUY CONTROLADO DE LA PANTALLA INTERIOR DE
   FICHAS DE REPASO"): fichas_sesion.html añade ".pagina-aula-estudio" a
   las clases que ya tenia (".pagina-test-temas.pagina-fichas"), asi
   hereda SIN CSS nuevo el fondo azul PN + cabecera ya validados (ver
   ".pagina-aula-estudio" mas arriba). Aqui solo van los ajustes nuevos,
   todos acotados a ".pagina-fichas-sesion" (clase EXCLUSIVA de esta
   plantilla): no afecta a fichas_resultado.html, fichas_mis.html ni
   fichas_selector.html, que no la llevan. La tarjeta blanca (".ficha") y
   su contenido no cambian -- solo los textos que quedan directamente
   sobre el fondo azul y la fila de 3 botones inferior. */

/* Ancho general (correccion 28 sept 2026): esta pantalla usaba
   ".wrap--lectura" (48rem, ver styles.css), mas estrecha que el resto de
   pantallas interiores PN ya validadas. Pasa a usar el MISMO patron ya
   validado en ellas en vez de un ancho independiente: `--ancho-modulo`
   (64rem dentro de ".pagina-aula-estudio.pagina-test-temas", ver mas
   arriba en este fichero) -- igual que ".test-intento__wrap" en la
   pantalla de realizacion de Test por temas. La tarjeta de la ficha
   (".ficha") NO se agranda: se acota a su ancho de lectura de siempre
   (48rem) y se centra dentro del contenedor ya mas ancho -- solo el
   kicker, la barra de progreso, la nota y la fila de 3 botones pasan a
   usar el ancho estandar completo, igual que en las demas pantallas. */
.pagina-fichas-sesion .fichas-sesion__wrap {
  max-width: var(--ancho-modulo);
}

.pagina-fichas-sesion .ficha {
  max-width: 48rem;
  margin-inline: auto;
}

/* Kicker de tema ("Tema N -- Titulo"): mismo tratamiento ya validado para
   el titulo de la pantalla de realizacion de Test por temas
   (".pagina-test-temas--intento .test-intento__tema" mas arriba) --
   tamaño moderado, claramente por debajo de un H1 grande, legible en
   blanco sobre el fondo PN. */
.pagina-fichas-sesion .test-intento__kicker {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw + .6rem, 1.4rem);
  color: #fff;
  margin: 0 0 6px;
}

/* "Ficha X de Y": mismo aumento moderado, un escalon por debajo del
   kicker de tema, en azul claro legible sobre el fondo oscuro. */
.pagina-fichas-sesion .fichas-progreso__texto {
  font-size: 1.05rem;
  color: #cfe0fb;
}

/* Texto de guardado de progreso: mismo color suave ya usado para texto
   secundario sobre el fondo PN (ver ".test-intento__intro" mas arriba). */
.pagina-fichas-sesion .fichas-sesion__nota {
  color: #b7c6e6;
}

/* Fila de 3 botones ("Cambiar de tema" / "Mis fichas" / "Aula de
   estudio"): mismo tratamiento de boton secundario sobre fondo PN ya
   validado en la pantalla de realizacion de Test por temas (ver
   ".test-intento__elegir-tema"/".test-intento__aula-estudio" mas
   arriba) -- misma altura y alineados, en una sola fila en escritorio
   (".fichas-sesion__salidas" ya es flex-wrap, se comparte con
   ".esquema__navegacion" y no se toca su regla base). */
.pagina-fichas-sesion .fichas-sesion__salidas {
  margin-top: 8px;
}

.pagina-fichas-sesion .fichas-sesion__salidas .btn-secundario {
  flex: 1 1 200px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 8px;
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-fichas-sesion .fichas-sesion__salidas .btn-secundario:hover,
.pagina-fichas-sesion .fichas-sesion__salidas .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

/* =========================================================================
   Fichas de repaso -- pantalla de RESULTADO de una sesion terminada
   (rediseño 28 sept 2026, ultima pantalla pendiente del rediseño de
   Fichas de repaso): fichas_resultado.html añade ".pagina-aula-estudio" a
   las clases que ya tenia (".pagina-test-temas.pagina-fichas"), asi hereda
   SIN CSS nuevo el mismo fondo azul PN + cabecera ya validados (ver
   ".pagina-aula-estudio" mas arriba). Reutiliza los MISMOS componentes ya
   usados en "Resultado del test"/"Resultado de examenes oficiales"
   (".test-resultado*", ver ".pagina-test-temas-resultado" mas arriba) --
   pero SIN su arquitectura de "zona fija + scroll propio", porque esta
   pantalla ya no tiene ninguna revision/lista debajo (la lista "Fichas que
   has fallado" se elimina SOLO de la vista, ver fichas_resultado.html: los
   datos de que fichas se fallaron siguen intactos en BD/`falladas` para que
   "Repetir las falladas" siga funcionando igual, tanto en la sesion recien
   terminada como en un resultado historico abierto desde "Mis fichas →
   Ver resultado"). Todo acotado a ".pagina-fichas-resultado" (clase
   EXCLUSIVA de esta plantilla): no afecta a fichas_sesion.html,
   fichas_mis.html, fichas_selector.html ni a Test por temas/Examenes
   oficiales/Simulacros, que comparten los mismos componentes ".test-resultado*"
   pero no esta clase. No se toca routes_fichas.py ni app/engine/fichas.py:
   solo maquetacion y color. Las 4 tarjetas de estadisticas (".test-resultado__dato")
   NO se retocan -- conservan tal cual su diseño/colores ya validados, solo
   se integran sobre el fondo PN heredando ".pagina-aula-estudio". */

.pagina-fichas-resultado .test-resultado {
  padding: 32px 0 56px;
}

/* Ancho general (correccion 28 sept 2026): esta pantalla usaba
   ".wrap--lectura" (48rem, ver styles.css), mas estrecha que el resto de
   pantallas interiores PN ya validadas. Pasa a usar el MISMO patron/clase
   ya validado en "Resultado del test" en vez de un ancho independiente --
   ".test-resultado__wrap" con `max-width: var(--ancho-modulo)` (64rem
   dentro de ".pagina-aula-estudio.pagina-test-temas", ver mas arriba en
   este fichero; ver tambien ".pagina-test-temas-resultado
   .test-resultado__wrap" mas arriba). Las 4 tarjetas de estadisticas y la
   fila de 4 botones ya reparten el ancho disponible con flex (ver mas
   abajo): se integran de forma natural en el ancho nuevo, sin tocar su
   diseño interno. */
.pagina-fichas-resultado .test-resultado__wrap {
  max-width: var(--ancho-modulo);
}

/* Titulo principal ("Mis fichas: resultado"): blanco, mismo tratamiento ya
   validado para los H1 sobre el fondo PN en el resto de pantallas de Aula
   de estudio/Test por temas. */
.pagina-fichas-resultado .test-resultado__titulo {
  color: #fff;
  margin: 0 0 10px;
}

/* Tema debajo del titulo (antes iba ENCIMA como kicker minusculo): tamaño
   moderadamente mayor que el kicker original (0.85rem) y en azul claro
   legible sobre el fondo oscuro -- mismo tono ya usado para texto
   secundario destacado en Fichas (".fichas-progreso__texto" en la pantalla
   interior, ver mas arriba). No es un H1: sigue siendo texto de apoyo, solo
   con mas presencia que antes. */
.pagina-fichas-resultado .fichas-resultado__tema {
  margin: 0 0 22px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #cfe0fb;
}

.pagina-fichas-resultado .test-resultado__resumen {
  margin: 0 0 20px;
}

/* Mensaje "¡Las sabías todas!": mismo color usado para avisos positivos
   sobre el fondo PN en el resto de pantallas (ver ".auth__aviso" mas
   arriba) en vez de "--color-exito" (pensado para tarjetas blancas, poco
   legible aqui). */
.pagina-fichas-resultado .fichas-resultado__mensaje {
  color: #bfe9de;
}

/* Fila de 4 botones: misma altura exacta, texto centrado, una sola fila en
   escritorio, alineada con el mismo ancho que la fila de estadisticas de
   arriba -- ambas son hijas directas del mismo ".wrap wrap--lectura", asi
   que ya comparten el mismo ancho exterior sin necesidad de igualar anchos
   a mano. */
.pagina-fichas-resultado .test-resultado__acciones {
  margin: 0 0 4px;
  align-items: stretch;
}

.pagina-fichas-resultado .test-resultado__acciones form {
  display: flex;
}

.pagina-fichas-resultado .test-resultado__acciones .btn-primario,
.pagina-fichas-resultado .test-resultado__acciones .btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  text-align: center;
}

/* Boton secundario sobre fondo PN: mismo tratamiento ya validado en
   "Resultado del test" (ver ".pagina-test-temas-resultado .test-resultado__acciones
   .btn-secundario" mas arriba). */
.pagina-fichas-resultado .test-resultado__acciones .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.pagina-fichas-resultado .test-resultado__acciones .btn-secundario:hover,
.pagina-fichas-resultado .test-resultado__acciones .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

/* Solo en escritorio (>=640px, mismo punto de corte que el grid de 4
   estadisticas de ".test-resultado__resumen" mas arriba): una unica fila
   sin partirse, cada boton reparte a partes iguales el ancho sobrante sin
   bajar de su ancho de contenido (asi "Repetir las falladas (N)", el texto
   mas largo, nunca se parte en dos lineas). En movil (por debajo de
   640px) se mantiene el flex-wrap por defecto de ".test-resultado__acciones"
   -- cada boton en su propia fila a ancho completo. */
@media (min-width: 640px) {
  .pagina-fichas-resultado .test-resultado__acciones {
    flex-wrap: nowrap;
  }

  .pagina-fichas-resultado .test-resultado__acciones > * {
    flex: 1 1 0%;
  }

  .pagina-fichas-resultado .test-resultado__acciones .btn-primario,
  .pagina-fichas-resultado .test-resultado__acciones .btn-secundario {
    white-space: nowrap;
  }
}

/* =========================================================================
   Fichas de repaso -- pantalla "MIS FICHAS" (encargo "REDISEÑO + MEJORA
   FUNCIONAL -- FICHAS DE REPASO", puntos 7-9). Mismo patron EXACTO ya
   validado en "Mis simulacros"/"Mis examenes oficiales"
   (".pagina-mis-simulacros"/".pagina-mis-examenes-oficiales", ver bloques
   de mas arriba): mismo fondo/cabecera azul PN (".pagina-aula-estudio"),
   misma arquitectura de "zona superior fija + unica zona con scroll
   propio", misma cabecera (titulo a la izquierda + accesos a la derecha,
   en una sola fila). Acotado a su propia clase exclusiva
   ".pagina-mis-fichas" (solo fichas_mis.html): no toca "Mis simulacros" ni
   "Mis examenes oficiales". No se toca el historial (app/engine/fichas.py
   / routes_fichas.py) ni la paginacion (app/web/paginacion.py /
   _paginacion.html): solo maquetacion y color. A proposito se mantienen
   TODAS las sesiones terminadas, paginadas, sin deduplicar (punto 9 del
   encargo: nunca perder historial).

   Estructura (igual que "Mis simulacros"/"Mis examenes oficiales"):
     ZONA FIJA      (.mis-fichas__fijo)    flex: 0 0 auto
     LISTA (scroll) (.mis-fichas__scroll)  flex: 1 1 auto, overflow-y: auto

   Solo en ESCRITORIO (min-width: 900px): en movil el body/main conservan
   el flex-column normal de ".pagina-aula-estudio.pagina-test-temas" (sin
   "overflow:hidden"), así que la pagina se desplaza de forma natural. El
   script "fichas_mis_scroll.js" (archivo propio, no toca
   "simulacros_mis_scroll.js" ni los demas) detecta este caso (el
   contenedor de la lista no tiene "overflow-y:auto" calculado) y no
   interfiere con el scroll nativo de la pagina.
   ========================================================================= */

.pagina-mis-fichas .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-mis-fichas {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-mis-fichas main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-mis-fichas .site-footer {
    display: none;
  }

  .pagina-mis-fichas .mis-fichas {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }

  .pagina-mis-fichas .mis-fichas__wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-modulo);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pagina-mis-fichas .mis-fichas__fijo {
    flex: 0 0 auto;
    padding: 0 0 14px;
  }

  .pagina-mis-fichas .mis-fichas__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* versiones antiguas de Edge/IE */
  }

  .pagina-mis-fichas .mis-fichas__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / navegadores basados en WebKit y Blink */
  }

  .pagina-mis-fichas .examen-historial {
    max-width: none;
  }

  .pagina-mis-fichas .mis-fichas__titulo {
    margin: 0 0 10px;
    font-size: 1.6rem;
  }

  .pagina-mis-fichas .mis-fichas__acciones-cabecera {
    margin: 0;
    flex-wrap: nowrap;
  }
}

/* Sin viewport fijo (movil, o pantallas por debajo de 900px): la pantalla
   completa se desplaza con scroll natural de documento -- ver nota de
   arriba. */
.mis-fichas {
  padding: 22px 0 56px;
}

.mis-fichas__cabecera {
  margin: 0 0 14px;
}

.mis-fichas__acciones-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
}

.mis-fichas__boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: .92rem;
  white-space: nowrap;
}

.mis-fichas__titulo {
  margin: 0 0 10px;
  color: #fff;
}

.mis-fichas__intro {
  margin: 0 0 16px;
  color: #b7c6e6;
}

.mis-fichas__total {
  margin: 0;
  font-size: .92rem;
  color: #b7c6e6;
}

/* Fila superior de "Mis fichas" (rediseño 28 sept 2026, sustituye la
   cabecera "titulo + accesos" por el patron ya validado en "Mis tests":
   buscador numerico de tema + accesos, en una sola fila -- ver
   ".mis-tests__linea-superior"/".mis-tests__selector"/".mis-tests__buscador"
   mas arriba, duplicado aqui con nombres propios para no acoplar "Mis
   fichas" a esa pantalla. */
.mis-fichas__linea-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 18px;
}

.mis-fichas__selector {
  display: flex;
  align-items: center;
  margin: 0;
}

.mis-fichas__buscador.buscador-tema {
  max-width: 128px;
  flex: 0 1 auto;
  gap: 8px;
  padding-left: 12px;
}

.mis-fichas__buscador-etiqueta {
  font-size: .84rem;
  color: #dbe7fb;
  white-space: nowrap;
}

.mis-fichas__buscador input[type="number"] {
  border: 0;
  min-width: 0;
  width: 44px;
  font-size: 1rem;
  padding: 8px 0;
  background: transparent;
  color: #fff;
  -moz-appearance: textfield;
}

.mis-fichas__buscador input[type="number"]::-webkit-outer-spin-button,
.mis-fichas__buscador input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mis-fichas__buscador input[type="number"]:focus,
.mis-fichas__buscador input[type="number"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.mis-fichas__acciones-cabecera .btn-secundario {
  background: rgba(8, 18, 42, .5);
  border: 1px solid rgba(120, 170, 255, .35);
  color: #dbe7fb;
}

.mis-fichas__acciones-cabecera .btn-secundario:hover,
.mis-fichas__acciones-cabecera .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, .18);
}

.pagina-mis-fichas .examen-historial__vacio {
  color: #dbe7fb;
}

.pagina-mis-fichas .paginacion__enlace {
  color: #dbe7fb;
}

.pagina-mis-fichas .paginacion__enlace--inactivo,
.pagina-mis-fichas .paginacion__estado {
  color: #8fa3c9;
}

/* =========================================================================
   Esquemas-resumen -- selector (rediseño visual controlado). Acotado a
   ".pagina-esquemas-selector" (clase EXCLUSIVA de esquemas_selector.html):
   no afecta a esquema_ver.html, Test por temas, Fichas ni al resto. Fondo,
   cabecera, titulo y tarjeta se heredan de ".pagina-aula-estudio
   .pagina-test-temas" (ya validado); aqui solo: ancho de cabecera igual
   que Test por temas/Fichas, aire bajo el titulo (ya no hay frase
   descriptiva) y la fila de 2 botones simetricos.
   ========================================================================= */
.pagina-esquemas-selector .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-esquemas-selector .test-temas-selector__titulo {
  margin-bottom: 28px;
}

/* Orden visual: buscador (.campo, order 1) -> tarjeta (.selector-tema__control,
   order 2, regla comun) -> botones al final (order 3). */
.pagina-esquemas-selector .selector-tema__acciones {
  order: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}

.pagina-esquemas-selector .selector-tema__acciones > .btn-primario,
.pagina-esquemas-selector .selector-tema__acciones > .btn-secundario {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pagina-esquemas-selector .selector-tema__acciones > .btn-secundario {
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-esquemas-selector .selector-tema__acciones > .btn-secundario:hover,
.pagina-esquemas-selector .selector-tema__acciones > .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

/* =========================================================================
   Esquemas-resumen -- pantalla INTERIOR (lectura). Acotado a
   ".pagina-esquema-lectura" (clase EXCLUSIVA de esquema_ver.html): no afecta
   al selector, Fichas, Test por temas ni al resto. Fondo y cabecera se
   heredan de ".pagina-aula-estudio .pagina-test-temas" (ya validado).
   ========================================================================= */
.pagina-esquema-lectura .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-esquema-lectura .esquema {
  padding: 22px 0 56px;
}

/* UN solo contenedor para titulo + 4 botones + recuadro: mismo borde
   izquierdo/derecho. 59rem = 944px (~930-950px de la referencia en 1728px),
   centrado y responsive (width:100% + max-width). */
.pagina-esquema-lectura .esquema-lectura {
  box-sizing: border-box;
  width: 100%;
  max-width: 59rem;
  margin-inline: auto;
}

.pagina-esquema-lectura .esquema-lectura__titulo {
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}

/* Cuatro botones simetricos: misma anchura y altura, una fila en escritorio,
   la fila completa mide EXACTAMENTE lo que el recuadro. */
.pagina-esquema-lectura .esquema-lectura__navegacion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.pagina-esquema-lectura .esquema-lectura__navegacion .btn-secundario {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-esquema-lectura .esquema-lectura__navegacion .btn-secundario:hover,
.pagina-esquema-lectura .esquema-lectura__navegacion .btn-secundario:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

@media (min-width: 641px) {
  .pagina-esquema-lectura .esquema-lectura__navegacion .btn-secundario {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .pagina-esquema-lectura .esquema-lectura__navegacion {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Recuadro claro de lectura, a todo el ancho del contenedor. Sin scroll
   vertical propio (la pagina hace scroll). Se evitan anchos minimos que
   fuercen overflow horizontal. */
.pagina-esquema-lectura .contenido-md--esquema {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
}

/* Tablas: sin anchos minimos por celda (el texto hace wrap dentro del ancho
   disponible). Si una tabla muy ancha (7-8 columnas de palabras largas)
   aun no cupiera, esquema_lectura.js le va anadiendo niveles de compactacion
   (fuente/padding algo menores) SOLO a esa tabla hasta que quepa; nunca se
   parten palabras ni se oculta contenido. */
.pagina-esquema-lectura .md-tabla th,
.pagina-esquema-lectura .md-tabla td {
  min-width: 0;
}

.pagina-esquema-lectura .md-tabla--compacta-1 table { font-size: .86rem; }
.pagina-esquema-lectura .md-tabla--compacta-1 th,
.pagina-esquema-lectura .md-tabla--compacta-1 td { padding: 7px 5px; }
.pagina-esquema-lectura .md-tabla--compacta-2 table { font-size: .8rem; }
.pagina-esquema-lectura .md-tabla--compacta-2 th,
.pagina-esquema-lectura .md-tabla--compacta-2 td { padding: 6px 4px; }
.pagina-esquema-lectura .md-tabla--compacta-3 table { font-size: .75rem; }
.pagina-esquema-lectura .md-tabla--compacta-3 th,
.pagina-esquema-lectura .md-tabla--compacta-3 td { padding: 5px 3px; }

/* Bloques preformateados (flechas, jerarquias, arboles textuales): usan
   todo el ancho del recuadro y, si una linea aun asi fuese mas larga, hacen
   salto de linea conservando saltos e indentacion (pre-wrap) en lugar de
   mostrar una barra horizontal. No se recorta nada ni se reduce la fuente. */
.pagina-esquema-lectura .contenido-md--esquema pre {
  white-space: pre-wrap;
  overflow-x: visible;
  overflow-wrap: anywhere;
}

.pagina-esquema-lectura .contenido-md--esquema pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Scroll (solo ESCRITORIO, min-width: 900px): mismo patron ya validado en
   "Mis tests"/"Mis simulacros". La pagina (html/body) NO se desplaza:
   ocupa 100vh con overflow:hidden y dentro hay dos zonas -- cabecera PN +
   titulo + 4 botones (fijos, flex: 0 0 auto) y el esquema
   (".esquema-lectura__scroll", flex: 1 1 auto, overflow-y: auto), que ocupa
   toda la altura restante del viewport (sin alturas en px). Es el UNICO
   elemento con scroll vertical; la rueda funciona desde cualquier punto de
   la pantalla gracias a esquema_lectura.js. En movil/tablet estrecha no hay
   viewport fijo: scroll natural de pagina. */
@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-test-temas.pagina-esquema-lectura {
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-test-temas.pagina-esquema-lectura main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-esquema-lectura .site-footer {
    display: none;
  }

  .pagina-esquema-lectura .esquema {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px 0 0;
  }

  .pagina-esquema-lectura .esquema > .wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .pagina-esquema-lectura .esquema-lectura {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagina-esquema-lectura .esquema-lectura__titulo,
  .pagina-esquema-lectura .esquema-lectura__navegacion {
    flex: 0 0 auto;
  }

  .pagina-esquema-lectura .esquema-lectura__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 32px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
  }

  .pagina-esquema-lectura .esquema-lectura__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}


/* =========================================================================
   Psicotecnicos -- entrenamiento por categoria / mixto con CORRECCION FINAL
   (psico_entreno.html). Solo esta pantalla: todo va acotado a
   ".pagina-psico-entreno" / ".psico-entreno*", asi que la simulacion, los
   repasos (que conservan su pantalla de correccion inmediata) y el resto de
   Psicotecnicos no cambian.

   Fondo azul PN y cabecera compacta: se reutiliza EXACTAMENTE el sistema ya
   validado (".pagina-aula-estudio", ver "Aula de estudio" mas arriba), sin
   crear otra variante. Misma arquitectura de viewport fijo que la pantalla
   de realizacion de "Test por temas" (".pagina-test-temas--intento"): en
   escritorio (>= 900px) la pagina NO se desplaza; dentro hay tres zonas --
   ZONA SUPERIOR FIJA (bloque de tiempo + cuatro botones + "Pregunta X de N"),
   EJERCICIO (unico elemento con scroll propio) y FLECHAS. Una pregunta larga
   o con imagenes solo desplaza su zona: nunca empuja fuera de pantalla el
   tiempo ni los botones. En movil/tablet estrecha, scroll natural de pagina.
   ========================================================================= */

.pagina-psico-entreno .site-header .wrap {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pagina-psico-entreno .site-footer {
  background: transparent;
  border-top: 0;
  padding: 16px 0 22px;
}

.pagina-psico-entreno .site-footer p {
  color: rgba(191, 208, 242, 0.55);
  font-size: 0.78rem;
}

.pagina-psico-entreno .psico-entreno {
  padding: 18px 0 32px;
}

/* El bloque de tiempo forma parte de la zona fija: ya no es "sticky". */
.pagina-psico-entreno .psico-barra {
  position: static;
  margin-bottom: 12px;
}

/* Fila de CUATRO botones, siempre en una sola fila en escritorio y con el
   mismo ancho total que el bloque de tiempo de encima (ambos ocupan el 100 %
   de ".psico-sesion__wrap"): columnas iguales, misma altura (las filas de un
   grid se estiran), orden Corregir / Volver / Mis psicotecnicos / Aula. */
.psico-entreno__acciones {
  grid-auto-rows: 1fr;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.psico-entreno__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.psico-entreno__boton--corregir {
  box-shadow: 0 6px 16px rgba(2, 8, 24, 0.35);
}

/* Secundarios sobre el azul PN: mismo tratamiento ya validado en las
   pantallas de Test por temas (".test-intento__aula-estudio" y compañia). */
.pagina-psico-entreno .btn-secundario.psico-entreno__boton,
.psico-flecha {
  background: rgba(8, 18, 42, 0.5);
  border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7fb;
}

.pagina-psico-entreno .btn-secundario.psico-entreno__boton:hover,
.pagina-psico-entreno .btn-secundario.psico-entreno__boton:focus-visible,
.psico-flecha:hover,
.psico-flecha:focus-visible {
  border-color: var(--color-acento);
  color: #fff;
  background: rgba(26, 86, 219, 0.18);
}

.psico-entreno__pregunta {
  margin: 0 0 10px;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw + 0.6rem, 1.4rem);
  color: #fff;
}

/* Respuesta elegida (sin corregir): solo marca "esta es la que llevas". */
.psico-opcion--elegida,
button.psico-opcion--elegida:hover {
  border-color: var(--psico-azul);
  background: var(--psico-azul-suave);
  box-shadow: inset 0 0 0 1px var(--psico-azul);
}

.psico-opcion--elegida .psico-opcion__letra {
  background: var(--psico-azul);
  color: #fff;
}

.psico-entreno__flechas {
  display: contents; /* sin fila propia: las flechas se sacan a los laterales */
}

.psico-entreno__cuerpo {
  position: relative;
}

/* Controles laterales del carrusel: a media altura del recuadro, sobre el
   fondo azul, sin restar ancho al ejercicio. */
.psico-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 64px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.psico-flecha--anterior { left: -58px; }
.psico-flecha--siguiente { right: -58px; }

/* Ancho intermedio: poco margen lateral, la flecha se apoya en el borde. */
@media (max-width: 999px) {
  .psico-flecha { width: 34px; height: 56px; }
  .psico-flecha--anterior { left: -20px; }
  .psico-flecha--siguiente { right: -20px; }
}

/* Movil: la pagina se desplaza entera; las flechas quedan fijas a media altura de la pantalla. */
@media (max-width: 899px) {
  .psico-flecha { position: fixed; width: 30px; height: 56px; background: rgba(8, 18, 42, 0.78); }
  .psico-flecha--anterior { left: 2px; }
  .psico-flecha--siguiente { right: 2px; }
}

@media (max-width: 719px) {
  .psico-entreno__acciones { gap: 6px; }
  .psico-entreno__boton { font-size: .8rem; padding: 6px 4px; }
}

/* Solo en pantallas muy estrechas (movil vertical) los cuatro botones pasan a 2 x 2. */
@media (max-width: 479px) {
  .psico-entreno__acciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .psico-entreno__boton { font-size: .9rem; padding: 8px 6px; }
}

@media (min-width: 900px) {
  .pagina-aula-estudio.pagina-psico-entreno {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .pagina-aula-estudio.pagina-psico-entreno main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .pagina-psico-entreno .site-footer {
    display: none;
  }

  .pagina-psico-entreno .site-header {
    flex: 0 0 auto;
  }

  .pagina-psico-entreno .psico-entreno {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 0 0;
  }

  .pagina-psico-entreno .psico-entreno__wrap {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .psico-entreno__fijo {
    flex: 0 0 auto;
  }

  .psico-entreno__cuerpo {
    flex: 0 1 auto; /* mide lo que el recuadro (tope: la altura libre): las flechas se centran en el recuadro */
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .psico-entreno__scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
  }

  .psico-entreno__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

}

/* FREE-3 (simulacro gratuito): enlace "Desbloquear Premium" legible sobre el
   fondo azul de Policia Nacional. Reglas ADITIVAS y acotadas a marcado que solo
   existe en las pantallas FREE (no afectan a Simulacros Premium ni a FREE-2). */
.pagina-simulacros-selector .test-temas-selector__plan a,
.examen-resultado__nota--free a,
.mis-simulacros__intro--free a {
  color: #cfe0ff;
  font-weight: 600;
  text-decoration: underline;
}
.examen-resultado__nota--free { color: rgba(226, 236, 255, .88); }

/* FREE-4 / FREE-5: piezas aditivas de las pantallas FREE de Fichas, Psicotecnicos
   y Esquemas bloqueado. Solo existen en marcado FREE; no afectan a Premium. */
.pagina-fichas .test-temas-selector__plan a,
.modulo-bloqueado .test-temas-selector__plan a,
.modulo-bloqueado__aviso a {
  color: #cfe0ff;
  font-weight: 600;
  text-decoration: underline;
}
.psico-plan-free {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--psico-azul);
  border-radius: 12px;
  padding: 10px 16px;
  margin: 0 0 14px;
  font-size: .92rem;
}
.psico-plan-free p { margin: 2px 0; }
.psico-plan-free a { font-weight: 600; text-decoration: underline; }
.psico-modo--bloqueado { opacity: .82; }
.psico-bloqueo {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.psico-bloqueo__texto { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .92rem; }
.psico-bloqueo__texto svg { width: 18px; height: 18px; flex: none; }
.psico-bloqueo__texto a { font-weight: 600; text-decoration: underline; color: #cfe0ff; }
.tile-aula__premium {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.modulo-bloqueado__acciones { margin-top: 18px; max-width: 260px; }

/* =========================================================================
   Pagina Premium / Precios (`/premium`, premium.html). Composicion de la
   referencia aprobada: hero compacto, oferta con las 4 tarjetas en la primera
   pantalla y, debajo, comparacion (izquierda) + permanencia/FAQ (derecha).
   Piel PN existente (fondo y cabecera de ".pagina-aula-estudio"). Todo acotado
   a ".pagina-premium": no afecta a ninguna otra pantalla.
   Sin recursos graficos propios: el fondo es solo el de ".pagina-aula-estudio".
   ========================================================================= */
.pagina-premium .site-header .wrap { max-width: none; padding-inline: clamp(20px, 4vw, 56px); }
.pagina-premium main section { padding: 0; }
.pagina-premium .premium-hero { padding: 6px 0 12px; }
.premium-wrap { width: min(1512px, 100% - clamp(32px, 9vw, 160px)); margin-inline: auto; }

.premium-hero { position: relative; padding: 6px 0 4px; color: #fff; }
.premium-hero .premium-wrap { position: relative; z-index: 1; padding-left: clamp(0px, 4vw, 70px); }
.premium-hero__eyebrow { margin: 0 0 4px; color: #dbe6fb; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.premium-hero__titulo { margin: 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.premium-hero__titulo span { color: #ffb42e; }
.premium-hero__oferta { margin: 4px 0 0; font-weight: 700; font-size: 1.08rem; color: #fff; }
.premium-hero__lead { margin: 2px 0 10px; color: #c3d1ee; max-width: 46rem; }
.premium-hero__puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.premium-hero__puntos li { display: inline-flex; align-items: center; gap: 8px; color: #e8eefc; font-size: .95rem; }
.premium-hero__puntos svg { width: 24px; height: 24px; flex: none; color: #5b9bff; }
.premium-hero__puntos li:first-child svg { color: #ffb42e; }
.premium-estado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; padding: 12px 16px; max-width: 46rem;
  border: 1px solid rgba(120, 170, 255, .4); border-radius: 12px; background: rgba(8, 18, 42, .6); color: #bfe9de;
}
.premium-estado__cta { text-decoration: none; margin-left: auto; }

/* Confirmacion de pago (`/premium/gracias`, premium_gracias.html): tarjeta blanca
   centrada con los mismos colores, radio y boton que las tarjetas de planes. */
.pagina-premium .premium-gracias { display: flex; justify-content: center; padding: clamp(24px, 6vh, 64px) 16px 56px; }
.premium-gracias__tarjeta {
  box-sizing: border-box; width: min(560px, 100%); padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 44px); text-align: center;
  border-radius: 14px; background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde); box-shadow: 0 10px 30px rgba(2, 10, 30, .45);
}
.premium-gracias__icono {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; background: #0f9d6b; color: #fff;
}
.premium-gracias__icono svg { width: 34px; height: 34px; }
.premium-gracias__titulo { margin: 0 0 8px; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.15; font-weight: 800; color: #0d1b3d; }
.premium-gracias__texto { margin: 0 0 6px; color: #33415c; }
.premium-gracias__fecha { display: inline-block; margin: 10px 0 12px; padding: 8px 18px; border-radius: 10px; background: rgba(26, 86, 219, .1); color: #0d1b3d; font-weight: 700; }
.premium-gracias__fecha strong { color: #1a56db; }
.premium-gracias__boton { display: inline-flex; justify-content: center; margin-top: 14px; min-height: 44px; padding: 10px 22px; text-decoration: none; }
@media (max-width: 480px) { .premium-gracias__boton { width: 100%; } }

/* Oferta de lanzamiento */
.premium-oferta { border-radius: 14px; padding: 10px 12px 12px; border: 2px solid #f0a52a; background: rgba(4, 14, 38, .55); }
.premium-oferta__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 6px 10px; }
.premium-oferta__icono { width: 40px; height: 40px; color: #ffb42e; flex: none; }
.premium-oferta__titulo { margin: 0; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #ffb42e; font-weight: 800; }
.premium-oferta__sub { margin: 0; color: #ffcf7a; font-size: .92rem; }
.premium-oferta__contador { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-weight: 700; color: #fff; }
.premium-oferta__contador svg { width: 28px; height: 28px; color: #ffb42e; }
.premium-planes { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: 8px; }
.premium-plan {
  position: relative; display: flex; flex-direction: column; text-align: center; padding: 14px 18px 14px;
  border-radius: 12px; background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde);
}
.premium-plan--recomendado { border: 2px solid #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, .28), 0 10px 30px rgba(20, 70, 200, .45); }
.premium-plan__etiqueta {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%); margin: 0; padding: 3px 26px; border-radius: 8px;
  background: #1a56db; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.premium-plan__duracion { margin: 0; font-size: 1.3rem; line-height: 1.15; letter-spacing: .01em; color: #0d1b3d; font-weight: 800; }
.premium-plan__mensaje { margin: 0 0 6px; color: #33415c; font-size: .95rem; }
.premium-plan__oficial { margin: 0; color: #6b7386; font-size: .9rem; }
.premium-plan__oficial s { text-decoration-thickness: 1px; }
.premium-plan__lanz { margin: 2px 0 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7386; }
.premium-plan__precio { margin: 0; font-size: 2.55rem; font-weight: 800; line-height: 1.05; color: #0d1b3d; font-variant-numeric: tabular-nums; }
.premium-plan__descuento { margin: 6px auto 10px; padding: 3px 16px; border-radius: 8px; background: rgba(26, 86, 219, .12); color: #1a56db; font-size: .9rem; font-weight: 700; }
.premium-plan:nth-child(1) .premium-plan__precio, .premium-plan:nth-child(4) .premium-plan__precio { color: #e0101c; }
.premium-plan:nth-child(1) .premium-plan__descuento, .premium-plan:nth-child(4) .premium-plan__descuento { background: #fde3e5; color: #e0101c; }
.premium-plan__lista { list-style: none; margin: 0 0 12px; padding: 0; text-align: left; font-size: .9rem; color: #1b2438; }
.premium-plan__lista li { position: relative; padding: 4px 0 4px 28px; }
.premium-plan__lista li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #0f9d6b; }
.premium-plan__lista li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.premium-plan__boton { margin-top: auto; width: 100%; min-height: 44px; padding: 10px 14px; }
.premium-oferta__nota { margin: 8px 6px 0; color: #a9bbdd; font-size: .8rem; }

/* Comparacion + permanencia/FAQ */
.premium-inferior { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 16px 28px; margin-top: 14px; padding-bottom: 40px; align-items: start; color: #fff; }
.premium-bloque__titulo { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; color: #fff; }
.premium-bloque__titulo small { display: block; margin: 2px 0 0; font-size: .82rem; font-weight: 400; color: #c3d1ee; }
.premium-comp-marco { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(120, 170, 255, .28); }
.premium-comp { width: 100%; border-collapse: collapse; color: var(--color-texto); }
.premium-comp th, .premium-comp td { padding: 7px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e6e9f0; font-size: .82rem; line-height: 1.3; }
.premium-comp thead th { background: #f1f4fb; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #0d1b3d; }
.premium-comp tbody th { width: 17%; color: #0d1b3d; font-size: .82rem; }
.premium-comp tbody tr:last-child th, .premium-comp tbody tr:last-child td { border-bottom: 0; }
.premium-comp td { position: relative; padding-left: 34px; }
.premium-si, .premium-no { position: absolute; left: 9px; top: 50%; width: 17px; height: 17px; margin-top: -8px; border-radius: 50%; }
.premium-si { background: #0f9d6b; }
.premium-si::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.premium-no { background: #d62828; }
.premium-no::before, .premium-no::after { content: ""; position: absolute; left: 8px; top: 3px; width: 2px; height: 11px; background: #fff; transform: rotate(45deg); }
.premium-no::after { transform: rotate(-45deg); }
.premium-tu-plan { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: #1a56db; color: #fff; font-size: .62rem; letter-spacing: .04em; }

.premium-modelo { margin: 0 0 10px; color: #c3d1ee; font-size: .92rem; }
.premium-confianza { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.premium-confianza li { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(120, 170, 255, .28); background: rgba(6, 18, 46, .7); }
.premium-confianza svg { width: 26px; height: 26px; color: #3d8bff; }
.premium-confianza strong { color: #fff; font-size: .8rem; line-height: 1.2; }
.premium-confianza span { color: #a9bbdd; font-size: .72rem; line-height: 1.25; }

.premium-faq { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.premium-faq details { border-radius: 8px; border: 1px solid rgba(120, 170, 255, .28); background: rgba(6, 18, 46, .7); padding: 0 12px; }
.premium-faq summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 0; font-size: .82rem; color: #fff; }
.premium-faq summary::-webkit-details-marker { display: none; }
.premium-faq summary::before { content: "\2192"; color: #9fb3d6; flex: none; }
.premium-faq summary::after { content: "\203A"; margin-left: auto; color: #9fb3d6; font-size: 1.1rem; transition: transform .15s; }
.premium-faq details[open] summary::after { transform: rotate(90deg); }
.premium-faq details p { margin: 0 0 10px; color: #b7c6e6; font-size: .85rem; }

@media (max-width: 1099px) {
  .premium-hero .premium-wrap { padding-left: 0; }
  .premium-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .premium-inferior { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .premium-wrap { width: calc(100% - 32px); }
  .premium-oferta__contador { margin-left: 0; }
  .premium-oferta__titulo { font-size: 1.3rem; }
  .premium-confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-faq { grid-template-columns: 1fr; }
  .premium-estado__cta { margin-left: 0; }
  .premium-comp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .premium-comp, .premium-comp tbody, .premium-comp tr, .premium-comp th, .premium-comp td { display: block; width: 100%; }
  .premium-comp tbody tr { border-bottom: 1px solid #e6e9f0; padding: 4px 0 8px; }
  .premium-comp tbody tr:last-child { border-bottom: 0; }
  .premium-comp tbody th { width: 100%; border-bottom: 0; padding-bottom: 2px; }
  .premium-comp td { border-bottom: 0; padding-top: 5px; padding-bottom: 5px; }
  .premium-comp td::before { content: attr(data-label) ": "; font-weight: 700; color: #0d1b3d; }
  .premium-si, .premium-no { top: 13px; margin-top: 0; }
}
@media (max-width: 559px) {
  .premium-planes { grid-template-columns: 1fr; }
  .premium-plan { padding: 16px 16px 14px; }
}

/* Cabecera con la entrada "Precios": entre 720 y 1023 px cabe en una sola linea. */
@media (min-width: 720px) and (max-width: 1199px) {
  .site-nav { gap: 0; }
  .site-nav a, .nav-logout__btn { padding: 8px 7px; font-size: .9rem; white-space: nowrap; }
  .site-nav__cta { padding: 8px 10px; }
}
.premium-estado + .premium-hero__puntos { margin-top: 12px; }

/* =========================================================================
   Bloque legal: paginas publicas (/aviso-legal, /privacidad, /cookies,
   /condiciones; _legal.html), enlaces legales del footer, casillas previas
   al checkout en /premium y nota contractual en /premium/gracias.
   ========================================================================= */
.pagina-legal .legal { padding: clamp(20px, 4vh, 40px) 16px 56px; }
.legal__documento {
  box-sizing: border-box; width: min(860px, 100%); margin-inline: auto; padding: clamp(22px, 4vw, 44px);
  border-radius: 14px; background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde);
  box-shadow: 0 10px 30px rgba(2, 10, 30, .45); line-height: 1.6;
}
.legal__titulo { margin: 0 0 4px; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; font-weight: 800; color: #0d1b3d; }
.legal__fecha, .legal__nota { margin: 0 0 18px; color: #6b7386; font-size: .9rem; }
.legal__documento h2 { margin: 28px 0 8px; font-size: 1.2rem; line-height: 1.3; color: #0d1b3d; }
.legal__documento h3 { margin: 18px 0 6px; font-size: 1.02rem; color: #0d1b3d; }
.legal__documento p, .legal__documento li { color: #1b2438; }
.legal__documento ul, .legal__documento ol { padding-left: 1.3rem; }
.legal__documento li { margin: 4px 0; }
.legal__documento a { color: #1a56db; overflow-wrap: anywhere; }
.legal__documento code { font-size: .9em; background: #f1f4fb; padding: 1px 5px; border-radius: 4px; }
.legal__documento .legal__datos { margin: 0; padding: 12px 16px; border-radius: 10px; background: #f1f4fb; list-style: none; }
.legal__tabla-marco { overflow-x: auto; margin: 10px 0; }
.legal__tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal__tabla th, .legal__tabla td { padding: 8px 10px; border: 1px solid #e6e9f0; text-align: left; vertical-align: top; }
.legal__tabla thead th { background: #f1f4fb; color: #0d1b3d; }

.site-footer__legal { margin: 6px 0 0; font-size: .82rem; line-height: 1.6; }
.site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { opacity: .85; }

.premium-aceptacion {
  display: grid; gap: 8px; margin: 2px 6px 28px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(120, 170, 255, .35); background: rgba(4, 14, 38, .6); color: #e8eefc; font-size: .9rem;
}
.premium-aceptacion label { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; cursor: pointer; }
.premium-aceptacion input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #2f6bff; }
.premium-aceptacion a { color: #ffcf7a; }

.premium-gracias__legal { margin: 18px 0 0; color: #6b7386; font-size: .85rem; }
.premium-gracias__legal a { color: #1a56db; }

/* Consentimiento de analítica: franja informativa, no bloqueante. */
.site-footer__cookies {
  color: inherit;
  font-size: .9rem;
  text-underline-offset: 3px;
}

.cookies-analiticas[hidden] {
  display: none;
}

.cookies-analiticas {
  position: fixed;
  z-index: 120;
  right: 16px;
  bottom: 16px;
  left: 16px;
  color: #fff;
}

.cookies-analiticas__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  background: var(--color-marca);
  box-shadow: 0 12px 34px rgba(20, 32, 60, .28);
}

.cookies-analiticas__texto {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, .88);
}

.cookies-analiticas__texto strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
}

.cookies-analiticas__acciones {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.cookies-analiticas__boton {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cookies-analiticas__boton--primario {
  background: #fff;
  color: var(--color-marca);
}

.cookies-analiticas__boton--secundario {
  border-color: rgba(255, 255, 255, .52);
  background: transparent;
  color: #fff;
}

.cookies-analiticas__boton:hover,
.cookies-analiticas__boton:focus-visible {
  filter: brightness(.94);
}

@media (max-width: 680px) {
  .cookies-analiticas {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .cookies-analiticas__interior,
  .cookies-analiticas__acciones {
    align-items: stretch;
    flex-direction: column;
  }

  .cookies-analiticas__interior {
    gap: 14px;
  }

  .cookies-analiticas__acciones {
    gap: 8px;
  }
}