/* =====================================================================
   OpoReal · Simulacro del domingo
   Sistema Pizarra. Todo cuelga de .opr-sm y va blindado: el reset del
   núcleo (`.opr *`) pone a cero márgenes, rellenos, bordes y fondos con
   !important, así que cada regla de aquí lo lleva también, con una clase
   más de especificidad.

   EL COLOR SOLO CUANDO SIGNIFICA ALGO: verde acierto, rojo fallo, ámbar
   aviso (resultado provisional, pregunta anulada). La nota va en tinta.
   ===================================================================== */

.opr-sm .opr-sm-h1{
  font-size:clamp(1.9rem,5vw,3rem) !important; font-weight:800 !important;
  line-height:1.04 !important; letter-spacing:-.03em !important; text-wrap:balance !important;
  color:#fff !important; max-width:20ch !important;
}
.opr-sm .opr-sm-portada{padding-bottom:clamp(34px,5vw,60px) !important}

/* --- DE LADO A LADO ---------------------------------------------------
   Sergio, el 6 de octubre de 2026, con la página recién publicada: «las líneas
   blancas de los laterales no cuadran con la estética de OpoReal». El tema
   deja un margen a cada lado y por ahí asomaba su blanco junto a la portada
   oscura. Es el mismo arreglo que en batallas: el fondo lo estira una sombra
   enorme del mismo color y el `clip-path` la recorta por arriba y por abajo.
   No se usa `100vw`, que cuenta la barra de desplazamiento y saca scroll
   horizontal. La sala del examen cuelga de `body`, no de estas secciones, así
   que el `clip-path` no la encierra. */
.opr-sm .opr-sm-portada{
  position:relative !important; background:var(--p950) !important;
  box-shadow:0 0 0 100vmax var(--p950) !important; clip-path:inset(0 -100vmax) !important;
}
.opr-sm .opr-sm-sec{
  background:var(--fondo) !important;
  box-shadow:0 0 0 100vmax var(--fondo) !important; clip-path:inset(0 -100vmax) !important;
}
.opr-sm .opr-sm-sec.es-blanca{box-shadow:0 0 0 100vmax var(--superficie) !important}

/* --- LOS DOS AGENTES DE LA PORTADA -----------------------------------------
   Los puso Sergio el 6 de octubre de 2026: la ertzaina y el policía local, los
   dos pensando con la libreta en la mano. Y dijo dónde: «a la altura del
   título y subtítulo». Así que van ARRIBA, a la derecha del titular, con la
   cabeza a la altura de la primera línea, y no apoyados en el pie de la
   portada como la primera versión.

   Solo en pantallas anchas; en el móvil la portada es la cuenta atrás y el
   botón. La fila tiene de alto mínimo el del dibujo, para que en los estados
   de poco texto no se salga por debajo. */
.opr-sm .opr-sm-portada{ --opr-sm-agente:clamp(230px,32vh,300px); }
/* A MEDIA ALTURA DE LA PORTADA (Sergio, 6 de octubre, segunda vuelta): «baja un
   poco los agentes, que queden en la mitad, teniendo en cuenta la franja
   superior y la inferior». Así que se centran contra la PORTADA entera —de su
   borde de arriba, bajo la cabecera, a su borde de abajo— y no contra el texto:
   por eso cuelgan de la sección y ni la caja ni la fila son su referencia. */
.opr-sm .opr-sm-portada img.opr-sm-agente{
  display:none !important; position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
  right:clamp(40px,7vw,150px) !important;
  height:var(--opr-sm-agente) !important; width:auto !important; max-width:30% !important; object-fit:contain !important;
  pointer-events:none !important; -webkit-user-select:none !important; user-select:none !important;
}
@media (min-width:1120px){
  .opr-sm .opr-sm-portada img.opr-sm-agente{display:block !important}
  .opr-sm .opr-sm-portada{min-height:calc(var(--opr-sm-agente) + 56px) !important}
  .opr-sm .opr-sm-portada #opr-sm-cabeza{padding-right:calc(var(--opr-sm-agente) * .85 + clamp(40px,7vw,150px)) !important}
}

/* La línea de estado: lo que pasa ahora mismo. Más grande que la entradilla y
   en blanco, para que se lea antes que ella aunque vaya debajo. */
