/* ---------------------------------------------------------------------
   Batallas · el panel y la sala
   ---------------------------------------------------------------------
   Todas las reglas salen de aquí con `.opr-bt` delante, que se lo pone
   `anidar()`. No se escribe la raíz a mano.

   COLOR. El sistema es monocromo. Aquí el color solo aparece en tres
   sitios y en los tres significa algo: verde una batalla ganada, rojo
   una perdida, ámbar la que está a punto de caducar. El empate y la
   caducada van en gris, que es lo que son.

   NADA DE LLAVES EN LOS COMENTARIOS: el empaquetador parte los bloques
   por llaves y se comería el comentario y las reglas de detrás.
   --------------------------------------------------------------------- */
.opr-bt.opr-bt-panel{
  display:block !important;
  margin:0 !important;
}


/* ---------------------------------------------------------------------
   LA PÁGINA
   ---------------------------------------------------------------------
   Desde el 5 de septiembre de 2026 las batallas tienen página propia y ya no
   viven dentro de «Mi progreso». Estas reglas son las que ponía aquella
   página: el ancho, el margen y el relleno lateral de cada hijo.

   OJO CON EL `clip-path`, y es la trampa que ya estaba documentada en el
   calendario: un `clip-path` CREA BLOQUE CONTENEDOR PARA LOS DESCENDIENTES
   `fixed`. La sala del duelo es `fixed` y vive dentro de la sección, así que
   si a la sección se le pusiera el recorte, la batalla se abriría dentro de
   ella en vez de ocupar la ventana. Por eso el `:not(.opr-bt-panel)`: es el
   mismo `:not()` que tiene `.opr-ca-pagina`, y por el mismo motivo. La banda
   de dentro ya se estira sola con su sombra.

   Y el aire de arriba y el de abajo va en RELLENO y no en margen: un margen
   queda fuera de la caja y ahí el fondo de la sección no llega, así que entre
   dos secciones asomaría el blanco del tema de lado a lado.
   --------------------------------------------------------------------- */
.opr-bt.opr-bt-pagina{ padding:0 !important; }
.opr-bt.opr-bt-pagina>*{
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(18px,4vw,40px) !important;
  padding-right:clamp(18px,4vw,40px) !important;
}

/* LA PORTADA TAMBIÉN QUEDA FUERA, desde que va en oscuro: esta regla pesa
   (0,3,0) y la suya (0,2,0), así que le ganaba y le pintaba el papel claro por
   los lados. En la pantalla se veía una franja negra del ancho del contenedor
   con dos brazos claros a los lados. Cada una pinta la suya y no se pelean. */
.opr-bt.opr-bt-pagina>*:not(.opr-bt-panel):not(.opr-bt-portada){
  box-shadow:0 0 0 100vmax var(--fondo) !important;
  clip-path:inset(0 -100vmax) !important;
}
.opr-bt.opr-bt-pagina>*:first-child{ padding-top:clamp(28px,4vw,52px) !important; }
.opr-bt.opr-bt-pagina>*:last-child{ padding-bottom:clamp(60px,7vw,90px) !important; }


/* MENOS LA SECCIÓN: su aire de abajo va DENTRO de la banda. El fondo de la
   banda lo pinta una sombra que sigue a la banda, no a la sección, así que un
   relleno en la sección deja al pie de la página una franja de papel claro
   debajo del gris. Se vio en la primera vista previa de la página nueva. */
.opr-bt.opr-bt-pagina>.opr-bt-panel:last-child{ padding-bottom:0 !important; }
.opr-bt.opr-bt-pagina>.opr-bt-panel:last-child .opr-bt-banda{ padding-bottom:clamp(60px,7vw,90px) !important; }


/* --- LA PORTADA, EN OSCURO Y CON LOS DOS AGENTES ---
   La pidió así Sergio el 5 de septiembre de 2026.

   SE ESTIRA COMO LAS BANDAS, con la sombra de 100vmax y su recorte: si no, el
   negro se quedaría en el ancho del contenedor y encima de él asomaría el papel
   del tema a los dos lados. Es lo mismo que hace la banda de abajo.

   Y el texto se reescribe entero: el núcleo pone `color:inherit` a todo
   descendiente de `.opr`, pero estas clases traen su propio color —p950, p700—
   y sobre negro no se leen. */
