/* ==========================================================================
   OpoReal · Página oficial de un tema · prefijo .opr-tm-
   Portada del tema + rejilla de recursos (resumen, test, podcast, mapa
   mental, flashcards, mnemotecnia, verdadero/falso). Cada recurso abre el
   lector (lector.css / lector.js) sin salir de la página.
   Todas las reglas van prefijadas con .opr-tema: empatar en especificidad
   con el reset del núcleo es perder (manual técnico, punto 11.1).
   ========================================================================== */

.opr-tema{--bloque:var(--p700)}

/* ---- Portada, en noche ------------------------------------------------- */
/* La portada mide **una pantalla exacta**: ni sobra ni falta. Así, al deslizar
   una vez, lo primero que aparece es la rejilla de recursos y no media portada.
   Que no falte lo resuelve `min-height` con el contenido centrado en vertical:
   un tema de título corto —el 1— ya no deja un hueco muerto debajo. Que no
   sobre lo resuelven los escalones de más abajo: cuando la ventana es baja, el
   aire se recorta antes que empujar los recursos fuera de la vista.

   Es `min-height` y no `height` a propósito: si un título largo no cabe ni con
   el aire recortado, la portada crece. Recortar texto para cuadrar una medida
   es peor que la medida.

   `--pantalla` lo escribe `tema.js` **solo cuando hay barra de administración**,
   que se come 32 px que `svh` no descuenta y que dejarían la portada larga para
   quien administra el sitio. Sin barra manda `100svh`, que es lo único que
   aguanta la barra del navegador del móvil al aparecer y desaparecer. */
