/* ==========================================================================
   OpoReal · Estilos de las actividades del lector
   Test, flashcards, verdadero o falso y mnemotecnia. Mismo lenguaje que el
   resto: monocromo Pizarra, y el verde y el rojo solo después de responder.
   ========================================================================== */

/* Una actividad no lleva índice: el documento se centra. */
.opr-lector.es-sin-indice .opr-lc-caja{grid-template-columns:minmax(0,1fr) !important; max-width:820px !important}
.opr-lector.es-sin-indice .opr-lc-indice{display:none !important}
.opr-lector.es-sin-indice .opr-lc-btindice{display:none !important}
.opr-lector .opr-lc-act{max-width:none !important}

/* ==========================================================================
   TEST
   ========================================================================== */
.opr-lector .opr-lc-portada{margin-top:26px !important; padding:26px 26px 24px !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-pdatos{display:flex !important; flex-wrap:wrap !important; gap:26px !important; padding-bottom:22px !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-pdatos > div{display:flex !important; flex-direction:column !important; gap:1px !important}
.opr-lector .opr-lc-pdatos b{font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-lector .opr-lc-pdatos span{font-size:.8125rem !important; color:var(--tenue) !important}
.opr-lector .opr-lc-plab{margin-top:22px !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--suave) !important}

/* Segmentado · documento 01, punto 5.3 */
.opr-lector .opr-lc-seg{display:inline-flex !important; gap:4px !important; margin-top:10px !important; padding:4px !important; border-radius:999px !important; background:var(--p100) !important}
.opr-lector .opr-lc-segb{padding:9px 20px !important; border-radius:999px !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--suave) !important; transition:background .16s, color .16s, box-shadow .16s !important}
.opr-lector .opr-lc-segb.es-activo{background:var(--superficie) !important; color:var(--tinta) !important; box-shadow:var(--sombra-s) !important}
.opr-lector .opr-lc-pnota{margin-top:10px !important; max-width:52ch !important}
.opr-lector .opr-lc-pbtn{margin-top:22px !important}

.opr-lector .opr-lc-qcab{display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; justify-content:space-between !important; gap:8px 16px !important; margin-top:8px !important}
.opr-lector .opr-lc-qn{font-size:.9375rem !important; font-weight:700 !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-qmodo{font-size:.8125rem !important; color:var(--tenue) !important}
.opr-lector .opr-lc-qtit{margin-top:12px !important; font-size:clamp(1.15rem,2.4vw,1.5rem) !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.02em !important; text-wrap:pretty !important}

/* Las opciones del test son mayores que las de un juego de repaso. */
.opr-lector .opr-lc-act .opr-lc-ops{margin-top:20px !important; gap:10px !important}
.opr-lector .opr-lc-act .opr-lc-op{padding:16px 18px !important; font-size:1rem !important; min-height:56px !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}
.opr-lector .opr-lc-act .opr-lc-op:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--p400), var(--sombra-s) !important}
.opr-lector .opr-lc-act .opr-lc-op:disabled{opacity:1 !important}
.opr-lector .opr-lc-act .opr-lc-op.es-elegida{box-shadow:inset 0 0 0 2px var(--tinta) !important}
.opr-lector .opr-lc-act .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-act .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-exp{margin-top:18px !important; padding:16px 18px !important; border-radius:var(--radio-s) !important; background:var(--p100) !important; font-size:.9375rem !important; line-height:1.6 !important}
.opr-lector .opr-lc-exp h4{display:flex !important; align-items:center !important; gap:8px !important; font-size:.9375rem !important; font-weight:700 !important}
.opr-lector .opr-lc-exp svg{flex:0 0 auto !important; width:16px !important; height:16px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-exp p{margin-top:6px !important}
.opr-lector .opr-lc-exp.es-bien{background:var(--ok-100) !important; color:var(--ok-900) !important}
.opr-lector .opr-lc-exp.es-bien h4{color:var(--ok-600) !important}
.opr-lector .opr-lc-exp.es-mal{background:var(--no-100) !important; color:var(--no-900) !important}
.opr-lector .opr-lc-exp.es-mal h4{color:var(--no-600) !important}
.opr-lector .opr-lc-solucion{margin-top:8px !important}
.opr-lector .opr-lc-sig{margin-top:18px !important}

/* Resultado */
.opr-lector .opr-lc-res{margin-top:10px !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:26px 40px !important; padding:26px !important; border-radius:var(--radio) !important; background:var(--p950) !important; color:#fff !important}
.opr-lector .opr-lc-resn{display:flex !important; flex-direction:column !important}
.opr-lector .opr-lc-resn b{font-size:3.4rem !important; line-height:1 !important; font-weight:800 !important; letter-spacing:-.03em !important}
.opr-lector .opr-lc-resn span{margin-top:4px !important; font-size:.8125rem !important; color:var(--p400) !important}
.opr-lector .opr-lc-res.es-aprobado .opr-lc-resn b{color:var(--ok-500) !important}
.opr-lector .opr-lc-rescifras{display:flex !important; flex-wrap:wrap !important; gap:24px !important}
.opr-lector .opr-lc-rescifras > div{display:flex !important; flex-direction:column !important}
.opr-lector .opr-lc-rescifras b{font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-lector .opr-lc-rescifras span{font-size:.8125rem !important; color:var(--p400) !important}
.opr-lector .opr-lc-acciones{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:18px !important}
.opr-lector .opr-lc-revtit{margin-top:34px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-fallo{margin-top:12px !important; 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-fq{font-size:.9375rem !important; font-weight:600 !important; line-height:1.5 !important}
.opr-lector .opr-lc-fr{display:flex !important; flex-direction:column !important; gap:5px !important; margin-top:10px !important; font-size:.875rem !important}
.opr-lector .opr-lc-fr span{display:flex !important; align-items:center !important; gap:7px !important}
.opr-lector .opr-lc-fr svg{flex:0 0 auto !important; width:14px !important; height:14px !important; stroke:currentColor !important; fill:none !important; stroke-width:2.4 !important; stroke-linecap:round !important}
.opr-lector .opr-lc-fmal{color:var(--no-600) !important}
.opr-lector .opr-lc-fbien{color:var(--ok-600) !important}
.opr-lector .opr-lc-fexp{margin-top:10px !important; font-size:.875rem !important; line-height:1.6 !important; color:var(--suave) !important}

/* ==========================================================================
   MAZOS (flashcards y verdadero o falso)
   ========================================================================== */
.opr-lector .opr-lc-mazos{display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:24px !important}
.opr-lector .opr-lc-mazo{display:flex !important; align-items:center !important; gap:16px !important; width:100% !important; padding:18px 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-lector .opr-lc-mazo:hover{transform:translateY(-2px) !important; box-shadow:inset 0 0 0 1px var(--p400), var(--sombra) !important}
.opr-lector .opr-lc-mazo:active{transform:translateY(0) !important}
.opr-lector .opr-lc-mn{flex:0 0 auto !important; width:44px !important; height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:13px !important; background:var(--p950) !important; color:#fff !important; font-size:1.15rem !important; font-weight:800 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-mazo.es-mixto .opr-lc-mn{background:var(--bloque) !important}
.opr-lector .opr-lc-mtx{flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:2px !important}
.opr-lector .opr-lc-mtit{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-msub{font-size:.875rem !important; color:var(--suave) !important; line-height:1.4 !important}
.opr-lector .opr-lc-mn2{flex:0 0 auto !important; padding:5px 12px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.8125rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-mchev{flex:0 0 auto !important; width:17px !important; height:17px !important; stroke:var(--tenue) !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transform:rotate(-90deg) !important}

.opr-lector .opr-lc-actcab{display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px 18px !important; padding-bottom:16px !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-volver{display:flex !important; align-items:center !important; gap:5px !important; font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-lector .opr-lc-volver:hover{color:var(--tinta) !important}
.opr-lector .opr-lc-volver svg{width:15px !important; height:15px !important; stroke:currentColor !important; fill:none !important; stroke-width:2.2 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-actnom{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-lector .opr-lc-actcif{margin-left:auto !important; display:flex !important; gap:16px !important; font-size:.8125rem !important; color:var(--tenue) !important}
.opr-lector .opr-lc-actcif b{font-weight:700 !important; color:var(--tinta) !important}

.opr-lector .opr-lc-fcaja{margin-top:22px !important}

/* ---- Flashcards: la tarjeta que gira ---------------------------------- */
.opr-lector .opr-lc-escena{perspective:1600px !important}
.opr-lector .opr-lc-carta{position:relative !important; width:100% !important; min-height:300px !important; cursor:pointer !important; transform-style:preserve-3d !important; transition:transform .55s cubic-bezier(.32,.72,.16,1) !important}
.opr-lector .opr-lc-carta.es-vuelta{transform:rotateY(180deg) !important}
.opr-lector .opr-lc-cara{position:absolute !important; inset:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:14px !important; padding:32px 28px !important; border-radius:var(--radio) !important; text-align:center !important; backface-visibility:hidden !important; -webkit-backface-visibility:hidden !important}
.opr-lector .opr-lc-frente{background:var(--p950) !important; color:#fff !important}
.opr-lector .opr-lc-dorso{background:var(--superficie) !important; color:var(--tinta) !important; transform:rotateY(180deg) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important}
.opr-lector .opr-lc-caratag{font-size:.8125rem !important; font-weight:600 !important; color:var(--p400) !important}
.opr-lector .opr-lc-dorso .opr-lc-caratag{color:var(--tenue) !important}
.opr-lector .opr-lc-caraq{font-size:clamp(1.15rem,3vw,1.5rem) !important; font-weight:600 !important; line-height:1.35 !important; letter-spacing:-.02em !important; text-wrap:balance !important}
.opr-lector .opr-lc-caraa{font-size:clamp(1.3rem,3.2vw,1.7rem) !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:-.025em !important; text-wrap:balance !important}
.opr-lector .opr-lc-carae{font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important; max-width:44ch !important}
.opr-lector .opr-lc-carapie{margin-top:auto !important; font-size:.8125rem !important; color:var(--p500) !important}
.opr-lector .opr-lc-girar{width:100% !important; margin-top:14px !important}
.opr-lector .opr-lc-juicio{display:none !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:14px !important}
.opr-lector .opr-lc-juicio.es-visible{display:grid !important}
.opr-lector .opr-lc-jbtn{display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; padding:16px 10px !important; border-radius:var(--radio-s) !important; font-size:1rem !important; font-weight:700 !important; min-height:56px !important; transition:background .16s, box-shadow .16s !important}
.opr-lector .opr-lc-jbtn svg{width:18px !important; height:18px !important; stroke:currentColor !important; fill:none !important; stroke-width:2.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-jbtn.es-no{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-jbtn.es-si{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-jbtn:hover{filter:brightness(.97) !important}

/* ---- Verdadero o falso ------------------------------------------------- */
.opr-lector .opr-lc-afirma{position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:14px !important; min-height:230px !important; padding:34px 28px !important; border-radius:var(--radio) !important; background:var(--p950) !important; color:#fff !important; text-align:center !important; transition:background .3s !important}
.opr-lector .opr-lc-afirma.es-bien{background:var(--ok-600) !important}
.opr-lector .opr-lc-afirma.es-mal{background:var(--no-600) !important}
.opr-lector .opr-lc-afn{position:absolute !important; top:14px !important; right:18px !important; font-size:.8125rem !important; font-weight:700 !important; color:var(--p400) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-afirma.es-bien .opr-lc-afn,
.opr-lector .opr-lc-afirma.es-mal .opr-lc-afn,
.opr-lector .opr-lc-afirma.es-bien .opr-lc-caratag,
.opr-lector .opr-lc-afirma.es-mal .opr-lc-caratag{color:rgba(255,255,255,.75) !important}
.opr-lector .opr-lc-afst{font-size:clamp(1.1rem,2.8vw,1.45rem) !important; font-weight:600 !important; line-height:1.4 !important; letter-spacing:-.02em !important; text-wrap:pretty !important}
.opr-lector .opr-lc-veredicto{display:inline-flex !important; align-items:center !important; gap:8px !important; padding:8px 16px !important; border-radius:999px !important; background:rgba(255,255,255,.18) !important; font-size:.875rem !important; font-weight:700 !important}
.opr-lector .opr-lc-veredicto svg{width:16px !important; height:16px !important; stroke:#fff !important; fill:none !important; stroke-width:2.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-elige{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:14px !important}
.opr-lector .opr-lc-vfbtn{display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; padding:18px 10px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; font-size:1rem !important; font-weight:700 !important; min-height:60px !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; transition:background .16s, box-shadow .16s, color .16s !important}
.opr-lector .opr-lc-vfbtn svg{width:18px !important; height:18px !important; stroke:currentColor !important; fill:none !important; stroke-width:2.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-vfbtn:hover:not(:disabled){background:var(--p100) !important}
.opr-lector .opr-lc-vfbtn:disabled{opacity:.55 !important}
.opr-lector .opr-lc-vfbtn.es-bien{opacity:1 !important; 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-vfbtn.es-mal{opacity:1 !important; background:var(--no-100) !important; color:var(--no-900) !important; box-shadow:inset 0 0 0 1px var(--no-500) !important}

/* ---- Entre rondas y final --------------------------------------------- */
.opr-lector .opr-lc-ronda{margin-top:24px !important; padding:32px 28px !important; border-radius:var(--radio) !important; background:var(--p100) !important; text-align:center !important}
.opr-lector .opr-lc-ronda.es-fin{background:var(--ok-100) !important; color:var(--ok-900) !important}
.opr-lector .opr-lc-ronda h3{font-size:1.3rem !important; font-weight:800 !important; letter-spacing:-.02em !important}
.opr-lector .opr-lc-ronda p{margin-top:8px !important; color:var(--suave) !important; max-width:46ch !important; margin-left:auto !important; margin-right:auto !important}
.opr-lector .opr-lc-ronda.es-fin p{color:var(--ok-900) !important}
.opr-lector .opr-lc-ronda .opr-btn{margin-top:18px !important}
.opr-lector .opr-lc-ronda .opr-lc-acciones{justify-content:center !important}

/* ==========================================================================
   MNEMOTECNIA
   ========================================================================== */
.opr-lector .opr-lc-contador{margin-top:20px !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-lector .opr-lc-contador b{font-size:1.15rem !important; font-weight:800 !important; color:var(--tinta) !important}
.opr-lector .opr-lc-reglas{display:flex !important; flex-direction:column !important; gap:12px !important; margin-top:16px !important}
.opr-lector .opr-lc-regla{border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important; overflow:hidden !important}
.opr-lector .opr-lc-rgcab{padding:20px 22px !important}
.opr-lector .opr-lc-rgtop{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important}
.opr-lector .opr-lc-rgtipo{padding:4px 12px !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-rgart{padding:4px 12px !important; border-radius:999px !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.8125rem !important; font-weight:700 !important; color:var(--tinta) !important}
.opr-lector .opr-lc-rgtop{flex-wrap:wrap !important}
.opr-lector .opr-lc-rgnum{font-size:.9375rem !important; font-weight:800 !important; color:var(--p400) !important}
.opr-lector .opr-lc-rgq{margin-top:12px !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1.35 !important}
.opr-lector .opr-lc-rgdato{margin-top:7px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important}
.opr-lector .opr-lc-rgver{display:flex !important; align-items:center !important; gap:7px !important; margin-top:14px !important; padding:9px 16px !important; border-radius:999px !important; font-size:.875rem !important; font-weight:700 !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; transition:background .16s !important}
.opr-lector .opr-lc-rgver:hover{background:var(--p100) !important}
.opr-lector .opr-lc-rgver svg{width:15px !important; height:15px !important; stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; transition:transform .2s !important}
.opr-lector .opr-lc-regla.es-abierta .opr-lc-rgver svg{transform:rotate(180deg) !important}
.opr-lector .opr-lc-rgcuerpo{display:none !important}
.opr-lector .opr-lc-regla.es-abierta .opr-lc-rgcuerpo{display:block !important}
.opr-lector .opr-lc-rgdentro{margin:0 22px 22px !important; padding:20px 22px !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-rglab{font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-rgfrase{margin-top:8px !important; font-size:1.15rem !important; font-weight:600 !important; line-height:1.45 !important; letter-spacing:-.015em !important}
.opr-lector .opr-lc-rgfrase b{font-weight:800 !important; color:var(--bloque) !important}
.opr-lector .opr-lc-rgfrase i{font-style:normal !important; font-weight:800 !important}
.opr-lector .opr-lc-rgdesglose{margin-top:16px !important; display:flex !important; flex-direction:column !important}
.opr-lector .opr-lc-rgfila{display:flex !important; align-items:center !important; gap:12px !important; padding:9px 0 !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
.opr-lector .opr-lc-rgfila:last-child{box-shadow:none !important}
/* LA MARCA DE CADA FILA ES UNA PÍLDORA, NO UN CÍRCULO (v0.5.102). Era un círculo
   fijo de 26 px pensado para una inicial o un número de dos cifras. Con «13-14»,
   «1986» o «+5.000 habitantes» el texto se salía por arriba y por abajo y no se
   leía: lo vio Sergio en el tema 34 el 2 de octubre de 2026, y pasaba en 82
   filas de todo el temario. Ahora mide 26 px como mínimo y crece con lo que
   lleve; con una o dos cifras sigue siendo un círculo. */
.opr-lector .opr-lc-rgini{flex:0 0 auto !important; min-width:26px !important; max-width:42% !important; min-height:26px !important; padding:3px 8px !important; box-sizing:border-box !important; line-height:1.2 !important; text-align:center !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; background:var(--p950) !important; color:#fff !important; font-size:.8125rem !important; font-weight:800 !important}
.opr-lector .opr-lc-rgtxt{flex:1 1 auto !important; min-width:0 !important; font-size:.9375rem !important; line-height:1.4 !important}
.opr-lector .opr-lc-rganio{flex:0 0 auto !important; font-size:.875rem !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-rgcmp{display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:16px !important}
.opr-lector .opr-lc-rgcol{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-rgcol h5{font-size:.8125rem !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-lector .opr-lc-rgcol p{margin-top:5px !important; font-size:.9375rem !important; line-height:1.5 !important}
@media (max-width:620px){ .opr-lector .opr-lc-rgcmp{grid-template-columns:1fr !important} }
.opr-lector .opr-lc-rgpq{display:flex !important; gap:9px !important; margin-top:16px !important; font-size:.875rem !important; line-height:1.6 !important; color:var(--suave) !important}
.opr-lector .opr-lc-rgpq svg{flex:0 0 auto !important; width:16px !important; height:16px !important; margin-top:2px !important; stroke:var(--tenue) !important; fill:none !important; stroke-width:1.7 !important; stroke-linecap:round !important; stroke-linejoin:round !important}

@media (max-width:620px){
  .opr-lector .opr-lc-res{gap:18px 24px !important; padding:22px !important}
  .opr-lector .opr-lc-resn b{font-size:2.8rem !important}
  .opr-lector .opr-lc-mazo{padding:16px !important}
  .opr-lector .opr-lc-mn{width:38px !important; height:38px !important; font-size:1rem !important}
  .opr-lector .opr-lc-cara{padding:26px 20px !important}
  .opr-lector .opr-lc-rgdentro{margin:0 16px 16px !important; padding:16px !important}
  .opr-lector .opr-lc-rgcab{padding:18px 16px !important}
  .opr-lector .opr-lc-actcif{width:100% !important; margin-left:0 !important}
}

/* ==========================================================================
   MODO PANTALLA
   Las actividades que se responden —test, flashcards, verdadero o falso— no
   se desplazan: ocupan el alto del lector y se reparten en tres franjas. Al
   responder, la explicación y el botón salen en el pie, que ya estaba a la
   vista, así que las opciones no se mueven de sitio.
   ========================================================================== */
.opr-lector.es-fijo .opr-lc-cuerpo{overflow:hidden !important}
.opr-lector.es-fijo .opr-lc-caja{height:100% !important; padding-top:clamp(14px,2vw,24px) !important; padding-bottom:clamp(14px,2vw,24px) !important}
.opr-lector.es-fijo .opr-lc-hueco{height:100% !important; min-height:0 !important}
.opr-lector .opr-lc-act.es-pantalla{display:flex !important; flex-direction:column !important; gap:14px !important; height:100% !important; min-height:0 !important}

.opr-lector .opr-lc-fcab{flex:0 0 auto !important; position:relative !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px 16px !important; padding-bottom:14px !important; box-shadow:inset 0 -1px 0 var(--borde) !important}
/* El reparto del alto tiene un orden de prioridad, y este es el orden:
   primero el enunciado y las opciones enteros —hay que poder responder sin
   deslizar—, después el botón de seguir, y lo último la explicación, que es la
   que cede y se lee con su propia barra si no cabe. Se consigue dándole al pie
   un `flex-shrink` desproporcionado: cuando falta alto, el déficit cae casi
   entero sobre él y el cuerpo se queda como está. */
.opr-lector .opr-lc-fcuerpo{flex:0 1 auto !important; min-height:0 !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important}
/* El pie no es una caja: es `display:contents`, así que el botón de seguir, la
   explicación y la pista de teclado son franjas hermanas del enunciado. Antes
   el pie sí era una caja que encogía —ese `200`— y con muy poco alto se cerraba
   a cero mientras el botón, que no encoge, se salía por debajo de la pantalla.
   Ahora el que encoge es el cajón de la explicación y el botón no puede
   desplazarse: es el orden de prioridad de Sergio, escrito donde manda. */
.opr-lector .opr-lc-fpie{display:contents !important}
.opr-lector .opr-lc-fpie > *{flex:0 0 auto !important}
.opr-lector .opr-lc-fpie > .opr-lc-exp{flex:0 200 auto !important; min-height:0 !important; overflow-y:auto !important}
/* LA ACTIVIDAD LARGA (v0.5.94). Cuando la explicación no cabe, `recursos.js`
   pone `es-larga` y las franjas dejan de repartirse el alto: nada encoge, nada
   lleva barra propia y lo que se desliza es la actividad entera. */
/* SOLO ARRIBA Y ABAJO (v0.5.100). Con `overflow-y:auto` a secas, el eje
   horizontal también pasa a `auto`, y la estrella de favoritas saca 8 px por
   la derecha con su margen negativo: en el móvil la pantalla «flotaba» y se
   podía arrastrar a los lados. Lo vio Sergio el 2 de octubre de 2026. Se
   cierra el eje horizontal y se le dice al navegador que aquí el dedo solo
   desliza en vertical. */
.opr-lector .opr-lc-act.es-pantalla.es-larga{overflow-x:hidden !important; touch-action:pan-y !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important}
.opr-lector .opr-lc-act.es-pantalla.es-larga > *{flex-shrink:0 !important}
.opr-lector .opr-lc-act.es-pantalla.es-larga > .opr-lc-fcuerpo{flex:0 0 auto !important; overflow:visible !important}
.opr-lector .opr-lc-act.es-pantalla.es-larga .opr-lc-fpie > .opr-lc-exp{flex:0 0 auto !important; overflow:visible !important}
.opr-lector .opr-lc-fpie .opr-btn{width:100% !important}
.opr-lector .opr-lc-fpie .opr-lc-exp{margin-top:0 !important}
.opr-lector .opr-lc-fpie .opr-lc-sig{margin-top:0 !important}

/* La pista de teclado: solo donde hay teclado. */
.opr-lector .opr-lc-teclas{margin:0 !important; font-size:.75rem !important; color:var(--tenue) !important; text-align:center !important}
@media (max-width:900px){ .opr-lector .opr-lc-teclas{display:none !important} }

/* Cabecera de la pregunta dentro del modo pantalla */
.opr-lector .opr-lc-fcab .opr-lc-qn{font-size:.9375rem !important; font-weight:700 !important; color:var(--bloque) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-qder{margin-left:auto !important; display:flex !important; align-items:center !important; gap:14px !important}
.opr-lector .opr-lc-reloj{display:flex !important; align-items:baseline !important; gap:2px !important; font-size:.8125rem !important; color:var(--suave) !important; font-variant-numeric:tabular-nums !important}
.opr-lector .opr-lc-reloj b{font-size:1.3rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--tinta) !important}
.opr-lector .opr-lc-reloj.es-poco b{color:var(--av-600) !important}
.opr-lector .opr-lc-relojbarra{position:absolute !important; left:0 !important; right:0 !important; bottom:-1px !important; height:2px !important; background:var(--p200) !important}
.opr-lector .opr-lc-relojbarra i{display:block !important; height:100% !important; width:100% !important; background:var(--tinta) !important; transition:width 1s linear !important}
.opr-lector .opr-lc-reloj.es-poco ~ .opr-lc-relojbarra i{background:var(--av-500) !important}

/* La pregunta ocupa lo que necesita; las opciones, el resto. */
.opr-lector .opr-lc-fcuerpo .opr-lc-qtit{flex:0 0 auto !important; margin-top:0 !important}
.opr-lector .opr-lc-fcuerpo .opr-lc-ops{flex:0 0 auto !important}

/* Flashcards y verdadero o falso ocupan el alto disponible. */
.opr-lector .opr-lc-fcuerpo .opr-lc-escena{flex:1 1 auto !important; min-height:210px !important; display:flex !important}
.opr-lector .opr-lc-fcuerpo .opr-lc-carta{height:100% !important; min-height:0 !important}
.opr-lector .opr-lc-fcuerpo .opr-lc-afirma{flex:1 1 auto !important; min-height:200px !important}
.opr-lector .opr-lc-fpie .opr-lc-girar,
.opr-lector .opr-lc-fpie .opr-lc-juicio,
.opr-lector .opr-lc-fpie .opr-lc-elige{margin-top:0 !important}

/* En pantallas bajas, la actividad respira menos. */
@media (max-height:700px){
  .opr-lector .opr-lc-act.es-pantalla{gap:10px !important}
  .opr-lector .opr-lc-act .opr-lc-op{min-height:48px !important; padding:12px 16px !important}
  .opr-lector .opr-lc-act .opr-lc-ops{gap:8px !important}
  .opr-lector .opr-lc-qtit{font-size:1.0625rem !important}
  .opr-lector .opr-lc-exp{padding:12px 14px !important; font-size:.875rem !important}
}

/* Portátiles bajos y ventanas a media pantalla: la actividad se aprieta
   para que las cuatro opciones sigan cabiendo después de responder. */
@media (max-height:640px){
  .opr-lector.es-fijo .opr-lc-caja{padding-top:12px !important; padding-bottom:12px !important}
  .opr-lector .opr-lc-act.es-pantalla{gap:8px !important}
  .opr-lector .opr-lc-fcab{padding-bottom:10px !important}
  .opr-lector .opr-lc-act .opr-lc-op{min-height:42px !important; padding:9px 14px !important; font-size:.9375rem !important}
  .opr-lector .opr-lc-act .opr-lc-ops{gap:6px !important}
  .opr-lector .opr-lc-qtit{font-size:1rem !important; line-height:1.35 !important}
  .opr-lector .opr-lc-exp{padding:10px 12px !important; font-size:.8125rem !important}
  .opr-lector .opr-lc-exp h4{margin-bottom:4px !important}
  .opr-lector .opr-lc-fpie{gap:8px !important}
  .opr-lector .opr-lc-teclas{display:none !important}
}

/* En el móvil el enunciado ocupa más líneas: las opciones se aprietan un poco. */
@media (max-width:620px){
  .opr-lector .opr-lc-act .opr-lc-op{min-height:46px !important; padding:11px 14px !important}
}

/* ==========================================================================
   PREGUNTAS FAVORITAS (v0.5.94)
   La estrella de cada pregunta, el cajón del menú del test y la lista. Sin color: la
   estrella es un contorno gris y, guardada, se rellena de tinta. Guardar no
   es acertar ni fallar, así que no lleva verde, rojo ni ámbar.
   ========================================================================== */
.opr-lector .opr-lc-fav{flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; width:42px !important; height:42px !important; margin:-10px -8px -10px 0 !important; border-radius:50% !important; color:var(--tenue) !important; background:transparent !important; cursor:pointer !important; transition:background .15s, color .15s !important}
.opr-lector .opr-lc-fav:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-lector .opr-lc-fav svg{width:22px !important; height:22px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.8 !important; stroke-linejoin:round !important; stroke-linecap:round !important}
.opr-lector .opr-lc-fav[aria-pressed="true"]{color:var(--tinta) !important}
.opr-lector .opr-lc-fav[aria-pressed="true"] svg{fill:currentColor !important}

.opr-lector .opr-lc-mazo.es-fav .opr-lc-mn{background:var(--p100) !important; color:var(--tinta) !important}
.opr-lector .opr-lc-mazo.es-fav .opr-lc-mn svg{width:22px !important; height:22px !important; stroke:currentColor !important; fill:currentColor !important; stroke-width:1.8 !important; stroke-linejoin:round !important}

.opr-lector .opr-lc-favvacio{margin-top:20px !important; max-width:62ch !important}
.opr-lector .opr-lc-favs{display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:16px !important}
.opr-lector .opr-lc-favfila{display:flex !important; align-items:center !important; gap:6px !important; padding:4px 10px 4px 0 !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-favfila:hover{box-shadow:inset 0 0 0 1px var(--p400) !important}
.opr-lector .opr-lc-favfila .opr-lc-fav{margin:0 !important}
.opr-lector .opr-lc-favq{flex:1 1 auto !important; min-width:0 !important; display:flex !important; align-items:center !important; gap:12px !important; padding:12px 6px 12px 16px !important; min-height:44px !important; text-align:left !important; font-size:.9375rem !important; line-height:1.45 !important; color:var(--tinta) !important; cursor:pointer !important}
.opr-lector .opr-lc-favq > span{flex:1 1 auto !important; min-width:0 !important; overflow-wrap:anywhere !important}
.opr-lector .opr-lc-favq svg{flex:0 0 auto !important; width:16px !important; height:16px !important; stroke:var(--tenue) !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important}
.opr-lector .opr-lc-favtodas{margin-top:14px !important; align-self:flex-start !important}
@media (max-width:560px){.opr-lector .opr-lc-favtodas{width:100% !important}}

/* v0.5.104 · ir atrás y adelante en el test, y el filtro del resultado */
.opr-lector .opr-lc-nav{display:flex !important; gap:10px !important; align-items:stretch !important}
.opr-lector .opr-lc-fpie .opr-lc-nav .opr-btn{width:auto !important; margin-top:0 !important}
.opr-lector .opr-lc-nav .opr-lc-ant{flex:0 0 auto !important}
.opr-lector .opr-lc-nav .opr-lc-sig{flex:1 1 0 !important; min-width:0 !important}
.opr-lector .opr-lc-sin{display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:6px !important; font-size:.875rem !important; color:var(--suave) !important}
.opr-lector .opr-lc-sinb{min-width:34px !important; height:34px !important; padding:0 8px !important; border-radius:999px !important; font-size:.875rem !important; font-weight:600 !important; color:var(--tinta) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde2) !important}
.opr-lector .opr-lc-sinb:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--p500) !important}
.opr-lector .opr-lc-sinb:disabled{opacity:.42 !important}
.opr-lector .opr-lc-filtro{display:flex !important; flex-wrap:wrap !important; width:fit-content !important; max-width:100% !important; margin-top:12px !important; border-radius:22px !important}
.opr-lector .opr-lc-filtro .opr-lc-segb{padding:9px 16px !important; font-size:.875rem !important}
.opr-lector .opr-lc-fnum{font-weight:700 !important; color:var(--suave) !important}
@media (max-width:480px){
  .opr-lector .opr-lc-filtro{flex-wrap:nowrap !important; border-radius:999px !important}
  .opr-lector .opr-lc-filtro .opr-lc-segb{padding:8px 10px !important; font-size:.8125rem !important; white-space:nowrap !important}
}