.opr-bt .opr-bt-portada{
  position:relative !important;
  margin-bottom:0 !important;
  padding-top:clamp(28px,4vw,52px) !important;
  padding-bottom:clamp(28px,3.4vw,44px) !important;
  background:var(--p950) !important;
  box-shadow:0 0 0 100vmax var(--p950) !important;
  clip-path:inset(0 -100vmax) !important;
}
.opr-bt .opr-bt-portada-texto{ position:relative !important; z-index:1 !important; }
.opr-bt .opr-bt-rotulo{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.7) !important;
  margin:0 0 8px !important;
}
.opr-bt .opr-bt-h1{
  margin:0 !important;
  font-size:clamp(30px,3.6vw,43px) !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.06 !important;
  color:#fff !important;
}
.opr-bt .opr-bt-portada-sub{
  margin:12px 0 0 !important;
  max-width:52ch !important;
  font-size:16px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,.72) !important;
}


/* --- los dos agentes ---
   Misma receta que las portadas de los temas, el diccionario y psicotécnicos:
   ALTO DECLARADO Y ANCHO AUTOMÁTICO. Si se dejara al ancho, el dibujo crecería
   con la pantalla y en un monitor grande taparía media portada.

   FUERA POR DEBAJO DE 1120 px. Ahí el dibujo se come el titular, y en el móvil
   sobra: lo que hay que leer es qué es esto y el botón de retar. El `display`
   va con `img.` delante —(0,1,1)— porque el núcleo trae `.opr img` con
   `display:block` y esa misma especificidad: con solo la clase no se
   escondería. Es la trampa que está escrita en el propio núcleo.

   Y el hueco de la derecha se le devuelve al texto con un `padding-right`
   calculado sobre el alto del dibujo: sin él, la frase se metería por debajo de
   los agentes. La cifra depende de la proporción del dibujo —576 × 600, o sea
   0,96 de ancho por alto— así que si un día se cambia el dibujo hay que cambiar
   las dos: el `width`/`height` del marcado y este factor. */
.opr-bt .opr-bt-portada{ --opr-bt-agentes:clamp(230px,30vh,320px); }
.opr-bt .opr-bt-portada img.opr-bt-agentes{
  display:none !important;
  position:absolute !important;
  right:clamp(40px,5vw,110px) !important;
  bottom:0 !important;
  height:var(--opr-bt-agentes) !important;
  width:auto !important;
  max-width:38% !important;
  pointer-events:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}


/* Y LA PORTADA TIENE QUE SER MÁS ALTA QUE EL DIBUJO. El recorte que estira el
   fondo —`clip-path:inset(0 -100vmax)`— recorta arriba y abajo por el borde de
   la caja: si el dibujo es más alto que la portada, las espadas se quedan
   cortadas por la mitad en el borde de arriba. Se vio en la primera captura a
   1280 y a 1440. El alto mínimo sale del alto del propio dibujo más el aire de
   arriba, y el texto se centra en vertical para que no quede colgando. */

@media (min-width:1120px){
.opr-bt .opr-bt-portada img.opr-bt-agentes{ display:block !important; }
.opr-bt .opr-bt-portada{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-height:calc(var(--opr-bt-agentes) + 34px) !important;
  }
.opr-bt .opr-bt-portada .opr-bt-portada-texto{
    padding-right:calc(var(--opr-bt-agentes) * 0.96 + clamp(40px,5vw,110px) + 20px) !important;
  }
}


/* --- sin sesión --- */
/* --- LA PUERTA, la pantalla de quien llega sin sesión ---
   Rehecha el 5 de septiembre de 2026. La de antes era una caja de 640 px
   centrada a mitad de una página alineada a la izquierda: debajo de una portada
   que empieza en el margen, una caja que empieza en el centro se lee como una
   pieza de otra página. Ahora la sección ocupa el ancho de siempre y dentro van
   dos columnas: el texto con los botones, y los tres pasos.

   NO LLEVA CAJA PROPIA. El fondo de la sección ya es el papel gris de la banda;
   una tarjeta blanca encima solo añadiría un borde más. Los pasos sí llevan
   superficie, porque son la parte que se lee de un vistazo. */
