/* ==========================================================================
   OpoReal · Lector de recursos · prefijo .opr-lc-
   Ventana que se abre sobre la página del tema con el recurso elegido.
   Sirve para todos los recursos (resumen, test, flashcards, podcast…):
   el chasis es siempre el mismo, cambia lo que se pinta dentro.
   Color: monocromo Pizarra. El color del bloque solo identifica; el verde
   y el rojo solo aparecen cuando el alumno ya ha respondido.
   ========================================================================== */

.opr-lector{position:fixed !important; inset:0 !important; z-index:99999 !important; display:none !important; background:var(--fondo) !important; color:var(--tinta) !important; --bloque:var(--p700)}
.opr-lector.es-abierto{display:flex !important; flex-direction:column !important}

/* ---- Barra superior ---------------------------------------------------- */
/* La cabecera envuelve la barra y el panel del índice, y existe por una razón
   concreta: la barra lleva `backdrop-filter`, y en Safari eso recorta lo que un
   hijo posicionado pinta fuera de sus límites. El panel cuelga por debajo, así
   que salía con su texto pero sin su fondo, mezclado con el documento. Aquí
   está el `position:relative` del que cuelga el panel, y aquí NO hay filtro. */
.opr-lector .opr-lc-cabecera{position:relative !important; flex:0 0 auto !important; z-index:5 !important}