.opr-tema .opr-tm-portada{--pie:clamp(34px,5vw,58px); --aire:clamp(38px,6vw,74px); --sep-galon:26px; --sep-numero:18px; --sep-entradilla:18px; --sep-datos:30px; position:relative !important; overflow:hidden !important; /* corta a la agente por el borde */
  background:var(--p950) !important; color:#fff !important; min-height:var(--pantalla,100svh) !important; display:flex !important; align-items:stretch !important; padding:calc(var(--cabecera,0px) + var(--aire)) clamp(18px,4vw,48px) var(--pie) !important}

/* La caja ocupa todo el alto de la portada y centra el texto dentro. Tiene que
   ser la caja y no la portada la que centre: la agente va posicionada contra
   la caja, y si el que centrara fuera la portada, la agente se despegaría del
   borde de abajo en cuanto sobrara sitio. */
.opr-tema .opr-tm-portada > .opr-caja{display:flex !important; flex-direction:column !important; justify-content:center !important}

/* La cabecera de OpoReal solo flota sobre lo que tiene debajo cuando eso es un
   `.opr-hero`. Esta portada no lo es —ni puede serlo: `.opr-hero` impone
   `height:100svh` y un reset que arrasaría con el contenido—, así que la
   cabecera ocupaba su franja y dejaba una banda vacía sobre la portada. Se
   corrige aquí: la portada sube por detrás de la cabecera y recupera por dentro
   el alto que le quita. `--cabecera` lo mide `tema.js`, porque cambia con el
   ancho y con la barra de administración. */
.opr-tema.es-bajo-cabecera{margin-top:calc(-1 * var(--cabecera,0px)) !important}
.opr-tema .opr-tm-portada .opr-caja{position:relative !important}

/* El agente. Documento 01, punto 7: nunca tapa texto, siempre con sombra,
   y se retira por debajo de 1080 px, donde no hay sitio.

   SALE ENTERO, DE LA GORRA A LAS BOTAS. Hasta la v0.5.31 el `bottom` era
   negativo y el borde de la portada cortaba al muñeco: aquellos seis dibujos
   estaban encuadrados para eso —de cintura para abajo apenas había nada—. Los
   54 de ahora son figuras completas, y a una figura completa cortarle las
   botas no parece un encuadre: parece un fallo. Se apoya en el mismo `--pie`
   que el resto de la portada.

   EL ALTO SE MIDE CONTRA LA VENTANA, no contra su ancho. La portada dura
   exactamente una pantalla, así que lo que aprieta aquí es el alto: con `vw`,
   un monitor ancho y bajo daba un muñeco que no cabía. El tope son 520 px:
   los originales miden unos 400 de alto y a 520 se les nota poco el píxel, que
   es el precio de que se vean de verdad.

   VA CENTRADO, NO APOYADO ABAJO. Hasta la v0.5.36 iba con `bottom:0` y el
   dibujo quedaba pegado al borde de abajo con trescientos y pico píxeles de
   aire encima: la portada se veía descompensada y así lo dijo Sergio. Con
   `top:50%` y media altura hacia arriba, el aire de arriba y el de abajo son
   iguales POR CONSTRUCCIÓN, sin cifras que cuadrar a mano y sin que dependa de
   lo largo que sea el texto de la izquierda. Lo mide `medir_agente.py`.

   Y SE SEPARA MÁS DEL BORDE DERECHO que las portadas de psicotécnicos y del
   diccionario, porque aquí el dibujo es más grande y pegado a la esquina
   quedaba fuera de la composición. La misma cifra va en el `padding-right` de
   la caja de texto de más abajo: se tocan las dos o el texto se mete debajo
   del muñeco. */
.opr-tema img.opr-tm-agente{position:absolute !important; right:clamp(72px,8vw,190px) !important; top:50% !important; z-index:1 !important; transform:translateY(-50%) !important; height:clamp(330px,52vh,520px) !important; width:auto !important; filter:drop-shadow(0 22px 30px rgba(0,0,0,.45)) !important; pointer-events:none !important}

.opr-tema .opr-tm-migas{display:flex !important; align-items:center !important; gap:10px !important; color:var(--p400) !important; font-size:.875rem !important; font-weight:500 !important}
.opr-tema .opr-tm-migas a{color:var(--p400) !important; transition:color .16s !important}
.opr-tema .opr-tm-migas a:hover{color:#fff !important}
.opr-tema .opr-tm-migas span{color:var(--p400) !important}
.opr-tema .opr-tm-migas .opr-tm-sep{color:var(--p600) !important}

.opr-tema .opr-tm-galon{display:flex !important; align-items:center !important; gap:12px !important; margin-top:var(--sep-galon,26px) !important}
.opr-tema .opr-tm-galon i{display:block !important; width:34px !important; height:4px !important; border-radius:999px !important; background:var(--bloque) !important}
.opr-tema .opr-tm-galon > b{font-weight:600 !important; font-size:.95rem !important; color:var(--p300) !important}

.opr-tema .opr-tm-numero{display:block !important; margin-top:var(--sep-numero,18px) !important; font-size:.95rem !important; font-weight:700 !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important}

.opr-tema .opr-tm-portada .opr-h2{margin-top:6px !important; color:#fff !important; max-width:18ch !important}
.opr-tema .opr-tm-portada .opr-entradilla{margin-top:var(--sep-entradilla,18px) !important; color:var(--p400) !important}

/* Con la agente puesta, el texto no puede llegar hasta el borde derecho. Las
   cifras bajaron en la v0.5.37, cuando el dibujo creció y se metió hacia
   dentro: con las de antes, la entradilla se le echaba encima. */
@media (min-width:1080px){
  .opr-tema .opr-tm-portada .opr-h2{max-width:13ch !important}
  .opr-tema .opr-tm-portada .opr-entradilla{max-width:min(58ch,50%) !important}
}
@media (max-width:1079px){
  .opr-tema img.opr-tm-agente{display:none !important}
}

.opr-tema .opr-tm-datos{display:flex !important; flex-wrap:wrap !important; gap:28px !important; margin-top:var(--sep-datos,30px) !important}
.opr-tema .opr-tm-datos div{display:flex !important; flex-direction:column !important; gap:2px !important}
.opr-tema .opr-tm-datos > div > b{font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.02em !important; font-variant-numeric:tabular-nums !important}
.opr-tema .opr-tm-datos > div > span{font-size:.8125rem !important; color:var(--p400) !important}

/* Los escalones. Se miden contra el alto de la ventana, no contra el ancho:
   lo que aprieta aquí es el alto. 760 px es un portátil normal con la barra de
   marcadores; 660, el de Sergio con la barra de administración encima. En el
   último escalón cede también el titular, que es lo que más alto ocupa en los
   temas de nombre largo —el 10 son tres líneas—. */
@media (max-height:760px){
  .opr-tema .opr-tm-portada{--aire:clamp(24px,3.2vw,44px); --pie:clamp(22px,3vw,38px); --sep-galon:18px; --sep-numero:12px; --sep-entradilla:13px; --sep-datos:20px}
  .opr-tema .opr-tm-datos{gap:24px !important}
}
@media (max-height:660px){
  .opr-tema .opr-tm-portada{--aire:clamp(16px,2.2vw,30px); --pie:clamp(14px,2vw,24px); --sep-galon:12px; --sep-numero:8px; --sep-entradilla:10px; --sep-datos:14px}
  .opr-tema .opr-tm-portada .opr-h2{font-size:clamp(1.75rem,3.2vw,2.4rem) !important}
  .opr-tema .opr-tm-datos{gap:20px !important}
  .opr-tema .opr-tm-datos > div > b{font-size:1.3125rem !important}
}

/* ---- Recursos ---------------------------------------------------------- */
.opr-tema .opr-tm-recursos{background:var(--fondo) !important; padding:clamp(40px,6vw,72px) clamp(18px,4vw,48px) clamp(56px,8vw,96px) !important}
.opr-tema .opr-tm-recursos .opr-rotulo{margin-bottom:6px !important}
.opr-tema .opr-tm-recursos .opr-h3{margin-bottom:26px !important}

.opr-tema .opr-tm-rejilla{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)) !important; gap:14px !important}

.opr-tema .opr-tm-rec{position:relative !important; display:flex !important; flex-direction:column !important; gap:8px !important; width:100% !important; padding:22px 22px 20px !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important; transition:box-shadow .18s, transform .18s !important}
.opr-tema button.opr-tm-rec:hover{box-shadow:inset 0 0 0 1px var(--p400), var(--sombra) !important; transform:translateY(-2px) !important}
.opr-tema button.opr-tm-rec:active{transform:translateY(0) !important}
.opr-tema .opr-tm-rec svg{width:22px !important; height:22px !important; stroke:var(--tinta) !important; fill:none !important; stroke-width:1.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-tema .opr-tm-rec-n{font-weight:700 !important; font-size:1.0625rem !important; letter-spacing:-.012em !important}
.opr-tema .opr-tm-rec-d{font-size:.875rem !important; color:var(--suave) !important; line-height:1.5 !important}
.opr-tema .opr-tm-rec-e{margin-top:6px !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-tema .opr-tm-rec-e.es-listo{color:var(--tinta) !important}

/* Los puntos del cajón (v0.5.62): debajo de «Abrir · …», más callados que él.
   La cifra en tinta y lo demás en suave; ya cobrado, todo en tenue con una
   marca, porque ahí ya no hay nada que ganar y no tiene que llamar la vista.
   Sin color: un punto ganado no es un acierto ni un aviso. */
.opr-tema .opr-tm-rec-p{display:block !important; margin-top:-3px !important; font-size:.8125rem !important; font-weight:500 !important; line-height:1.4 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-tema .opr-tm-rec-p b{font-weight:700 !important; color:var(--tinta) !important}
.opr-tema .opr-tm-rec-p.es-cobrado{display:flex !important; align-items:center !important; gap:5px !important; color:var(--tenue) !important}
.opr-tema .opr-tm-rec .opr-tm-rec-p svg{flex:0 0 auto !important; width:14px !important; height:14px !important; stroke:var(--tenue) !important; stroke-width:2 !important}

.opr-tema .opr-tm-rec.es-pronto{opacity:.55 !important; cursor:default !important}
.opr-tema .opr-tm-rec.es-pronto:hover{transform:none !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}

@media (max-width:560px){
  .opr-tema .opr-tm-rejilla{grid-template-columns:1fr !important}
  .opr-tema .opr-tm-datos{gap:20px !important}
}

/* ---- Cabecera de la rejilla y control de plan de la vista previa -------- */
.opr-tema .opr-tm-cabrec{display:flex !important; flex-wrap:wrap !important; align-items:flex-end !important; justify-content:space-between !important; gap:16px 24px !important; margin-bottom:26px !important}
.opr-tema .opr-tm-recursos .opr-h3{margin-bottom:0 !important}
.opr-tema .opr-tm-verplan{display:flex !important; flex-direction:column !important; gap:6px !important}
.opr-tema .opr-tm-verplan > span{font-size:.75rem !important; color:var(--tenue) !important}
.opr-tema .opr-tm-planes{display:inline-flex !important; gap:4px !important; padding:4px !important; border-radius:999px !important; background:var(--p100) !important}
.opr-tema .opr-tm-planes button{padding:7px 14px !important; border-radius:999px !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--suave) !important; transition:background .16s, color .16s, box-shadow .16s !important}
.opr-tema .opr-tm-planes button.es-activo{background:var(--superficie) !important; color:var(--tinta) !important; box-shadow:var(--sombra-s) !important}

/* ---- Recurso cerrado por plan ------------------------------------------ */
.opr-tema .opr-tm-rec{position:relative !important}
.opr-tema .opr-tm-rec.es-cerrado{color:inherit !important; padding-top:44px !important}
.opr-tema .opr-tm-rec.es-cerrado svg{stroke:var(--tenue) !important}
.opr-tema .opr-tm-rec.es-cerrado .opr-tm-rec-n{color:var(--suave) !important}
.opr-tema .opr-tm-rec.es-cerrado:hover{box-shadow:inset 0 0 0 1px var(--p400), var(--sombra) !important; transform:translateY(-2px) !important}
.opr-tema .opr-tm-candado{position:absolute !important; top:14px !important; right:14px !important; display:inline-flex !important; align-items:center !important; gap:6px !important; max-width:calc(100% - 28px) !important; padding:5px 11px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.6875rem !important; font-weight:600 !important; line-height:1.3 !important; color:var(--suave) !important; text-align:right !important}
.opr-tema .opr-tm-candado svg{flex:0 0 auto !important; width:13px !important; height:13px !important; stroke:var(--suave) !important; fill:none !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-tema .opr-tm-rec.es-cerrado .opr-tm-rec-e{color:var(--tenue) !important}

@media (max-width:560px){
  .opr-tema .opr-tm-cabrec{align-items:flex-start !important}
  .opr-tema .opr-tm-candado{font-size:.625rem !important; padding:4px 9px !important}
}

/* ==========================================================================
   El escaparate público · prefijo .opr-tm-esc
   --------------------------------------------------------------------------
   Va DEBAJO de la rejilla y FUERA de `#opr-tema`, y eso último no es un
   capricho: `tema.js` pinta la portada y la rejilla con `raiz.innerHTML = …`,
   así que todo lo que estuviera dentro se borraría en cuanto arrancara el
   guion. Aquí el servidor escribe y el guion no toca.

   Lo pinta el PHP, que es de lo que se trata: de la página del tema salía del
   servidor un `<div>` vacío y ni una palabra del temario. Esto es texto real y
   visible —lo mismo que ve la persona y lo que lee el buscador—, y sale de
   datos que ya existen: bloque, epígrafes del resumen y cifras del material.

   Sin color: es una sección de texto y en Pizarra el color solo aparece cuando
   significa algo (documento 01, punto 2.2).
   ========================================================================== */
.opr-tm-esc{background:var(--fondo) !important; border-top:1px solid var(--borde) !important; padding:clamp(38px,5vw,64px) clamp(18px,4vw,48px) clamp(48px,7vw,84px) !important}
.opr-tm-esc .opr-rotulo{margin-bottom:6px !important}
.opr-tm-esc .opr-h3{margin-bottom:14px !important}
.opr-tm-esc .opr-entradilla{margin-bottom:0 !important}
.opr-tm-esc .opr-h4{margin:30px 0 12px !important}

/* La lista de epígrafes. El reset del núcleo le quita la numeración a todos los
   `ol`, así que se repone aquí con un contador propio: hace falta una clase
   —(0,2,0)— porque `.opr ol` mide lo mismo que `.opr-tm-esc ol` y empatar es
   perder (manual técnico, punto 11.1). */
.opr-tm-esc .opr-tm-esc-lista{counter-reset:opr-esc !important; display:grid !important; gap:8px !important; max-width:62ch !important}
.opr-tm-esc .opr-tm-esc-lista li{counter-increment:opr-esc !important; position:relative !important; padding-left:38px !important; font-size:1.0625rem !important; line-height:1.5 !important; color:var(--tinta) !important}
.opr-tm-esc .opr-tm-esc-lista li::before{content:counter(opr-esc) !important; position:absolute !important; left:0 !important; top:1px !important; width:26px !important; height:26px !important; border-radius:999px !important; border:1px solid var(--borde2) !important; color:var(--suave) !important; font-size:.8125rem !important; font-weight:700 !important; line-height:24px !important; text-align:center !important; font-variant-numeric:tabular-nums !important}

.opr-tm-esc .opr-tm-esc-abierto{margin-top:28px !important; padding:14px 18px !important; background:var(--p100) !important; border-radius:var(--radio-s) !important; font-size:1rem !important; color:var(--tinta) !important; max-width:62ch !important}
.opr-tm-esc .opr-tm-esc-abierto a{text-decoration:underline !important; text-underline-offset:3px !important}

@media (max-width:640px){
  .opr-tm-esc .opr-tm-esc-lista li{font-size:1rem !important; padding-left:34px !important}
  .opr-tm-esc .opr-tm-esc-lista li::before{width:24px !important; height:24px !important; line-height:22px !important}
}