.opr-bt .opr-bt-fuera{ padding-top:clamp(28px,4vw,48px) !important; }
.opr-bt .opr-bt-fuera-caja{
  display:grid !important;
  gap:clamp(24px,3vw,44px) !important;
  align-items:start !important;
}
@media (min-width:860px){
.opr-bt .opr-bt-fuera-caja{ grid-template-columns:minmax(0,1fr) minmax(0,360px) !important; }
}
.opr-bt .opr-bt-fuera-galon{
  margin:0 0 10px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--p700) !important;
}
.opr-bt .opr-bt-fuera h2{
  margin:0 !important;
  font-size:clamp(22px,2.6vw,30px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1.15 !important;
  color:var(--p950) !important;
}
.opr-bt .opr-bt-fuera p{
  margin:12px 0 0 !important;
  font-size:15px !important;
  line-height:1.6 !important;
  color:var(--p700) !important;
  max-width:52ch !important;
}
.opr-bt .opr-bt-fuera-botones{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:22px !important; }


/* Los tres pasos. Numerados por el navegador con un contador, no a mano: si un
   día se añade uno, la cuenta no se queda vieja.

   EL TÍTULO Y LA FRASE VAN DENTRO DE UN `div`, y no sueltos: la fila es una
   rejilla de dos columnas, así que sueltos el número ocupaba la primera casilla,
   el título la segunda y la frase caía en la casilla de debajo del número —26 px
   de ancho— partida en una palabra por línea. Se vio en la primera captura. */
.opr-bt .opr-bt-pasos{
  counter-reset:opr-bt-paso !important;
  margin:0 !important;
  padding:6px 0 !important;
  list-style:none !important;
  background:var(--superficie) !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
}
.opr-bt .opr-bt-pasos li{
  display:grid !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:baseline !important;
  padding:14px clamp(16px,2vw,20px) !important;
}
.opr-bt .opr-bt-pasos li+li{ border-top:1px solid var(--borde) !important; }
.opr-bt .opr-bt-pasos li::before{
  counter-increment:opr-bt-paso !important;
  content:counter(opr-bt-paso) !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--p400) !important;
}
.opr-bt .opr-bt-pasos b{
  display:block !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--p950) !important;
}
.opr-bt .opr-bt-pasos span{
  display:block !important;
  margin-top:3px !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:var(--p700) !important;
}


/* EL FONDO DE LA SECCIÓN, DE LADO A LADO DE LA PANTALLA. Lo pidió Sergio: para
   que se note dónde acaba una sección y empieza otra, y a lo ancho entero. Es
   el mismo gris que usan los bloques del panel de arriba —dos pasos de la
   escala pizarra, no un color—.

   CÓMO SE ESTIRA, Y POR QUÉ ASÍ. La banda vive dentro del contenedor de la
   página, que tiene su ancho y su margen. Lo evidente sería sacarla con
   `margin-inline:calc(50% - 50vw)` y `width:100vw`, y está mal: **`100vw`
   incluye la barra de desplazamiento**, así que la banda sobra unos 15 px por
   la derecha y aparece un desplazamiento horizontal en toda la página. En su
   lugar el fondo lo pinta una sombra enorme del mismo color y el `clip-path` la
   recorta arriba y abajo: la sombra no ocupa sitio, así que **no puede crear
   desbordes**, y no hay que saber cuánto mide la barra.

   El contenido no lleva relleno lateral: así sigue alineado con el panel de
   arriba, que es lo que hace que se lean como la misma página. */
/* El hueco del ancla. Se llega aquí desde el correo de un reto y desde la
   puerta de «Mi perfil», y la cabecera del sitio es `position:fixed`: sin esto
   el titular de la sección se queda debajo de la barra. */
.opr-bt.opr-bt-panel{ scroll-margin-top:96px !important; }
.opr-bt .opr-bt-banda{
  padding:clamp(22px,3vw,30px) 0 !important;
}


/* Los dos tonos, los mismos que los del panel de arriba. Cuál toca NO se decide
   aquí ni en este plugin: lo reparte `oporeal_pg_alternar()` sobre la página ya
   montada, que es el único momento en que se sabe en qué orden se pintan las
   bandas de los tres plugins.

   `es-tono` a secas es la red por si ese plugin no está: se queda con el fondo
   claro y se pierde el ritmo de bandas, no la sección. */
.opr-bt .opr-bt-banda.es-tono, .opr-bt .opr-bt-banda.es-tono-a{
  background:var(--superficie) !important;
  box-shadow:0 0 0 100vmax var(--superficie) !important;
  clip-path:inset(0 -100vmax) !important;
}
.opr-bt .opr-bt-banda.es-tono-b{
  background:#F1F4F8 !important;
  box-shadow:0 0 0 100vmax #F1F4F8 !important;
  clip-path:inset(0 -100vmax) !important;
}



/* El emblema. Se mide en `em` para que crezca con el titular, que ya es
   fluido; en píxeles se quedaría pequeño en el escritorio y grande en el móvil.
   La familia se nombra a mano porque Public Sans no trae emojis y, sin una
   lista de reserva, algunos navegadores dibujan un cuadrado vacío. El
   `letter-spacing` negativo los junta: por defecto salen con hueco entre ellos
   y parecen tres cosas en vez de una. */
.opr-bt .opr-bt-emblema{
  flex:0 0 auto !important;
  font-size:1.05em !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;
  /* EN BLANCO Y NEGRO, como el resto de la página. Lo pidió Sergio, y encaja
     con el sistema: aquí el color significa acierto, fallo o aviso, y un
     cerebro rosa no significa nada. El `contrast` es porque el gris que sale
     del rosa y del plateado queda desvaído al lado de la tinta del titular.
     Un `filter` crea bloque contenedor para los `fixed`, pero aquí dentro no
     hay ninguno: el emblema es un `<span>` con tres imágenes. */
  filter:grayscale(1) contrast(1.1) !important;
}