.opr-lector .opr-lc-barra{flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:16px !important; padding:14px clamp(16px,3vw,28px) !important; background:rgba(255,255,255,.86) !important; backdrop-filter:saturate(180%) blur(14px) !important; -webkit-backdrop-filter:saturate(180%) blur(14px) !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-id{display:flex !important; align-items:center !important; gap:11px !important; min-width:0 !important}
.opr-lector .opr-lc-id i{display:block !important; flex:0 0 auto !important; width:22px !important; height:4px !important; border-radius:999px !important; background:var(--bloque) !important}
.opr-lector .opr-lc-id > b{font-weight:700 !important; font-size:.9375rem !important; letter-spacing:-.012em !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important}
.opr-lector .opr-lc-id > span{color:var(--tenue) !important; font-size:.9375rem !important; white-space:nowrap !important}

.opr-lector .opr-lc-medida{margin-left:auto !important; display:flex !important; align-items:center !important; gap:14px !important}
.opr-lector .opr-lc-pc{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-cerrar{display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; height:38px !important; padding:0 16px !important; border-radius:999px !important; font-weight:600 !important; font-size:.875rem !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; transition:box-shadow .16s,background .16s !important}
.opr-lector .opr-lc-cerrar:hover{background:var(--p100) !important; box-shadow:inset 0 0 0 1px var(--p400) !important}
.opr-lector .opr-lc-cerrar svg{width:15px !important; height:15px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important}

.opr-lector .opr-lc-prog{position:absolute !important; left:0 !important; right:0 !important; bottom:-1px !important; height:2px !important; background:transparent !important}
.opr-lector .opr-lc-prog i{display:block !important; height:100% !important; width:0 !important; background:var(--tinta) !important; transition:width .1s linear !important}

/* ---- Cuerpo ------------------------------------------------------------ */
.opr-lector .opr-lc-cuerpo{flex:1 1 auto !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important}
.opr-lector .opr-lc-caja{width:100% !important; max-width:1240px !important; margin:0 auto !important; padding:clamp(28px,4vw,52px) clamp(18px,4vw,40px) clamp(80px,10vw,120px) !important; display:grid !important; grid-template-columns:236px minmax(0,1fr) !important; gap:clamp(24px,4vw,56px) !important; align-items:start !important}

/* ---- Índice lateral ---------------------------------------------------- */
/* EL ÍNDICE SE DESLIZA POR SU CUENTA, y no es un adorno: en los temas largos
   —el 54 tiene quince apartados— la lista es más alta que la pantalla y sus
   últimas entradas eran inalcanzables. Pegado con `sticky` y sin techo, lo que
   sobresale por abajo no hay forma de traerlo.

   El techo es la ventana menos la barra de arriba menos el aire de los dos
   extremos. La barra la mide `medirBarra()` del lector y la escribe en
   `--lc-barra`; el 66px de reserva es lo que mide hoy en escritorio, y solo
   entra en juego si el guion no llegara a correr.

   `overscroll-behavior:contain` es la otra mitad: sin él, al llegar al final
   del índice la rueda sigue empujando y arrastra el resumen entero. */
.opr-lector .opr-lc-indice{position:sticky !important; top:24px !important; max-height:calc(100dvh - var(--lc-barra, 66px) - 48px) !important; overflow-y:auto !important; overscroll-behavior:contain !important}
.opr-lector .opr-lc-indice .opr-nota{margin-bottom:12px !important; font-weight:600 !important; color:var(--suave) !important}
.opr-lector .opr-lc-lista a{display:flex !important; gap:10px !important; padding:8px 12px !important; border-radius:var(--radio-s) !important; font-size:.9375rem !important; line-height:1.4 !important; color:var(--suave) !important; transition:background .16s,color .16s !important}
.opr-lector .opr-lc-lista a b{font-weight:700 !important; color:var(--p400) !important; font-variant-numeric:tabular-nums !important; transition:color .16s !important}
.opr-lector .opr-lc-lista a:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-lector .opr-lc-lista a.es-activo{background:var(--superficie) !important; color:var(--tinta) !important; font-weight:600 !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}
.opr-lector .opr-lc-lista a.es-activo b{color:var(--bloque) !important}

/* Índice en la barra · solo en pantallas estrechas */
.opr-lector .opr-lc-btindice{display:none !important; align-items:center !important; gap:7px !important; height:38px !important; padding:0 14px !important; border-radius:999px !important; font-weight:600 !important; font-size:.875rem !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; transition:background .16s !important}
.opr-lector .opr-lc-btindice:hover{background:var(--p100) !important}
.opr-lector .opr-lc-btindice svg{width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-btindice[aria-expanded=true] .opr-lc-chevron{transform:rotate(180deg) !important}
.opr-lector .opr-lc-panel{display:none !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important; z-index:3 !important; max-height:64vh !important; overflow-y:auto !important; padding:8px !important; /* El color va literal además de por la variable: si algún día esta hoja se
     sirve sin el núcleo que declara `--superficie`, un fondo que no resuelve
     deja el panel transparente, que es justo el fallo que se venía a arreglar. */
  background:#FFFFFF !important; background:var(--superficie, #FFFFFF) !important; box-shadow:0 18px 40px -24px rgba(18,23,28,.5), inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-panel.es-abierto{display:block !important}

/* ---- Documento --------------------------------------------------------- */
.opr-lector .opr-lc-doc{min-width:0 !important; max-width:74ch !important}
.opr-lector .opr-lc-doc > header{padding-bottom:22px !important; margin-bottom:8px !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-doc > header .opr-rotulo{color:var(--suave) !important}
.opr-lector .opr-lc-doc > header .opr-h2{margin:8px 0 14px !important}
.opr-lector .opr-lc-doc > header .opr-nota{margin-top:16px !important; display:flex !important; flex-wrap:wrap !important; gap:8px 18px !important}
.opr-lector .opr-lc-doc > header .opr-nota span{display:flex !important; align-items:center !important; gap:7px !important}
.opr-lector .opr-lc-doc > header .opr-nota svg{width:15px !important; height:15px !important; stroke:var(--tenue) !important; fill:none !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important}

.opr-lector .opr-lc-sec{padding:38px 0 !important; scroll-margin-top:20px !important}
.opr-lector .opr-lc-sec + .opr-lc-sec{box-shadow:inset 0 1px 0 var(--borde) !important}
.opr-lector .opr-lc-sec > h2{display:flex !important; align-items:baseline !important; gap:12px !important; font-size:clamp(1.35rem,2.6vw,1.75rem) !important; font-weight:800 !important; letter-spacing:-.025em !important; line-height:1.15 !important; text-wrap:balance !important}
.opr-lector .opr-lc-sec > h2 > b{flex:0 0 auto !important; font-size:.9375rem !important; font-weight:700 !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-sec > h3{margin-top:30px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-sec p{margin-top:14px !important; line-height:1.7 !important; text-wrap:pretty !important}
.opr-lector .opr-lc-sec p b,.opr-lector .opr-lc-sec li b,.opr-lector .opr-lc-doc b.opr-lc-fuerte{font-weight:700 !important}

/* Aparición al entrar */
.opr-lector .opr-lc-rev{opacity:0 !important; transform:translateY(14px) !important; transition:opacity .5s cubic-bezier(.32,.72,.16,1), transform .5s cubic-bezier(.32,.72,.16,1) !important}
.opr-lector .opr-lc-rev.es-visto{opacity:1 !important; transform:none !important}

/* ---- Fichas con icono -------------------------------------------------- */
.opr-lector .opr-lc-fichas{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)) !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-ficha{padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-ficha h4{display:flex !important; align-items:center !important; gap:9px !important; font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important}
.opr-lector .opr-lc-ficha svg{flex:0 0 auto !important; width:17px !important; height:17px !important; stroke:var(--tinta) !important; fill:none !important; stroke-width:1.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-ficha > div{margin-top:6px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important}

/* ---- Bloques numerados (generaciones, pasos, capítulos) ---------------- */
.opr-lector .opr-lc-pasos{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)) !important; gap:12px !important; margin-top:20px !important}
.opr-lector .opr-lc-paso{padding:18px 20px 16px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-paso > b{display:inline-block !important; padding:2px 10px !important; border-radius:999px !important; background:var(--p100) !important; color:var(--tinta) !important; font-size:.8125rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-paso h4{margin-top:10px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-paso > div{margin-top:6px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important}
.opr-lector .opr-lc-paso > small{display:block !important; margin-top:10px !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}

/* ---- Figuras: algoritmos y mapa del cuerpo ------------------------------
   Dibujadas desde los datos, no traídas como imagen. Todo lo que se lee aquí
   es texto de verdad: se busca, se amplía y lo lee un lector de pantalla. */
.opr-lector .opr-lc-flujo,.opr-lector .opr-lc-silueta{margin-top:22px !important; padding:20px 20px 18px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-flujotit{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--suave) !important}
.opr-lector .opr-lc-figpie{margin-top:12px !important; font-size:.8125rem !important; line-height:1.5 !important; color:var(--tenue) !important}

.opr-lector .opr-lc-flujopasos{margin-top:14px !important; display:flex !important; flex-direction:column !important; gap:0 !important; list-style:none !important}
.opr-lector .opr-lc-flujonodo{position:relative !important; padding-bottom:26px !important}
.opr-lector .opr-lc-flujonodo:last-child{padding-bottom:0 !important}
/* La flecha entre dos pasos: un trazo y su punta, en pseudoelementos, para que
   no haya un nodo más que leer con lector de pantalla. */
.opr-lector .opr-lc-flujonodo:not(:last-child)::after{content:"" !important; position:absolute !important; left:50% !important; bottom:7px !important; width:1.5px !important; height:19px !important; transform:translateX(-50%) !important; background:var(--borde2) !important}
.opr-lector .opr-lc-flujonodo:not(:last-child)::before{content:"" !important; position:absolute !important; left:50% !important; bottom:5px !important; width:7px !important; height:7px !important; transform:translateX(-50%) rotate(45deg) !important; border-right:1.5px solid var(--borde2) !important; border-bottom:1.5px solid var(--borde2) !important; z-index:1 !important}

.opr-lector .opr-lc-flujocaja{padding:12px 16px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.9375rem !important; line-height:1.5 !important; text-align:center !important}
.opr-lector .opr-lc-flujocaja.es-clave{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-lector .opr-lc-flujocaja > b{display:block !important; margin-bottom:3px !important; font-size:.75rem !important; font-weight:800 !important; letter-spacing:.01em !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-flujocaja.es-clave > b{color:var(--p400) !important}

.opr-lector .opr-lc-flujoq{padding:11px 16px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.9375rem !important; font-weight:700 !important; text-align:center !important}
.opr-lector .opr-lc-flujoramas{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; gap:10px !important; margin-top:14px !important}
.opr-lector .opr-lc-flujorama{padding:12px 15px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-flujorama > b{display:inline-block !important; padding:2px 10px !important; border-radius:999px !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; font-size:.75rem !important; font-weight:800 !important; letter-spacing:.01em !important}
.opr-lector .opr-lc-flujorama > div{margin-top:8px !important; font-size:.90625rem !important; line-height:1.5 !important; color:var(--suave) !important}

/* El mapa del cuerpo. La silueta es esquemática a propósito: lo que enseña es
   dónde cae cada porcentaje, no la anatomía. */
.opr-lector .opr-lc-sillienzo{margin-top:14px !important; display:flex !important; justify-content:center !important}
.opr-lector .opr-lc-sillienzo svg{width:100% !important; max-width:260px !important; height:auto !important}
/* Las zonas son `circle` y `rect`, no `path`: el selector va a la forma, sea
   cual sea. Con `path` a secas la silueta salía negra entera. */
.opr-lector .opr-lc-silzona > :not(text){fill:var(--p100) !important; stroke:var(--borde2) !important; stroke-width:1.4 !important}
.opr-lector .opr-lc-silzona.es-clave > :not(text){fill:var(--p950) !important; stroke:var(--p950) !important}
.opr-lector .opr-lc-silzona text{fill:var(--tinta) !important; font-size:15px !important; font-weight:800 !important; text-anchor:middle !important; dominant-baseline:middle !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-silzona.es-clave text{fill:#fff !important}
.opr-lector .opr-lc-silleyenda{margin-top:14px !important; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important; gap:5px 18px !important; list-style:none !important}
.opr-lector .opr-lc-silleyenda li{font-size:.8125rem !important; line-height:1.5 !important; color:var(--suave) !important}

@media (max-width:520px){
  .opr-lector .opr-lc-flujo,.opr-lector .opr-lc-silueta{padding:16px 14px 14px !important}
  .opr-lector .opr-lc-flujoramas{grid-template-columns:1fr !important}
}

/* ---- Cronología -------------------------------------------------------- */
.opr-lector .opr-lc-crono{margin-top:22px !important; padding-left:22px !important; position:relative !important}
.opr-lector .opr-lc-crono::before{content:"" !important; position:absolute !important; left:3px !important; top:6px !important; bottom:6px !important; width:1px !important; background:var(--borde2) !important}
.opr-lector .opr-lc-hito{position:relative !important; padding-bottom:20px !important}
.opr-lector .opr-lc-hito:last-child{padding-bottom:0 !important}
.opr-lector .opr-lc-hito::before{content:"" !important; position:absolute !important; left:-22px !important; top:7px !important; width:7px !important; height:7px !important; border-radius:999px !important; background:var(--bloque) !important}
.opr-lector .opr-lc-hito > b{display:block !important; font-size:.8125rem !important; font-weight:700 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-hito > div{margin-top:3px !important; line-height:1.6 !important}

/* ---- Artículos agrupados ---------------------------------------------- */
.opr-lector .opr-lc-grupo{margin-top:18px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; overflow:hidden !important}
.opr-lector .opr-lc-grupo > header{display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; gap:6px 12px !important; padding:13px 18px !important; background:var(--p100) !important}
.opr-lector .opr-lc-grupo > header > b{font-size:.875rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-grupo > header > span{font-size:.875rem !important; color:var(--suave) !important}
.opr-lector .opr-lc-arts{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important}
.opr-lector .opr-lc-art{display:flex !important; gap:11px !important; padding:13px 18px !important; font-size:.9375rem !important; line-height:1.55 !important; box-shadow:inset 0 1px 0 var(--borde) !important}
.opr-lector .opr-lc-art > b{flex:0 0 auto !important; align-self:flex-start !important; width:24px !important; height:24px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; background:var(--p100) !important; font-size:.75rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}

/* ---- Tarjeta con lista ------------------------------------------------- */
.opr-lector .opr-lc-puntos{margin-top:16px !important; display:flex !important; flex-direction:column !important; gap:9px !important}
.opr-lector .opr-lc-puntos li{position:relative !important; padding-left:18px !important; font-size:.9375rem !important; line-height:1.6 !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-puntos li::before{content:"" !important; position:absolute !important; left:2px !important; top:.65em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--p400) !important}
.opr-lector .opr-lc-tarjeta{margin-top:20px !important; padding:20px 22px 18px !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}
.opr-lector .opr-lc-tarjeta > header{display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; justify-content:space-between !important; gap:6px 14px !important; padding-bottom:12px !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-tarjeta > header h4{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-tarjeta > header > span{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-tarjeta ul{margin-top:12px !important; display:flex !important; flex-direction:column !important; gap:9px !important}
.opr-lector .opr-lc-tarjeta li{position:relative !important; padding-left:18px !important; font-size:.9375rem !important; line-height:1.6 !important}
.opr-lector .opr-lc-tarjeta li::before{content:"" !important; position:absolute !important; left:2px !important; top:.65em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--p400) !important}
.opr-lector .opr-lc-tarjeta p{font-size:.9375rem !important}

/* ---- Notas ------------------------------------------------------------- */
.opr-lector .opr-lc-nota{margin-top:20px !important; padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important; line-height:1.6 !important; font-size:.9375rem !important}
.opr-lector .opr-lc-nota h4{display:flex !important; align-items:center !important; gap:9px !important; margin-bottom:6px !important; font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important}
.opr-lector .opr-lc-nota svg{flex:0 0 auto !important; width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-nota.es-aviso{background:var(--av-100) !important; color:var(--av-900) !important}
.opr-lector .opr-lc-nota.es-aviso h4{color:var(--av-600) !important}
.opr-lector .opr-lc-nota ul{margin-top:8px !important; display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-lector .opr-lc-nota li{position:relative !important; padding-left:18px !important}
.opr-lector .opr-lc-nota li::before{content:"" !important; position:absolute !important; left:2px !important; top:.62em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:currentColor !important; opacity:.45 !important}

/* ---- Tabla ------------------------------------------------------------- */
.opr-lector .opr-lc-tabla{margin-top:20px !important; overflow-x:auto !important; border-radius:var(--radio-s) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; background:var(--superficie) !important}
.opr-lector .opr-lc-tabla table{min-width:560px !important; font-size:.875rem !important}
.opr-lector .opr-lc-tabla.es-estrecha table{min-width:0 !important}
.opr-lector .opr-lc-tabla.es-estrecha th,.opr-lector .opr-lc-tabla.es-estrecha td{white-space:normal !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-tabla th{padding:12px 14px !important; text-align:left !important; font-weight:700 !important; background:var(--p100) !important; white-space:nowrap !important}
.opr-lector .opr-lc-tabla td{padding:12px 14px !important; vertical-align:top !important; line-height:1.5 !important; box-shadow:inset 0 1px 0 var(--borde) !important}

/* ---- Fichas de repaso final ------------------------------------------- */
.opr-lector .opr-lc-sumario{margin-top:20px !important; display:flex !important; flex-direction:column !important}
.opr-lector .opr-lc-sumario li{display:flex !important; align-items:baseline !important; gap:12px !important; padding:11px 2px !important; box-shadow:inset 0 -1px 0 var(--borde) !important; font-size:.9375rem !important}
.opr-lector .opr-lc-sumario li:last-child{box-shadow:none !important}
.opr-lector .opr-lc-sumario li > span{min-width:0 !important; overflow-wrap:anywhere !important; color:var(--suave) !important; line-height:1.5 !important}
/* El valor nació sin encoger (`flex:0 0 auto`) porque los primeros eran cifras
   cortas. Con un valor largo —«Libertad sexual · erradicar violencias»— y un
   tema hostil, un hijo de flex que no encoge se sale de la pantalla: la misma
   trampa del `min-width:auto` de la rejilla, en otro sitio. Ahora cede y parte
   la línea; lo que no hace nunca es empujar la caja. */
.opr-lector .opr-lc-sumario li > b{margin-left:auto !important; flex:0 1 auto !important; min-width:0 !important; overflow-wrap:anywhere !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important; text-align:right !important}

/* ---- Juego ------------------------------------------------------------- */
.opr-lector .opr-lc-juego{margin-top:26px !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}
.opr-lector .opr-lc-jtop{display:flex !important; align-items:center !important; gap:12px !important}
.opr-lector .opr-lc-jtag{padding:3px 11px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-lector .opr-lc-jpc{margin-left:auto !important; font-size:.8125rem !important; font-weight:700 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-juego h4{margin-top:12px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-jayuda{margin-top:4px !important; font-size:.875rem !important; color:var(--suave) !important}
.opr-lector .opr-lc-jcuerpo{margin-top:16px !important}

.opr-lector .opr-lc-cols{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important}
.opr-lector .opr-lc-col h5{margin-bottom:8px !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-pila{display:flex !important; flex-direction:column !important; gap:8px !important}
.opr-lector .opr-lc-chip{padding:11px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; text-align:left !important; font-size:.875rem !important; line-height:1.45 !important; font-weight:500 !important; min-height:44px !important; box-shadow:inset 0 0 0 1px var(--borde) !important; transition:background .16s,box-shadow .16s,color .16s,transform .12s !important}
.opr-lector .opr-lc-chip:hover{background:var(--p100) !important}
.opr-lector .opr-lc-chip.es-elegido{background:var(--superficie) !important; box-shadow:inset 0 0 0 2px var(--tinta) !important}
.opr-lector .opr-lc-chip.es-bien{background:var(--ok-100) !important; color:var(--ok-900) !important; box-shadow:inset 0 0 0 1px var(--ok-500) !important; cursor:default !important}
.opr-lector .opr-lc-chip.es-mal{background:var(--no-100) !important; color:var(--no-900) !important; box-shadow:inset 0 0 0 1px var(--no-500) !important; animation:opr-lc-tiembla .34s !important}
@keyframes opr-lc-tiembla{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.opr-lector .opr-lc-orden{display:flex !important; flex-direction:column !important; gap:8px !important}
.opr-lector .opr-lc-chip .opr-lc-pos{display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; margin-right:9px !important; border-radius:999px !important; background:var(--ok-500) !important; color:#fff !important; font-size:.6875rem !important; font-weight:700 !important; vertical-align:-4px !important}

.opr-lector .opr-lc-preg{font-size:1.0625rem !important; line-height:1.55 !important; font-weight:500 !important}
.opr-lector .opr-lc-ops{margin-top:12px !important; display:flex !important; flex-direction:column !important; gap:8px !important}
.opr-lector .opr-lc-op{display:flex !important; align-items:center !important; gap:11px !important; padding:12px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; font-size:.9375rem !important; line-height:1.45 !important; min-height:46px !important; box-shadow:inset 0 0 0 1px var(--borde) !important; transition:background .16s,box-shadow .16s,color .16s !important}
.opr-lector .opr-lc-op:hover{background:var(--p100) !important}
.opr-lector .opr-lc-op i{flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; width:22px !important; height:22px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.75rem !important; font-weight:700 !important; font-style:normal !important}
.opr-lector .opr-lc-op.es-bien{background:var(--ok-100) !important; color:var(--ok-900) !important; box-shadow:inset 0 0 0 1px var(--ok-500) !important}
.opr-lector .opr-lc-op.es-bien i{background:var(--ok-500) !important; color:#fff !important}
.opr-lector .opr-lc-op.es-mal{background:var(--no-100) !important; color:var(--no-900) !important; box-shadow:inset 0 0 0 1px var(--no-500) !important}
.opr-lector .opr-lc-op.es-mal i{background:var(--no-500) !important; color:#fff !important}
.opr-lector .opr-lc-sol{margin-top:10px !important; font-size:.875rem !important; color:var(--suave) !important}
.opr-lector .opr-lc-sol > b{color:var(--tinta) !important; font-weight:700 !important}

.opr-lector .opr-lc-jfin{display:none !important; margin-top:16px !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--ok-100) !important; color:var(--ok-900) !important}
.opr-lector .opr-lc-jfin.es-visible{display:block !important}
.opr-lector .opr-lc-jfin > b{display:block !important; font-weight:700 !important}
.opr-lector .opr-lc-jfin p{margin-top:2px !important; font-size:.9375rem !important}
.opr-lector .opr-lc-jreset{margin-top:14px !important; font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important; text-decoration:underline !important; text-underline-offset:3px !important}
.opr-lector .opr-lc-jreset:hover{color:var(--tinta) !important}

/* ---- Cierre ------------------------------------------------------------ */
.opr-lector .opr-lc-cierre{margin-top:40px !important; padding:30px 28px !important; border-radius:var(--radio) !important; background:var(--p950) !important; color:#fff !important}
.opr-lector .opr-lc-cierre h4{font-size:1.3rem !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-lector .opr-lc-cierre p{margin-top:8px !important; color:var(--p400) !important; max-width:52ch !important}
.opr-lector .opr-lc-cierre .opr-btn{margin-top:18px !important}
.opr-lector .opr-lc-firma{margin-top:26px !important; text-align:center !important; color:var(--tenue) !important; font-size:.8125rem !important}

/* ---- Estrecho ---------------------------------------------------------- */
@media (max-width:1000px){
  .opr-lector .opr-lc-caja{grid-template-columns:minmax(0,1fr) !important; gap:0 !important}
  .opr-lector .opr-lc-doc{max-width:none !important}
  .opr-lector .opr-lc-indice{display:none !important}
  .opr-lector .opr-lc-btindice{display:flex !important}
  .opr-lector .opr-lc-panel a.es-activo{box-shadow:none !important; background:var(--p100) !important}
}
@media (max-width:620px){
  .opr-lector .opr-lc-barra{gap:10px !important; padding:11px 14px !important}
  .opr-lector .opr-lc-pc{display:none !important}
  .opr-lector .opr-lc-cerrar > span{display:none !important}
  .opr-lector .opr-lc-cerrar{padding:0 12px !important}
  .opr-lector .opr-lc-btindice{padding:0 12px !important}
  .opr-lector .opr-lc-chip{padding:10px 13px !important; font-size:.875rem !important; min-height:42px !important}
  .opr-lector .opr-lc-pila{gap:6px !important}
  .opr-lector .opr-lc-juego{padding:18px 16px 16px !important}
  .opr-lector .opr-lc-cols{grid-template-columns:1fr !important}
  .opr-lector .opr-lc-col + .opr-lc-col{margin-top:6px !important}
  .opr-lector .opr-lc-id > span{display:none !important}
  .opr-lector .opr-lc-cierre{padding:24px 20px !important}
  .opr-lector .opr-lc-arts{grid-template-columns:1fr !important}
}

/* ==========================================================================
   Bloques nuevos: conceptos, ecuación, línea del tiempo, árbol, versus,
   trucos — y el modo repaso, que los tapa hasta que el alumno los toca.
   ========================================================================== */

.opr-lector .opr-lc-subsec{margin-top:8px !important; color:var(--suave) !important; font-size:.9375rem !important; max-width:62ch !important}

/* ---- Conceptos --------------------------------------------------------- */
.opr-lector .opr-lc-conceptos{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-concepto{padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-concepto h4{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important}
.opr-lector .opr-lc-concepto > div{margin-top:5px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important}

/* ---- Ecuación ---------------------------------------------------------- */
.opr-lector .opr-lc-ecuacion{display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-eq{position:relative !important; flex:1 1 200px !important; min-width:0 !important; padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-eq.es-resultado{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-lector .opr-lc-eqk{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-eq.es-resultado .opr-lc-eqk{color:var(--p400) !important}
.opr-lector .opr-lc-eqt{margin-top:4px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1.25 !important}
.opr-lector .opr-lc-eqd{margin-top:8px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important}
.opr-lector .opr-lc-eq.es-resultado .opr-lc-eqd{color:var(--p400) !important}
.opr-lector .opr-lc-eqop{flex:0 0 auto !important; align-self:center !important; font-size:1.3rem !important; font-weight:800 !important; color:var(--tenue) !important}

/* ---- Línea del tiempo -------------------------------------------------- */
.opr-lector .opr-lc-tiempo{margin-top:20px !important; position:relative !important}
.opr-lector .opr-lc-tiempo::before{content:"" !important; position:absolute !important; left:84px !important; top:10px !important; bottom:10px !important; width:1px !important; background:var(--borde2) !important}
.opr-lector .opr-lc-thito{position:relative !important; display:grid !important; grid-template-columns:74px 20px minmax(0,1fr) !important; align-items:start !important; gap:0 8px !important; padding-bottom:14px !important}
.opr-lector .opr-lc-thito:last-child{padding-bottom:0 !important}
.opr-lector .opr-lc-tanio{text-align:right !important; padding-top:12px !important}
.opr-lector .opr-lc-tanio b{display:block !important; font-size:1rem !important; font-weight:800 !important; letter-spacing:-.02em !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-tanio small{display:block !important; font-size:.75rem !important; color:var(--tenue) !important}
.opr-lector .opr-lc-thito.es-grande .opr-lc-tanio b{font-size:1.3rem !important}
.opr-lector .opr-lc-tpunto{position:relative !important; height:100% !important}
.opr-lector .opr-lc-tpunto::before{content:"" !important; position:absolute !important; left:50% !important; top:17px !important; width:9px !important; height:9px !important; margin-left:-4px !important; border-radius:999px !important; background:var(--bloque) !important; box-shadow:0 0 0 4px var(--fondo) !important}
.opr-lector .opr-lc-tcaja{position:relative !important; padding:12px 16px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-ttit{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important}
.opr-lector .opr-lc-tdet{margin-top:3px !important; font-size:.875rem !important; color:var(--suave) !important; line-height:1.5 !important}

/* ---- Árbol ------------------------------------------------------------- */
.opr-lector .opr-lc-arbol{margin-top:20px !important}
.opr-lector .opr-lc-centro{padding:20px 22px !important; border-radius:var(--radio) !important; background:var(--p950) !important; color:#fff !important; text-align:center !important}
.opr-lector .opr-lc-ck{font-size:.8125rem !important; font-weight:600 !important; color:var(--bloque) !important}
.opr-lector .opr-lc-ct{margin-top:4px !important; font-size:1.3rem !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-lector .opr-lc-cs{margin-top:4px !important; font-size:.875rem !important; color:var(--p400) !important}
.opr-lector .opr-lc-ramas{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; gap:12px !important; margin-top:12px !important; position:relative !important}
.opr-lector .opr-lc-ramas::before{content:"" !important; position:absolute !important; left:50% !important; top:-12px !important; height:12px !important; width:1px !important; background:var(--borde2) !important}
.opr-lector .opr-lc-rama{border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; overflow:hidden !important}
.opr-lector .opr-lc-rcab{display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; padding:14px 16px !important; background:var(--p100) !important}
.opr-lector .opr-lc-rtx{flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important}
.opr-lector .opr-lc-rlab{font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-rtit{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-rn{flex:0 0 auto !important; min-width:24px !important; height:24px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; background:var(--superficie) !important; font-size:.75rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-rcab svg{flex:0 0 auto !important; width:17px !important; height:17px !important; stroke:var(--tinta) !important; fill:none !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transition:transform .2s !important}
.opr-lector .opr-lc-rama.es-abierta .opr-lc-rcab svg{transform:rotate(180deg) !important}
.opr-lector .opr-lc-hojas{display:none !important; padding:8px !important}
.opr-lector .opr-lc-rama.es-abierta .opr-lc-hojas{display:block !important}
.opr-lector .opr-lc-hoja{position:relative !important; padding:12px 14px !important; border-radius:var(--radio-s) !important}
.opr-lector .opr-lc-hoja + .opr-lc-hoja{box-shadow:inset 0 1px 0 var(--borde) !important}
.opr-lector .opr-lc-htit{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important}
.opr-lector .opr-lc-chips{display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:7px !important}
.opr-lector .opr-lc-chipd{padding:3px 10px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.8125rem !important; font-weight:600 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-hnota{margin-top:7px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important}

/* ---- Versus ------------------------------------------------------------ */
.opr-lector .opr-lc-versus{display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center !important; gap:12px !important; margin-top:20px !important}
.opr-lector .opr-lc-vs{position:relative !important; align-self:stretch !important; padding:20px 22px !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-vs.es-noche{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-lector .opr-lc-vsk{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-vs.es-noche .opr-lc-vsk{color:var(--bloque) !important}
.opr-lector .opr-lc-vst{margin-top:2px !important; font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.025em !important}
.opr-lector .opr-lc-vsl{margin-top:12px !important; display:flex !important; flex-direction:column !important; gap:8px !important}
.opr-lector .opr-lc-vsl li{position:relative !important; padding-left:16px !important; font-size:.9375rem !important; line-height:1.5 !important}
.opr-lector .opr-lc-vsl li::before{content:"" !important; position:absolute !important; left:2px !important; top:.6em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--p400) !important}
.opr-lector .opr-lc-vsmid{font-size:.8125rem !important; font-weight:700 !important; color:var(--tenue) !important}

/* ---- Rejilla de fichas -------------------------------------------------- */
/* 184 y no 168: con 168 la columna se quedaba en 169 px a 768 y en 172 a 390,
   y una marca de doce letras —«Organización», del tema 14— se partía por la
   mitad. La marca va a 1.5 rem porque casi siempre es un número; cuando es
   una palabra, lo que hay que dar es ancho, no cuerpo pequeño. */
.opr-lector .opr-lc-rejilla{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)) !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-celda{position:relative !important; padding:16px 14px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; text-align:center !important}
/* LAS CELDAS «DESTACADAS» YA NO VAN EN GRIS (v0.5.102). En una rejilla, las
   celdas con `destacado` salían con fondo gris y las demás en blanco. La idea
   era señalar las más preguntadas, pero sin leyenda no se entendía: parecía un
   fallo de color. Sergio, 2 de octubre de 2026: «todos deberían ser del mismo
   color». La marca sigue en los datos y la clase `es-clave` en el HTML, por si
   un día se quiere señalar de otra forma; hoy no pinta nada. */
/* La marca se mide contra su celda, no contra la raíz. Un número —«24», «a»—
   cabe siempre a 1.5 rem; una palabra de doce letras, no, y con la tipografía
   de un tema hostil menos todavía. `cqw` es un tanto por ciento del ancho de la
   celda, así que la marca baja de cuerpo justo cuando la celda se estrecha y
   nunca por encima de 1.5 rem. Un navegador que no entienda `cqw` descarta la
   declaración entera y se queda en la línea de arriba, que es 1.5 rem. */
.opr-lector .opr-lc-celda{container-type:inline-size !important}
.opr-lector .opr-lc-cmarca{font-size:1.5rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.02em !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-cmarca{font-size:min(1.5rem, 11cqw) !important}
.opr-lector .opr-lc-cmarca.es-rotulo{font-size:.9375rem !important; line-height:1.35 !important; letter-spacing:0 !important; font-variant-numeric:normal !important}
/* La pista va debajo de la marca, en gris y pequeña: acompaña, no compite. */
.opr-lector .opr-lc-cpista{margin-top:2px !important; font-size:.75rem !important; font-weight:600 !important; line-height:1.3 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-ctit{margin-top:8px !important; font-size:.875rem !important; font-weight:700 !important; line-height:1.35 !important}
/* Una celda de la rejilla es hija de una rejilla: sin min-width:0 se niega a
   encoger por debajo de su contenido, y un tema que ponga versalitas y
   espaciado entre letras la saca de la pantalla. Los textos rompen palabra
   antes que desbordar. */
.opr-lector .opr-lc-celda,.opr-lector .opr-lc-cdato{min-width:0 !important}
.opr-lector .opr-lc-ctit,.opr-lector .opr-lc-ccif,.opr-lector .opr-lc-cnota,.opr-lector .opr-lc-clista li{overflow-wrap:anywhere !important}
.opr-lector .opr-lc-ccif{margin-top:4px !important; font-size:.9375rem !important; font-weight:700 !important; color:var(--suave) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-cnota{margin-top:5px !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-clista{margin-top:9px !important; display:flex !important; flex-direction:column !important; gap:6px !important; text-align:left !important}
.opr-lector .opr-lc-clista li{position:relative !important; padding-left:15px !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--suave) !important}
.opr-lector .opr-lc-clista li::before{content:"" !important; position:absolute !important; left:2px !important; top:.6em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--p400) !important}
/* El pie de una ficha de rejilla: separado de la lista por una línea, y con el
   mismo gris tenue de la nota. Se tapa con el resto del dato en modo repaso. */
.opr-lector .opr-lc-cpie{margin-top:9px !important; padding-top:8px !important; border-top:1px solid var(--borde) !important; font-size:.78125rem !important; line-height:1.45 !important; color:var(--tenue) !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-rpie{margin-top:12px !important; padding:12px 16px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important; font-size:.875rem !important; line-height:1.55 !important; color:var(--suave) !important; text-align:center !important}

/* ---- Circuito del poder -------------------------------------------------
   Cajas encadenadas, y entre ellas la flecha con su verbo. Se lee **de arriba
   abajo** y no en fila: la caja del lector mide 741 px, no los 1180 de la
   página, y en un móvil una fila de tres cajas no cabe de ninguna manera. Es
   el mismo tropiezo de los `pasos` del tema 2 y de los actos del 11.
   ------------------------------------------------------------------------ */
/* Dos columnas: la cadena en la izquierda y la rama en la derecha. Con la
   cadena en su propia columna, la flecha de «designa y separa» cae justo
   debajo del Lehendakari y no entre él y el Rey, que es lo que se leía mal. */
.opr-lector .opr-lc-cir{margin-top:20px !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:center !important; justify-items:center !important}
.opr-lector .opr-lc-cir > *{grid-column:1 !important; width:100% !important; max-width:440px !important}
.opr-lector .opr-lc-cirbox{position:relative !important; width:100% !important; max-width:440px !important; padding:16px 18px !important; text-align:center !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-cirbox.es-clave{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-lector .opr-lc-cirbox,.opr-lector .opr-lc-cirdato{min-width:0 !important}
.opr-lector .opr-lc-cirk{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-cirbox.es-clave .opr-lc-cirk{color:var(--p300) !important}
.opr-lector .opr-lc-cirt{margin-top:2px !important; font-size:1.125rem !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.25 !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-cird{margin-top:5px !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--tenue) !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-cirbox.es-clave .opr-lc-cird{color:var(--p300) !important}

.opr-lector .opr-lc-cirfle{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:5px !important; padding:11px 0 !important}
.opr-lector .opr-lc-cirpta{display:block !important; position:relative !important; width:2px !important; height:26px !important; background:var(--p400) !important}
.opr-lector .opr-lc-cirpta::after{content:"" !important; position:absolute !important; left:50% !important; bottom:1px !important; width:7px !important; height:7px !important; margin-left:-4px !important; border-right:2px solid var(--p400) !important; border-bottom:2px solid var(--p400) !important; transform:rotate(45deg) !important}
/* `es-atras` es la flecha que en el original apuntaba al revés: la acción va
   del de abajo al de arriba —el Rey nombra al Lehendakari—. */
.opr-lector .opr-lc-cirfle.es-atras .opr-lc-cirpta::after{top:1px !important; bottom:auto !important; transform:rotate(-135deg) !important}
.opr-lector .opr-lc-cirlab{font-size:.75rem !important; font-weight:700 !important; color:var(--suave) !important; text-align:center !important}
/* La rama lateral: el Rey entra en la cadena, no forma parte de ella. Va al
   costado de la caja principal, con la flecha apuntando hacia ella. */
.opr-lector .opr-lc-cirfila{display:contents !important}
.opr-lector .opr-lc-cirfila > .opr-lc-cirbox{grid-column:1 !important; width:100% !important; max-width:440px !important}
.opr-lector .opr-lc-cirlat{grid-column:2 !important; display:flex !important; align-items:center !important; gap:9px !important; width:100% !important; min-width:0 !important; padding-left:6px !important}
.opr-lector .opr-lc-cirfle.es-lat{flex:0 0 auto !important; flex-direction:row !important; align-items:center !important; gap:7px !important; padding:0 !important}
.opr-lector .opr-lc-cirfle.es-lat .opr-lc-cirpta{width:28px !important; height:2px !important}
.opr-lector .opr-lc-cirfle.es-lat .opr-lc-cirpta::after{left:1px !important; top:50% !important; bottom:auto !important; margin:-4px 0 0 0 !important; transform:rotate(135deg) !important}
.opr-lector .opr-lc-cirbox.es-lateral{flex:1 1 auto !important; min-width:0 !important; padding:13px 15px !important; background:var(--fondo) !important}
.opr-lector .opr-lc-cirbox.es-lateral .opr-lc-cirt{font-size:1rem !important}

.opr-lector .opr-lc-cirbuc{display:flex !important; align-items:center !important; gap:9px !important; width:100% !important; max-width:440px !important; margin-top:14px !important; padding:11px 15px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important; font-size:.8125rem !important; line-height:1.45 !important; color:var(--suave) !important}
.opr-lector .opr-lc-cirbuc svg{flex:0 0 auto !important; width:15px !important; height:15px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important}

/* ---- Paneles ------------------------------------------------------------
   Contenedor de dos vistas bajo un mismo apartado, cada una con su cabecera y
   su artículo. Dentro va un bloque de los de siempre.
   ------------------------------------------------------------------------ */
.opr-lector .opr-lc-duo{margin-top:20px !important; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)) !important; gap:12px !important}
.opr-lector .opr-lc-duopan{min-width:0 !important; padding:16px 18px 18px !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-duocab{display:flex !important; align-items:center !important; gap:9px !important; flex-wrap:wrap !important}
.opr-lector .opr-lc-duoet{padding:3px 9px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.75rem !important; font-weight:700 !important; color:var(--bloque) !important}
.opr-lector .opr-lc-duotit{font-size:.9375rem !important; font-weight:700 !important; overflow-wrap:anywhere !important}
/* Dentro de un panel la rejilla es más estrecha: la columna mide la mitad. Y
   por eso la marca baja de cuerpo. Una marca de la rejilla suele ser un número
   —«24», «a»— y a 1.5rem cabe en cualquier celda; aquí es un nombre propio, y
   «Guipúzcoa» a ese cuerpo no cabe en 147 px: se partía por la mitad. Se vio
   en el sitio y no en la vista previa, porque el ancho de la caja del lector
   depende de la ventana. */
.opr-lector .opr-lc-duopan .opr-lc-rejilla{margin-top:13px !important; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)) !important}
.opr-lector .opr-lc-duopan .opr-lc-celda{background:var(--fondo) !important; padding:14px 10px !important}
.opr-lector .opr-lc-duopan .opr-lc-cmarca{font-size:min(1.25rem, 13cqw) !important}
.opr-lector .opr-lc-duopan .opr-lc-rpie{text-align:left !important}

/* ---- Figura -------------------------------------------------------------
   Un dibujo con nombre y sus capas en orden. Aquí el color no decora: la
   ikurriña se pregunta por sus colores y por cuál va encima, así que es dato.
   Es la misma excepción del punto 2.6 del documento 01 que deja el morado de
   Nutrisarmi en su logotipo: el color de una marca ajena no es decoración.
   ------------------------------------------------------------------------ */
.opr-lector .opr-lc-figura{margin-top:13px !important; display:flex !important; justify-content:center !important}
/* El borde no es adorno: la cruz blanca de la ikurriña llega hasta el filo, y
   sobre un panel claro el paño se quedaría sin contorno y se leerían cuatro
   cuartos sueltos en vez de una bandera. */
.opr-lector .opr-lc-figura svg{width:100% !important; max-width:222px !important; height:auto !important; border-radius:4px !important; box-shadow:0 0 0 1px var(--borde2) !important}
.opr-lector .opr-lc-ikf{fill:#D52B1E !important}
.opr-lector .opr-lc-ika{fill:none !important; stroke:#009B48 !important; stroke-width:6 !important}
.opr-lector .opr-lc-ikc{fill:none !important; stroke:#fff !important; stroke-width:6 !important}
.opr-lector .opr-lc-capas{position:relative !important; margin-top:13px !important; display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-lector .opr-lc-capa{display:flex !important; align-items:center !important; gap:9px !important; min-width:0 !important; font-size:.8125rem !important; line-height:1.4 !important}
.opr-lector .opr-lc-cappt{flex:0 0 auto !important; width:11px !important; height:11px !important; border-radius:999px !important; box-shadow:inset 0 0 0 1px var(--borde2) !important}
.opr-lector .opr-lc-cappt.es-c1{background:#D52B1E !important}
.opr-lector .opr-lc-cappt.es-c2{background:#009B48 !important}
.opr-lector .opr-lc-cappt.es-c3{background:#fff !important}
.opr-lector .opr-lc-capk{flex:0 0 auto !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-capv{min-width:0 !important; font-weight:600 !important; overflow-wrap:anywhere !important}

/* ---- Trucos ------------------------------------------------------------ */
.opr-lector .opr-lc-trucos{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-truco{padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important}
.opr-lector .opr-lc-truco h4{display:flex !important; align-items:center !important; gap:8px !important; font-size:.9375rem !important; font-weight:700 !important}
.opr-lector .opr-lc-truco svg{flex:0 0 auto !important; width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-truco p{margin-top:6px !important; font-size:.875rem !important; line-height:1.55 !important; color:var(--suave) !important}

/* ---- Línea del tiempo --------------------------------------------------
   Recurso propio desde el tema 11. Todo va prefijado con `.opr-lc-ln-`, que
   es la norma del punto 7 del manual: una clase suelta empata en
   especificidad con el reset del núcleo y con el blindaje puesto pierde por
   orden de hojas, que LiteSpeed puede cambiar.
   ------------------------------------------------------------------------ */
.opr-lector .opr-lc-ln-mando{display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px 16px !important; margin-top:20px !important}
.opr-lector .opr-lc-ln-nota{flex:1 1 100% !important; max-width:62ch !important; font-size:.875rem !important; line-height:1.55 !important; color:var(--suave) !important}
.opr-lector .opr-lc-ln-cuenta{font-variant-numeric:tabular-nums !important}

/* Los cuatro actos: el resumen de la película, siempre a la vista. */
/* Cuatro actos, cuatro columnas. Con 210 px de mínimo salían 3+1 en el ancho
   real de la caja del lector —741 px—, que es el mismo tropiezo de los pasos
   del tema 2. A 168 entran los cuatro y siguen legibles. */
.opr-lector .opr-lc-ln-actos{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) !important; gap:10px !important; margin-top:20px !important}
.opr-lector .opr-lc-ln-acto{padding:18px 20px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-ln-an{font-size:.8125rem !important; font-weight:700 !important; color:var(--bloque) !important}
.opr-lector .opr-lc-ln-ay{margin-top:2px !important; font-size:.875rem !important; font-weight:600 !important; color:var(--tenue) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-ln-at{margin-top:6px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-ln-acto p{margin-top:6px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important}

/* El raíl. Tres columnas: el año, la línea con su punto, y el hito. */
.opr-lector .opr-lc-ln-rail{margin-top:20px !important; position:relative !important}
.opr-lector .opr-lc-ln-rail::before{content:"" !important; position:absolute !important; left:106px !important; top:8px !important; bottom:8px !important; width:1px !important; background:var(--borde2) !important}
.opr-lector .opr-lc-ln-hito{position:relative !important; display:grid !important; grid-template-columns:96px 20px minmax(0,1fr) !important; align-items:start !important; gap:0 8px !important; padding-bottom:12px !important}
.opr-lector .opr-lc-ln-anio{position:relative !important; padding:12px 10px 12px 0 !important; text-align:right !important}
.opr-lector .opr-lc-ln-anio b{display:block !important; font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:-.02em !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-ln-anio small{display:block !important; margin-top:2px !important; font-size:.75rem !important; line-height:1.35 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-ln-hito.es-clave .opr-lc-ln-anio b{font-size:1.3rem !important; color:var(--bloque) !important}
.opr-lector .opr-lc-ln-punto{position:relative !important; height:100% !important}
.opr-lector .opr-lc-ln-punto::before{content:"" !important; position:absolute !important; left:50% !important; top:17px !important; width:9px !important; height:9px !important; margin-left:-4px !important; border-radius:999px !important; background:var(--bloque) !important; box-shadow:0 0 0 4px var(--fondo) !important}
.opr-lector .opr-lc-ln-hito.es-clave .opr-lc-ln-punto::before{width:13px !important; height:13px !important; margin-left:-6px !important; top:15px !important}
.opr-lector .opr-lc-ln-caja{position:relative !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-ln-hito.es-clave .opr-lc-ln-caja{box-shadow:inset 0 0 0 1px var(--borde2) !important}
.opr-lector .opr-lc-ln-t{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.01em !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-ln-d{margin-top:4px !important; font-size:.875rem !important; line-height:1.55 !important; color:var(--suave) !important; overflow-wrap:anywhere !important}
/* Una palabra larga dentro de la caja de un hito no puede sacar la línea del
   tiempo de la pantalla. Lo enseñó el tema 40 a 390 px, con el CSS blindado y
   un tema hostil: «afrancesados/liberales» no cabe y no rompe por la barra, y
   el lector se iba 6 px. El bloque nació en el tema 11 y es el único de su
   familia que se había quedado sin esta línea; la rejilla, el sumario, la
   tabla y las cifras la llevan desde su propio tropiezo. */
.opr-lector .opr-lc-ln-at,.opr-lector .opr-lc-ln-acto p,
.opr-lector .opr-lc-ln-era span,.opr-lector .opr-lc-ln-era p{overflow-wrap:anywhere !important}
/* El rótulo de acto parte el raíl: es el cambio de escena. Va `relative`
   para que se pinte por encima de la línea, que es absoluta y si no la
   cruza por dentro de la banda oscura. */
.opr-lector .opr-lc-ln-era{position:relative !important; margin:6px 0 14px !important; padding:14px 18px !important; border-radius:var(--radio-s) !important; background:var(--p950) !important; color:#fff !important}
.opr-lector .opr-lc-ln-era b{font-size:.8125rem !important; font-weight:700 !important; color:var(--bloque) !important}
.opr-lector .opr-lc-ln-era span{margin-left:8px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-ln-era p{margin-top:4px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--p400) !important}
/* El enlace causal: por qué el hito de debajo viene detrás del de arriba. */
.opr-lector .opr-lc-ln-enlace{padding:0 0 12px 126px !important}
.opr-lector .opr-lc-ln-enlace span{font-size:.8125rem !important; line-height:1.45 !important; color:var(--tenue) !important}

/* La escalera de los tratados. Cada peldaño sube un escalón de verdad. */
.opr-lector .opr-lc-ln-escalera{display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:20px !important}
.opr-lector .opr-lc-ln-peldano{display:grid !important; grid-template-columns:82px minmax(0,1fr) !important; align-items:stretch !important; gap:8px !important; margin-left:calc(var(--peldano,0) * 18px) !important}
.opr-lector .opr-lc-ln-py{position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:14px 10px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important}
.opr-lector .opr-lc-ln-py b{font-size:1.3rem !important; font-weight:800 !important; letter-spacing:-.02em !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-ln-peldano.es-clave .opr-lc-ln-py{background:var(--p950) !important; color:#fff !important}
.opr-lector .opr-lc-ln-peldano.es-clave .opr-lc-ln-py b{color:var(--bloque) !important}
.opr-lector .opr-lc-ln-pt{position:relative !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important}
.opr-lector .opr-lc-ln-pv{font-size:.9375rem !important; font-weight:700 !important}
.opr-lector .opr-lc-ln-pd{margin-top:3px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important}

/* Las fechas trampa: pregunta a la izquierda, respuesta tapable a la derecha. */
.opr-lector .opr-lc-ln-pares{display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:20px !important}
.opr-lector .opr-lc-ln-par{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; align-items:stretch !important; gap:8px !important}
.opr-lector .opr-lc-ln-preg{display:flex !important; align-items:center !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important; font-size:.9375rem !important; line-height:1.45 !important}
.opr-lector .opr-lc-ln-resp{position:relative !important; display:flex !important; align-items:center !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.9375rem !important; font-weight:600 !important; line-height:1.45 !important}

@media (max-width:720px){
  .opr-lector .opr-lc-ln-rail::before{left:74px !important}
  .opr-lector .opr-lc-ln-hito{grid-template-columns:64px 20px minmax(0,1fr) !important}
  .opr-lector .opr-lc-ln-enlace{padding-left:94px !important}
  .opr-lector .opr-lc-ln-peldano{margin-left:0 !important; grid-template-columns:64px minmax(0,1fr) !important}
  .opr-lector .opr-lc-ln-par{grid-template-columns:minmax(0,1fr) !important}
}

/* ---- Modo repaso ------------------------------------------------------- */
.opr-lector .opr-lc-btrepaso{display:flex !important; align-items:center !important; gap:7px !important; height:38px !important; padding:0 14px !important; border-radius:999px !important; font-weight:600 !important; font-size:.875rem !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; transition:background .16s !important}
.opr-lector .opr-lc-btrepaso:hover{background:var(--p100) !important}
/* El botón solo existe donde hay datos que tapar. `hidden` no basta: el
   blindaje pone `display:flex !important` y se lo lleva por delante. Es la
   trampa nº 3 del manual, y ya ha pasado dos veces. */
.opr-lector .opr-lc-btrepaso[hidden]{display:none !important}
.opr-lector .opr-lc-btrepaso svg{width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector.es-repaso .opr-lc-btrepaso{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}
.opr-lector .opr-lc-pista{display:none !important}
.opr-lector .opr-lc-tapa.es-tapado{cursor:pointer !important}
.opr-lector .opr-lc-tapa.es-tapado > *:not(.opr-lc-pista){opacity:.06 !important; filter:blur(3px) !important; pointer-events:none !important; user-select:none !important}
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-htit,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-eqt,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-eqk,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-vsk,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-vst,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-cpista,
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-cmarca{opacity:1 !important; filter:none !important}
/* El trazo de la flecha del circuito tampoco: lo que se tapa es el verbo,
   no la cadena. Sin trazo, el dibujo deja de contar quién va antes. */
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-cirpta{opacity:1 !important; filter:none !important}
.opr-lector .opr-lc-tapa.es-tapado > .opr-lc-pista{display:block !important; position:absolute !important; left:50% !important; bottom:12px !important; transform:translateX(-50%) !important; padding:4px 12px !important; border-radius:999px !important; background:var(--p100) !important; color:var(--suave) !important; font-size:.75rem !important; font-weight:600 !important; white-space:nowrap !important}
.opr-lector .opr-lc-tapa.es-tapado{padding-bottom:42px !important}

@media (max-width:820px){
  /* En la barra no caben tres botones con texto: el de repaso se queda en icono. */
  .opr-lector .opr-lc-btrepaso > span{display:none !important}
  .opr-lector .opr-lc-btrepaso{padding:0 12px !important}
}
@media (max-width:720px){
  /* La rama **no** se apila debajo, ni en un móvil. Apilada, la flecha de
     «designa y separa» quedaría justo debajo del Rey y parecería salir de
     él: quien designa y separa a los consejeros es el Lehendakari. Se
     aprieta, que es lo único que aquí se puede ceder. */
  .opr-lector .opr-lc-cir{column-gap:0 !important}
  .opr-lector .opr-lc-cirbox{padding:13px 12px !important}
  .opr-lector .opr-lc-cirt{font-size:1rem !important}
  /* El verbo no cabe al lado de la flecha en una columna de 170 px, así que
     se pone encima de la caja. No se quita: es el dato que pregunta el test. */
  .opr-lector .opr-lc-cirlat{flex-direction:column !important; align-items:flex-start !important; gap:4px !important; padding-left:8px !important}
  .opr-lector .opr-lc-cirfle.es-lat{gap:6px !important}
  .opr-lector .opr-lc-cirfle.es-lat .opr-lc-cirpta{width:20px !important}
  .opr-lector .opr-lc-cirbox.es-lateral{width:100% !important}
  .opr-lector .opr-lc-cirbox.es-lateral{padding:11px 10px !important}
  .opr-lector .opr-lc-cirbox.es-lateral .opr-lc-cirt{font-size:.9375rem !important}
  .opr-lector .opr-lc-versus{grid-template-columns:1fr !important}
  .opr-lector .opr-lc-vsmid{justify-self:center !important}
  .opr-lector .opr-lc-ecuacion{flex-direction:column !important}
  .opr-lector .opr-lc-eqop{align-self:flex-start !important}
  .opr-lector .opr-lc-tiempo::before{left:60px !important}
  .opr-lector .opr-lc-thito{grid-template-columns:52px 18px minmax(0,1fr) !important}
}

/* ---- Espera mientras llega el contenido del recurso -------------------- */
.opr-lector .opr-lc-espera{display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:16px !important; min-height:50vh !important; color:var(--suave) !important; text-align:center !important}
.opr-lector .opr-lc-rueda{width:26px !important; height:26px !important; border-radius:999px !important; box-shadow:inset 0 0 0 2px var(--borde2) !important; border-top:2px solid var(--tinta) !important; animation:opr-lc-gira .8s linear infinite !important}
@keyframes opr-lc-gira{to{transform:rotate(360deg)}}


/* --- las ilustraciones del temario ---                            v0.5.52
   Fotogramas de un personaje sobre fondo transparente, no diagramas: se
   centran, respiran por arriba y por abajo, y llevan su pie debajo.

   EL TOPE DE ANCHO NO ES ESTÉTICO, ES DE NITIDEZ. Los originales miden entre
   267 y 369 px de lado útil y se guardan al doble para que aguanten una
   pantalla retina. Estirarlos más allá de ese doble los emborrona, así que el
   tope de 420 px es el que hay y no se sube. Por debajo de ese tope, el ancho
   de cada imagen lo pone el guion en línea: ver el bloque `foto` del lector. */
.opr-lector .opr-lc-foto{margin:18px 0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important}
/* `width:100%` Y NO `width:auto`, y esto costó una versión. La figura es un
   contenedor flex en columna con `align-items:center`, así que la imagen no se
   estira: su ancho es el de su contenido. Y una imagen con `loading="lazy"`
   que todavía no ha cargado NO TIENE contenido, así que medía cero; con cero
   de área el navegador la da por fuera de pantalla y **no la carga nunca**.
   Quedaban las cuatro en blanco con el fichero servido y todo. Con `width:100%`
   el ancho lo pone el contenedor, el `max-width` en línea lo limita, y la carga
   se dispara. */
.opr-lector .opr-lc-foto img{display:block !important; width:100% !important; height:auto !important; max-width:min(100%,420px) !important}
/* NI UN `max-height` AQUÍ, y esto también costó una versión. Con un tope de
   alto, una imagen cuyo ancho ya está limitado por la pantalla —un móvil de
   390— se queda con el ancho de la columna y el alto del tope, que no son su
   proporción: sale aplastada. El alto lo decide la proporción y punto; quien
   manda es el `max-width` en línea, que el guion calcula desde el alto que
   queremos y las medidas del fichero. */
.opr-lector .opr-lc-foto figcaption{font-size:.875rem !important; line-height:1.5 !important; color:var(--tenue) !important; text-align:center !important; max-width:52ch !important; margin:0 !important}


/* ---- Marca de agua de los recursos de leer ------------------------------
   Decisión de Sergio, 28 de septiembre de 2026: «solo logo y 3,5 %». El
   logotipo de OpoReal repetido en diagonal por toda la lectura del resumen,
   los conceptos, el mapa mental, la línea del tiempo y la mnemotecnia. Los
   test, flashcards y verdadero o falso no la llevan: no son material de leer.

   VA ENCIMA DE LA LECTURA, NO DETRÁS, y es a propósito: las tarjetas del
   lector tienen fondo propio y taparían una marca puesta en el fondo, que
   solo asomaría en los huecos —en una captura de un bloque de tarjetas no
   saldría nada—. Encima, sin eventos (`pointer-events:none`) y MULTIPLICANDO:
   una capa en multiplicar oscurece el papel y deja la tinta como estaba, así
   que el texto negro no pierde contraste. Sobre una tarjeta oscura no se ve,
   y se acepta.

   Se pinta sobre `.opr-lc-caja`, que es la que crece con el contenido: puesta
   en `.opr-lc-cuerpo`, que es la que se desliza, solo cubriría la primera
   pantalla. Por eso `.opr-lc-caja` pasa a `position:relative`. Nada dentro
   dependía de que no lo fuera: todos los `absolute` del lector cuelgan de su
   propio padre.

   Sin personalizar: ni nombre ni código de alumno. Se probaron las dos cosas
   en la vista previa y Sergio eligió solo el logo, igual que en psicotécnicos.
   La tesela la dibuja `hacer_agua.py`. */
/* agua:inicio · lo escribe hacer_agua.py, no se toca a mano */
.opr-lector{--opr-lc-agua:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='230' viewBox='0 0 340 230'%3E%3Cdefs%3E%3Cg id='m' fill='%2312171C'%3E%3Cg transform='translate(-60.7,0)'%3E%3Csvg x='0' y='-20.0' width='29.7' height='40.0' viewBox='0 0 1192 1608'%3E%3Cg transform='translate(0,1608) scale(0.1,-0.1)'%3E%3Cpath d='M5914 15819 c-28 -14 -49 -52 -67 -125 -9 -34 -29 -83 -46 -109 -16 -26 -33 -61 -37 -79 -3 -17 -24 -64 -45 -104 -22 -41 -39 -81 -39 -90 0 -10 -18 -53 -40 -96 -22 -43 -40 -86 -40 -95 0 -9 -17 -54 -39 -101 -61 -135 -123 -293 -192 -488 -16 -45 -39 -103 -52 -130 -13 -26 -29 -69 -36 -96 -7 -27 -23 -69 -36 -95 -13 -26 -31 -74 -40 -106 -10 -33 -30 -85 -45 -115 -15 -30 -33 -77 -39 -105 -7 -27 -25 -72 -41 -100 -15 -27 -33 -68 -40 -90 -7 -22 -25 -62 -40 -90 -15 -27 -33 -67 -40 -88 -8 -26 -30 -53 -73 -88 -33 -28 -76 -58 -96 -66 -20 -8 -62 -28 -94 -45 -32 -16 -82 -36 -110 -45 -29 -8 -70 -25 -92 -38 -23 -13 -69 -31 -104 -40 -35 -9 -79 -27 -100 -40 -20 -13 -62 -30 -94 -39 -33 -8 -76 -26 -97 -40 -20 -13 -57 -30 -81 -36 -24 -7 -66 -24 -94 -40 -27 -15 -68 -33 -90 -40 -22 -7 -59 -23 -83 -37 -24 -13 -68 -33 -99 -44 -31 -10 -75 -30 -97 -43 -23 -13 -61 -29 -86 -36 -25 -6 -61 -22 -80 -34 -19 -13 -60 -31 -90 -41 -30 -10 -80 -30 -110 -46 -30 -15 -75 -33 -100 -39 -25 -7 -74 -27 -109 -46 -35 -19 -72 -34 -81 -34 -9 0 -43 -13 -76 -30 -33 -16 -79 -36 -103 -45 -25 -8 -50 -20 -58 -26 -18 -16 -16 -43 5 -61 18 -15 120 -58 187 -79 22 -6 63 -25 90 -40 28 -16 70 -35 93 -43 24 -9 55 -24 70 -34 15 -10 43 -24 62 -31 38 -14 191 -86 280 -131 30 -15 73 -33 95 -40 22 -7 58 -24 80 -38 22 -14 60 -31 84 -39 25 -7 67 -26 95 -42 28 -15 69 -34 91 -41 22 -7 58 -23 80 -36 22 -12 67 -33 100 -45 33 -12 72 -30 87 -41 15 -10 52 -27 83 -38 31 -11 69 -29 85 -40 16 -11 54 -29 84 -40 30 -10 75 -30 99 -44 24 -14 64 -32 90 -40 25 -7 59 -23 76 -35 17 -12 55 -30 86 -41 89 -31 178 -103 196 -159 6 -20 24 -57 40 -82 16 -25 36 -69 44 -96 8 -28 25 -62 36 -77 12 -15 30 -55 41 -88 10 -34 27 -75 37 -92 11 -17 28 -60 39 -96 11 -36 34 -94 51 -130 17 -36 31 -74 31 -86 0 -12 15 -50 34 -85 18 -35 41 -90 50 -122 9 -32 26 -72 37 -90 10 -18 24 -50 30 -72 5 -22 28 -79 50 -127 78 -174 117 -264 130 -298 7 -19 22 -53 35 -75 12 -22 27 -58 34 -80 7 -22 28 -62 47 -89 18 -26 33 -55 33 -63 0 -8 18 -49 40 -91 22 -42 56 -113 75 -157 54 -119 58 -127 78 -139 12 -8 22 -8 35 0 15 10 30 45 93 229 12 33 29 71 39 85 9 14 26 50 38 80 11 31 34 83 51 117 17 33 31 67 31 75 0 7 15 45 33 83 19 39 40 88 47 110 7 22 25 65 40 95 15 30 37 87 49 127 12 40 25 75 31 78 5 3 21 45 36 93 14 48 36 107 49 132 12 25 30 72 40 105 9 33 26 77 37 100 12 22 31 71 44 109 13 38 30 79 38 91 8 12 22 49 32 81 9 32 29 84 45 114 15 30 33 75 39 100 7 25 21 57 32 73 11 15 30 54 43 87 13 33 37 78 54 98 29 38 161 123 211 137 14 4 44 18 68 32 24 13 66 32 95 42 29 10 69 30 90 44 21 14 55 31 75 38 35 11 105 45 262 124 36 18 83 38 105 45 22 7 54 23 70 35 17 13 41 26 55 30 23 7 114 48 285 130 69 32 213 100 330 155 33 16 103 48 155 73 52 25 106 48 120 52 14 4 44 18 68 31 23 14 96 44 163 68 117 43 159 67 159 91 0 16 -30 41 -60 50 -23 6 -59 22 -275 117 -38 17 -112 51 -162 74 -51 24 -95 44 -98 44 -7 0 -180 81 -255 119 -30 16 -73 34 -95 41 -22 7 -58 23 -81 36 -22 13 -65 32 -95 43 -30 10 -77 30 -104 44 -28 14 -71 30 -95 37 -25 6 -59 20 -76 31 -17 10 -75 35 -130 55 -213 78 -322 117 -399 144 -44 16 -111 45 -150 64 -38 20 -75 36 -80 36 -6 0 -32 18 -59 40 -52 43 -122 149 -142 216 -7 23 -26 68 -42 100 -17 33 -36 79 -42 104 -6 25 -22 63 -35 85 -13 22 -31 67 -40 100 -10 33 -26 74 -36 90 -10 17 -31 67 -47 110 -30 80 -64 165 -104 260 -11 28 -33 85 -49 127 -15 43 -38 96 -50 119 -11 23 -27 64 -35 91 -8 26 -30 80 -49 120 -19 40 -35 78 -35 85 0 6 -15 47 -34 90 -18 43 -39 95 -46 116 -6 20 -27 67 -46 103 -19 36 -34 73 -34 83 0 9 -13 37 -28 62 -15 24 -36 64 -46 89 -10 25 -30 65 -46 90 -15 25 -35 71 -44 102 -10 34 -24 62 -36 68 -22 12 -19 12 -46 -1z'/%3E%3Cpath d='M532 12263 c-47 -7 -94 -19 -106 -26 -12 -8 -44 -36 -72 -63 -95 -90 -87 165 -92 -2727 -4 -2492 -2 -2700 27 -2867 6 -30 18 -109 27 -175 9 -66 27 -147 39 -180 12 -33 30 -94 40 -135 10 -41 28 -96 41 -122 13 -25 32 -78 43 -118 11 -39 29 -86 41 -105 11 -18 29 -59 40 -91 11 -32 27 -65 34 -73 8 -9 29 -45 46 -81 38 -80 119 -219 185 -317 17 -24 41 -62 55 -83 79 -122 229 -324 290 -391 14 -15 45 -50 70 -78 113 -129 234 -251 475 -479 222 -210 492 -471 690 -667 62 -62 410 -393 525 -500 112 -105 493 -472 700 -675 91 -89 255 -248 365 -353 253 -243 436 -420 539 -522 423 -415 913 -883 1091 -1041 44 -39 94 -79 110 -88 17 -9 41 -25 55 -36 57 -46 257 -63 404 -35 121 23 178 67 501 385 444 436 745 730 970 945 114 110 263 254 330 320 68 66 304 298 525 515 221 217 545 537 720 710 175 173 529 522 786 775 257 253 521 521 587 595 66 74 132 147 146 161 14 15 51 59 81 99 30 39 70 90 88 112 17 22 32 44 32 49 0 4 14 25 32 44 36 42 83 115 127 197 17 31 35 59 41 63 10 6 32 45 125 223 22 43 45 86 52 97 26 45 94 194 117 255 13 36 33 88 44 115 11 28 29 77 40 110 11 33 27 78 35 101 9 23 23 83 32 135 8 52 22 119 29 149 41 155 41 146 38 2940 l-3 2685 -28 60 c-40 84 -104 146 -172 165 -49 14 -1416 15 -1453 1 -15 -6 -49 -29 -75 -51 -25 -22 -89 -77 -141 -121 -52 -45 -124 -109 -160 -143 -36 -35 -120 -112 -187 -173 -178 -163 -271 -258 -283 -288 -14 -36 -4 -64 26 -75 32 -12 1119 -22 1179 -11 61 11 95 3 105 -25 13 -33 5 -48 -39 -77 -64 -42 -850 -818 -2411 -2377 -476 -476 -996 -989 -1155 -1140 -160 -151 -306 -291 -325 -310 -19 -19 -104 -101 -189 -180 -210 -197 -301 -288 -301 -300 0 -10 -71 -50 -90 -50 -7 0 -66 55 -133 123 -67 67 -158 156 -202 197 -142 132 -800 767 -995 960 -70 69 -272 267 -451 440 -578 562 -720 701 -974 950 -469 460 -690 675 -929 905 -131 127 -323 314 -427 416 -251 248 -348 339 -385 361 -38 22 -62 73 -48 96 9 14 53 16 335 18 292 2 536 11 838 30 86 6 108 11 129 29 19 16 24 27 19 47 -4 14 -107 124 -249 264 -133 131 -299 296 -369 366 -96 97 -135 129 -165 137 -59 17 -1321 20 -1432 4z m780 -2104 c13 -5 33 -24 46 -42 12 -18 96 -104 187 -192 91 -88 489 -482 885 -875 930 -926 1403 -1391 1901 -1870 129 -124 277 -268 329 -320 314 -315 1238 -1213 1496 -1455 18 -16 106 -100 196 -186 89 -86 198 -186 240 -223 42 -37 80 -77 83 -87 4 -11 4 -32 0 -47 -4 -17 -96 -116 -243 -262 -130 -129 -270 -271 -310 -315 -80 -88 -113 -108 -151 -93 -33 12 -117 86 -340 298 -101 96 -214 202 -250 235 -63 57 -147 138 -456 435 -77 74 -195 187 -261 250 -66 63 -220 212 -343 330 -123 118 -252 242 -287 275 -67 64 -647 633 -1043 1025 -131 129 -352 345 -491 480 -140 135 -363 353 -496 486 -241 239 -503 489 -624 594 -93 82 -96 84 -126 136 l-29 49 -3 670 c-1 369 0 680 3 693 4 16 13 22 35 22 16 0 39 -5 52 -11z m9381 -31 c11 -19 14 -148 16 -685 l3 -662 -38 -61 c-20 -33 -52 -70 -70 -81 -19 -11 -37 -26 -41 -34 -5 -7 -95 -94 -201 -194 -107 -100 -229 -217 -271 -259 -175 -175 -1077 -1060 -1302 -1277 -495 -479 -704 -683 -1027 -1002 -233 -231 -364 -353 -377 -353 -11 0 -27 5 -35 10 -44 27 -453 428 -597 583 -87 95 -86 118 10 227 103 115 667 677 1002 999 312 298 824 803 1603 1579 460 458 882 875 937 925 55 51 150 140 211 200 120 115 150 129 177 85z m-9334 -2760 c63 -73 1145 -1149 1466 -1457 88 -85 253 -244 366 -355 113 -111 297 -289 410 -397 112 -108 258 -250 325 -315 66 -66 196 -191 289 -279 92 -88 202 -193 244 -233 491 -471 715 -681 794 -742 22 -17 27 -30 27 -63 0 -41 -2 -44 -297 -336 -404 -399 -406 -401 -445 -401 -27 0 -48 17 -148 118 -162 163 -320 315 -640 616 -354 334 -414 391 -470 446 -25 25 -137 133 -249 240 -507 484 -1040 1013 -1176 1167 -132 149 -212 256 -260 345 -13 26 -29 49 -34 52 -15 10 -117 205 -147 281 -14 39 -39 118 -54 177 -15 59 -34 124 -43 145 -23 59 -45 274 -67 656 -14 243 -17 354 -10 368 7 13 21 19 42 19 26 0 40 -10 77 -52z m9350 29 c7 -10 8 -91 0 -293 -8 -220 -18 -335 -46 -544 -26 -195 -42 -280 -59 -322 -13 -32 -29 -81 -35 -110 -10 -47 -76 -200 -115 -268 -8 -14 -30 -54 -50 -90 -31 -58 -68 -117 -158 -251 -40 -60 -68 -95 -235 -287 -148 -172 -999 -1028 -1616 -1627 -182 -176 -390 -378 -464 -450 -74 -71 -294 -287 -489 -480 -636 -628 -679 -669 -743 -730 -35 -33 -132 -125 -214 -205 -83 -80 -210 -200 -282 -268 -110 -101 -137 -122 -163 -122 -25 0 -51 19 -148 109 -64 60 -199 190 -298 288 -100 98 -211 206 -247 240 -76 74 -95 110 -78 151 13 31 209 231 561 576 135 131 394 386 575 565 363 359 545 535 860 836 188 179 329 316 730 710 67 66 237 230 376 365 447 431 595 576 1009 985 513 507 1046 1022 1205 1164 80 71 103 82 124 58z'/%3E%3C/g%3E%3C/svg%3E%3Cpath transform='translate(37.7,7.5)' d='M8.1 0.2Q5.9 0.2 4.3 -0.7Q2.7 -1.7 1.8 -3.4Q0.9 -5.2 0.9 -7.6Q0.9 -10 1.8 -11.7Q2.7 -13.5 4.4 -14.4Q6 -15.4 8.1 -15.4Q10.3 -15.4 11.9 -14.4Q13.5 -13.5 14.4 -11.7Q15.3 -10 15.3 -7.6Q15.3 -5.2 14.4 -3.4Q13.5 -1.7 11.9 -0.7Q10.3 0.2 8.1 0.2ZM8.1 -2.7Q9.1 -2.7 9.8 -3.2Q10.6 -3.6 11 -4.7Q11.4 -5.8 11.4 -7.5Q11.4 -9.3 11 -10.4Q10.6 -11.5 9.8 -12Q9.1 -12.5 8.1 -12.5Q7.2 -12.5 6.4 -12Q5.7 -11.5 5.3 -10.4Q4.9 -9.3 4.9 -7.5Q4.9 -5.8 5.3 -4.7Q5.7 -3.6 6.4 -3.2Q7.2 -2.7 8.1 -2.7ZM16.8 3.4V-10.9H20.4L20.4 -9.5Q20.7 -9.8 21 -10.2Q21.4 -10.5 21.8 -10.7Q22.3 -10.9 22.7 -11Q23.2 -11.1 23.7 -11.1Q24.8 -11.1 25.8 -10.5Q26.7 -9.9 27.2 -8.6Q27.8 -7.4 27.8 -5.5Q27.8 -3.5 27.1 -2.2Q26.5 -1 25.5 -0.4Q24.5 0.2 23.3 0.2Q22.9 0.2 22.4 0.1Q22 -0 21.6 -0.2Q21.3 -0.5 20.9 -0.8Q20.6 -1.1 20.4 -1.5V3.4ZM22.4 -2.4Q23.2 -2.4 23.8 -3.1Q24.4 -3.8 24.4 -5.5Q24.4 -6.9 23.8 -7.7Q23.3 -8.5 22.4 -8.5Q21.3 -8.5 20.9 -7.6Q20.4 -6.7 20.4 -5.5Q20.4 -4.7 20.6 -4Q20.8 -3.3 21.2 -2.8Q21.7 -2.4 22.4 -2.4ZM33.9 0.2Q32.3 0.2 31.1 -0.5Q29.9 -1.2 29.2 -2.4Q28.5 -3.7 28.5 -5.4Q28.5 -7.1 29.2 -8.4Q29.9 -9.6 31.1 -10.4Q32.3 -11.1 33.9 -11.1Q35.6 -11.1 36.8 -10.3Q38 -9.6 38.7 -8.3Q39.3 -7.1 39.3 -5.4Q39.3 -3.7 38.7 -2.5Q38 -1.2 36.8 -0.5Q35.6 0.2 33.9 0.2ZM33.9 -2.4Q34.7 -2.4 35.1 -2.9Q35.5 -3.3 35.7 -4Q35.8 -4.7 35.8 -5.5Q35.8 -6.2 35.7 -6.9Q35.5 -7.6 35.1 -8Q34.7 -8.5 33.9 -8.5Q33.2 -8.5 32.8 -8Q32.4 -7.6 32.2 -6.9Q32 -6.2 32 -5.5Q32 -4.8 32.2 -4.1Q32.4 -3.3 32.8 -2.9Q33.2 -2.4 33.9 -2.4ZM41 0V-15.2H47.6Q49.5 -15.2 50.7 -14.6Q51.8 -14 52.4 -12.9Q52.9 -11.8 52.9 -10.5Q52.9 -9.3 52.6 -8.5Q52.3 -7.6 51.7 -7.1Q51.1 -6.5 50.4 -6.1L53.2 0H49.5L47.1 -5.5H44.5V0ZM44.5 -8.2H47.1Q48.1 -8.2 48.7 -8.9Q49.3 -9.5 49.3 -10.4Q49.3 -11.3 48.7 -11.9Q48.1 -12.5 47.2 -12.5H44.5ZM59.9 0.2Q58.3 0.2 57 -0.5Q55.7 -1.2 55 -2.4Q54.3 -3.6 54.3 -5.3Q54.3 -6.9 55 -8.2Q55.6 -9.5 56.8 -10.3Q58 -11.1 59.7 -11.1Q61.5 -11.1 62.6 -10.3Q63.8 -9.6 64.3 -8.4Q64.9 -7.1 64.9 -5.5V-4.6H57.9Q57.9 -3.9 58.1 -3.4Q58.3 -2.8 58.8 -2.6Q59.2 -2.3 59.8 -2.3Q60.5 -2.3 61 -2.6Q61.5 -2.9 61.8 -3.6H65Q64.8 -2.4 64 -1.5Q63.3 -0.7 62.2 -0.2Q61.1 0.2 59.9 0.2ZM57.9 -6.7H61.6Q61.6 -7.2 61.4 -7.6Q61.2 -8.1 60.8 -8.4Q60.4 -8.6 59.7 -8.6Q59.2 -8.6 58.8 -8.3Q58.3 -8.1 58.1 -7.6Q57.9 -7.2 57.9 -6.7ZM69.6 0.2Q68.6 0.2 67.7 -0.2Q66.9 -0.6 66.4 -1.3Q65.9 -2.1 65.9 -3.2Q65.9 -5 67.3 -5.9Q68.6 -6.9 71.6 -6.9L72.7 -6.9V-7.4Q72.7 -8.1 72.3 -8.4Q71.9 -8.7 71.2 -8.7Q70.6 -8.7 70.1 -8.5Q69.5 -8.2 69.3 -7.5H66.3Q66.4 -8.8 67.1 -9.6Q67.7 -10.3 68.8 -10.7Q70 -11.1 71.3 -11.1Q73.1 -11.1 74.2 -10.6Q75.2 -10.2 75.6 -9.5Q76.1 -8.7 76.1 -7.7V0H73.1L72.8 -1.8Q72.3 -0.7 71.5 -0.2Q70.7 0.2 69.6 0.2ZM70.8 -2.1Q71.2 -2.1 71.5 -2.2Q71.9 -2.3 72.1 -2.6Q72.4 -2.8 72.5 -3.1Q72.6 -3.3 72.7 -3.7V-5.1L71.8 -5.1Q71.2 -5.1 70.6 -5Q70.1 -4.8 69.7 -4.5Q69.3 -4.1 69.3 -3.5Q69.3 -2.9 69.7 -2.5Q70.2 -2.1 70.8 -2.1ZM81.5 0.2Q80.1 0.2 79.4 -0.1Q78.6 -0.4 78.2 -0.9Q77.9 -1.4 77.8 -2Q77.7 -2.6 77.7 -3.2V-15.6H81.2V-3.6Q81.2 -3.1 81.4 -2.8Q81.7 -2.4 82.4 -2.3L82.9 -2.3V-0.1Q82.6 0 82.2 0.1Q81.8 0.2 81.5 0.2Z'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23m' transform='translate(91.8,69.0) rotate(-24)'/%3E%3Cuse href='%23m' transform='translate(261.8,184.0) rotate(-24)'/%3E%3C/svg%3E")}
/* agua:fin */
.opr-lector.es-lectura .opr-lc-caja{position:relative !important}
.opr-lector.es-lectura .opr-lc-caja::after{content:"" !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important; background-image:var(--opr-lc-agua) !important; background-repeat:repeat !important; background-size:340px 230px !important; mix-blend-mode:multiply !important; opacity:.035 !important}
@media print{
  .opr-lector.es-lectura .opr-lc-caja::after{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
}