.opr-sm .opr-sm-estado{
  margin-top:22px !important; font-size:clamp(1.125rem,2vw,1.375rem) !important; font-weight:700 !important;
  line-height:1.3 !important; letter-spacing:-.015em !important; color:#fff !important; max-width:34ch !important; text-wrap:balance !important;
}
.opr-sm .opr-sm-estado + .opr-sm-reloj,.opr-sm .opr-sm-estado + .opr-sm-acciones{margin-top:16px !important}
.opr-sm .opr-sm-fino{margin-top:16px !important; font-size:.875rem !important; color:var(--p400) !important}
.opr-sm .opr-sm-acciones{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:26px !important}

/* --- sello de provisional / definitivo --- */
.opr-sm .opr-sm-sello{
  display:inline-block !important; padding:4px 12px !important; border-radius:999px !important;
  font-size:.8125rem !important; font-weight:700 !important; margin-bottom:12px !important; line-height:1.5 !important;
}
.opr-sm .opr-sm-sello.es-prov{background:var(--av100) !important; color:var(--av900) !important}
.opr-sm .opr-sm-sello.es-def{background:var(--p800) !important; color:var(--p100) !important}

/* --- la cuenta atrás --- */
.opr-sm .opr-sm-reloj{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:26px !important}
.opr-sm .opr-sm-reloj div{
  background:var(--p900) !important; border:1px solid var(--p800) !important; border-radius:var(--radio-s) !important;
  padding:12px 16px !important; min-width:78px !important; text-align:center !important;
}
.opr-sm .opr-sm-reloj b{
  display:block !important; font-size:1.8rem !important; font-weight:800 !important; letter-spacing:-.03em !important;
  font-variant-numeric:tabular-nums !important; line-height:1.1 !important; color:#fff !important;
}
.opr-sm .opr-sm-reloj span{font-size:.8125rem !important; color:var(--p400) !important}