/* Y EN EL SITIO EL EMBLEMA NO SON TRES LETRAS: SON TRES IMÁGENES.
   WordPress cambia los emojis por imágenes de Twemoji antes de servir la
   página, y el núcleo pone las imágenes en bloque: los tres salían en
   columna, un cerebro encima de las espadas encima del otro cerebro, y el
   titular medía tres líneas de alto. Visto en la web el 3 de septiembre.
   En la vista previa no pasa —allí no hay WordPress que los cambie—, así que
   el arnés finge el cambio para poder verlo.
   Pesa (0,3,1) con el anidado, por encima del `img.emoji` de WordPress. */
.opr-bt .opr-bt-emblema img{
  display:inline !important;
  width:1em !important;
  height:1em !important;
  margin:0 !important;
  vertical-align:-.12em !important;
}
.opr-bt .opr-bt-h3{
  margin:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--p800) !important;
}


/* ---------- las tres listas, plegables ---------- */

/* El titular de cada lista es el mando que la abre. Va a 44 px de alto, que es
   el mínimo para el dedo, y con la flecha dibujada a mano: el triángulo que
   pone el navegador desaparece en cuanto el `summary` es `display:flex`, y lo
   es para poder alinear el titular con la cuenta. El pseudoelemento se salva
   del reset del núcleo porque `*` no casa con `::after`. */
.opr-bt .opr-bt-grupo{
  margin:0 0 14px !important;
  border-top:1px solid var(--p200) !important;
}
.opr-bt .opr-bt-grupo-tit{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:44px !important;
  padding:11px 2px !important;
  cursor:pointer !important;
  list-style:none !important;
}
.opr-bt .opr-bt-grupo-tit::-webkit-details-marker{ display:none !important; }
.opr-bt .opr-bt-grupo-tit:hover .opr-bt-h3{ color:var(--p950) !important; }
.opr-bt .opr-bt-grupo-tit::after{
  content:"" !important;
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  margin-left:auto !important;
  border-right:2px solid var(--p500) !important;
  border-bottom:2px solid var(--p500) !important;
  transform:translateY(-2px) rotate(45deg) !important;
}
.opr-bt .opr-bt-grupo[open] .opr-bt-grupo-tit::after{
  transform:translateY(2px) rotate(-135deg) !important;
}


/* La cuenta, para saber lo que hay dentro sin abrirlo. En tinta y no en color:
   no es un aviso, es un número. */
.opr-bt .opr-bt-cuantas{
  flex:0 0 auto !important;
  min-width:22px !important;
  padding:2px 7px !important;
  border-radius:20px !important;
  background:var(--p100) !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  text-align:center !important;
  color:var(--p700) !important;
}
.opr-bt .opr-bt-grupo-cuerpo{ padding:0 0 10px !important; }
.opr-bt .opr-bt-vacio{
  margin:0 !important;
  padding:14px 16px !important;
  border:1px solid var(--p200) !important;
  border-radius:10px !important;
  background:#fff !important;
  font-size:14px !important;
  color:var(--p600) !important;
}


/* ---------- la caja de «todavía no» ---------- */
.opr-bt .opr-bt-nada{
  padding:20px !important;
  border:1px solid var(--p200) !important;
  border-radius:12px !important;
  background:#fff !important;
}
.opr-bt .opr-bt-nada b{ display:block !important; margin:0 0 6px !important; font-size:16px !important; color:var(--p900) !important; }
.opr-bt .opr-bt-nada p{ margin:0 0 14px !important; font-size:14px !important; line-height:1.55 !important; color:var(--p600) !important; }
.opr-bt .opr-bt-nada-botones{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }


/* ---------- retar ---------- */
.opr-bt .opr-bt-retar{ margin:0 0 22px !important; }
.opr-bt .opr-bt-aviso{
  margin:10px 0 8px !important;
  font-size:14px !important;
  color:var(--p600) !important;
}
.opr-bt .opr-bt-planes{ display:inline-flex !important; }
.opr-bt .opr-bt-forma{
  margin:14px 0 0 !important;
  padding:18px !important;
  border:1px solid var(--p200) !important;
  border-radius:12px !important;
  background:#fff !important;
}
.opr-bt .opr-bt-campo{ margin:0 0 16px !important; }
.opr-bt .opr-bt-etiqueta{
  display:block !important;
  margin:0 0 6px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--p800) !important;
}
.opr-bt .opr-bt-nota{
  margin:6px 0 0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
  color:var(--p500) !important;
}


