/* ---------- la sala del ejercicio ---------- Todas las reglas van prefijadas con .opr-pt-sala. Es lo único que garantiza que ganen al reset del núcleo (.opr * mide (0,1,0), igual que una clase suelta) sin depender del orden en que LiteSpeed sirva las hojas. Manual técnico, punto 11.1. */ .opr-pt-sala{scroll-margin-top:90px !important} .opr-pt-sala .opr-pt-panel{ max-width:900px !important; margin:0 auto !important; overflow:hidden !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra) !important; display:flex !important; flex-direction:column !important; min-height:560px !important; } /* la hoja de defs no ocupa sitio: solo guarda el escudo de la marca de agua */ svg.opr-pt-defs{position:absolute !important; width:0 !important; height:0 !important; overflow:hidden !important} /* ---------- antes de empezar ---------- */ .opr-pt-sala .opr-pt-ajuste{ flex:1 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; padding:clamp(26px,3.4vw,40px) !important; gap:0 !important; } .opr-pt-sala .opr-pt-aj-cabeza{margin-bottom:26px !important} .opr-pt-sala .opr-pt-aj-etq{display:block !important; font-size:.875rem !important; font-weight:600 !important; color:var(--tenue) !important} .opr-pt-sala .opr-pt-aj-tit{margin-top:6px !important; font-size:1.6rem !important; font-weight:800 !important; letter-spacing:-.028em !important; line-height:1.12 !important} .opr-pt-sala .opr-pt-aj-sub{margin-top:8px !important; max-width:52ch !important; font-size:.96875rem !important; line-height:1.55 !important; color:var(--suave) !important} .opr-pt-sala .opr-pt-aj-fila{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; padding:14px 0 !important; border-top:1px solid var(--borde) !important; flex-wrap:wrap !important; } .opr-pt-sala .opr-pt-aj-fila.es-modo{display:block !important} .opr-pt-sala .opr-pt-aj-rot{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important} .opr-pt-sala .opr-pt-aj-fila.es-modo .opr-pt-aj-rot{display:block !important; margin-bottom:11px !important} .opr-pt-sala .opr-pt-modos{display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important} .opr-pt-sala .opr-pt-modos button{ display:block !important; width:100% !important; text-align:left !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; transition:box-shadow .15s ease, background .15s ease !important; } .opr-pt-sala .opr-pt-modos b{display:block !important; font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.013em !important; color:var(--suave) !important} .opr-pt-sala .opr-pt-modos span{display:block !important; margin-top:3px !important; font-size:.8125rem !important; color:var(--tenue) !important; line-height:1.45 !important} .opr-pt-sala .opr-pt-modos button:hover{background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important} .opr-pt-sala .opr-pt-modos button[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--p950) !important; background:var(--p50) !important} .opr-pt-sala .opr-pt-modos button[aria-checked="true"] b{color:var(--tinta) !important} .opr-pt-sala .opr-pt-aj-regla{ margin-top:16px !important; padding:12px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important; } .opr-pt-sala .opr-pt-aj-botones{display:flex !important; gap:9px !important; margin-top:22px !important; flex-wrap:wrap !important} .opr-pt-sala .opr-pt-aj-ir{flex:1 1 auto !important} .opr-pt-sala .opr-pt-aviso{margin-top:12px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important; min-height:1px !important} .opr-pt-sala .opr-pt-aviso.es-mal{color:var(--no600) !important; font-weight:600 !important} /* ---------- cabecera y pie del ejercicio ---------- */ .opr-pt-sala .opr-pt-test{display:flex !important; flex-direction:column !important; flex:1 !important} .opr-pt-sala .opr-pt-cabecera{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:14px 22px !important; border-bottom:1px solid var(--borde) !important; background:#F7FBF8 !important; } .opr-pt-sala .opr-pt-donde{display:flex !important; align-items:baseline !important; gap:9px !important; min-width:0 !important} .opr-pt-sala .opr-pt-donde b{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.014em !important; flex:none !important} /* Encoge y se corta con puntos suspensivos. En el simulacro la cabecera lleva DOS nombres —el ejercicio de las bases y el subtipo que ha tocado— y en un móvil no caben los dos: sin esto, el segundo se montaba encima del primero. El que se corta es el subtipo, que es el dato menor. */ .opr-pt-sala .opr-pt-donde-dif{ font-size:.8125rem !important; color:var(--tenue) !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .opr-pt-sala .opr-pt-medidas{display:flex !important; align-items:center !important; gap:14px !important; flex:none !important} .opr-pt-sala .opr-pt-reloj{ padding:5px 11px !important; border-radius:999px !important; background:var(--p100) !important; font-size:.84375rem !important; font-weight:700 !important; color:var(--suave) !important; } .opr-pt-sala .opr-pt-contador{font-size:.84375rem !important; font-weight:700 !important; white-space:nowrap !important} /* El panel mantiene el alto en todos los ejercicios —así el enunciado no salta de sitio al pasar de uno a otro—, y el contenido se centra: los verbales no dibujan y sin esto se quedaban pegados arriba con medio panel vacío. */ .opr-pt-sala .opr-pt-cuerpo{padding:22px !important; display:flex !important; flex-direction:column !important; flex:1 !important; justify-content:center !important} .opr-pt-sala .opr-pt-enunciado{ font-size:1.125rem !important; font-weight:700 !important; line-height:1.38 !important; letter-spacing:-.014em !important; text-wrap:pretty !important; text-align:center !important; } /* LA LEYENDA ES UN PANEL, NO UNA FILA DE PÍLDORAS. Hasta la v0.1.42 cada entrada era una píldora con el icono pequeño al lado del nombre; Sergio pasó la referencia y tiene razón: con el dibujo grande encima y el nombre debajo se lee de un vistazo, que es lo único que la leyenda tiene que hacer. En giros la leyenda es la mitad del ejercicio, así que se mira más veces que el enunciado. NO VA NUMERADA a propósito: los números sugerirían que la primera es la opción A, y el orden de las opciones está barajado. */ .opr-pt-sala .opr-pt-leyenda{ display:flex !important; justify-content:center !important; flex-wrap:wrap !important; gap:2px !important; margin-top:14px !important; padding:10px 8px !important; border-radius:16px !important; box-shadow:inset 0 0 0 1px var(--borde) !important; background:var(--superficie) !important; } .opr-pt-sala .opr-pt-ley{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:7px !important; flex:1 1 96px !important; max-width:150px !important; padding:8px 6px 7px !important; border-radius:11px !important; } .opr-pt-sala .opr-pt-ley.es-objetivo{box-shadow:inset 0 0 0 1.5px var(--p950) !important} .opr-pt-sala .opr-pt-ley > span{display:block !important; text-align:center !important} .opr-pt-sala .opr-pt-ley b{display:block !important; font-size:.84375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1.25 !important} .opr-pt-sala .opr-pt-ley span span{display:block !important; margin-top:2px !important; font-size:.75rem !important; color:var(--tenue) !important; line-height:1.25 !important} .opr-pt-sala .opr-pt-ley svg{width:34px !important; height:34px !important; flex:none !important; color:var(--tinta) !important; fill:none !important; stroke:currentColor !important; stroke-width:1.6 !important; stroke-linecap:round !important; stroke-linejoin:round !important} /* En giros y volteos la leyenda es una SECUENCIA: las órdenes se aplican en ese orden. Lo dice una flecha entre ficha y ficha, no un número delante de cada una —el número se leía como si la primera orden fuese la opción A, y el orden de las opciones está barajado—. */ .opr-pt-sala .opr-pt-flecha{ font-style:normal !important; color:var(--tenue) !important; font-size:1.15rem !important; line-height:1 !important; align-self:center !important; flex:none !important; padding:0 1px !important; } .opr-pt-sala .opr-pt-leyenda.es-secuencia{align-items:center !important} .opr-pt-sala .opr-pt-leyenda.es-secuencia .opr-pt-ley{flex:0 1 auto !important; max-width:132px !important} /* CUANDO EL DIBUJO DE LA LEYENDA ES EL DATO, NO UN ICONO. En «giros en grados» el ángulo se lee de un círculo con cuatro números dentro: a 34 px no se lee nada. Va grande, y encoge con la pantalla como todo lo demás. */ /* EN FILA, NO APILADO. Apilado, el círculo y su rótulo se comían ciento treinta píxeles de alto en un móvil, y lo que se quedaba sin sitio era el MODELO: a 125 px su trazo se aclara tanto que el arnés dejó de encontrar tinta sólida. En fila ocupa lo que mide el círculo y el modelo recupera treinta píxeles. */ .opr-pt-sala .opr-pt-ley.es-grande{ max-width:none !important; flex-direction:row !important; align-items:center !important; gap:12px !important; padding:2px 12px !important; } .opr-pt-sala .opr-pt-ley.es-grande > span{text-align:left !important} .opr-pt-sala .opr-pt-ley.es-grande svg{width:100px !important; height:100px !important} .opr-pt-sala .opr-pt-ley.es-grande b{font-size:1rem !important} @media (max-height:860px){ .opr-pt-sala .opr-pt-ley.es-grande svg{width:82px !important; height:82px !important} } @media (max-height:700px){ .opr-pt-sala .opr-pt-ley.es-grande svg{width:60px !important; height:60px !important} .opr-pt-sala .opr-pt-ley.es-grande b{font-size:.8125rem !important} .opr-pt-sala .opr-pt-ley.es-grande{gap:8px !important; padding:1px 8px !important} } @media (max-height:700px){ .opr-pt-sala .opr-pt-ley.es-grande svg{width:52px !important; height:52px !important} .opr-pt-sala .opr-pt-ley.es-grande b{font-size:.75rem !important} .opr-pt-sala .opr-pt-ley.es-grande{padding:2px 8px 3px !important; gap:1px !important} } /* El camino de la explicación de giros: la figura después de cada orden. */ .opr-pt-sala .opr-pt-camino{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:2px 4px !important; margin:6px 0 8px !important; } .opr-pt-sala .opr-pt-camino i{font-style:normal !important; color:var(--tenue) !important; font-size:1.05rem !important} .opr-pt-sala .opr-pt-paso{display:flex !important; flex-direction:column !important; align-items:center !important; width:76px !important} .opr-pt-sala .opr-pt-paso svg{width:54px !important; height:54px !important} /* El círculo de grados lleva cuatro números dentro: a 54 px no se leen. */ .opr-pt-sala .opr-pt-paso svg.opr-pt-esfera{width:74px !important; height:74px !important} .opr-pt-sala .opr-pt-camino .opr-pt-paso:has(.opr-pt-esfera){width:96px !important} .opr-pt-sala .opr-pt-paso span{ font-size:.6875rem !important; line-height:1.2 !important; text-align:center !important; color:var(--tenue) !important; } .opr-pt-sala .opr-pt-camino-pie{display:block !important; font-size:.8125rem !important; color:var(--tenue) !important} /* EL PUZLE REHECHO DE «DOCUMENTO ROTO». La explicación de ese subtipo no es una frase, es una figura: los tres trozos buenos colocados en su sitio, con la letra que tenían como opción, y el hueco del que sobraba. Lo pidió Sergio, y tiene razón en que la figura enseña más que la frase: lo que hay que entender es que encajan. */ .opr-pt-sala svg.opr-pt-puzle{ display:block !important; width:100% !important; max-width:270px !important; height:auto !important; margin:10px auto 4px !important; } /* EN UNA PANTALLA BAJA LA LEYENDA CEDE ANTES QUE LAS OPCIONES. Cuatro fichas en dos filas se comen ochenta píxeles, y en un móvil de 640 de alto eso era la diferencia entre ver las cuatro opciones y tener que deslizar. Lo que encoge es la leyenda, nunca lo que hay que responder. */ /* PRIMER TRAMO: sigue apilada, pero más apretada. En un móvil normal en vertical la leyenda en panel mide 185 px y el modelo aún respira; por debajo de 860 ya no, así que aquí encoge el dibujo de la ficha y el aire. */ @media (max-height:860px){ .opr-pt-sala .opr-pt-leyenda{margin-top:10px !important; padding:7px 6px !important; gap:1px !important} .opr-pt-sala .opr-pt-ley{padding:5px 4px !important; gap:5px !important; flex-basis:84px !important} .opr-pt-sala .opr-pt-ley b{font-size:.78125rem !important} .opr-pt-sala .opr-pt-ley svg{width:26px !important; height:26px !important} } /* SEGUNDO TRAMO: la leyenda se tumba. Apilada no cabe, y entre perder la forma de la leyenda o perder el modelo se pierde la leyenda: sigue diciendo lo mismo, solo que el icono se pone al lado del nombre en vez de encima. */ @media (max-height:700px){ .opr-pt-sala .opr-pt-leyenda{margin-top:6px !important; padding:3px !important; border-radius:12px !important; gap:0 !important} /* Y SIGUE EN COLUMNA, PERO ESTRECHA. Tumbarla —el icono al lado del nombre— parecía lo que ahorraba sitio y era al revés: «270° antihorario» en una sola línea hace la ficha tan ancha que tres órdenes ya no caben en una fila, y dos filas cuestan más que la altura que se ahorraba. En columna y con la ficha estrecha el nombre parte en dos líneas cortas, y entran tres. */ .opr-pt-sala .opr-pt-ley{ flex:0 1 auto !important; max-width:80px !important; padding:3px !important; gap:3px !important; } .opr-pt-sala .opr-pt-ley b{font-size:.75rem !important; line-height:1.2 !important} .opr-pt-sala .opr-pt-ley svg{width:21px !important; height:21px !important} /* y el dibujo recupera con el relleno lo que la leyenda ya no puede ceder */ .opr-pt-sala .opr-pt-escena{padding:6px !important; margin-top:10px !important} /* y la figura de la opción cede también: a 82 px sigue midiendo 55 de figura, que es lo que se midió en píxeles para el suelo del 35 %. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-giro{height:60px !important} } .opr-pt-sala .opr-pt-escena{ margin-top:16px !important; padding:14px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow-x:auto !important; } .opr-pt-sala .opr-pt-escena svg.opr-pt-lienzo{ display:block !important; width:100% !important; max-width:640px !important; height:auto !important; max-height:52vh !important; } .opr-pt-sala .opr-pt-nota-ej{margin-top:9px !important; text-align:center !important; font-size:.8125rem !important; color:var(--tenue) !important} /* ---------- las opciones ---------- */ .opr-pt-sala .opr-pt-opciones{margin-top:16px !important; display:grid !important; gap:9px !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important} .opr-pt-sala .opr-pt-opciones.es-largo{grid-template-columns:1fr !important} .opr-pt-sala .opr-pt-opcion{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; min-height:56px !important; padding:13px 14px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; font-size:1rem !important; font-weight:600 !important; line-height:1.35 !important; text-align:center !important; transition:box-shadow .14s ease, background .14s ease, transform .1s ease !important; } .opr-pt-sala .opr-pt-opciones.es-largo .opr-pt-opcion{justify-content:flex-start !important; text-align:left !important} .opr-pt-sala .opr-pt-opcion:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:#F6FAF7 !important} .opr-pt-sala .opr-pt-opcion:active:not(:disabled){transform:translateY(1px) !important} .opr-pt-sala .opr-pt-opcion:disabled{cursor:default !important} .opr-pt-sala .opr-pt-letra{ position:absolute !important; top:6px !important; left:8px !important; font-size:.6875rem !important; font-weight:700 !important; color:var(--tenue) !important; } .opr-pt-sala .opr-pt-opcion svg.opr-pt-ficha{width:auto !important; height:84px !important; display:block !important} /* Las personas de memoria visual van más altas que el resto de fichas: tres de sus cinco rasgos —gorra, gafas y barba— están en la cabeza, y a 84 px la cabeza mide catorce. A 118 se distinguen sin acercarse a la pantalla. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-persona{height:118px !important} /* La columna del velocímetro son dos piezas apiladas —la esfera y la casilla del número—, así que a la altura de una ficha normal la esfera se queda en cuarenta píxeles y las doce marcas se juntan en una sola mancha. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-velo{height:114px !important} /* La figura de giros vive en una caja que da de sí para la diagonal —a 45° una figura de 100 ocupa 141—, así que dentro de su SVG ocupa dos tercios. A la altura de una ficha normal se quedaba en 56 px. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-giro{height:112px !important} /* EL SÍMBOLO SUELTO DE «CLAVES» VA PEQUEÑO, Y ES LO CONTRARIO DE LOS DE ARRIBA. No es una figura que haya que examinar: es el MISMO glifo que está dibujado en las cadenas, a 24 px. Enseñarlo a 84 obliga a comparar dos tamaños distintos —arriba pequeño, abajo grande— y, en una ventana baja, se llevaba el sitio de las cinco cadenas, que es justo lo que hay que leer para contestar. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-clave{width:auto !important; height:44px !important; display:block !important} /* EL TROZO DE PAPEL DE «DOCUMENTO ROTO» VA A LO ANCHO Y TODOS AL MISMO TAMAÑO. Los cuatro llegan ya con la misma ventana desde el generador —si cada uno se ajustara a su propia caja, el más pequeño saldría ampliado y el tamaño en pantalla delataría la forma—, así que aquí solo se les da el ancho. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-hoja{width:100% !important; height:auto !important; display:block !important} .opr-pt-sala .opr-pt-opcion.es-ok{background:var(--ok100) !important; box-shadow:inset 0 0 0 2px var(--ok600) !important; color:var(--ok900) !important} .opr-pt-sala .opr-pt-opcion.es-no{background:var(--no100) !important; box-shadow:inset 0 0 0 2px var(--no600) !important; color:var(--no900) !important} .opr-pt-sala .opr-pt-opcion.es-marcada{box-shadow:inset 0 0 0 2px var(--p950) !important} .opr-pt-sala .opr-pt-opcion.es-apagada{opacity:.5 !important} .opr-pt-sala .opr-pt-expl{max-height:0 !important; overflow:hidden !important; opacity:0 !important; margin-top:0 !important; transition:max-height .3s ease, opacity .24s ease .06s, margin-top .3s ease !important} .opr-pt-sala .opr-pt-expl.visible{max-height:260px !important; opacity:1 !important; margin-top:12px !important} .opr-pt-sala .opr-pt-expl > div{ padding:13px 15px !important; border-radius:var(--radio-s) !important; border-left:3px solid var(--borde2) !important; font-size:.90625rem !important; line-height:1.55 !important; } .opr-pt-sala .opr-pt-expl.es-ok > div{background:var(--ok100) !important; border-left-color:var(--ok600) !important; color:var(--ok900) !important} .opr-pt-sala .opr-pt-expl.es-no > div{background:var(--no100) !important; border-left-color:var(--no600) !important; color:var(--no900) !important} .opr-pt-sala .opr-pt-veredicto{display:block !important; font-weight:700 !important; margin-bottom:4px !important} .opr-pt-sala .opr-pt-pie{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:14px 22px !important; border-top:1px solid var(--borde) !important; background:#F7FBF8 !important; } .opr-pt-sala .opr-pt-salir{padding:10px 16px !important; font-size:.875rem !important} .opr-pt-sala .opr-pt-siguiente{padding:12px 20px !important; font-size:.9375rem !important} .opr-pt-sala .opr-pt-puntos{display:flex !important; gap:5px !important; align-items:center !important; flex-wrap:wrap !important; justify-content:center !important; flex:1 !important} .opr-pt-sala .opr-pt-punto{width:8px !important; height:8px !important; border-radius:999px !important; background:var(--p300) !important; transition:all .24s ease !important} .opr-pt-sala .opr-pt-punto.es-activo{width:22px !important; background:var(--p950) !important} .opr-pt-sala .opr-pt-punto.es-hecha{background:var(--p600) !important} .opr-pt-sala .opr-pt-punto.es-ok{background:var(--ok600) !important} .opr-pt-sala .opr-pt-punto.es-no{background:var(--no600) !important} /* ---------- el resultado ---------- */ .opr-pt-sala .opr-pt-final{ flex:1 !important; padding:30px 22px 24px !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; gap:12px !important; overflow-y:auto !important; } .opr-pt-sala .opr-pt-marcador{display:flex !important; align-items:baseline !important; gap:8px !important} .opr-pt-sala .opr-pt-marcador b{font-size:3rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.04em !important} .opr-pt-sala .opr-pt-marcador span{font-size:.9375rem !important; font-weight:600 !important; color:var(--tenue) !important} .opr-pt-sala .opr-pt-nota{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; margin-top:6px !important; } .opr-pt-sala .opr-pt-nota > div{ padding:13px 8px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:3px !important; } .opr-pt-sala .opr-pt-nota b{font-size:1.375rem !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1 !important} .opr-pt-sala .opr-pt-nota span{font-size:.71875rem !important; color:var(--tenue) !important; line-height:1.35 !important; text-align:center !important} .opr-pt-sala .opr-pt-final-txt{max-width:46ch !important; font-size:.9375rem !important; color:var(--suave) !important; text-wrap:pretty !important} .opr-pt-sala .opr-pt-repaso{width:100% !important; display:flex !important; flex-direction:column !important; gap:6px !important; text-align:left !important} .opr-pt-sala .opr-pt-item{border-radius:var(--radio-s) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important} .opr-pt-sala .opr-pt-item summary{ display:flex !important; align-items:flex-start !important; gap:10px !important; padding:11px 13px !important; cursor:pointer !important; font-size:.84375rem !important; line-height:1.45 !important; color:var(--suave) !important; } .opr-pt-sala .opr-pt-item summary::-webkit-details-marker{display:none !important} .opr-pt-sala .opr-pt-item summary i{flex:none !important; width:7px !important; height:7px !important; margin-top:.45em !important; border-radius:2px !important; background:var(--no600) !important; display:block !important} .opr-pt-sala .opr-pt-item.es-ok summary i{background:var(--ok600) !important} .opr-pt-sala .opr-pt-item-cuerpo{padding:0 13px 13px 30px !important; font-size:.84375rem !important; line-height:1.5 !important; color:var(--suave) !important} .opr-pt-sala .opr-pt-item-cuerpo b{color:var(--tinta) !important; font-weight:700 !important} .opr-pt-sala .opr-pt-final-btns{display:flex !important; flex-wrap:wrap !important; gap:9px !important; justify-content:center !important; margin-top:6px !important; width:100% !important} .opr-pt-sala .opr-pt-final-btns .opr-btn{flex:1 1 auto !important; padding:12px 18px !important; font-size:.90625rem !important} @media (max-width:640px){ .opr-pt-sala .opr-pt-panel{min-height:0 !important} .opr-pt-sala .opr-pt-ajuste{padding:22px 18px !important} .opr-pt-sala .opr-pt-aj-fila{align-items:flex-start !important; flex-direction:column !important; gap:10px !important} .opr-pt-sala .opr-pt-modos{grid-template-columns:1fr !important} .opr-pt-sala .opr-pt-cabecera{padding:12px 16px !important} .opr-pt-sala .opr-pt-cuerpo{padding:18px 16px !important} .opr-pt-sala .opr-pt-pie{padding:12px 16px !important} .opr-pt-sala .opr-pt-enunciado{font-size:1.0625rem !important} .opr-pt-sala .opr-pt-opciones{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .opr-pt-sala .opr-pt-opciones.es-largo{grid-template-columns:1fr !important} .opr-pt-sala .opr-pt-nota{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .opr-pt-sala .opr-pt-final-btns .opr-btn{flex:1 1 100% !important} .opr-pt-sala .opr-pt-escena svg.opr-pt-lienzo{max-height:44vh !important} .opr-pt-sala .opr-pt-opcion svg.opr-pt-ficha{height:66px !important} /* Las personas encogen menos que el resto: a 66 px la cabeza mide once y los tres rasgos que van en ella dejan de distinguirse. Aquí las opciones ya van a dos columnas, así que hay alto de sobra. */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-persona{height:104px !important} .opr-pt-sala .opr-pt-opcion svg.opr-pt-velo{height:98px !important} .opr-pt-sala .opr-pt-opcion svg.opr-pt-giro{height:96px !important} .opr-pt-sala .opr-pt-opcion svg.opr-pt-clave{height:38px !important} /* EL ÍNDICE DEL SIMULACRO, EN SU PROPIA LÍNEA. Son dieciséis puntos y el pie ya lleva tres botones: metidos en la misma fila, `flex-wrap` los apilaba en una columna de dieciséis y el pie se comía media pantalla. Con `order:-1` y ancho completo van arriba, en una fila, y el pie sigue siendo un pie. */ .opr-pt-sala .opr-pt-pie{flex-wrap:wrap !important; row-gap:10px !important} .opr-pt-sala .opr-pt-puntos.es-ir{order:-1 !important; flex:0 0 100% !important; flex-wrap:nowrap !important; overflow-x:auto !important} .opr-pt-sala .opr-pt-puntos.es-ir .opr-pt-punto{flex:none !important; width:9px !important; height:9px !important} .opr-pt-sala .opr-pt-puntos.es-ir .opr-pt-punto.es-activo{width:20px !important} .opr-pt-sala .opr-pt-anterior span{display:none !important} .opr-pt-sala .opr-pt-anterior{padding:10px 12px !important} } /* ---------- en papel ---------- La hoja imprimible es la misma sala: se quitan los botones y los fondos, se deja el dibujo y la marca de agua, y cada ejercicio empieza en su sitio. */ @media print{ .opr-pt-sala .opr-pt-pie, .opr-pt-sala .opr-pt-cabecera .opr-pt-reloj, .opr-pt-sala .opr-pt-expl{display:none !important} .opr-pt-sala .opr-pt-panel{box-shadow:none !important; min-height:0 !important} .opr-pt-sala .opr-pt-escena{box-shadow:none !important} } /* PANTALLA ESTRECHA **Y** BAJA. Y este bloque tiene que ir aquí, después del de `max-width`, o no sirve de nada: en un móvil de 390x640 encajan las dos consultas, pesan lo mismo, y a igual peso decide la que va después. La regla de altura que hay más arriba llevaba muerta desde que se escribió —el ancho la pisaba— y no se vio porque el ejercicio cabía igual. Se vio al meter «giros en grados», que trae un círculo grande en la leyenda. */ @media (max-width:640px) and (max-height:820px){ .opr-pt-sala .opr-pt-opcion svg.opr-pt-giro{height:78px !important} } @media (max-width:640px) and (max-height:700px){ .opr-pt-sala .opr-pt-opcion svg.opr-pt-giro{height:60px !important} /* Y LAS HOJAS DE «DOCUMENTO ROTO» CEDEN AQUÍ, QUE ES DONDE EL MODELO SE MUERE. En 390 x 640 el modelo bajaba a 6 px de letra mientras los trozos iban a 10: el ejercicio es comparar el uno con los otros, así que un trozo grande al lado de un modelo ilegible no sirve de nada. Recortando la hoja a 84 px las dos cosas quedan por encima de 10. **Lo que se reparte no es el sitio, es la legibilidad: el ejercicio vale lo que valga la peor de las dos.** */ .opr-pt-sala .opr-pt-opcion svg.opr-pt-hoja{max-height:84px !important} } /* ---------- la sala, a pantalla completa ---------- Mientras se hace un ejercicio, la sala ES la página: fija, sobre todo lo demás y del alto de la ventana. Antes era una tarjeta más debajo de la rejilla y en un móvil había que deslizar dos veces —una para llegar y otra para ver las opciones—. El reparto es el del lector de temas: la cabecera y el pie no encogen nunca, y lo que cede cuando falta alto es el DIBUJO, no las opciones. El enunciado y las cuatro opciones están siempre enteros en pantalla. */ .opr-pt-sala.es-abierta{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:var(--opr-pt-arriba,0px) !important; z-index:1000 !important; padding:0 !important; overflow:hidden !important; scroll-margin-top:0 !important; margin:0 !important; max-width:none !important; background:var(--superficie) !important; } .opr-pt-sala.es-abierta > .opr-caja{max-width:none !important; height:100% !important} .opr-pt-sala.es-abierta .opr-pt-panel{ max-width:none !important; width:100% !important; height:100% !important; min-height:0 !important; border-radius:0 !important; box-shadow:none !important; } /* En pantallas anchas la sala no se pega a los bordes: sigue ocupando la ventana, pero el panel queda centrado y con su tarjeta, como en el resto del sitio. La ventana de trabajo de Sergio es 1280 × 609, así que el aire vertical es poco a propósito: lo que sobra tiene que ir al ejercicio. */ @media (min-width:921px){ .opr-pt-sala.es-abierta{padding:clamp(10px,2vh,26px) clamp(18px,4vw,48px) !important; background:var(--p100) !important} .opr-pt-sala.es-abierta .opr-pt-panel{ max-width:960px !important; margin:0 auto !important; border-radius:var(--radio) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra) !important; } } /* --- antes de empezar y el resultado: si no caben, se deslizan ellos --- */ .opr-pt-sala.es-abierta .opr-pt-ajuste, .opr-pt-sala.es-abierta .opr-pt-final{flex:1 !important; min-height:0 !important; overflow-y:auto !important} .opr-pt-sala.es-abierta .opr-pt-ajuste{justify-content:flex-start !important} @media (min-height:680px){ .opr-pt-sala.es-abierta .opr-pt-ajuste{justify-content:center !important} } /* --- el ejercicio, repartido en tres franjas --- */ .opr-pt-sala.es-abierta .opr-pt-test{flex:1 !important; min-height:0 !important} .opr-pt-sala.es-abierta .opr-pt-cabecera, .opr-pt-sala.es-abierta .opr-pt-pie{flex:none !important} /* El cuerpo sigue centrando lo que hay dentro. Con dibujo da igual —la escena se come todo lo que sobra—, pero los verbales no dibujan: con el reparto pegado arriba, «palabra intrusa» dejaba media pantalla en blanco debajo de las cuatro opciones. */ .opr-pt-sala.es-abierta .opr-pt-cuerpo{ flex:1 !important; min-height:0 !important; overflow:hidden !important; justify-content:center !important; } .opr-pt-sala.es-abierta .opr-pt-enunciado, .opr-pt-sala.es-abierta .opr-pt-leyenda, .opr-pt-sala.es-abierta .opr-pt-nota-ej, .opr-pt-sala.es-abierta .opr-pt-opciones{flex:none !important} /* El dibujo es lo único que da de sí. `flex:1 1 0` con `min-height:0` deja que encoja cuando se abre la explicación, en vez de empujar las opciones fuera de la ventana. El SVG lleva viewBox y `preserveAspectRatio="meet"`, así que al darle la caja entera se centra dentro sin deformarse. */ /* EL SUELO DEL DIBUJO ES EL TAMAÑO DE UNA OPCIÓN. Estaba en 64 px, de cuando la leyenda medía ochenta; con la leyenda en panel se comía el modelo y salía a 44 px, la mitad que las opciones que hay que comparar con él. El modelo no es decoración: es contra lo que se responde. Lo que cede es la leyenda, y cede por tramos de alto más abajo. */ .opr-pt-sala.es-abierta .opr-pt-escena{ flex:1 1 0 !important; min-height:104px !important; align-items:stretch !important; overflow:hidden !important; } .opr-pt-sala.es-abierta .opr-pt-escena svg.opr-pt-lienzo{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; } /* Va aquí y no arriba con el resto de lo que encoge: el suelo lo fija la regla de `es-abierta` de estas líneas, y a igual peso decide la que va después. */ @media (max-height:700px){ .opr-pt-sala.es-abierta .opr-pt-escena{min-height:88px !important} } /* La pantalla de estudio reparte igual que el ejercicio: el título, la nota, la barra y el botón no encogen nunca, y lo que cede cuando falta alto es el tablero. Sin esto, a 786 px de ventana el título salía cortado por arriba y el botón por abajo: el cuerpo recorta por los dos lados porque centra lo que tiene dentro. */ .opr-pt-sala.es-abierta .opr-pt-estudio{flex:1 !important; min-height:0 !important} .opr-pt-sala.es-abierta .opr-pt-est-tit, .opr-pt-sala.es-abierta .opr-pt-est-nota, .opr-pt-sala.es-abierta .opr-pt-est-barra{flex:none !important} .opr-pt-sala.es-abierta .opr-pt-est-escena{ flex:1 1 0 !important; min-height:64px !important; align-items:stretch !important; overflow:hidden !important; } .opr-pt-sala.es-abierta .opr-pt-est-escena svg.opr-pt-lienzo{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; } /* ---------- el botón de la hoja imprimible ---------- La hoja en sí no se maqueta aquí: se abre en su propia ventana con su propio CSS en milímetros. Está contado en el guion, en `CSS_HOJA`. */ .opr-pt-sala .opr-pt-aj-papel{display:inline-flex !important; align-items:center !important; gap:7px !important} .opr-pt-sala .opr-pt-aj-papel svg{width:17px !important; height:17px !important; flex:none !important} /* ---------- el progreso ---------- La gráfica va en tinta y sin leyenda: hay una sola serie dibujada y el título dice qué es. El color del sistema solo aparece cuando significa algo, y aquí no significaría nada. Las barras de acierto también van en tinta, por lo mismo: lo que dice cuál se falla más no es el color, es **el orden**. La lista sale de peor a mejor y el peor está arriba, que se lee antes que cualquier rojo. */ .opr-pt-sala .opr-pt-prog{display:flex !important; flex-direction:column !important; padding:26px 24px 22px !important; gap:2px !important} .opr-pt-sala .opr-pt-prog-cab{text-align:center !important; margin-bottom:14px !important} .opr-pt-sala .opr-pt-prog-cifras{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:9px !important; margin-bottom:20px !important; } .opr-pt-sala .opr-pt-prog-cifra{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important; padding:14px 10px !important; border-radius:var(--radio-s) !important; background:var(--fondo) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; } .opr-pt-sala .opr-pt-prog-cifra b{font-size:1.5rem !important; font-weight:800 !important; letter-spacing:-.03em !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-prog-cifra span{font-size:.75rem !important; color:var(--tenue) !important; text-align:center !important; line-height:1.25 !important} .opr-pt-sala .opr-pt-prog-cargando{color:var(--tenue) !important; font-size:.875rem !important; grid-column:1/-1 !important; text-align:center !important} .opr-pt-sala .opr-pt-prog-bloque{margin-top:18px !important} .opr-pt-sala .opr-pt-prog-h{margin:0 !important; font-size:1rem !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-prog-sub{margin:3px 0 12px !important; font-size:.8125rem !important; color:var(--tenue) !important; line-height:1.4 !important} .opr-pt-sala .opr-pt-prog-grafica{position:relative !important} .opr-pt-sala .opr-pt-prog-svg{display:block !important; width:100% !important; height:auto !important; max-height:240px !important} .opr-pt-sala .opr-pt-prog-punto{cursor:pointer !important; outline:none !important} .opr-pt-sala .opr-pt-prog-punto:hover, .opr-pt-sala .opr-pt-prog-punto:focus{r:6.5 !important} /* El globo se coloca desde JavaScript sobre el punto y no tapa la línea: sube por encima del punto y lleva su propia flecha. */ .opr-pt-sala .opr-pt-prog-globo{ position:absolute !important; transform:translate(-50%,-100%) !important; margin-top:-10px !important; padding:7px 10px !important; border-radius:var(--radio-s) !important; pointer-events:none !important; white-space:nowrap !important; background:var(--p950) !important; color:#FFF !important; font-size:.75rem !important; line-height:1.3 !important; z-index:2 !important; } .opr-pt-sala .opr-pt-prog-globo b{font-weight:800 !important} .opr-pt-sala .opr-pt-prog-globo span{display:block !important; color:var(--p400) !important} .opr-pt-sala .opr-pt-prog-lista{display:flex !important; flex-direction:column !important; gap:5px !important} .opr-pt-sala .opr-pt-prog-fila{ display:grid !important; grid-template-columns:minmax(0,1fr) 34% 52px 64px !important; align-items:center !important; gap:10px !important; padding:7px 10px !important; border-radius:var(--radio-s) !important; } .opr-pt-sala .opr-pt-prog-fila:nth-child(even){background:var(--fondo) !important} /* La cabecera dice qué es cada columna: «41 · 16s» a secas no lo dice. */ .opr-pt-sala .opr-pt-prog-fila.es-cab{ padding-bottom:2px !important; background:none !important; font-size:.6875rem !important; color:var(--tenue) !important; text-transform:none !important; letter-spacing:0 !important; } .opr-pt-sala .opr-pt-prog-fila.es-cab span:nth-child(3), .opr-pt-sala .opr-pt-prog-fila.es-cab span:nth-child(4){text-align:right !important} .opr-pt-sala .opr-pt-prog-nom{font-size:.875rem !important; font-weight:600 !important; color:var(--tinta) !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important} .opr-pt-sala .opr-pt-prog-barra{ height:8px !important; border-radius:999px !important; background:var(--p200) !important; overflow:hidden !important; } .opr-pt-sala .opr-pt-prog-barra i{display:block !important; height:100% !important; border-radius:999px !important; background:var(--p950) !important} .opr-pt-sala .opr-pt-prog-pct{font-size:.875rem !important; font-weight:800 !important; text-align:right !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-prog-det{font-size:.75rem !important; color:var(--tenue) !important; text-align:right !important} .opr-pt-sala .opr-pt-prog-vacio{ margin:22px auto !important; max-width:460px !important; text-align:center !important; font-size:.9375rem !important; color:var(--tenue) !important; line-height:1.5 !important; } @media (max-width:640px){ .opr-pt-sala .opr-pt-prog{padding:20px 16px 18px !important} .opr-pt-sala .opr-pt-prog-cifras{grid-template-columns:repeat(2,minmax(0,1fr)) !important} /* En móvil la barra estorba más que ayuda: el nombre y el porcentaje ya lo dicen, y con cuatro columnas el nombre se corta a la mitad. */ .opr-pt-sala .opr-pt-prog-fila{grid-template-columns:minmax(0,1fr) 48px 58px !important} .opr-pt-sala .opr-pt-prog-barra, .opr-pt-sala .opr-pt-prog-hueco{display:none !important} } /* A pantalla completa el progreso se desliza solo, como el resultado. */ .opr-pt-sala.es-abierta .opr-pt-prog{flex:1 !important; min-height:0 !important; overflow-y:auto !important} /* ---------- los lienzos que se leen ---------- Comprensión lectora, ordenar la frase y el recuento en texto pintan un párrafo, no un dibujo. Ahí la regla de «lo que cede es el dibujo» se da la vuelta: el texto se pinta a su tamaño y la caja se desliza si no cabe. Con cuatro opciones largas debajo, la caja se quedaba en cincuenta píxeles y el texto salía a seis: ilegible, y el ejercicio con él. Y las opciones de estos tres aprietan un poco: menos alto por fila y menos hueco entre ellas. Siguen enteras en pantalla —eso no se negocia— pero le dejan sitio al texto. */ /* Y NO CRECE MÁS QUE SU CONTENIDO. La escena normal se lleva el hueco que sobra para centrar el dibujo; con `leer` el dibujo se pinta a su tamaño, así que estirarla deja una caja medio vacía —lo destapó «unidades», cuya tabla mide 200 px—. Con `flex:0 1 auto` toma su alto natural y sigue pudiendo encogerse: si el texto es largo, el reparto es el de antes y la caja se desliza. */ .opr-pt-sala.es-abierta.es-leer .opr-pt-escena{ align-items:flex-start !important; overflow-y:auto !important; flex:0 1 auto !important; } /* El tope de ancho es más bajo que el de un dibujo (660) a propósito: estos lienzos miden unas 420 unidades, así que a 660 se ampliarían a 1,6 y la letra saldría a 25 px. Grande no es mejor: con la letra hinchada caben dos líneas de seis y hay que deslizar para leer el resto. A 460 la letra sale a su tamaño de siempre, más un pelo, y el párrafo entero cabe. */ .opr-pt-sala.es-abierta.es-leer .opr-pt-escena svg.opr-pt-lienzo{ width:100% !important; height:auto !important; max-width:460px !important; max-height:none !important; } /* EL LIENZO QUE HAY QUE VER ENTERO SE ACHICA, NO SE RECORTA. Lo pide el generador con `entero` (ver el guion). El SVG lleva `preserveAspectRatio`, así que con techo de alto se dibuja más pequeño y centrado dentro de su caja en vez de salirse por abajo. La caja deja de deslizarse porque ya no hay nada fuera. */ .opr-pt-sala.es-abierta.es-leer.es-entero .opr-pt-escena{ overflow:hidden !important; align-items:center !important; min-height:0 !important; } .opr-pt-sala.es-abierta.es-leer.es-entero .opr-pt-escena svg.opr-pt-lienzo{ max-height:100% !important; } .opr-pt-sala.es-leer .opr-pt-opciones{gap:7px !important; margin-top:12px !important} .opr-pt-sala.es-leer .opr-pt-opciones.es-largo .opr-pt-opcion{ min-height:44px !important; padding:9px 14px !important; font-size:.9375rem !important; } .opr-pt-sala.es-leer .opr-pt-nota-ej{margin-top:7px !important} /* En una ventana baja —la de trabajo de Sergio es 1280 × 609— las cuatro opciones largas se llevan 225 px y al texto le quedan 110. Aquí aprietan más: no es un capricho de maquetación, es que en comprensión lectora el texto es el ejercicio. Aun así, en 609 px un párrafo de seis líneas no cabe entero bajo cuatro frases: la caja se desliza. En una ventana normal cabe todo. */ @media (min-width:641px) and (max-height:720px){ .opr-pt-sala.es-abierta.es-leer .opr-pt-opciones{gap:6px !important; margin-top:9px !important} .opr-pt-sala.es-abierta.es-leer .opr-pt-opciones.es-largo .opr-pt-opcion{ min-height:38px !important; padding:6px 14px !important; font-size:.9rem !important; } } /* La explicación tiene techo y su propia barra: es lo que se lee después de contestar, no lo que hay que ver para contestar. */ .opr-pt-sala.es-abierta .opr-pt-expl.visible{max-height:min(240px,26vh) !important} .opr-pt-sala.es-abierta .opr-pt-expl{overflow-y:auto !important} /* CUANDO SE CORRIGE, EL EJERCICIO DEJA SITIO A LA EXPLICACIÓN. La regla de siempre era «cede el dibujo del modelo»; con una explicación que lleva figuras dentro —el camino de giros, paso a paso— no basta, y en un móvil se salía por abajo justo cuando hay que leerla. Ahora ceden también las opciones: ya están respondidas, con la buena en verde, así que lo que hacen falta de ellas es reconocerlas, no compararlas. El modelo no baja de su suelo y la explicación no se recorta. */ @media (max-height:900px){ .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion{padding:8px 6px 6px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-giro{height:84px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-clave{height:34px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opciones{gap:6px !important} /* EL MODELO DEJA DE MANDAR EN CUANTO SE CORRIGE. Antes de responder es lo que hay que mirar y por eso se lleva el sitio que sobre; después, lo que hay que mirar es cuál era la buena y por qué, así que se le pone techo: si no, al encoger todo lo demás se quedaba él con la pantalla y las opciones —con la respuesta marcada— salían del tamaño de un sello. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena{flex:0 1 auto !important; min-height:78px !important; max-height:26vh !important} /* Y el techo del modelo cuadrado es otro: ver «es-alta» en el guion. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena.es-alta{max-height:42vh !important} /* Y el de un lienzo de texto, otro más. Con `leer` la escena nunca crece por encima de su tamaño natural —se pinta a su medida—, así que el techo bajo no la frena: la recorta. La tabla de «unidades» mide 216 px y a 26vh se quedaba en dos filas justo cuando hay que releerla para entender la explicación. Con flex-shrink puesto sigue cediendo si de verdad no cabe. */ .opr-pt-sala.es-abierta.es-corregida.es-leer .opr-pt-escena{ max-height:46vh !important; min-height:200px !important; } /* Y LA PISTA SE VA EN CUANTO SE CORRIGE. «Pasa las tres a la misma unidad y suma» es lo que se lee ANTES de contestar; después ocupa el sitio de la tabla, que es lo que hay que releer con la explicación al lado. */ .opr-pt-sala.es-abierta.es-corregida.es-leer .opr-pt-nota-ej{display:none !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-leyenda{margin-top:6px !important; padding:4px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-ley svg{width:22px !important; height:22px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso{width:56px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso svg{width:40px !important; height:40px !important} /* El círculo de grados no: lleva cuatro números dentro y a 40 px no se leen. Es lo que la explicación tiene que enseñar —el ángulo dibujado—, así que es lo último que puede encoger. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso svg.opr-pt-esfera{width:64px !important; height:64px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso:has(.opr-pt-esfera){width:84px !important} /* Y EL ORDEN DE PRIORIDAD SE INVIERTE AL CORREGIR. Mientras se responde, lo que manda es el modelo y la explicación no existe. Corregido, lo que manda es la explicación: se le quita el techo y pasa a no encoger, porque tener que deslizar dentro de ella es exactamente lo que había que evitar. Lo que da de sí es el modelo, y después el tamaño de las opciones. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-expl{flex:none !important; overflow:visible !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-expl.visible{max-height:none !important} /* PERO CON UN LIENZO `entero` LA QUE CEDE ES LA EXPLICACIÓN, NO EL DIBUJO. Achicar en vez de recortar es lo correcto mientras el dibujo siga leyéndose; con una explicación de cinco líneas debajo, el dibujo se quedaba en sesenta píxeles —un sello— y eso no es verlo entero, es no verlo. La explicación es texto: se lee de arriba abajo y deslizarla no cuesta nada, mientras que en el dibujo hay que comparar cinco cadenas de un vistazo. */ .opr-pt-sala.es-abierta.es-corregida.es-entero .opr-pt-escena{min-height:170px !important} .opr-pt-sala.es-abierta.es-corregida.es-entero .opr-pt-expl{flex:0 1 auto !important; overflow-y:auto !important} .opr-pt-sala.es-abierta.es-corregida.es-entero .opr-pt-expl.visible{max-height:min(210px,30vh) !important} /* Y SI LAS OPCIONES SON HOJAS, CEDEN ELLAS PRIMERO. El modelo no baja de su suelo y la explicación tampoco puede: en «documento roto» las dos cosas a la vez dejaban la explicación en 47 px de los 97 que mide —menos de la mitad del texto, y es el texto que dice por qué—. Los trozos ya están respondidos, con el bueno en verde: de ellos hace falta reconocer cuál se marcó, no volver a compararlos, así que son lo que sobra. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-hoja{max-height:96px !important} } /* CUANDO LA EXPLICACIÓN TRAE EL PUZLE REHECHO, EL MODELO DE ARRIBA SE VA. No se encoge: se va. La figura ES el documento —el mismo, con los tres trozos buenos ya colocados, cada uno con la letra que tenía, y el hueco del que sobraba—, así que dejar el modelo encima es enseñar dos veces lo mismo y dejar a la figura en un sello. Se probó encogiéndolo a 96 px y el resultado era el modelo ilegible y la figura cortada: las dos cosas mal por no quitar una. Esto solo pasa al corregir, porque la figura no existe hasta entonces. Va fuera de toda consulta de pantalla y con el prefijo entero —siete clases— porque tiene que ganarle a los techos de `entero`, que pesan cinco. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-cuerpo:has(.opr-pt-puzle) .opr-pt-escena{ display:none !important; } .opr-pt-sala.es-abierta.es-corregida .opr-pt-cuerpo:has(.opr-pt-puzle) .opr-pt-expl.visible{ max-height:none !important; flex:0 1 auto !important; overflow-y:auto !important; } /* Y LOS TROZOS TAMBIÉN CEDEN, PORQUE YA ESTÁN RESPONDIDOS. Corregido, de las cuatro tarjetas solo hace falta reconocer cuál se marcó —va en rojo o en verde—, no volver a compararlas: eso ya se hace en la figura, y mejor, porque ahí están colocadas. En la ventana de 1280 x 609 con la barra de WordPress, recortarlas a 72 px es lo que hace que el puzle se vea entero en vez de a medias. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-cuerpo:has(.opr-pt-puzle) .opr-pt-opcion svg.opr-pt-hoja{ max-height:72px !important; } /* EN UNA PANTALLA BAJA, CORREGIDO, LA LEYENDA SE VA. No es un recorte a la desesperada: el camino de la explicación nombra las órdenes una a una, en orden y con el dibujo de cada paso, así que la leyenda de arriba está diciendo lo mismo dos veces. Quitarla es lo que hace que la explicación quepa entera en un móvil sin que nadie tenga que deslizar. */ @media (max-height:900px){ .opr-pt-sala.es-abierta.es-corregida .opr-pt-leyenda{display:none !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena{min-height:62px !important; max-height:20vh !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena.es-alta{max-height:38vh !important} .opr-pt-sala.es-abierta.es-corregida.es-leer .opr-pt-escena{max-height:42vh !important; min-height:170px !important} /* Con lienzo `entero` el techo del modelo es más bajo que el de `leer`, y esta regla tiene que ir DESPUÉS de la de arriba: las dos pesan lo mismo —cinco clases— y en ese empate gana la última escrita. Puesta antes no hacía nada, y el modelo se quedaba con el sitio que necesitaba el texto. */ .opr-pt-sala.es-abierta.es-corregida.es-entero .opr-pt-escena{max-height:min(240px,34%) !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-giro{height:66px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso{width:50px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso svg{width:34px !important; height:34px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso span{font-size:.625rem !important} } /* Y en la más baja de todas, con cinco órdenes, el camino son seis dibujos: ahí lo que cede es el tamaño de las opciones, que ya están respondidas. */ @media (max-height:660px){ .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena{max-height:17vh !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-escena.es-alta{max-height:32vh !important} /* Y AQUÍ EL LIENZO DE TEXTO VUELVE A CEDER. Arriba se le quitó el encoger para que la tabla no saliera cortada; en una ventana de 640 px eso empuja el enunciado fuera de la pantalla —lo cazó el arnés en «lectura», 11 px fuera a 390×640, y 18 con el tema hostil—. Por debajo de 660 px de alto no hay sitio para todos: manda el enunciado, que es la pregunta. */ .opr-pt-sala.es-abierta.es-corregida.es-leer .opr-pt-escena{ max-height:32vh !important; min-height:0 !important; } /* Y con lienzo `entero`, más bajo todavía: en 640 px de alto el modelo se comía el sitio de la explicación y dejaba fuera dos tercios del texto. */ .opr-pt-sala.es-abierta.es-corregida.es-entero .opr-pt-escena{max-height:min(160px,24%) !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-giro{height:54px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion{padding:5px 4px 4px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso{width:44px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-paso svg{width:30px !important; height:30px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-camino{gap:0 2px !important; margin:4px 0 6px !important} .opr-pt-sala.es-abierta.es-corregida .opr-pt-expl.visible{max-height:min(320px,46vh) !important} } @media (max-width:640px){ .opr-pt-sala.es-abierta .opr-pt-cuerpo{padding:14px 14px 16px !important} .opr-pt-sala.es-abierta .opr-pt-ajuste{padding:20px 16px !important} .opr-pt-sala.es-abierta .opr-pt-escena{padding:10px !important} .opr-pt-sala.es-abierta .opr-pt-est-escena{padding:10px !important} /* En móvil las hojas van a dos filas de dos, y corregidas ocupan el doble que en un escritorio. Ahí es donde más falta hace el recorte. */ .opr-pt-sala.es-abierta.es-corregida .opr-pt-opcion svg.opr-pt-hoja{max-height:70px !important} } /* En papel no hay ventana que llenar: la sala vuelve a ser un bloque. */ @media print{ .opr-pt-sala.es-abierta{position:static !important; padding:0 !important; background:none !important} .opr-pt-sala.es-abierta .opr-pt-panel{height:auto !important} .opr-pt-sala.es-abierta .opr-pt-cuerpo{overflow:visible !important} .opr-pt-sala.es-abierta .opr-pt-escena{overflow:visible !important; min-height:0 !important} } /* ===================================================================== EL SIMULACRO --------------------------------------------------------------------- Reaprovecha casi todo del ejercicio suelto —cabecera, cuerpo, opciones, pie— y añade cuatro cosas: la pantalla del tiempo, el relevo entre bloques, la cuenta atrás y el desglose por bloque del resultado. ===================================================================== */ /* --- la línea del tiempo por ejercicio, que es lo que se pidió: al elegir el total, ver de un vistazo cuánto sale por ejercicio --- */ .opr-pt-sala .opr-pt-ex-linea{ margin-top:14px !important; padding:12px 14px !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; color:var(--suave) !important; } .opr-pt-sala .opr-pt-ex-linea b{color:var(--tinta) !important; font-weight:800 !important} /* --- el historial de simulacros, en la pantalla del tiempo --- */ .opr-pt-sala .opr-pt-ex-hist{ margin-top:14px !important; padding:12px 14px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; } .opr-pt-sala .opr-pt-ex-hist-cab{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:12px !important; padding-bottom:8px !important; border-bottom:1px solid var(--borde) !important; font-size:.8125rem !important; color:var(--tenue) !important; } .opr-pt-sala .opr-pt-ex-hist-cab b{font-size:.875rem !important; font-weight:800 !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-hist ul{display:flex !important; flex-direction:column !important} .opr-pt-sala .opr-pt-ex-hist li{ display:flex !important; align-items:baseline !important; gap:10px !important; padding:7px 0 !important; font-size:.84375rem !important; color:var(--suave) !important; } .opr-pt-sala .opr-pt-ex-hist li + li{border-top:1px solid var(--p100) !important} .opr-pt-sala .opr-pt-ex-hist li > span:first-child{flex:none !important; min-width:8.5em !important} .opr-pt-sala .opr-pt-ex-hist li > span:nth-child(2){flex:1 !important; color:var(--tenue) !important; font-size:.8125rem !important} .opr-pt-sala .opr-pt-ex-hist li b{flex:none !important; font-weight:800 !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-borrar{ flex:none !important; width:24px !important; height:24px !important; border-radius:7px !important; color:var(--p400) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition:background .15s ease, color .15s ease, width .15s ease !important; } .opr-pt-sala .opr-pt-ex-borrar svg{width:13px !important; height:13px !important} .opr-pt-sala .opr-pt-ex-borrar:hover{background:var(--p100) !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-borrar.es-seguro{ width:auto !important; padding:0 10px !important; background:var(--no100) !important; color:var(--no900) !important; font-size:.75rem !important; font-weight:700 !important; } .opr-pt-sala .opr-pt-ex-borrar:disabled{opacity:.5 !important} /* --- la comparación con el simulacro anterior, en el resultado --- */ .opr-pt-sala .opr-pt-ex-compara{ padding:11px 14px !important; border-radius:var(--radio-s) !important; text-align:left !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important; } .opr-pt-sala .opr-pt-ex-compara b{font-weight:800 !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-reglas{ margin-top:14px !important; display:flex !important; flex-direction:column !important; gap:7px !important; font-size:.875rem !important; line-height:1.5 !important; color:var(--suave) !important; } /* El punto va con ::before ABSOLUTO, no como hermano dentro de un flex. Con `display:flex` en el
  • , cada trozo de texto y cada pasan a ser elementos del flex y el `gap` mete un hueco entre ellos: la frase sale con espacios raros alrededor de las negritas. */ .opr-pt-sala .opr-pt-ex-reglas li{position:relative !important; padding-left:15px !important} .opr-pt-sala .opr-pt-ex-reglas li::before{ content:'' !important; position:absolute !important; left:0 !important; top:.55em !important; width:5px !important; height:5px !important; border-radius:999px !important; background:var(--p400) !important; } /* Cuatro tiempos no caben en una fila estrecha: el segmentado se parte. */ @media (max-width:560px){ .opr-pt-sala #opr-pt-tiempo{width:100% !important} .opr-pt-sala #opr-pt-tiempo button{flex:1 1 0 !important; padding-left:0 !important; padding-right:0 !important} } /* --- el relevo entre bloques --- */ .opr-pt-sala .opr-pt-relevo{ flex:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; text-align:center !important; padding:clamp(26px,3.4vw,40px) !important; } .opr-pt-sala .opr-pt-relevo .opr-pt-aj-sub{max-width:44ch !important} .opr-pt-sala .opr-pt-relevo-marca{ display:flex !important; gap:7px !important; margin:6px 0 4px !important; } .opr-pt-sala .opr-pt-relevo-marca span{ width:34px !important; height:6px !important; border-radius:999px !important; background:var(--p200) !important; } .opr-pt-sala .opr-pt-relevo-marca span.es-hecho{background:var(--p600) !important} .opr-pt-sala .opr-pt-relevo-marca span.es-ahora{background:var(--p950) !important} .opr-pt-sala .opr-pt-relevo .opr-pt-ex-linea{margin-top:4px !important} /* `flex:none` porque .opr-pt-aj-ir lleva `flex:1 1 auto` para repartirse la fila de botones de los ajustes. Aquí el contenedor es una columna, así que ese mismo `flex` estiraba el botón a lo alto: una cápsula de medio panel. */ .opr-pt-sala .opr-pt-relevo .opr-btn{margin-top:12px !important; flex:none !important; min-width:220px !important; justify-content:center !important} /* --- la cuenta atrás. El reloj es el mismo trozo de la cabecera; lo que cambia es el color cuando queda poco. No es adorno: en el examen el tiempo se acaba sin avisar y aquí sí avisa. --- */ .opr-pt-sala .opr-pt-reloj.es-poco{background:var(--av100) !important; color:var(--av900) !important} .opr-pt-sala .opr-pt-reloj.es-nada{background:var(--no100) !important; color:var(--no900) !important} .opr-pt-sala .opr-pt-anterior{padding:10px 14px !important; font-size:.875rem !important; display:inline-flex !important; align-items:center !important; gap:6px !important} .opr-pt-sala .opr-pt-anterior svg{width:15px !important; height:15px !important} .opr-pt-sala .opr-pt-anterior:disabled{opacity:.4 !important} /* Con dieciséis por bloque los puntos son además el índice: se pulsan para ir a uno concreto, que es lo que se hace en un examen de papel. */ .opr-pt-sala .opr-pt-puntos.es-ir .opr-pt-punto{cursor:pointer !important; width:10px !important; height:10px !important} .opr-pt-sala .opr-pt-puntos.es-ir .opr-pt-punto.es-activo{width:24px !important} /* --- el resultado del simulacro --- */ .opr-pt-sala .opr-pt-ex-final{width:100% !important; display:flex !important; flex-direction:column !important; gap:14px !important} .opr-pt-sala .opr-pt-ex-120{ display:flex !important; align-items:center !important; gap:16px !important; text-align:left !important; padding:14px 16px !important; border-radius:var(--radio-s) !important; background:var(--p950) !important; color:#fff !important; } .opr-pt-sala .opr-pt-ex-120 > div{flex:none !important; display:flex !important; flex-direction:column !important; gap:2px !important; align-items:center !important} /* El `>` no sobra: sin él, la negrita de la frase de al lado también se pondría a 2rem y la explicación se leería como el titular. */ .opr-pt-sala .opr-pt-ex-120 > div > b{font-size:2rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.035em !important} .opr-pt-sala .opr-pt-ex-120 > div > span{font-size:.6875rem !important; color:var(--p400) !important; text-align:center !important; max-width:11ch !important; line-height:1.3 !important} .opr-pt-sala .opr-pt-ex-120 p{font-size:.8125rem !important; line-height:1.5 !important; color:var(--p300) !important; text-wrap:pretty !important} .opr-pt-sala .opr-pt-ex-120 p b{font-size:inherit !important; font-weight:700 !important; color:#fff !important} .opr-pt-sala .opr-pt-ex-tabla{width:100% !important; border-collapse:collapse !important; font-size:.875rem !important} .opr-pt-sala .opr-pt-ex-tabla th, .opr-pt-sala .opr-pt-ex-tabla td{padding:9px 8px !important; text-align:right !important; border-bottom:1px solid var(--borde) !important} .opr-pt-sala .opr-pt-ex-tabla th:first-child, .opr-pt-sala .opr-pt-ex-tabla td:first-child{text-align:left !important} .opr-pt-sala .opr-pt-ex-tabla thead th{font-size:.71875rem !important; font-weight:700 !important; color:var(--tenue) !important} .opr-pt-sala .opr-pt-ex-tabla tbody td{font-weight:600 !important; color:var(--suave) !important} .opr-pt-sala .opr-pt-ex-tabla tbody td:first-child{font-weight:700 !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-tabla tbody td:last-child{font-weight:800 !important; color:var(--tinta) !important} .opr-pt-sala .opr-pt-ex-tabla tfoot td{font-weight:800 !important; color:var(--tinta) !important} @media (max-width:560px){ .opr-pt-sala .opr-pt-ex-120{flex-direction:column !important; align-items:flex-start !important; text-align:left !important} .opr-pt-sala .opr-pt-ex-120 > div{flex-direction:row !important; align-items:baseline !important; gap:8px !important} .opr-pt-sala .opr-pt-ex-120 > div > span{max-width:none !important} .opr-pt-sala .opr-pt-ex-tabla{font-size:.8125rem !important} .opr-pt-sala .opr-pt-ex-tabla th, .opr-pt-sala .opr-pt-ex-tabla td{padding:8px 4px !important} } /* El relevo y la pantalla del tiempo, en pantalla completa, se deslizan solos igual que los ajustes y el resultado. */ .opr-pt-sala.es-abierta .opr-pt-relevo{flex:1 !important; min-height:0 !important; overflow-y:auto !important} /* ---------- la pantalla de estudio ---------- Es de memoria visual y de lo que venga detrás que necesite enseñar algo antes de preguntar. Vive dentro del ejercicio, no al lado: cuando el contenedor lleva `es-estudio` se tapan el enunciado, la leyenda, el dibujo, la nota y las opciones, y se destapa este bloque. POR QUÉ LOS SELECTORES LLEVAN `.opr-pt-panel` EN MEDIO y no son `.opr-pt-sala.es-estudio .opr-pt-opciones` a secas: eso mediría (0,3,0), lo mismo que `.opr-pt-sala.es-abierta .opr-pt-escena`, y un empate lo decide el orden de las hojas, que es justo lo que LiteSpeed puede cambiar. Con el panel por medio mide (0,4,0) y gana siempre. Es la trampa nº 4 del manual. */ .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-enunciado, .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-leyenda, .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-escena, .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-nota-ej, .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-opciones, .opr-pt-sala.es-estudio .opr-pt-panel .opr-pt-expl{display:none !important} .opr-pt-sala .opr-pt-estudio{display:flex !important; flex-direction:column !important; align-items:stretch !important} .opr-pt-sala .opr-pt-est-tit{ margin:0 0 4px !important; text-align:center !important; font-size:1.125rem !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important; } .opr-pt-sala .opr-pt-est-escena{ margin-top:12px !important; padding:14px !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow-x:auto !important; } .opr-pt-sala .opr-pt-est-escena svg.opr-pt-lienzo{ display:block !important; width:100% !important; max-width:660px !important; height:auto !important; max-height:46vh !important; } .opr-pt-sala .opr-pt-est-nota{margin-top:9px !important; text-align:center !important; font-size:.8125rem !important; color:var(--tenue) !important} /* La barra baja de izquierda a derecha. Un número que va restando invita a mirarlo a él en vez de al dibujo, que es lo único que hay que mirar. */ .opr-pt-sala .opr-pt-est-barra{ margin-top:14px !important; height:6px !important; border-radius:999px !important; overflow:hidden !important; background:var(--p200) !important; } .opr-pt-sala .opr-pt-est-barra i{ display:block !important; height:100% !important; width:100% !important; border-radius:999px !important; background:var(--p950) !important; transform-origin:left center !important; } /* ---------- el atributo hidden ---------- Es la trampa nº 4 del manual técnico, y aquí muerde dos veces. · La sección ES `.opr`, y `.opr{display:block !important}` del núcleo —blindado, o sea con !important— gana al display:none que el navegador le da a [hidden]. `.opr-pt-sala[hidden]` mide (0,2,0) y lo arregla. · Dentro, `.opr [hidden]` del núcleo mide (0,2,0), lo mismo que `.opr-pt-sala .opr-pt-ajuste{display:flex !important}`, y el desempate lo decide el ORDEN de las hojas. Con `.opr-pt-sala .opr-pt-panel [hidden]`, que mide (0,3,0), gana siempre y da igual cómo las sirva LiteSpeed. OJO: un selector de atributo pesa lo mismo que una clase, no más. Poner `.opr-pt-sala [hidden]` no basta: empata y pierde por ir antes en la hoja. Este bloque va al final del fichero a propósito. */ .opr-pt-sala[hidden], .opr-pt-sala.es-abierta[hidden], .opr-pt-sala .opr-pt-panel [hidden]{display:none !important}