/* --------------------------------------------------------------------- OpoReal · Blog · piezas compartidas --------------------------------------------------------------------- La tarjeta, el cartel, la línea de datos y el cierre salen en las dos páginas del blog —el listado y el artículo—, así que viven aquí. TODAS las reglas van prefijadas con `.opr-bl-seccion`, la clase que llevan las cinco secciones del blog. No es manía de orden: el reset del núcleo es `.opr *{margin:0 !important; padding:0 !important; max-width:none !important; …}`, con especificidad (0,1,0), y una clase suelta como `.opr-bl-carta` mide exactamente lo mismo. Mientras las hojas se sirvan en orden gana la nuestra por ir después, pero **el orden no está garantizado**: LiteSpeed combina y reordena los CSS. Con el prefijo subimos a (0,2,0) y ganamos siempre. Documento 02, punto 11.1. Y hay una segunda razón, más fina: `.opr img{display:block !important; max-width:100% !important}` mide (0,1,1) y EMPATARÍA con `.opr-bl-foto img`. Con el prefijo delante, (0,2,0) le gana por número de clases. Trampa nº 3 del documento 02. --------------------------------------------------------------------- */ /* --- la etiqueta de categoría --- Caja alta y baja, peso 600, tamaño normal. Nada de versalitas con las letras separadas: es lo que delata un diseño generado con IA y está prohibido en el documento 01, punto 3.4. */ .opr-bl-seccion .opr-bl-etq{margin-bottom:0 !important; font-size:.84375rem !important; font-weight:600 !important; color:var(--tenue) !important} .opr-bl-seccion.es-noche .opr-bl-etq{color:var(--p400) !important} /* --- fecha y minutos --- */ .opr-bl-seccion .opr-bl-meta{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:9px !important; margin-top:16px !important; font-size:.84375rem !important; color:var(--tenue) !important; } .opr-bl-seccion .opr-bl-meta.es-menuda{margin-top:12px !important; font-size:.78125rem !important} .opr-bl-seccion .opr-bl-meta i{ width:3px !important; height:3px !important; border-radius:999px !important; background:var(--p300) !important; display:block !important; flex:none !important; } /* --- la imagen destacada --- */ .opr-bl-seccion .opr-bl-foto{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; background:var(--p100) !important; } /* --- el cartel: lo que se pinta cuando no hay imagen --- Un panel de noche con el escudo enorme detrás y la categoría delante. No se usa una foto de archivo: en un artículo sobre las bases de la convocatoria, una foto de banco no dice nada y se nota. */ .opr-bl-seccion .opr-bl-cartel{ position:relative !important; display:block !important; width:100% !important; height:100% !important; background:var(--p950) !important; overflow:hidden !important; } .opr-bl-seccion .opr-bl-cartel-marca{ position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; display:block !important; height:78% !important; width:auto !important; color:#fff !important; opacity:.13 !important; pointer-events:none !important; } .opr-bl-seccion .opr-bl-cartel-marca svg{height:100% !important; width:auto !important; display:block !important} .opr-bl-seccion .opr-bl-cartel-etq{ position:absolute !important; left:0 !important; right:0 !important; bottom:18px !important; display:block !important; text-align:center !important; font-size:.875rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--p300) !important; } /* --- la tarjeta de la rejilla --- */ .opr-bl-seccion .opr-bl-rejilla{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:clamp(14px,1.8vw,22px) !important; } @media (max-width:900px){ .opr-bl-seccion .opr-bl-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } @media (max-width:620px){ .opr-bl-seccion .opr-bl-rejilla{grid-template-columns:1fr !important} } /* --- toda la tarjeta se pincha, con UN SOLO enlace --- El enlace de verdad es el del titular, y se estira por encima de la tarjeta entera con un `::after`. Es el patrón del «enlace estirado»: se puede pinchar en la foto, en la entradilla o en la fecha, pero un lector de pantalla sigue oyendo un enlace y no tres que dicen lo mismo. Hasta la v1.0.1 esto no estaba: la foto era un segundo enlace y el «Leer el artículo» era un `` que no llevaba a ninguna parte. Pinchar justo ahí —que es donde pincha todo el mundo— no hacía nada. Un texto que dice «leer» y no se puede pulsar no es un detalle: es la tarjeta rota. `position:relative` va en la TARJETA y no en el enlace: el `::after` se coloca respecto al antepasado posicionado más cercano, así que si el propio `` se posicionara, el recuadro se quedaría del tamaño del titular. */ .opr-bl-seccion .opr-bl-carta{ position:relative !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; transition:transform .18s ease, box-shadow .18s ease !important; } .opr-bl-seccion .opr-bl-carta-tit a::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; } .opr-bl-seccion .opr-bl-carta:hover{transform:translateY(-3px) !important; box-shadow:var(--sombra) !important} /* --- me gusta dentro de una tarjeta --- Va aquí, pegado a la regla del enlace estirado de arriba, porque las dos se explican juntas: la tarjeta entera se pincha gracias a un `::after` con `z-index:1` que la cubre de lado a lado, así que cualquier cosa pulsable que se meta dentro tiene que levantarse por encima de él o el clic se lo come el enlace y en vez del me gusta se abre el artículo. De ahí el `position:relative` y el `z-index:2`; el `stopPropagation` del JavaScript solo es el segundo cinturón. El mismo bloque sirve para el destacado, que lleva su propio `::after` en `bl-lista.css`. Más pequeño que el del artículo: en el artículo el me gusta es el final de la lectura y puede pesar; en una tarjeta compite con el titular y no debe ganarle. */ .opr-bl-seccion .opr-bl-megusta-caja.es-en-tarjeta{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; margin-top:14px !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta{ display:inline-flex !important; align-items:center !important; gap:8px !important; padding:7px 13px !important; border-radius:999px !important; background:var(--superficie) !important; color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; font-size:.8125rem !important; font-weight:700 !important; letter-spacing:-.012em !important; line-height:1 !important; transition:color .16s ease, box-shadow .16s ease !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta:hover{ color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--tinta) !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-corazon{ width:16px !important; height:16px !important; flex:none !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linejoin:round !important; transition:fill .16s ease, transform .16s ease !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta.es-mio{ color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--tinta) !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta.es-mio .opr-bl-corazon{fill:currentColor !important} .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta:active .opr-bl-corazon{transform:scale(.86) !important} .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta b{font-weight:700 !important; color:var(--tenue) !important} .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta.es-mio b{color:var(--tinta) !important} /* Puesto y bloqueado NO se ve apagado: `disabled` aquí no significa «no disponible», significa «ya está dado». Solo se apaga mientras la petición está en el aire, que es el `disabled` sin `es-mio`. */ .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta[disabled]{cursor:default !important} .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta[disabled]:not(.es-mio){opacity:.55 !important} .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta[disabled]:hover:not(.es-mio){ color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; } .opr-bl-seccion .es-en-tarjeta .opr-bl-megusta-voz{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip-path:inset(50%) !important; white-space:nowrap !important; } /* La tarjeta se levanta al pasar por encima; el botón no tiene por qué cambiar de color a la vez, que parecería que ya está pulsado. */ .opr-bl-seccion .opr-bl-carta:hover .es-en-tarjeta .opr-bl-megusta:not(:hover):not(.es-mio){ color:var(--suave) !important; } .opr-bl-seccion .opr-bl-carta-media{ display:block !important; width:100% !important; aspect-ratio:16 / 9 !important; overflow:hidden !important; background:var(--p100) !important; } .opr-bl-seccion .opr-bl-carta-texto{ display:flex !important; flex-direction:column !important; flex:1 !important; padding:20px 20px 18px !important; } /* OJO: el titular NO lleva `position`. Se probó a ponerle `position:relative` para que el foco del teclado quedara encima, y con eso el recuadro estirado pasó a medirse contra el titular en vez de contra la tarjeta: 336 x 22 px en vez de la tarjeta entera, o sea que solo se podía pinchar el titular otra vez. `inset:0` se coloca respecto al antepasado POSICIONADO más cercano, y ese tiene que ser la tarjeta y nadie más. */ .opr-bl-seccion .opr-bl-carta-tit{ margin-top:7px !important; font-size:1.0625rem !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:-.018em !important; text-wrap:pretty !important; } .opr-bl-seccion .opr-bl-carta-tit a{color:var(--tinta) !important} .opr-bl-seccion .opr-bl-carta:hover .opr-bl-carta-tit a{color:var(--p700) !important} .opr-bl-seccion .opr-bl-carta-sub{ margin-top:8px !important; flex:1 !important; font-size:.90625rem !important; line-height:1.55 !important; color:var(--suave) !important; text-wrap:pretty !important; } /* --- el cierre --- */ .opr-bl-seccion.opr-bl-cierre .opr-bl-cierre-panel{ max-width:760px !important; margin:0 auto !important; text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; } .opr-bl-seccion.opr-bl-cierre .opr-h2{color:#fff !important} .opr-bl-seccion.opr-bl-cierre .opr-bl-cierre-sub{ margin-left:auto !important; margin-right:auto !important; max-width:52ch !important; } .opr-bl-seccion.opr-bl-cierre .opr-bl-cierre-btns{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; justify-content:center !important; margin-top:28px !important; } @media (max-width:560px){ .opr-bl-seccion.opr-bl-cierre .opr-bl-cierre-btns .opr-btn{flex:1 1 100% !important} } /* --------------------------------------------------------------------- OpoReal · Blog · el listado --------------------------------------------------------------------- Portada de noche, filtro de categorías, el último artículo a lo ancho y el resto en rejilla de tres. Ritmo claro/oscuro: noche · clara · noche, el mismo esquema de la página de Próximamente. Todas las reglas van prefijadas. Ver la cabecera de `bl-comun.css`. --------------------------------------------------------------------- */ /* --- portada --- No es sección de pantalla completa a propósito. Una portada de blog que ocupa toda la pantalla obliga a deslizar antes de ver un solo titular, y aquí lo que importa son los titulares. */ .opr-bl-seccion.opr-bl-portada{ padding-top:clamp(52px,6vw,86px) !important; padding-bottom:clamp(44px,5vw,68px) !important; } /* El agente de la derecha, como en Convocatorias. La segunda columna es una FRACCION y no `auto`: asi la figura tiene sitio de sobra y se centra dentro en vez de pegarse al borde de la caja. El texto va centrado en vertical. OJO CON LA ESPECIFICIDAD, que aqui ya se cayo una vez en Convocatorias: `.opr img,.opr svg` fija `display:block` y `max-width:100%` con (0,1,1), y ese bloque va en el nucleo de CADA plugin --el de `oporeal-bloques`, que trae la cabecera y el pie, se carga DESPUES de esta hoja--. Por eso todo lo del agente va con `.opr-bl-portada img.opr-bl-agente`, (0,2,1), que gana a cualquier `.opr img` venga de donde venga. Con (0,1,1) el `display:none` del movil no haria nada. */ .opr-bl-seccion.opr-bl-portada .opr-bl-portada-caja{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,0.32fr) !important; gap:clamp(12px,3vw,32px) !important; align-items:center !important; } .opr-bl-seccion.opr-bl-portada .opr-bl-portada-txt{min-width:0 !important} .opr-bl-portada img.opr-bl-agente{ width:clamp(110px,15vw,196px) !important; height:auto !important; justify-self:center !important; align-self:center !important; } @media (max-width:640px){ .opr-bl-portada img.opr-bl-agente{display:none !important} .opr-bl-seccion.opr-bl-portada .opr-bl-portada-caja{grid-template-columns:1fr !important} } /* v1.0.16 · En vertical la portada deja de ocupar la pantalla. El marcado lleva `es-portada` (del núcleo: alto mínimo de una pantalla y el contenido centrado). En el escritorio el texto y el agente la llenan; en un móvil de pie el texto mide unos 380 px de 844 y quedaba medio metro de negro por arriba y por abajo (Sergio, captura del 27-09-2026). Con la ventana más alta que ancha, alto automático y el respiro de siempre del listado. Va con (0,3,0) porque la regla del núcleo es (0,2,0) y ya viene blindada: así gana se cargue la hoja que se cargue antes. */ @media (max-aspect-ratio:1/1){ .opr-bl-seccion.opr-bl-portada.es-portada{ min-height:0 !important; padding-top:clamp(40px,7vw,72px) !important; padding-bottom:clamp(40px,6vw,60px) !important; } } .opr-bl-seccion.opr-bl-portada .opr-h1{color:#fff !important; max-width:18ch !important} .opr-bl-seccion.opr-bl-portada .opr-bl-portada-sub{max-width:56ch !important} /* v1.0.17 · Bloque y no flex. Con flex, el texto era un elemento flexible anónimo y la cifra otro, y en un móvil de 375 px el texto se comía el ancho de la cifra: «14» salía partido en «1» y «4», uno encima del otro. El hueco entre cifra y texto ya lo pone el espacio del marcado. */ .opr-bl-seccion.opr-bl-portada .opr-bl-portada-dato{ margin-top:22px !important; display:block !important; color:var(--p500) !important; } .opr-bl-seccion.opr-bl-portada .opr-bl-portada-dato .opr-cifra{color:var(--p300) !important; font-weight:700 !important} /* --- el filtro de categorías --- Píldoras, como el segmentado del núcleo, pero con enlaces de verdad en vez de botones: cada categoría tiene su propia dirección. Por eso no se usa `.opr-seg`, que lleva `button` en el selector. v1.0.9 · Hasta la 1.0.8 en estrecho la fila no se partía: `flex-wrap:nowrap` más `overflow-x:auto` la convertían en una tira que se desplazaba. La idea era ahorrar alto. El resultado era otro: las píldoras se encogían por debajo de su texto —«Cómo estudiar» pedía 120 px y se quedaba en 88— y los rótulos salían cortados a media palabra. Medido a 390 px, no visto de lejos. Ahora la fila se parte en varias líneas y cada píldora mide lo que mide su texto. Dos reglas lo sostienen y ninguna sobra: - `flex:0 0 auto` en el `li`, para que nunca se encoja pase lo que pase. - en estrecho, píldora más pequeña (14 px de lado, .875rem) para que entren tres por línea en vez de dos. Con las cuatro categorías de hoy son dos líneas justas. */ .opr-bl-seccion .opr-bl-filtro{margin-bottom:clamp(28px,3.4vw,42px) !important} .opr-bl-seccion .opr-bl-filtro ul{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; align-items:center !important; } .opr-bl-seccion .opr-bl-filtro li{display:block !important; flex:0 0 auto !important; min-width:0 !important} .opr-bl-seccion .opr-bl-filtro a{ display:block !important; padding:9px 17px !important; border-radius:999px !important; font-size:.9375rem !important; font-weight:600 !important; letter-spacing:-.01em !important; color:var(--suave) !important; background:var(--p100) !important; white-space:nowrap !important; transition:background .16s ease, color .16s ease, box-shadow .16s ease !important; } .opr-bl-seccion .opr-bl-filtro a:hover{color:var(--tinta) !important; background:var(--p200) !important} .opr-bl-seccion .opr-bl-filtro a[aria-current="page"]{ background:var(--p950) !important; color:#fff !important; } @media (max-width:640px){ .opr-bl-seccion .opr-bl-filtro ul{gap:7px !important} .opr-bl-seccion .opr-bl-filtro a{padding:8px 14px !important; font-size:.875rem !important} } /* --- el destacado --- El artículo más reciente, con la foto a la izquierda y el texto a la derecha. La proporción 4/3 en la media es la que deja el titular y la entradilla centrados sin que sobre aire por debajo. */ /* El destacado entero se pincha, con el mismo enlace estirado que las tarjetas. Ver la explicación larga en `bl-comun.css`. */ .opr-bl-seccion .opr-bl-destacado{ position:relative !important; display:grid !important; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important; gap:clamp(22px,3vw,44px) !important; align-items:center !important; margin-bottom:clamp(34px,4vw,54px) !important; padding-bottom:clamp(34px,4vw,54px) !important; border-bottom:1px solid var(--borde) !important; } .opr-bl-seccion .opr-bl-destacado-tit a::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; } .opr-bl-seccion .opr-bl-destacado-media{ display:block !important; width:100% !important; aspect-ratio:4 / 3 !important; overflow:hidden !important; border-radius:var(--radio) !important; background:var(--p100) !important; box-shadow:var(--sombra-s) !important; } /* Sin `position` en el titular: ver la nota de `bl-comun.css`. */ .opr-bl-seccion .opr-bl-destacado-tit{ margin-top:9px !important; font-size:clamp(1.5rem,2.9vw,2.15rem) !important; font-weight:800 !important; line-height:1.12 !important; letter-spacing:-.028em !important; text-wrap:balance !important; } .opr-bl-seccion .opr-bl-destacado-tit a{color:var(--tinta) !important} .opr-bl-seccion .opr-bl-destacado:hover .opr-bl-destacado-tit a{color:var(--p700) !important} .opr-bl-seccion .opr-bl-destacado-sub{ margin-top:14px !important; max-width:52ch !important; font-size:1rem !important; line-height:1.6 !important; color:var(--suave) !important; text-wrap:pretty !important; } /* «Leer el artículo» sigue siendo un `` a propósito: si fuera un enlace habría dos enlaces al mismo sitio dentro de la misma tarjeta. Se pincha porque el recuadro estirado del titular pasa por encima, y el cursor lo dice. Lo que NO puede volver a pasar es que se vea como pulsable y no lo sea. */ .opr-bl-seccion .opr-bl-leer{ display:inline-flex !important; align-items:center !important; gap:8px !important; margin-top:20px !important; font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--tinta) !important; cursor:pointer !important; } .opr-bl-seccion .opr-bl-leer svg{width:15px !important; height:15px !important; transition:transform .18s ease !important} .opr-bl-seccion .opr-bl-destacado:hover .opr-bl-leer svg{transform:translateX(3px) !important} @media (max-width:860px){ /* El bloque interactivo debajo del texto en estrecho, patrón del punto 9 del documento 02: primero se cuenta qué es, después se enseña. Aquí es al revés porque la foto ES el gancho del destacado, así que se queda arriba y solo se apila. */ .opr-bl-seccion .opr-bl-destacado{grid-template-columns:1fr !important; gap:20px !important} .opr-bl-seccion .opr-bl-destacado-media{aspect-ratio:16 / 9 !important} } /* --- paginación --- */ .opr-bl-seccion .opr-bl-paginas{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; margin-top:clamp(32px,4vw,48px) !important; padding-top:clamp(22px,2.6vw,30px) !important; border-top:1px solid var(--borde) !important; } .opr-bl-seccion .opr-bl-paginas-donde{flex:none !important; text-align:center !important} .opr-bl-seccion .opr-bl-paginas .opr-btn{padding:12px 20px !important; font-size:.9375rem !important} @media (max-width:560px){ .opr-bl-seccion .opr-bl-paginas{flex-wrap:wrap !important; justify-content:center !important} .opr-bl-seccion .opr-bl-paginas-donde{order:3 !important; width:100% !important} } /* --- blog vacío --- No se rellena con nada. Se dice que no hay artículos, se cuenta qué va a haber y se manda a donde sí hay algo hoy. */ .opr-bl-seccion .opr-bl-vacio{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; padding:clamp(44px,6vw,80px) clamp(20px,4vw,40px) !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; } .opr-bl-seccion .opr-bl-vacio-icono{ width:46px !important; height:46px !important; border-radius:14px !important; margin-bottom:20px !important; display:grid !important; place-items:center !important; background:var(--p100) !important; color:var(--p600) !important; } .opr-bl-seccion .opr-bl-vacio-icono svg{width:22px !important; height:22px !important} .opr-bl-seccion .opr-bl-vacio-txt{ margin-top:12px !important; max-width:52ch !important; font-size:.96875rem !important; line-height:1.6 !important; color:var(--suave) !important; text-wrap:pretty !important; } .opr-bl-seccion .opr-bl-vacio-btns{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; justify-content:center !important; margin-top:26px !important; } .opr-bl-seccion .opr-bl-vacio-admin{ margin-top:24px !important; padding:12px 16px !important; border-radius:var(--radio-s) !important; background:var(--av100) !important; color:var(--av900) !important; max-width:56ch !important; } .opr-bl-seccion .opr-bl-vacio-admin a{color:var(--av900) !important; font-weight:700 !important; text-decoration:underline !important} @media (max-width:560px){ .opr-bl-seccion .opr-bl-vacio-btns .opr-btn{flex:1 1 100% !important} } /* --- el enlace a la guía, en la portada del listado · v1.0.14 --- */ .opr-bl-seccion.opr-bl-portada .opr-bl-portada-guia{margin-top:14px !important; font-size:.9375rem !important} .opr-bl-seccion.opr-bl-portada .opr-bl-portada-guia a{ color:var(--p100) !important; font-weight:600 !important; text-decoration:underline !important; text-underline-offset:3px !important; text-decoration-color:var(--p500) !important; } .opr-bl-seccion.opr-bl-portada .opr-bl-portada-guia a:hover{text-decoration-color:var(--p100) !important} /* --------------------------------------------------------------------- OpoReal · Blog · la página de artículo --------------------------------------------------------------------- Lo importante de esta hoja es `.opr-bl-cuerpo`: lo que hay dentro no lo escribimos nosotros, lo escribe Sergio en el editor de WordPress. Así que aquí se viste **todo** lo que el editor puede sacar —párrafos, listas, citas, tablas, imágenes, código— y no solo lo que hoy hay escrito. Y hay que vestirlo entero por una razón concreta: el blindaje del núcleo deja los descendientes de `.opr` sin márgenes, sin viñetas, sin cursiva, sin subrayado y sin fondo. Un `