/* Los dos atajos: que me toque uno al azar, y jugar contra la casa. No son
   botones de los principales: la manera normal de retar es escribir un nombre,
   y esto es la salida para quien no conoce a nadie o no quiere esperar. Por eso
   van debajo, sin relleno de color y con el texto pequeño.
   Los 38 px son el mínimo táctil del sistema, que el arnés mide. */
.opr-bt .opr-bt-atajos{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:10px !important;
}
.opr-bt .opr-bt-atajo{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  box-shadow:inset 0 0 0 1px var(--p300) !important;
  background:none !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--p700) !important;
  cursor:pointer !important;
  transition:background .16s, box-shadow .16s !important;
}
.opr-bt .opr-bt-atajo:hover{ background:var(--p100) !important; }


/* Cuando no hay nadie: el aviso trae la salida dentro. */
.opr-bt .opr-bt-hallado.es-sin-nadie{
  display:block !important;
  border-color:var(--p300) !important;
  background:var(--p50) !important;
  color:var(--p700) !important;
}
.opr-bt .opr-bt-hallado.es-sin-nadie .opr-bt-contra-bot{ margin-top:10px !important; }
.opr-bt .opr-bt-hallado.es-sin-nadie .opr-bt-nota{ margin-top:8px !important; }


/* El escudo hace de avatar del rival de la casa. La misma caja que una foto,
   para que la fila no se mueva según con quién juegues. */
.opr-bt .opr-bt-avatar.es-escudo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  flex:0 0 auto !important;
  border-radius:999px !important;
  background:var(--p950) !important;
  color:#fff !important;
}
.opr-bt .opr-bt-avatar.es-escudo svg{ width:19px !important; height:19px !important; display:block !important; }


/* «Ver más» del historial. Va debajo de la lista y no dentro: no es una batalla
   más. Los 38 px son el mínimo táctil del sistema. */
.opr-bt .opr-bt-mas{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  margin-top:10px !important;
  min-height:38px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  box-shadow:inset 0 0 0 1px var(--p300) !important;
  background:none !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--p700) !important;
  cursor:pointer !important;
  transition:background .16s !important;
}
.opr-bt .opr-bt-mas:hover{ background:var(--p100) !important; }
.opr-bt .opr-bt-mas span{ font-weight:400 !important; color:var(--p500) !important; }
.opr-bt .opr-bt-atajo:disabled{ opacity:.55 !important; cursor:default !important; }

/* El dado en blanco y negro, como el resto de la sección. */
.opr-bt .opr-bt-atajo > span[aria-hidden]{ filter:grayscale(1) contrast(1.1) !important; font-size:15px !important; line-height:1 !important; }
.opr-bt .opr-bt-atajo > span[aria-hidden] img{ display:inline !important; width:1em !important; height:1em !important; margin:0 !important; vertical-align:-.12em !important; }

/* El escudo dentro del botón: la misma caja redonda, en pequeño, y sin el
   filtro de gris ni el tamaño de letra de la regla de arriba, que son para el
   emoji del dado. Lleva `span.es-escudo[aria-hidden]` a propósito: la regla del
   dado es `span[aria-hidden]` y pesa más que una clase sola. */
.opr-bt .opr-bt-atajo > span.es-escudo[aria-hidden]{
  width:22px !important;
  height:22px !important;
  margin-left:-4px !important;
  filter:none !important;
  font-size:inherit !important;
}
.opr-bt .opr-bt-atajo > span.es-escudo[aria-hidden] svg{ width:12px !important; height:12px !important; }