/* --- las cuatro reglas --- */
.opr-sm .opr-sm-reglas{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; margin-top:26px !important}
.opr-sm .opr-sm-reglas div{
  background:var(--p900) !important; border:1px solid var(--p800) !important; border-radius:var(--radio-s) !important; padding:14px 16px !important;
}
.opr-sm .opr-sm-reglas b{display:block !important; font-size:1.25rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:#fff !important; line-height:1.3 !important}
.opr-sm .opr-sm-reglas span{font-size:.875rem !important; color:var(--p400) !important; line-height:1.4 !important}

/* --- secciones del cuerpo --- */
.opr-sm .opr-sm-sec{padding:clamp(30px,5vw,54px) clamp(18px,4vw,48px) !important}
.opr-sm .opr-sm-sec.es-blanca{background:var(--superficie) !important}
.opr-sm .opr-sm-h2{font-size:clamp(1.4rem,3vw,1.9rem) !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.1 !important; margin-bottom:6px !important}
.opr-sm .opr-sm-sub{color:var(--suave) !important; margin-bottom:22px !important; max-width:62ch !important}
.opr-sm .opr-sm-tarj{
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important; box-shadow:var(--sombra-s) !important;
}
.opr-sm .es-blanca .opr-sm-tarj{background:var(--fondo) !important}

/* --- tu nota y tu puesto --- */
.opr-sm .opr-sm-tuyo{display:grid !important; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) !important; gap:16px !important}
.opr-sm .opr-sm-tuyo .opr-sm-tarj{padding:24px !important}
.opr-sm .opr-sm-et{font-size:.875rem !important; font-weight:600 !important; color:var(--p600) !important; margin-bottom:8px !important}
.opr-sm .opr-sm-cifra{
  font-size:clamp(2.6rem,7vw,3.6rem) !important; font-weight:800 !important; letter-spacing:-.04em !important;
  line-height:1 !important; font-variant-numeric:tabular-nums !important;
}
.opr-sm .opr-sm-cifra small{font-size:1.1rem !important; font-weight:600 !important; color:var(--p600) !important; letter-spacing:-.01em !important}
.opr-sm .opr-sm-desg{display:flex !important; flex-wrap:wrap !important; gap:6px 18px !important; margin-top:16px !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-sm .opr-sm-desg b{color:var(--tinta) !important; font-weight:700 !important}
.opr-sm .opr-sm-desg b.es-ok{color:var(--ok600) !important}
.opr-sm .opr-sm-desg b.es-no{color:var(--no600) !important}

/* --- clasificación --- */
.opr-sm .opr-sm-rk{overflow:hidden !important}
.opr-sm .opr-sm-fila{
  display:grid !important; grid-template-columns:44px minmax(0,1fr) 62px 62px !important; gap:10px !important;
  align-items:center !important; padding:12px 18px !important; border-top:1px solid var(--borde) !important;
  font-variant-numeric:tabular-nums !important;
}
.opr-sm .opr-sm-fila.es-cab{border-top:0 !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--p600) !important; background:var(--p100) !important}
.opr-sm .opr-sm-fila .es-n{font-weight:800 !important}
.opr-sm .opr-sm-fila .es-u{display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important}
.opr-sm .opr-sm-fila .es-u span{overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-weight:600 !important}
.opr-sm .opr-sm-fila .es-d{text-align:right !important}
.opr-sm .opr-sm-fila.es-yo{background:var(--p950) !important; color:#fff !important}
.opr-sm .opr-sm-fila.es-hueco{padding:4px 18px !important; color:var(--tenue) !important; font-size:.875rem !important}
.opr-sm .opr-sm-av{
  width:30px !important; height:30px !important; border-radius:50% !important; background:var(--p300) !important; flex:none !important;
  overflow:hidden !important; display:block !important;
}
.opr-sm img.opr-sm-av{object-fit:cover !important; max-width:none !important}
.opr-sm i.opr-sm-av.es-inicial{display:grid !important; place-items:center !important; font-style:normal !important; font-size:.75rem !important; font-weight:700 !important; color:var(--p700) !important; line-height:1 !important}
/* El aro del avatar (v0.1.20): el color de la carta que lleva puesta, en el
   borde de la propia imagen. Mide lo mismo con aro que sin él. */
.opr-sm img.opr-sm-av.es-aro{box-sizing:border-box !important; border:2px solid transparent !important;
  background:linear-gradient(135deg,#F3C9A2 0%,#A8602F 30%,#542810 55%,#F3C9A2 75%,#A8602F 100%) border-box !important}
.opr-sm img.opr-sm-av.es-aro.es-rara{background:linear-gradient(135deg,#FFEDB0 0%,#C99A1E 30%,#5E4506 55%,#FFEDB0 75%,#C99A1E 100%) border-box !important}
.opr-sm img.opr-sm-av.es-aro.es-epica{background:linear-gradient(135deg,#A8EBC8 0%,#1F8D58 30%,#0B4529 55%,#A8EBC8 75%,#1F8D58 100%) border-box !important}
.opr-sm img.opr-sm-av.es-aro.es-legendaria{background:linear-gradient(135deg,#B4F7F7 0%,#14B2C0 30%,#07525B 55%,#B4F7F7 75%,#14B2C0 100%) border-box !important}
.opr-sm img.opr-sm-av.es-aro.es-especial{background:linear-gradient(135deg,#E4D6FF 0%,#7B58C4 30%,#331E66 55%,#E4D6FF 75%,#7B58C4 100%) border-box !important}
.opr-sm img.opr-sm-av.es-aro.es-oficial{background:conic-gradient(from 210deg,#F3C9A2,#A8602F,#FFEDB0,#C99A1E,#A8EBC8,#1F8D58,#B4F7F7,#14B2C0,#E4D6FF,#7B58C4,#F3C9A2) border-box !important}
.opr-sm .opr-sm-vacio{padding:26px 22px !important; text-align:center !important; color:var(--suave) !important}

/* --- corrección --- */
.opr-sm .opr-sm-filtro{display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-bottom:16px !important}
.opr-sm .opr-sm-filtro button{
  padding:8px 16px !important; border-radius:999px !important; font-size:.9375rem !important; font-weight:600 !important;
  color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; line-height:1.3 !important;
}
.opr-sm .opr-sm-filtro button[aria-pressed="true"]{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-sm .opr-sm-pq{padding:20px !important; margin-bottom:12px !important}
.opr-sm .opr-sm-pq-n{font-size:.875rem !important; font-weight:700 !important; color:var(--p600) !important; margin-bottom:8px !important}
.opr-sm .opr-sm-pq-q{font-size:1.0625rem !important; font-weight:700 !important; line-height:1.4 !important; letter-spacing:-.012em !important; margin-bottom:12px !important}
.opr-sm .opr-sm-op{
  display:block !important; width:100% !important; text-align:left !important;
  padding:10px 14px !important; border-radius:var(--radio-s) !important; border:1px solid var(--borde) !important;
  margin-bottom:6px !important; font-size:.9375rem !important; background:var(--superficie) !important; line-height:1.45 !important;
}
.opr-sm .opr-sm-op.es-buena{background:var(--ok100) !important; border-color:var(--ok600) !important}
.opr-sm .opr-sm-op.es-mala{background:var(--no100) !important; border-color:var(--no600) !important}
.opr-sm .opr-sm-op i{font-weight:700 !important; margin-right:6px !important}
.opr-sm .opr-sm-op em{font-size:.8125rem !important; font-weight:700 !important; margin-left:6px !important; white-space:nowrap !important}
.opr-sm .opr-sm-exp{font-size:.9375rem !important; color:var(--suave) !important; margin-top:10px !important}
.opr-sm .opr-sm-aviso{
  background:var(--av100) !important; color:var(--av900) !important; border-radius:var(--radio-s) !important;
  padding:10px 14px !important; font-size:.9375rem !important; margin-top:12px !important;
}
.opr-sm .opr-sm-mas{margin-top:8px !important}

/* --- la corrección: tarjeta con botón, y la hoja a pantalla completa ---
   La hoja usa el marco de la sala del examen (`.opr-sm-sala`): cabecera fija,
   cuerpo que se desplaza. Lleva además `.opr-sm` para que las tarjetas de las
   preguntas, los filtros y el formulario de impugnar se pinten igual que antes
   en la página. */
.opr-sm .opr-sm-rev-puerta{display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important; gap:18px 28px !important; padding:22px 24px !important}
.opr-sm .opr-sm-rev-cifras{display:flex !important; flex-wrap:wrap !important; gap:10px 30px !important}
.opr-sm .opr-sm-rev-cifras b{display:block !important; font-size:1.75rem !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.1 !important; font-variant-numeric:tabular-nums !important}
.opr-sm .opr-sm-rev-cifras span{font-size:.875rem !important; color:var(--suave) !important}
.opr-sm .opr-sm-rev-cifras .es-ok b{color:var(--ok600) !important}
.opr-sm .opr-sm-rev-cifras .es-no b{color:var(--no600) !important}
.opr-sm.opr-sm-rev .opr-sm-rev-barra{
  flex:0 0 auto !important; background:var(--superficie) !important; border-bottom:1px solid var(--borde) !important;
  padding:10px clamp(14px,3vw,28px) !important;
}
.opr-sm.opr-sm-rev .opr-sm-rev-barra .opr-sm-filtro{max-width:820px !important; margin:0 auto !important}
.opr-sm.opr-sm-rev .opr-sm-s-avance{margin-left:auto !important}
@media (max-width:640px){
  .opr-sm.opr-sm-rev .opr-sm-s-titulo{display:block !important}
  .opr-sm.opr-sm-rev .opr-sm-s-avance{margin-left:auto !important}
  .opr-sm.opr-sm-rev .opr-sm-filtro{gap:6px !important; margin-bottom:0 !important}
  .opr-sm.opr-sm-rev .opr-sm-filtro button{padding:6px 10px !important; font-size:.8125rem !important}
}

/* --- cómo funciona ---
   Lo que la página enseña cuando todavía no hay resultados. Los cuatro pasos
   llevan su número en tinta, sin iconos. */
.opr-sm .opr-sm-pasos{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important; list-style:none !important}
.opr-sm .opr-sm-paso{padding:20px !important}
.opr-sm .opr-sm-paso-n{
  display:grid !important; place-items:center !important; width:30px !important; height:30px !important; border-radius:999px !important;
  background:var(--p950) !important; color:#fff !important; font-size:.875rem !important; font-weight:800 !important; margin-bottom:14px !important;
}
.opr-sm .opr-sm-paso-h{font-size:.8125rem !important; font-weight:700 !important; color:var(--p600) !important; line-height:1.4 !important}
.opr-sm .opr-sm-paso-t{font-size:1.125rem !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.25 !important; margin:2px 0 8px !important}
.opr-sm .opr-sm-paso-d{font-size:.9375rem !important; color:var(--suave) !important; line-height:1.5 !important}
@media (max-width:1000px){ .opr-sm .opr-sm-pasos{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media (max-width:560px){
  .opr-sm .opr-sm-pasos{grid-template-columns:minmax(0,1fr) !important}
}

/* --- impugnar una pregunta ---
   El botón va pequeño y al pie: está para quien lo busca, no para competir con
   la corrección. El formulario es el mismo campo de texto del resto del sitio. */
.opr-sm .opr-sm-imp{margin-top:14px !important}
.opr-sm .opr-sm-imp [hidden]{display:none !important}
.opr-sm .opr-sm-imp .opr-sm-imp-b{min-height:36px !important; padding:6px 14px !important; font-size:.875rem !important}
.opr-sm .opr-sm-imp-l{display:block !important; font-size:.875rem !important; font-weight:700 !important; margin-bottom:6px !important}
.opr-sm .opr-sm-imp textarea{
  display:block !important; width:100% !important; min-height:84px !important; resize:vertical !important;
  padding:10px 12px !important; border:1px solid var(--borde2) !important; border-radius:var(--radio-s) !important;
  background:var(--superficie) !important; color:var(--tinta) !important; font-size:.9375rem !important; line-height:1.45 !important;
}
.opr-sm .opr-sm-imp textarea:focus{border-color:var(--p950) !important}
.opr-sm .opr-sm-imp-e{color:var(--no600) !important; font-size:.875rem !important; font-weight:600 !important; margin-top:6px !important}
.opr-sm .opr-sm-imp-m{display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:10px !important}
.opr-sm .opr-sm-imp-m .opr-btn{min-height:40px !important}
.opr-sm .opr-sm-imp-n{font-size:.8125rem !important; color:var(--tenue) !important; margin-top:8px !important}

/* --- comentarios, como en una publicación de Instagram ---
   Avatar, usuario en negrita y el texto seguido; debajo la fila fina de hace
   cuánto, «me gusta» y «Responder»; el corazón a la derecha, EN TINTA y no en
   rojo: en Pizarra el rojo es fallo. */
.opr-sm .opr-sm-chat{padding:8px 20px 16px !important}
.opr-sm .opr-sm-chat-carga{padding:18px 0 !important; text-align:center !important; color:var(--suave) !important; font-size:.9375rem !important}
.opr-sm .opr-sm-msj{
  display:grid !important; grid-template-columns:36px minmax(0,1fr) 34px !important; gap:12px !important;
  padding:13px 0 !important; align-items:start !important; border-radius:var(--radio-s) !important;
  transition:background-color .6s ease !important;
}
.opr-sm .opr-sm-msj.es-senalado{background:var(--av100) !important; box-shadow:0 0 0 8px var(--av100) !important}
.opr-sm .opr-sm-msj .opr-sm-av{width:36px !important; height:36px !important}
.opr-sm .opr-sm-av.es-equipo{
  display:grid !important; place-items:center !important; background:var(--p950) !important; color:#fff !important;
  font-style:normal !important; font-size:.75rem !important; font-weight:800 !important; letter-spacing:-.02em !important;
}
.opr-sm .opr-sm-msj-t{font-size:.9375rem !important; line-height:1.45 !important; white-space:pre-line !important; overflow-wrap:break-word !important; word-break:normal !important; hyphens:none !important}
.opr-sm .opr-sm-msj-u{font-weight:700 !important; margin-right:6px !important; white-space:nowrap !important}
.opr-sm .opr-sm-men{font-weight:600 !important; color:var(--p600) !important; white-space:nowrap !important}
.opr-sm .opr-sm-eq{
  display:inline-block !important; font-size:.6875rem !important; font-weight:700 !important; line-height:1.5 !important;
  background:var(--p950) !important; color:#fff !important; padding:1px 7px !important; border-radius:999px !important;
  margin-right:6px !important; vertical-align:1px !important;
}
.opr-sm .opr-sm-msj-a{
  display:flex !important; flex-wrap:wrap !important; gap:2px 14px !important; margin-top:5px !important;
  font-size:.8125rem !important; font-weight:600 !important; color:var(--p500) !important;
}
.opr-sm .opr-sm-msj-a span,.opr-sm .opr-sm-msj-a button{white-space:nowrap !important; flex:none !important}
.opr-sm .opr-sm-msj-a button{font-size:.8125rem !important; font-weight:600 !important; color:var(--p500) !important; cursor:pointer !important}
.opr-sm .opr-sm-msj-a button:hover{color:var(--tinta) !important}
.opr-sm .opr-sm-gus{
  display:grid !important; place-items:center !important; width:34px !important; height:34px !important;
  color:var(--p500) !important; cursor:pointer !important; border-radius:999px !important;
}
.opr-sm .opr-sm-gus svg{width:18px !important; height:18px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linejoin:round !important}
.opr-sm .opr-sm-gus:hover{color:var(--tinta) !important}
.opr-sm .opr-sm-gus[aria-pressed="true"]{color:var(--p950) !important}
.opr-sm .opr-sm-gus[aria-pressed="true"] svg{fill:currentColor !important}
.opr-sm .opr-sm-chat-ver{
  display:flex !important; align-items:center !important; gap:10px !important; margin:0 0 6px 48px !important;
  font-size:.8125rem !important; font-weight:600 !important; color:var(--p500) !important; cursor:pointer !important;
}
.opr-sm .opr-sm-chat-ver::before{content:"" !important; width:26px !important; height:1px !important; background:var(--p300) !important}
.opr-sm .opr-sm-chat-ver:hover{color:var(--tinta) !important}
.opr-sm .opr-sm-chat-hilo{margin-left:48px !important}
.opr-sm .opr-sm-chat-hilo .opr-sm-msj{grid-template-columns:28px minmax(0,1fr) 34px !important; padding:9px 0 !important}
.opr-sm .opr-sm-chat-hilo .opr-sm-msj .opr-sm-av{width:28px !important; height:28px !important; font-size:.625rem !important}
.opr-sm .opr-sm-chat-mas{
  display:block !important; width:100% !important; padding:12px 0 4px !important; text-align:center !important;
  font-size:.875rem !important; font-weight:700 !important; color:var(--suave) !important; cursor:pointer !important;
}
.opr-sm .opr-sm-rk-mas{padding:13px 0 !important; border-top:1px solid var(--borde) !important}
.opr-sm .opr-sm-rk-mas:hover{color:var(--tinta) !important}
.opr-sm .opr-sm-rk-mas[hidden]{display:none !important}
.opr-sm .opr-sm-chat-aviso{
  background:var(--av100) !important; color:var(--av900) !important; border-radius:var(--radio-s) !important;
  padding:10px 14px !important; margin-top:8px !important; font-size:.9375rem !important;
}
.opr-sm .opr-sm-chat-aviso b{font-weight:700 !important}
.opr-sm .opr-sm-chat-aviso button{font-weight:700 !important; text-decoration:underline !important; color:inherit !important; cursor:pointer !important; font-size:inherit !important}
.opr-sm .opr-sm-chat-pie{margin-top:8px !important; padding-top:14px !important; border-top:1px solid var(--borde) !important}
.opr-sm .opr-sm-chat-esc{display:grid !important; grid-template-columns:36px minmax(0,1fr) auto !important; gap:12px !important; align-items:center !important}
.opr-sm .opr-sm-chat-esc .opr-sm-av{width:36px !important; height:36px !important}
.opr-sm .opr-sm-chat-esc textarea{
  display:block !important; width:100% !important; resize:none !important; overflow-y:hidden !important; scrollbar-width:none !important;
  font-size:.9375rem !important; line-height:1.45 !important; color:var(--tinta) !important; padding:6px 0 !important;
}
.opr-sm .opr-sm-chat-esc textarea::-webkit-scrollbar{display:none !important}
.opr-sm .opr-sm-chat-esc textarea.es-larga{overflow-y:auto !important}
.opr-sm .opr-sm-chat-esc textarea::placeholder{color:var(--p500) !important}
.opr-sm .opr-sm-chat-pub{font-size:.9375rem !important; font-weight:700 !important; color:var(--p950) !important; cursor:pointer !important; padding:6px 0 6px 6px !important}
.opr-sm .opr-sm-chat-pub:disabled{color:var(--p400) !important; cursor:default !important}
.opr-sm .opr-sm-chat-resp{font-size:.8125rem !important; color:var(--p500) !important; font-weight:600 !important; margin-bottom:8px !important}
.opr-sm .opr-sm-chat-resp button{font-size:inherit !important; font-weight:700 !important; color:var(--tinta) !important; cursor:pointer !important}
.opr-sm .opr-sm-chat-nota{font-size:.875rem !important; color:var(--av900) !important; margin-top:8px !important}
.opr-sm .opr-sm-chat-puerta{font-size:.9375rem !important; color:var(--suave) !important}
.opr-sm .opr-sm-chat-puerta a{font-weight:700 !important; color:var(--tinta) !important; text-decoration:underline !important}
@media (max-width:520px){
  .opr-sm .opr-sm-chat{padding:6px 14px 14px !important}
  .opr-sm .opr-sm-chat-hilo,.opr-sm .opr-sm-chat-ver{margin-left:22px !important}
  .opr-sm .opr-sm-msj{gap:10px !important; grid-template-columns:36px minmax(0,1fr) 30px !important}
  .opr-sm .opr-sm-chat-hilo .opr-sm-msj{grid-template-columns:28px minmax(0,1fr) 30px !important}
  .opr-sm .opr-sm-gus{width:30px !important}
}

/* --- resolución del tribunal --- */
.opr-sm .opr-sm-res{padding:18px 20px !important; margin-bottom:10px !important}
.opr-sm .opr-sm-res-e{
  display:inline-block !important; padding:3px 10px !important; border-radius:999px !important; margin-bottom:8px !important;
  font-size:.8125rem !important; font-weight:700 !important; line-height:1.5 !important;
  background:var(--p200) !important; color:var(--p800) !important;
}
.opr-sm .opr-sm-res-e.es-est{background:var(--ok100) !important; color:var(--ok600) !important}
.opr-sm .opr-sm-res p{font-size:.9375rem !important; line-height:1.5 !important}
.opr-sm .opr-sm-res p b{font-weight:700 !important}
.opr-sm .opr-sm-res .opr-sm-res-f{font-size:.8125rem !important; color:var(--tenue) !important; margin-top:6px !important}

/* =====================================================================
   LA SALA DEL EXAMEN
   ---------------------------------------------------------------------
   ES LA MISMA DEL SIMULACRO DE `/temario/`, a propósito (Sergio, 6 de octubre
   de 2026): quien ya ha hecho uno allí no tiene que aprender otra pantalla.
   Las reglas están copiadas de `ix_practicar.css` de `oporeal-temario`
   v1.2.21, cambiando solo el prefijo. SI AQUELLA CAMBIA, ESTA SE COPIA OTRA
   VEZ: no se afina una sin la otra.

   El nodo cuelga de `document.body`, fuera de la sección, y por eso lleva su
   propia clase `.opr`.
   ===================================================================== */
.opr.opr-sm-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.opr-sm-sala[hidden]{display:none !important}

/* --- cabecera: reloj, avance y salir --- */
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-titulo{font-size:14px !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important}
.opr-sm-sala .opr-sm-s-avance{font-size:13px !important; color:var(--tenue) !important; margin-left:auto !important}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-reloj.es-poco{color:var(--av600) !important; border-color:var(--av500) !important; background:var(--av100) !important}
.opr-sm-sala .opr-sm-s-reloj.es-nada{color:var(--no600) !important; border-color:var(--no500) !important; background:var(--no100) !important}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-salir:hover{background:var(--p100) !important; color:var(--tinta) !important}

/* --- cuerpo --- */
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-centro{max-width:820px !important; margin:0 auto !important}

.opr-sm-sala .opr-sm-s-carril{display:flex !important; align-items:center !important; gap:9px !important; margin-bottom:12px !important}
.opr-sm-sala .opr-sm-s-carril i{display:block !important; width:3px !important; height:15px !important; border-radius:2px !important; background:var(--p300) !important}
.opr-sm-sala .opr-sm-s-carril span{font-size:12.5px !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-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-sm-sala .opr-sm-s-opts{list-style:none !important; margin:18px 0 0 !important; padding:0 !important; display:grid !important; gap:9px !important}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-opts button:hover{border-color:var(--borde2) !important}
.opr-sm-sala .opr-sm-s-opts button[aria-pressed="true"]{
  border-color:var(--p950) !important; box-shadow:inset 0 0 0 1px var(--p950) !important;
}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-opts button[aria-pressed="true"] .opr-sm-s-letra{background:var(--p950) !important; color:#fff !important}

/* --- pie: navegación e índice de puntos --- */
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-s-mandos{display:flex !important; align-items:center !important; gap:10px !important; max-width:820px !important; margin:0 auto !important}
.opr-sm-sala .opr-sm-s-mandos .opr-btn{min-height:42px !important}
.opr-sm-sala .opr-sm-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-sm-sala .opr-sm-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-sm-sala .opr-sm-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, las casillas en una rejilla de 10 columnas (v0.1.16). Antes
   iban en una sola fila que se deslizaba, para no comerse pantalla, y nadie
   adivinaba que había más de diez. */
@media (max-width:720px){
  /* Sergio, en el primer simulacro (11 de octubre de 2026): «no se ven todas
     las preguntas abajo». La fila deslizable escondía de la 11 a la 50. Ahora
     las 50 casillas a la vista, en una rejilla de 10 por fila. */
  .opr-sm-sala .opr-sm-s-puntos{
    display:grid !important; grid-template-columns:repeat(10,minmax(0,1fr)) !important; gap:5px !important;
    justify-content:stretch !important;
  }
  .opr-sm-sala .opr-sm-s-puntos button{width:auto !important; height:28px !important; border-radius:7px !important; font-size:11px !important}
  .opr-sm-sala .opr-sm-s-titulo{display:none !important}
  .opr-sm-sala .opr-sm-s-avance{margin-left:0 !important}
}
.opr-sm-sala .opr-sm-s-puntos button.es-hecha{background:var(--p200) !important; color:var(--p800) !important; border-color:var(--borde2) !important}
.opr-sm-sala .opr-sm-s-puntos button.es-aqui{border-color:var(--p950) !important; box-shadow:inset 0 0 0 1px var(--p950) !important; color:var(--tinta) !important}


.opr-sm .opr-sm-error{
  background:var(--no100) !important; color:var(--no900) !important; border-radius:var(--radio-s) !important;
  padding:10px 14px !important; font-size:.9375rem !important; margin-top:14px !important;
}

@media (max-width:760px){
  .opr-sm .opr-sm-tuyo{grid-template-columns:1fr !important}
  .opr-sm .opr-sm-reglas{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .opr-sm .opr-sm-fila{grid-template-columns:26px minmax(0,1fr) 44px 46px !important; gap:8px !important; padding:11px 12px !important}
  .opr-sm .opr-sm-fila .es-u{gap:8px !important}
  .opr-sm .opr-sm-av{width:26px !important; height:26px !important}
}


/* v0.1.19 · el @usuario lleva al perfil (oporeal-comunidad). La fila entera. */
.opr-sm .opr-sm-fila.es-enlace{position:relative !important}
.opr-sm .opr-sm-fila.es-enlace:hover{background:var(--p50) !important}
.opr-sm .opr-sm-fila .es-u a.opr-sm-aperfil{overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-weight:600 !important; color:var(--tinta) !important}
.opr-sm .opr-sm-fila .opr-sm-aperfil::after{content:"" !important; position:absolute !important; inset:0 !important}
.opr-sm .opr-sm-fila .opr-sm-aperfil:focus-visible{outline:none !important}
.opr-sm .opr-sm-fila .opr-sm-aperfil:focus-visible::after{box-shadow:inset 0 0 0 2px var(--p950) !important}
.opr-sm a.opr-sm-msj-u{color:var(--tinta) !important; text-decoration:underline !important; text-decoration-color:var(--borde2) !important; text-underline-offset:3px !important}