/* =====================================================================
   Temario · «Ponte a prueba»: el simulacro real y el test por bloques
   ---------------------------------------------------------------------
   Dos cajones en la página y una sala a pantalla completa encima.

   COLOR. Monocromo, como todo. Verde, rojo y ámbar solo aparecen al
   corregir —acierto, fallo y aviso— y en el reloj cuando queda poco, que
   es un aviso de verdad. El color de cada bloque se usa para identificar,
   nunca para decorar: va en un carril de 3 px y en nada más.
   ===================================================================== */

/* --- la sección --- */
.opr-ix-p-caja{max-width:1180px !important; margin:0 auto !important}
.opr-ix-p-cabeza{max-width:760px !important}

.opr-ix-p-cajones{
  display:grid !important; gap:clamp(16px,2vw,24px) !important; margin-top:clamp(26px,3vw,40px) !important;
  grid-template-columns:1fr !important;
}
@media (min-width:900px){
  .opr-ix-p-cajones{grid-template-columns:1fr 1fr !important}
}

.opr-ix-p-cajon{
  background:var(--superficie) !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
  padding:clamp(22px,2.6vw,32px) !important;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
}
.opr-ix-p-marca{
  font-size:12px !important; font-weight:800 !important; letter-spacing:.02em !important;
  text-transform:none !important; color:var(--tenue) !important;
}
.opr-ix-p-titulo{
  margin:6px 0 0 !important; font-size:clamp(20px,2.2vw,26px) !important; font-weight:800 !important;
  letter-spacing:-.02em !important; line-height:1.15 !important; color:var(--tinta) !important;
}
.opr-ix-p-nota{
  margin:12px 0 0 !important; font-size:14.5px !important; line-height:1.6 !important; color:var(--suave) !important;
  max-width:52ch !important;
}
.opr-ix-p-candado{
  margin:14px 0 12px !important; font-size:14.5px !important; color:var(--suave) !important;
}