/* ---------- el interruptor de modalidad ---------- */
.opr-bt .opr-bt-modos{
  display:inline-flex !important;
  padding:3px !important;
  border:1px solid var(--p300) !important;
  border-radius:10px !important;
  background:#fff !important;
  gap:3px !important;
}
.opr-bt .opr-bt-modo{
  min-height:38px !important;
  padding:8px 16px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  font-family:inherit !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--p600) !important;
  cursor:pointer !important;
}
.opr-bt .opr-bt-modo:hover{ color:var(--p900) !important; }
.opr-bt .opr-bt-modo.es-elegido{ background:var(--p950) !important; color:#fff !important; }


/* ---------- el aviso de vuelta de una batalla de psicotécnicos ---------- */
.opr-bt .opr-bt-vuelta{
  margin:0 0 18px !important;
  padding:14px 16px !important;
  border:1px solid var(--p300) !important;
  border-radius:10px !important;
  background:#fff !important;
}
.opr-bt .opr-bt-vuelta b{ display:block !important; margin:0 0 4px !important; font-size:17px !important; font-weight:800 !important; color:var(--p950) !important; }
.opr-bt .opr-bt-vuelta span{ display:block !important; font-size:14px !important; line-height:1.5 !important; color:var(--p600) !important; }
.opr-bt .opr-bt-vuelta.es-gane{ border-color:var(--ok500) !important; background:var(--ok100) !important; }
.opr-bt .opr-bt-vuelta.es-gane b, .opr-bt .opr-bt-vuelta.es-gane span{ color:var(--ok900) !important; }
.opr-bt .opr-bt-vuelta.es-perdi{ border-color:var(--no500) !important; background:var(--no100) !important; }
.opr-bt .opr-bt-vuelta.es-perdi b, .opr-bt .opr-bt-vuelta.es-perdi span{ color:var(--no900) !important; }
.opr-bt .opr-bt-input{
  width:100% !important;
  min-height:44px !important;
  padding:10px 12px !important;
  border:1px solid var(--p300) !important;
  border-radius:8px !important;
  background:#fff !important;
  font-family:inherit !important;
  font-size:15px !important;
  color:var(--p900) !important;
}
.opr-bt .opr-bt-input:focus{
  outline:2px solid var(--p900) !important;
  outline-offset:1px !important;
  border-color:var(--p900) !important;
}
.opr-bt .opr-bt-corto{ width:110px !important; }
.opr-bt .opr-bt-busca{ display:flex !important; gap:8px !important; align-items:stretch !important; }
.opr-bt .opr-bt-busca .opr-bt-input{ flex:1 1 auto !important; min-width:0 !important; }
.opr-bt .opr-bt-hallado{
  margin:10px 0 0 !important;
  padding:10px 12px !important;
  border:1px solid var(--p200) !important;
  border-radius:8px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-size:14px !important;
  color:var(--p800) !important;
}
.opr-bt .opr-bt-hallado img{ width:32px !important; height:32px !important; border-radius:50% !important; }
.opr-bt .opr-bt-hallado.es-mal{ border-color:var(--no500) !important; background:var(--no100) !important; color:var(--no900) !important; }
.opr-bt .opr-bt-dos{ display:flex !important; flex-wrap:wrap !important; gap:18px !important; }
.opr-bt .opr-bt-temas{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  max-height:260px !important;
  overflow-y:auto !important;
  padding:8px !important;
  border:1px solid var(--p200) !important;
  border-radius:8px !important;
  background:#fff !important;
}
.opr-bt .opr-bt-tema{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  min-height:38px !important;
  padding:7px 8px !important;
  border-radius:6px !important;
  cursor:pointer !important;
  font-size:14px !important;
  color:var(--p800) !important;
}
.opr-bt .opr-bt-tema:hover{ background:var(--p50) !important; }
.opr-bt .opr-bt-tema input[type="checkbox"]{
  /* SE LE DESHACE LO DEL TEMA. Astra le pone a toda casilla
     `width:100%`, un borde casi blanco y `padding:12px 15px`, y con
     `box-sizing:border-box` el relleno se come la casilla entera: quedan
     dieciocho píxeles de nada y no se ve ni una. Salía en la captura del
     formulario y no lo cazaba ninguna medida. */
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  flex:0 0 auto !important;
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  /* Tinta pizarra en vez del azul del navegador. Es el estado de un control,
     no decoración: el verde y el rojo siguen significando acierto y fallo. */
  accent-color:var(--p950) !important;
}
.opr-bt .opr-bt-tema span{ display:block !important; line-height:1.4 !important; }
.opr-bt .opr-bt-tema b{ display:block !important; font-size:12px !important; font-weight:700 !important; color:var(--p500) !important; }


/* --- «Todos», la primera fila de la lista ---
   Es un botón con la pinta de una fila más, no un control de otra familia:
   está dentro de la misma caja y se pulsa en el mismo sitio. Lo que lo separa
   de un tema es la línea de debajo, que dice dónde acaba la acción y empieza
   la lista.
   SIN COLOR. Marcado va de tinta llena. El verde y el rojo significan acierto
   y fallo en todo el sitio y aquí querrían decir otra cosa. */
.opr-bt .opr-bt-todos{
  position:relative !important;
  /* De lado a lado, aunque la lista vaya a dos columnas: si se queda en la
     primera columna, «Tema 1» le sale al lado y la línea de debajo parte la
     caja por la mitad. No es un tema más: es la cabecera de la lista. */
  grid-column:1 / -1 !important;
  margin-bottom:2px !important; padding-bottom:11px !important;
  border:0 !important; border-bottom:1px solid var(--p200) !important; border-radius:6px 6px 0 0 !important;
  background:none !important;
  text-align:left !important; font:inherit !important; font-size:14px !important; color:var(--p800) !important;
}
.opr-bt .opr-bt-todos:hover{ background:var(--p50) !important; }

/* El cuadrado que ocupa el sitio de la casilla. Va dibujado: una casilla de
   verdad la leería `elegidos()` y viajaría al servidor como un tema más. */
.opr-bt .opr-bt-todos::before{
  content:"" !important; flex:0 0 auto !important;
  width:18px !important; height:18px !important; margin:2px 0 0 !important;
  border:2px solid var(--p400) !important; border-radius:3px !important;
  background:#fff !important;
  box-sizing:border-box !important;
}
.opr-bt .opr-bt-todos.es-todo::before{ border-color:var(--p950) !important; background:var(--p950) !important; }

/* La marca de dentro: dos lados de una caja girada, que es un palote hecho
   con bordes y no una fuente ni un SVG que haya que servir. */
.opr-bt .opr-bt-todos.es-todo::after{
  content:"" !important; position:absolute !important; left:13px !important; top:12px !important;
  width:5px !important; height:9px !important;
  border:solid #fff !important; border-width:0 2px 2px 0 !important;
  transform:rotate(42deg) !important;
}
.opr-bt .opr-bt-todos b{ color:var(--p950) !important; }
.opr-bt .opr-bt-error{
  margin:0 0 12px !important;
  padding:10px 12px !important;
  border:1px solid var(--no500) !important;
  border-radius:8px !important;
  background:var(--no100) !important;
  font-size:14px !important;
  color:var(--no900) !important;
}
.opr-bt .opr-bt-acciones{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; }


/* ---------- la lista ---------- */
.opr-bt .opr-bt-lista{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:grid !important;
  gap:8px !important;
}
.opr-bt .opr-bt-item{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:12px 14px !important;
  border:1px solid var(--p200) !important;
  border-radius:10px !important;
  background:#fff !important;
}
.opr-bt .opr-bt-item.es-cerrada{ background:#FAFBFD !important; }
.opr-bt .opr-bt-quien{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  flex:1 1 200px !important;
}
.opr-bt .opr-bt-avatar{
  width:36px !important; height:36px !important;
  border-radius:50% !important;
  flex:0 0 auto !important;
  background:var(--p100) !important;
}
.opr-bt .opr-bt-quien-txt{ min-width:0 !important; }
.opr-bt .opr-bt-quien-txt b{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--p900) !important;
}
.opr-bt .opr-bt-quien-txt span{
  display:block !important;
  font-size:12px !important;
  color:var(--p500) !important;
}
.opr-bt .opr-bt-accion{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex:0 0 auto !important;
}
.opr-bt .opr-bt-dias{ font-size:12px !important; color:var(--p500) !important; }
.opr-bt .opr-bt-dias.es-poco{ color:var(--av600) !important; font-weight:700 !important; }
.opr-bt .opr-bt-hecho{ font-size:12px !important; color:var(--p600) !important; }
.opr-bt .opr-bt-marca{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  border:1px solid var(--p300) !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--p700) !important;
}
.opr-bt .opr-bt-marca span{ font-weight:400 !important; color:var(--p600) !important; }
.opr-bt .opr-bt-marca.es-gane{ border-color:var(--ok500) !important; background:var(--ok100) !important; color:var(--ok900) !important; }
.opr-bt .opr-bt-marca.es-gane span{ color:var(--ok900) !important; }
.opr-bt .opr-bt-marca.es-perdi{ border-color:var(--no500) !important; background:var(--no100) !important; color:var(--no900) !important; }
.opr-bt .opr-bt-marca.es-perdi span{ color:var(--no900) !important; }


