/** * T-05 · Página genérica — templates/page/styles.css * * Estilos de la plantilla por defecto de páginas. Handle * `pf_pfuture_template_page`. * * Bloques raíz: * .pf-page contenedor de la plantilla * .pf-page__body rejilla índice + contenido (#205) * .pf-page__body--sin-toc la misma a una columna, sin índice * .pf-page__aside columna izquierda fija: índice y caja CTA * .pf-page__content contenido nativo (the_content filtrado) * .pf-page__content--normal columna de lectura * .pf-page__content--ancho contenido a todo el contenedor * * Tokens: solo nombres canonicos de style.css seccion 1, y sin literal de respaldo * (issue #60). `var(--x, 3rem)` se queda con el literal siempre que el token falte, * que es como el andamiaje dejo de consumir la escala de verdad sin que se notara. * * @package pfuture */ /* Canalón -------------------------------------------------------------------- * * El canalón lo da la plantilla a sus hijos directos, con el idiom de * `.pf-container` —style.css sección 5—. Convención del tema desde el #78 y el * #84; aquí se adopta con el #90. Ver DEC-027 y DEC-028 de `portafolio`. * * Antes contenía `__inner` por su cuenta y con `--pf-space-sm`: 16px de canalón * donde el resto del sitio pone 24. `__inner` conserva su relleno de bloque, * que no es canalón. * * Sobre el hijo directo y no sobre cada bloque, para que un componente con * canalón propio no se lo sume encima —y T-05 sí pinta `cta-box` cuando la * página lo pide (DEC-029)—. Dos clases (0,2,0) para ganar a * `.pf-cta-box--section` (0,1,0), que encola su hoja al pintarse o sea después * de esta. Hero excluido porque va a sangre y pone el canalón en su `__inner`. * * Los bloques `alignwide` y `alignfull` de más abajo no se ven afectados: tiran * de `calc(50% - 50vw)` sobre su propio contenedor, así que siguen llegando al * borde de la ventana sea cual sea el canalón de fuera. */ .pf-page > :not(.pf-hero) { margin-inline: auto; max-width: var(--pf-container); padding-inline: var(--pf-gutter); width: 100%; } .pf-page__inner { padding-block: var(--pf-space-xl); } /* Cuerpo: índice y caja a la izquierda, contenido a la derecha (#205) ---------- * * La maquetación de la página legal (T-04), que el dueño extendió a las páginas * largas el 19 sep 2026: la misma pista `minmax(14rem, 18rem)` para que las * plantillas con índice —T-04, T-05, T-07, T-08— midan igual, y la columna * entera fija (`.pf-page__aside`, patrón de T-07), no cada pieza por su cuenta: * el índice va con `sticky => false` (ver template.php) y la caja trae su propio * `position: sticky` desde 1024px, que dentro de una columna ya fijada no tiene * margen para moverse y queda inerte. Si fuera al revés —columna en flujo y las * dos piezas fijas con el mismo `top`— la caja subiría sobre el índice. * * EL CORTE ES 1024px Y NO LOS 62rem DE LA LEGAL, A PROPÓSITO. La legal no lleva * caja. `common/cta-box` cambia de cara justo a 1024px —barra inferior hasta * 1023, caja lateral desde 1024— y el #102 midió en T-08 que una rejilla de dos * columnas por debajo de ese ancho deja 31px (993–1023) con la barra `position: * fixed` escapándose de su columna. Se escribe en píxeles y no en rem por lo * mismo que T-08: `1023px` y `1024px` son LITERALMENTE los dos `@media` de * `common/cta-box/styles.css`, y un grep los encuentra juntos. T-07 corta igual * desde el #207. El desplazamiento de la columna sigue a la cabecera fija por * el mismo token que usan `toc` y `cta-box` (`--pf-header-height`, DEC-027 de * shell): con `--pf-space-lg` a secas, como la legal, la cabecera de 72px * taparía el título del índice al hacer scroll. * * En móvil el orden es índice, contenido y caja al final, como la legal. El * envoltorio de la columna se disuelve (`display: contents`, sobre un `div` sin * semántica que perder) para que sus hijos entren en la rejilla de una columna y * se ordenen con `order`; la caja no se pinta dos veces. El centinela que * `cta-box/script.js` inserta delante de la caja viaja con ella —es todo lo que * no es el índice—, así que la barra móvil se fija y se suelta con el criterio * de siempre (#94). `row-gap: 0` y márgenes propios en vez de `gap`: ese * centinela es un hijo vacío más de la rejilla y con `gap` sumaba un hueco. * * `minmax(0, 1fr)` y no `1fr` en la pista del contenido, en las dos rejillas: * es lo que evita que un token largo ensanche la pista (#107). * * Lo que NO se hace: repartir la altura de la columna entre índice y caja con * `max-height` + desplazamiento interno del índice (T-07 lo hace con flex). Las * seis páginas tienen de 4 a 8 entradas —columna de unos 550px— y un índice que * se desplaza por dentro recorta el anillo de foco de sus enlaces contra el * borde. Si un día una página trae un índice más alto que la ventana, la caja * queda bajo el pliegue y ese reparto es el remedio conocido. */ .pf-page__body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; } @media (max-width: 1023px) { .pf-page__aside { display: contents; } .pf-page__aside > :not(.pf-toc) { order: 1; } .pf-page__aside + .pf-page__content, .pf-page__aside > .pf-cta-box { margin-top: var(--pf-space-xl); } /* Hueco de `common/cta-box` (#209, a shell): por debajo de 1024 la caja `sticky` SUELTA —sin `is-pinned`— no declara relleno, y el título sale pegado al borde del panel. Aquí se le da el de su cara lateral. Acotado a `:not(.is-pinned)` para no pisar la barra fijada, que trae el suyo. */ .pf-page__aside > .pf-cta-box:not(.is-pinned) .pf-cta-box__inner { padding: var(--pf-space-md); } } @media (min-width: 1024px) { .pf-page__body { align-items: start; column-gap: var(--pf-space-xl); grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); } /* Sin índice, una sola columna: sin esta regla el contenido caería en la pista del índice y se leería en 18rem con media pantalla en blanco (DEC-015 de T-04). La clase la pone template.php, no `:has()`. */ .pf-page__body--sin-toc { grid-template-columns: minmax(0, 1fr); } .pf-page__aside { position: sticky; top: calc(var(--pf-header-height, 0px) + var(--pf-space-md)); } .pf-page__aside > .pf-cta-box { margin-top: var(--pf-space-lg); } /* Junto al índice, la columna de lectura se alinea a su borde; sin índice vuelve a centrarse, que es la regla de siempre de `--normal`. */ .pf-page__body > .pf-page__content--normal { margin-inline: 0; } .pf-page__body--sin-toc > .pf-page__content--normal { margin-inline: auto; } } /* Prosa larga: tamaño y interlineado de la dirección «Expediente» (#113). */ .pf-page__content { font-size: var(--pf-text-prose); line-height: var(--pf-leading-loose); } .pf-page__content > * + * { margin-top: var(--pf-space-sm); } .pf-page__content--normal { margin-inline: auto; max-width: 75ch; } .pf-page__content--ancho { max-width: none; } .pf-page__content :where(img, video, iframe) { height: auto; max-width: 100%; } /* Bloques del editor --------------------------------------------------------- * * style.css ya da tipografia, margenes, listas, citas, tablas y `pre` por * etiqueta, y los bloques de Gutenberg son etiquetas normales con una clase * `wp-block-*` encima: `wp:heading` sale como

, `wp:list` como