/* las cuatro reglas del simulacro, en cifras */
.opr-ix-p-reglas{
  list-style:none !important; margin:18px 0 0 !important; padding:0 !important;
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; width:100% !important;
}
@media (min-width:520px){
  .opr-ix-p-reglas{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
.opr-ix-p-reglas li{
  background:var(--p50) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio-s) !important; padding:10px 12px !important;
}
.opr-ix-p-reglas b{display:block !important; font-size:20px !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-ix-p-reglas span{display:block !important; margin-top:2px !important; font-size:12px !important; line-height:1.35 !important; color:var(--tenue) !important}

/* el formulario del test por bloques */
.opr-ix-p-campo{display:grid !important; gap:5px !important}
.opr-ix-p-campo>span{font-size:13px !important; font-weight:700 !important; color:var(--suave) !important}
.opr-ix-p-campo select{
  width:100% !important; font:inherit !important; font-size:15px !important; color:var(--tinta) !important;
  background:var(--superficie) !important; border:1px solid var(--borde2) !important;
  border-radius:var(--radio-s) !important; padding:10px 12px !important; min-height:44px !important;
}
.opr-ix-p-check{display:flex !important; align-items:center !important; gap:10px !important; font-size:14.5px !important; color:var(--suave) !important; min-height:38px !important; cursor:pointer !important}
/* LA CASILLA SE DIBUJA A MANO. El blindaje del núcleo pone `background:none` y
   `border:0` a todo descendiente de `.opr`, así que una casilla nativa se queda
   invisible: se ve el hueco y nada dentro. Se apaga el dibujo del navegador y
   se pinta el cuadro aquí, con la marca en un `background-image` que también
   lleva `!important` para sobrevivir al reset. */
.opr-ix-p-check input{
  -webkit-appearance:none !important; appearance:none !important;
  flex:0 0 auto !important; width:20px !important; height:20px !important;
  border:1.5px solid var(--borde2) !important; border-radius:6px !important;
  background:var(--superficie) !important; cursor:pointer !important;
}
.opr-ix-p-check input:checked{
  background:var(--p950) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px 13px no-repeat !important;
  border-color:var(--p950) !important;
}
/* El botón, abajo del todo. Los dos cajones miden lo mismo porque la rejilla
   los estira, y sin esto el de la izquierda dejaba un palmo de blanco debajo
   del botón: pegado al suelo, los dos botones quedan a la misma altura y el
   hueco pasa a ser aire, no un descuido. */
/* OJO: aquí NO se toca el `padding`. `.opr-btn` trae `padding:14px 24px` y con
   un `padding-top:0` el texto se queda pegado al borde de arriba y el botón sale
   descuadrado. Lo vio Sergio en la primera captura del sitio. */
.opr-ix-p-ir{margin-top:auto !important}
.opr-ix-p-cajon>.opr-btn,.opr-ix-p-form{margin-top:18px !important}
/* Y el de empezar, al suelo. Va con (0,3,0) porque la regla de arriba pesa
   (0,2,0) y le ganaba a `.opr-ix-p-ir`: el botón se quedaba a media tarjeta con
   un palmo de blanco debajo. Así los dos cajones acaban a la misma altura. */
.opr-ix-p-cajon>.opr-btn.opr-ix-p-ir{margin-top:auto !important}
.opr-ix-p-form{display:grid !important; gap:12px !important; width:100% !important; flex:1 1 auto !important}

/* EN EL MÓVIL, EL BOTÓN DEL SIMULACRO VA CENTRADO. Por debajo de 900 px los dos
   cajones se apilan y ocupan el ancho entero: la píldora pegada a la izquierda
   se quedaba perdida en una tarjeta de 350 px de ancho, y así lo vio Sergio en
   el móvil. En dos columnas no hace falta —la tarjeta es estrecha y el botón ya
   queda donde tiene que quedar—, por eso el cambio va dentro de la consulta.
   El otro botón, el de «Empezar el test», no lo coge: vive dentro de
   `.opr-ix-p-form` y no es hijo directo del cajón.
   Pesa (0,3,0) porque tiene que ganarle a `.opr-ix-p-cajon>.opr-btn.opr-ix-p-ir`
   de aquí arriba, que también lo es. */
@media (max-width:899px){
  /* Y AQUÍ EL `margin-top:auto` SOBRA, ADEMÁS DE ESTORBAR. Sirve para que los
     dos cajones, uno al lado del otro, acaben los botones a la misma altura:
     `auto` se come el hueco que sobra. Apilados no sobra hueco, así que `auto`
     vale CERO y el botón se quedaba pegado al párrafo de encima —así lo vio
     Sergio en el móvil—. Se le pone una separación de verdad. */
  .opr-ix-p-cajon>.opr-btn.opr-ix-p-ir{
    align-self:center !important;
    margin-top:clamp(22px,5vw,28px) !important;
  }
}

/* =====================================================================
   LA SALA
   ---------------------------------------------------------------------
   Ocupa la ventana entera, como la del lector de temas y la de los
   psicotécnicos, y por el mismo motivo: en un móvil, responder no puede
   obligar a deslizar dos veces.

   Y EL NODO SE MUEVE A `document.body` AL ABRIRSE. Nace dentro de la
   sección, que es donde lo escribe el PHP, pero `.opr-seccion` lleva
   `overflow-x:clip` y una sala `fixed` dentro de una caja recortada es
   justo el fallo que ya costó una versión en batallas. Fuera del árbol de
   la sección no puede pasar, y por eso la sala lleva su propia clase
   `.opr` —si no, se quedaría sin las variables de color.
   ===================================================================== */
.opr-ix-sala{
  position:fixed !important; inset:0 !important; z-index:99999 !important;
  background:var(--p50) !important;
  display:flex !important; flex-direction:column !important;
  overscroll-behavior:contain !important;
}
.opr-ix-sala[hidden]{display:none !important}

/* --- cabecera: reloj, avance y salir --- */
.opr-ix-s-cab{
  flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:12px !important;
  padding:10px clamp(14px,3vw,28px) !important;
  background:var(--superficie) !important; border-bottom:1px solid var(--borde) !important;
}
.opr-ix-s-titulo{font-size:14px !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important}
.opr-ix-s-avance{font-size:13px !important; color:var(--tenue) !important; margin-left:auto !important}
.opr-ix-s-reloj{
  font-size:17px !important; font-weight:800 !important; letter-spacing:.01em !important;
  font-variant-numeric:tabular-nums !important; color:var(--tinta) !important;
  background:var(--p50) !important; border:1px solid var(--borde) !important;
  border-radius:999px !important; padding:5px 12px !important; min-width:82px !important; text-align:center !important;
}
.opr-ix-s-reloj.es-poco{color:var(--av600) !important; border-color:var(--av500) !important; background:var(--av100) !important}
.opr-ix-s-reloj.es-nada{color:var(--no600) !important; border-color:var(--no500) !important; background:var(--no100) !important}
.opr-ix-s-salir{
  border:0 !important; background:none !important; cursor:pointer !important; padding:8px !important;
  min-width:38px !important; min-height:38px !important; color:var(--suave) !important; border-radius:50% !important;
}
.opr-ix-s-salir:hover{background:var(--p100) !important; color:var(--tinta) !important}

/* --- cuerpo --- */
.opr-ix-s-cuerpo{
  flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
  padding:clamp(18px,3vw,34px) clamp(14px,3vw,28px) !important;
}
.opr-ix-s-centro{max-width:820px !important; margin:0 auto !important}

.opr-ix-s-carril{display:flex !important; align-items:center !important; gap:9px !important; margin-bottom:12px !important}
.opr-ix-s-carril i{display:block !important; width:3px !important; height:15px !important; border-radius:2px !important; background:var(--p300) !important}
.opr-ix-s-carril span{font-size:12.5px !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-ix-s-reserva{
  font-size:11.5px !important; font-weight:800 !important; color:var(--av600) !important;
  background:var(--av100) !important; border-radius:999px !important; padding:2px 9px !important;
}

.opr-ix-s-q{
  margin:0 !important; font-size:clamp(17px,2vw,21px) !important; font-weight:700 !important; line-height:1.4 !important;
  letter-spacing:-.01em !important; color:var(--tinta) !important; overflow-wrap:break-word !important;
}
.opr-ix-s-opts{list-style:none !important; margin:18px 0 0 !important; padding:0 !important; display:grid !important; gap:9px !important}
.opr-ix-s-opts button{
  width:100% !important; text-align:left !important; display:flex !important; gap:12px !important; align-items:flex-start !important;
  font:inherit !important; font-size:15.5px !important; line-height:1.5 !important; color:var(--tinta) !important;
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio-s) !important; padding:13px 15px !important; cursor:pointer !important; min-height:44px !important;
  overflow-wrap:break-word !important;
}
.opr-ix-s-opts button:hover{border-color:var(--borde2) !important}
.opr-ix-s-opts button[aria-pressed="true"]{
  border-color:var(--p950) !important; box-shadow:inset 0 0 0 1px var(--p950) !important;
}
.opr-ix-s-letra{
  flex:0 0 auto !important; width:24px !important; height:24px !important; border-radius:50% !important;
  background:var(--p100) !important; color:var(--suave) !important;
  font-size:12.5px !important; font-weight:800 !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.opr-ix-s-opts button[aria-pressed="true"] .opr-ix-s-letra{background:var(--p950) !important; color:#fff !important}

/* --- pie: navegación e índice de puntos --- */
.opr-ix-s-pie{
  flex:0 0 auto !important; background:var(--superficie) !important;
  border-top:1px solid var(--borde) !important; padding:10px clamp(14px,3vw,28px) !important;
}
.opr-ix-s-mandos{display:flex !important; align-items:center !important; gap:10px !important; max-width:820px !important; margin:0 auto !important}
.opr-ix-s-mandos .opr-btn{min-height:42px !important}
.opr-ix-s-hueco{flex:1 1 auto !important}
/* EL ÍNDICE DE PREGUNTAS VA POR DEBAJO DE LOS 38 px DE OBJETIVO TÁCTIL, y es
   una excepción a propósito. Cincuenta casillas de 38 no caben en un móvil ni
   en cinco filas, y esto no es un mando: es un índice para saltar, el mismo
   papel que los puntitos de la sala de psicotécnicos, que miden 10 px. Lo que
   sí cumple el mínimo es todo lo que decide algo —las opciones, Anterior,
   Siguiente y Entregar—, que van a 42 px o más. */
.opr-ix-s-puntos{
  display:flex !important; flex-wrap:wrap !important; gap:6px !important; max-width:820px !important; margin:10px auto 0 !important;
  justify-content:center !important;
}
.opr-ix-s-puntos button{
  flex:0 0 auto !important;
  width:30px !important; height:30px !important; border-radius:8px !important; border:1px solid var(--borde) !important;
  background:var(--superficie) !important; color:var(--tenue) !important;
  font:inherit !important; font-size:11.5px !important; font-weight:700 !important; cursor:pointer !important; padding:0 !important;
}
/* En el móvil, en una sola fila que se desliza: cincuenta casillas en cinco
   filas se comían un tercio de la pantalla, que es justo donde tiene que estar
   la pregunta. El guion trae a la vista la que toca. */
@media (max-width:720px){
  .opr-ix-s-puntos{
    flex-wrap:nowrap !important; overflow-x:auto !important; justify-content:flex-start !important;
    padding-bottom:4px !important; scrollbar-width:thin !important;
  }
  .opr-ix-s-titulo{display:none !important}
  .opr-ix-s-avance{margin-left:0 !important}
}
.opr-ix-s-puntos button.es-hecha{background:var(--p200) !important; color:var(--p800) !important; border-color:var(--borde2) !important}
.opr-ix-s-puntos button.es-aqui{border-color:var(--p950) !important; box-shadow:inset 0 0 0 1px var(--p950) !important; color:var(--tinta) !important}

/* =====================================================================
   EL RESULTADO
   ===================================================================== */
.opr-ix-r-cifras{
  display:grid !important; gap:10px !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  margin:0 0 22px !important;
}
@media (min-width:640px){ .opr-ix-r-cifras{grid-template-columns:repeat(4,minmax(0,1fr)) !important} }
.opr-ix-r-cifras div{
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio-s) !important; padding:12px 14px !important;
}
.opr-ix-r-cifras b{display:block !important; font-size:24px !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-ix-r-cifras span{display:block !important; margin-top:2px !important; font-size:12px !important; color:var(--tenue) !important}
.opr-ix-r-cifras div.es-ok b{color:var(--ok600) !important}
.opr-ix-r-cifras div.es-no b{color:var(--no600) !important}

.opr-ix-r-nota{
  background:var(--p950) !important; color:#fff !important;
  border-radius:var(--radio) !important; padding:clamp(20px,2.4vw,28px) !important; margin:0 0 22px !important;
}
.opr-ix-r-nota b{display:block !important; font-size:clamp(34px,5vw,48px) !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1 !important}
.opr-ix-r-nota span{display:block !important; margin-top:6px !important; font-size:14px !important; color:rgba(255,255,255,.72) !important}
.opr-ix-r-nota em{display:block !important; margin-top:12px !important; font-style:normal !important; font-size:13px !important; color:rgba(255,255,255,.6) !important}

.opr-ix-r-bloques{list-style:none !important; margin:0 0 22px !important; padding:0 !important; display:grid !important; gap:7px !important}
.opr-ix-r-bloques li{
  display:grid !important; grid-template-columns:26px minmax(0,1fr) 68px !important; gap:11px !important; align-items:center !important;
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio-s) !important; padding:9px 12px !important;
}
.opr-ix-r-bloques i{display:block !important; width:3px !important; height:22px !important; border-radius:2px !important; justify-self:start !important}
.opr-ix-r-bloques b{font-size:13.5px !important; font-weight:700 !important; color:var(--tinta) !important; overflow-wrap:break-word !important}
.opr-ix-r-bloques u{
  text-decoration:none !important; font-size:13px !important; font-weight:800 !important; text-align:right !important;
  font-variant-numeric:tabular-nums !important; color:var(--suave) !important;
}

.opr-ix-r-repaso{display:grid !important; gap:11px !important; margin-top:8px !important}
.opr-ix-r-ficha{
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio-s) !important; padding:14px 16px !important;
}
.opr-ix-r-ficha.es-mal{border-color:var(--no500) !important}
.opr-ix-r-ficha.es-blanco{border-color:var(--av500) !important}
.opr-ix-r-cab{display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:8px !important; flex-wrap:wrap !important}
.opr-ix-r-cab i{display:block !important; width:3px !important; height:14px !important; border-radius:2px !important}
.opr-ix-r-cab span{font-size:12px !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-ix-r-marca{margin-left:auto !important; font-size:11.5px !important; font-weight:800 !important; border-radius:999px !important; padding:2px 9px !important}
.opr-ix-r-marca.es-ok{background:var(--ok100) !important; color:var(--ok600) !important}
.opr-ix-r-marca.es-mal{background:var(--no100) !important; color:var(--no600) !important}
.opr-ix-r-marca.es-blanco{background:var(--av100) !important; color:var(--av600) !important}
.opr-ix-r-q{margin:0 !important; font-size:15.5px !important; font-weight:700 !important; line-height:1.45 !important; color:var(--tinta) !important; overflow-wrap:break-word !important}
.opr-ix-r-opts{list-style:none !important; margin:10px 0 0 !important; padding:0 !important; display:grid !important; gap:5px !important}
.opr-ix-r-opts li{
  display:flex !important; gap:9px !important; font-size:14.5px !important; line-height:1.5 !important; color:var(--suave) !important;
  padding:7px 10px !important; border-radius:9px !important; border:1px solid transparent !important; overflow-wrap:break-word !important;
}
.opr-ix-r-opts li.es-buena{background:var(--ok100) !important; color:var(--ok900) !important; border-color:var(--ok500) !important}
.opr-ix-r-opts li.es-tuya{background:var(--no100) !important; color:var(--no900) !important; border-color:var(--no500) !important}
.opr-ix-r-opts b{flex:0 0 auto !important; font-weight:800 !important}
.opr-ix-r-e{
  margin:11px 0 0 !important; font-size:14px !important; line-height:1.6 !important; color:var(--suave) !important;
  background:var(--p50) !important; border-radius:9px !important; padding:10px 12px !important;
}
.opr-ix-r-filtro{display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin:22px 0 4px !important}
.opr-ix-r-filtro button{
  font:inherit !important; font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important;
  border:1px solid var(--borde2) !important; background:var(--superficie) !important;
  color:var(--suave) !important; border-radius:999px !important; padding:8px 14px !important; min-height:38px !important;
}
.opr-ix-r-filtro button[aria-pressed="true"]{background:var(--p950) !important; color:#fff !important; border-color:var(--p950) !important}

.opr-ix-s-aviso{
  margin:0 0 16px !important; font-size:14.5px !important; line-height:1.6 !important; color:var(--av900) !important;
  background:var(--av100) !important; border-radius:var(--radio-s) !important; padding:12px 14px !important;
}
.opr-ix-s-acciones{display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:24px !important}

/* =====================================================================
   UN EXAMEN A MEDIAS (v1.2.21)
   ---------------------------------------------------------------------
   El aviso que sale en el cajón cuando hay un examen guardado sin
   entregar. Sin color: no es un acierto, ni un fallo, ni un peligro. Es
   una caja gris de la paleta con una línea que manda y un botón.
   ===================================================================== */
.opr-ix-p-medias{
  width:100% !important; margin:16px 0 0 !important;
  background:var(--p50) !important; border:1px solid var(--borde2) !important;
  border-radius:var(--radio-s) !important; padding:14px 16px !important;
  display:flex !important; flex-direction:column !important; gap:4px !important;
}
.opr-ix-p-medias>b{font-size:15px !important; font-weight:800 !important; color:var(--tinta) !important; letter-spacing:-.01em !important}
.opr-ix-p-medias>span{font-size:14px !important; line-height:1.5 !important; color:var(--suave) !important}
.opr-ix-p-medias-acc{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important;
  gap:8px 16px !important; margin-top:10px !important;
}
.opr-ix-p-medias-tirar{
  font:inherit !important; font-size:14px !important; font-weight:700 !important;
  color:var(--suave) !important; background:none !important; border:0 !important;
  padding:8px 2px !important; min-height:44px !important; cursor:pointer !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
}
.opr-ix-p-medias-tirar:hover{color:var(--tinta) !important}