/* El porqué de un resultado que si no parece una errata: «Ganada 2–2». Solo
   aparece cuando el tiempo ha decidido, así que la marca se parte en dos líneas
   y deja de ser una píldora de una sola. */
.opr-bt .opr-bt-marca:has(.opr-bt-porque){
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  border-radius:14px !important;
  padding:7px 12px !important;
  row-gap:2px !important;
}
.opr-bt .opr-bt-marca .opr-bt-porque{
  flex-basis:100% !important;
  text-align:right !important;
  font-size:12px !important;
  font-weight:400 !important;
  opacity:.82 !important;
}


/* ---------- la sala ---------- */
.opr-bt .opr-bt-sala{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:16px !important;
  overflow-y:auto !important;
  background:rgba(18,23,28,.72) !important;
}


/* ---------------------------------------------------------------------
   LO QUE LLEVA `hidden` TIENE QUE ESTAR ESCONDIDO
   ---------------------------------------------------------------------
   El núcleo esconde lo que lleva `hidden` con un selector de una clase y un
   atributo, que pesa (0,1,1). Cualquier regla de aquí con la raíz delante
   pesa (0,2,0) y le gana, así que un elemento al que se le haya dado
   `display:flex` se ve igual aunque tenga el atributo puesto. Es
   la trampa del banner de cookies y la del panel de progreso, por tercera
   vez. Con las dos clases de la raíz pegadas esto pesa (0,3,0) y gana.

   Va sobre CUALQUIER descendiente, no sobre una lista de tres: el día que se
   añada otra caja escondida, ya está cubierta. */
.opr-bt.opr-bt-panel [hidden]{ display:none !important; }
.opr-bt .opr-bt-sala-caja{
  width:100% !important;
  max-width:720px !important;
  margin:auto !important;
  border-radius:14px !important;
  background:#fff !important;
  overflow:hidden !important;
}
.opr-bt .opr-bt-sala-cabeza{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 16px !important;
  background:var(--p950) !important;
  color:#fff !important;
}
.opr-bt .opr-bt-sala-quien{ flex:1 1 auto !important; min-width:0 !important; }
.opr-bt .opr-bt-sala-quien b{ display:block !important; font-size:15px !important; font-weight:700 !important; }
.opr-bt .opr-bt-sala-quien span{ display:block !important; font-size:12px !important; color:var(--p300) !important; }
.opr-bt .opr-bt-reloj{
  font-size:20px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:.02em !important;
}
.opr-bt .opr-bt-reloj.es-poco{ color:var(--av500) !important; }
.opr-bt .opr-bt-cerrar{
  min-height:38px !important;
  padding:8px 12px !important;
  border:1px solid var(--p700) !important;
  border-radius:8px !important;
  background:transparent !important;
  font-family:inherit !important;
  font-size:13px !important;
  color:var(--p200) !important;
  cursor:pointer !important;
}
.opr-bt .opr-bt-cerrar:hover{ background:var(--p800) !important; color:#fff !important; }
.opr-bt .opr-bt-marcha{ height:4px !important; background:var(--p200) !important; }
.opr-bt .opr-bt-marcha i{ display:block !important; height:100% !important; width:0 !important; background:var(--p900) !important; }
.opr-bt .opr-bt-juego{ padding:20px 18px 24px !important; }
.opr-bt .opr-bt-contador{
  margin:0 0 10px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--p500) !important;
}
.opr-bt .opr-bt-pregunta{
  margin:0 0 18px !important;
  font-size:clamp(16px,2.4vw,19px) !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  color:var(--p950) !important;
}
.opr-bt .opr-bt-opciones{ display:grid !important; gap:8px !important; }
.opr-bt .opr-bt-opcion{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  width:100% !important;
  min-height:48px !important;
  padding:12px 14px !important;
  border:1px solid var(--p300) !important;
  border-radius:10px !important;
  background:#fff !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.45 !important;
  text-align:left !important;
  color:var(--p900) !important;
  cursor:pointer !important;
}
.opr-bt .opr-bt-opcion:hover{ border-color:var(--p900) !important; }
.opr-bt .opr-bt-opcion[disabled]{ cursor:default !important; }
.opr-bt .opr-bt-opcion .opr-bt-letra{
  flex:0 0 auto !important;
  width:24px !important; height:24px !important;
  border:1px solid var(--p300) !important;
  border-radius:6px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:22px !important;
  text-align:center !important;
  color:var(--p600) !important;
}
.opr-bt .opr-bt-opcion.es-bien{ border-color:var(--ok500) !important; background:var(--ok100) !important; color:var(--ok900) !important; }
.opr-bt .opr-bt-opcion.es-bien .opr-bt-letra{ border-color:var(--ok500) !important; color:var(--ok900) !important; }
.opr-bt .opr-bt-opcion.es-mal{ border-color:var(--no500) !important; background:var(--no100) !important; color:var(--no900) !important; }
.opr-bt .opr-bt-opcion.es-mal .opr-bt-letra{ border-color:var(--no500) !important; color:var(--no900) !important; }


/* ---------- el final ---------- */
.opr-bt .opr-bt-fin{ padding:24px 18px 26px !important; text-align:center !important; }
.opr-bt .opr-bt-fin b{ display:block !important; margin:0 0 8px !important; font-size:22px !important; font-weight:800 !important; color:var(--p950) !important; }
.opr-bt .opr-bt-fin p{ margin:0 auto 16px !important; max-width:46ch !important; font-size:15px !important; line-height:1.55 !important; color:var(--p600) !important; }
.opr-bt .opr-bt-fin .opr-bt-tanteo{
  display:inline-block !important;
  margin:0 0 14px !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  border:1px solid var(--p300) !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--p800) !important;
}
.opr-bt .opr-bt-fin .opr-bt-tanteo.es-gane{ border-color:var(--ok500) !important; background:var(--ok100) !important; color:var(--ok900) !important; }
.opr-bt .opr-bt-fin .opr-bt-tanteo.es-perdi{ border-color:var(--no500) !important; background:var(--no100) !important; color:var(--no900) !important; }
@media (min-width:600px){
.opr-bt .opr-bt-temas{ grid-template-columns:1fr 1fr !important; }
}