/* ===================================================================== clinical.css — v8. La maqueta Stitch «Clinical Archive», transcrita. --------------------------------------------------------------------- [v8.2.0] LA HOJA BEBE DE LOS TOKENS. La transcripción original escribía los valores de la maqueta a mano; con el modo de alto contraste de la 6.24.0 eso dejó de ser un desorden tolerable y pasó a ser un fallo: un color escrito a mano no pasa por ningún token, así que ningún modo puede cambiarlo. Ahora cada color con token usa el token (los valores son los mismos: los tokens SON la paleta de la maqueta desde la v7). Quedan literales solo los colores de ilustración —lápiz, teal del neurotransmisor, ámbar del fármaco, violeta del BDNF— que no son interfaz y no tienen token. Esta hoja NO es una capa de retoques sobre lo anterior: es la transcripción a CSS plano del code.html de la maqueta (que estaba en Tailwind), valor por valor. Donde la maqueta define algo, manda la maqueta [regla del encargo, 27-08-2026]; donde no define nada, se extrapola su lenguaje (hairlines, blanco, serif marino, salvia). Correspondencia con la maqueta: surface-bright var(--pf-paper) · surface-container-lowest var(--pf-surface) surface-container-low var(--pf-paper-alt) · primary var(--pf-brand-deep) primary-container var(--pf-brand) · secondary var(--pf-sage-tx) on-surface var(--pf-ink) · on-surface-variant var(--pf-ink-soft) outline var(--pf-ink-faint) · outline-variant #c4c6cf · error var(--pf-danger) hairline var(--pf-line) · radios: sm 2px · lg 4px · xl 8px · 2xl 16px TAMAÑOS DE LETRA — una desviación declarada. La maqueta usa body-md de 16 px y tablas de 14 px. El autor pidió en [D-47] subir toda la lectura un 18 % porque «está difícil de leer». Se resuelve así: la PROSA usa el body-lg de la propia maqueta (18 px), que casi cumple [D-47] sin salirse de ella; la INTERFAZ (tablas, rail, etiquetas) usa los 14 px de la maqueta, porque ahí la densidad es el diseño. ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── 0. EL PAPEL DE LA PÁGINA ENTERA [v9.13.0] El plugin pintaba su papel solo dentro de .psf-v8; el y el contenedor del tema (.wp-site-blocks) se quedaban con el blanco del tema. En modo claro se notaba poco. En modo oscuro se veía así: la portada blanca con la caja de búsqueda negra, y en cada ficha una banda blanca arriba (migas, buscador) sobre el resto oscuro. En nuestras páginas el papel es de la página entera, en los dos temas. `body.psf-medida` es la clase que PSF_Tokens pone solo en ellas. ───────────────────────────────────────────────────────────────────── */ body.psf-medida, body.psf-medida .wp-site-blocks, body.psf-medida .wp-block-group.has-global-padding{ background:var(--pf-paper); color:var(--pf-ink); } /* ───────────────────────────────────────────────────────────────────── 1. CROMO — barra superior (TopNavBar de la maqueta) ───────────────────────────────────────────────────────────────────── */ /* [D-190 · v9.19.0] La altura de la barra, como token, para que lo que se pegue debajo de ella (las anclas de la ficha) sepa dónde empieza. */ :root{ --pf-nav-h:66px; } @media (max-width:1023px){ :root{ --pf-nav-h:60px; } } .psf-v8-nav{ background:var(--pf-paper); border-bottom:1px solid var(--pf-line); position:sticky; top:0; z-index:50; } .psf-v8-nav__in{ display:flex; justify-content:space-between; align-items:center; max-width:1536px; margin:0 auto; padding:8px 40px; gap:24px; } .psf-v8-nav__marca{ font-family:var(--pf-serif); font-weight:500; font-size:24px; line-height:1.3; letter-spacing:-.01em; color:var(--pf-brand-deep); text-decoration:none; transition:opacity .2s; } .psf-v8-nav__marca:hover{ opacity:.8; } .psf-v8-nav__links{ display:none; } /* [D-222 · v9.44.0] EL UMBRAL SUBE DE 768 A 1024, y no por la pestaña nueva. Medido a 768 px: la barra desplegada ya desbordaba CON CINCO pestañas —798 px de contenido en 768 de pantalla— y CON SEIS llegó a 946. Es decir, el iPad en vertical y cualquier portátil pequeño venían arrastrando scroll horizontal en TODO el sitio desde antes. Entre 768 y 1023 se usa el menú de botón, que ahí cabe de sobra. */ @media (min-width:1024px){ .psf-v8-nav__links{ display:flex; gap:32px; } } /* Y en la banda justa —1024 a 1199— se aprieta el espaciado en vez de dejar que los seis enlaces toquen la lupa. */ @media (min-width:1024px) and (max-width:1199px){ .psf-v8-nav__links{ gap:20px; } .psf-v8-nav__links a{ font-size:13px; letter-spacing:.03em; } .psf-v8-nav__in{ padding:8px 20px; gap:16px; } .psf-v8-nav__marca{ font-size:21px; } } /* [v9.13.0] Menú en el teléfono: botón junto a la lupa y panel bajo la barra. */ .psf-v8-nav__acciones{ display:flex; align-items:center; gap:4px; } .psf-v8-nav__menu{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--pf-brand-deep); cursor:pointer; } .psf-v8-nav__menu:hover{ color:var(--pf-sage-tx); } .psf-v8-nav__menu:focus-visible{ outline:2px solid var(--pf-sage-tx); outline-offset:2px; } @media (min-width:1024px){ .psf-v8-nav__menu{ display:none; } } @media (max-width:1023.98px){ .psf-v8-nav.is-open .psf-v8-nav__links{ display:flex; flex-direction:column; gap:0; position:absolute; left:0; right:0; top:100%; background:var(--pf-paper); border-bottom:1px solid var(--pf-line); box-shadow:0 12px 24px rgba(0,0,0,.08); padding:8px 24px 12px; } .psf-v8-nav.is-open .psf-v8-nav__links a{ padding:12px 0; font-size:16px; border-bottom:1px solid var(--pf-line); } .psf-v8-nav.is-open .psf-v8-nav__links a:last-child{ border-bottom:0; } .psf-v8-nav.is-open .psf-v8-nav__links a[aria-current]{ border-bottom-color:var(--pf-line); color:var(--pf-sage-tx); } .psf-v8-nav__in{ padding:8px 16px; } } .psf-v8-nav__links a{ font-family:var(--pf-sans); font-size:14px; font-weight:600; letter-spacing:.05em; line-height:1.4; color:var(--pf-ink-soft); text-decoration:none; padding:14px 0; border-bottom:2px solid transparent; transition:color .2s; } .psf-v8-nav__links a:hover{ color:var(--pf-brand-deep); } .psf-v8-nav__links a[aria-current]{ color:var(--pf-sage-tx); border-bottom-color:var(--pf-sage-tx); } .psf-v8-nav__buscar{ color:var(--pf-brand-deep); padding:8px; border-radius:999px; display:inline-flex; transition:color .15s, transform .15s; } .psf-v8-nav__buscar:hover{ color:var(--pf-sage-tx); transform:scale(1.05); } .psf-v8-ic{ width:24px; height:24px; flex:none; } .psf-v8-ic--sm{ width:18px; height:18px; } /* ───────────────────────────────────────────────────────────────────── 2. CROMO — disposición general de la ficha (SideNav + Main) ───────────────────────────────────────────────────────────────────── */ .psf-v8{ background:var(--pf-paper); color:var(--pf-ink); font-family:var(--pf-sans); font-size:16px; line-height:1.6; } .psf-v8 ::selection{ background:var(--pf-sage-tint); color:var(--pf-sage-tx); } .psf-v8__marco{ display:flex; max-width:1536px; margin:0 auto; width:100%; align-items:flex-start; } /* Barra lateral de familias (SideNavBar) */ .psf-v8__lateral{ display:none; } @media (min-width:1024px){ .psf-v8__lateral{ display:flex; flex-direction:column; width:256px; flex:none; position:sticky; top:56px; min-height:calc(100vh - 56px); max-height:calc(100vh - 56px); overflow-y:auto; padding:24px; background:var(--pf-surface); border-right:1px solid var(--pf-line); } } .psf-v8__lateral-t{ font-family:var(--pf-serif); font-weight:500; font-size:24px; line-height:1.3; color:var(--pf-brand-deep); margin:0 0 4px; } .psf-v8__lateral-s{ font-size:14px; color:var(--pf-ink-faint-tx); margin:0 0 40px; } .psf-v8__familias{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; } .psf-v8__familias a{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:2px; font-size:14px; font-weight:600; letter-spacing:.02em; line-height:1.4; color:var(--pf-ink-faint-tx); text-decoration:none; border-right:2px solid transparent; transition:background .15s, color .15s; } .psf-v8__familias a:hover{ background:var(--pf-sage-tint); color:var(--pf-sage-tx); } .psf-v8__familias .psf-v8-ic{ width:20px; height:20px; color:currentColor; } .psf-v8__familias li.is-activa a{ background:var(--pf-sage-tint); color:var(--pf-sage-tx); font-weight:700; border-right-color:var(--pf-sage-tx); } /* Contenido principal */ .psf-v8__main{ flex:1; min-width:0; max-width:1024px; padding:40px 16px; } @media (min-width:640px){ .psf-v8__main{ padding:40px; } } @media (min-width:1024px){ .psf-v8__main{ padding:48px 40px; } } /* ───────────────────────────────────────────────────────────────────── 3. HERO de la ficha: chip NbN + título display + entradilla ───────────────────────────────────────────────────────────────────── */ .psf-v8__hero{ margin-bottom:48px; } /* [D-136 · v8.7.0] La molécula acompaña al título: firma visual de la página. En pantallas estrechas se retira — el título manda. */ .psf-v8__hero--mol{ display:flex; align-items:center; gap:24px; } .psf-v8__hero--mol .psf-v8__hero-tx{ flex:1 1 auto; min-width:0; } .psf-v8__hero-mol{ flex:0 0 220px; } .psf-v8__hero-mol img{ display:block; width:100%; height:auto; } @media (max-width:900px){ .psf-v8__hero-mol{ display:none; } } .psf-v8__chip{ display:inline-block; padding:4px 12px; margin-bottom:16px; background:var(--pf-sage-tint); color:var(--pf-sage-tx); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-radius:2px; line-height:1.5; } .psf-v8__titulo{ font-family:var(--pf-serif); font-weight:600; font-size:48px; line-height:1.1; letter-spacing:-.02em; color:var(--pf-brand-deep); margin:0 0 16px; } @media (max-width:640px){ .psf-v8__titulo{ font-size:34px; } } .psf-v8__lead{ font-size:18px; line-height:1.6; color:var(--pf-ink-soft); max-width:48rem; margin:0; } .psf-v8__hr{ border:0; border-top:1px solid var(--pf-line); margin:0 0 48px; } /* ───────────────────────────────────────────────────────────────────── 4. REJILLA 12: narrativa (8) + rail clínico (4) ───────────────────────────────────────────────────────────────────── */ .psf-v8__grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; } @media (min-width:1024px){ .psf-v8__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); } .psf-v8__col-a{ grid-column:span 8; } /* [D-190 · v9.19.0] El carril medía 1007–1690 px en una ventana de 757: pegado, sus tarjetas de abajo no se veían hasta el final de la sección. Si no cabe, se desplaza por dentro. */ .psf-v8__col-b{ grid-column:span 4; position:sticky; top:calc(var(--pf-nav-h,66px) + 14px); max-height:calc(100vh - var(--pf-nav-h,66px) - 14px); overflow-y:auto; overscroll-behavior:contain; } } .psf-v8__col-a{ display:flex; flex-direction:column; gap:48px; min-width:0; } .psf-v8__col-b{ display:flex; flex-direction:column; gap:24px; min-width:0; } .psf-v8__col-a > hr{ border:0; border-top:1px solid var(--pf-line); margin:0; } /* Título de sección: serif marino + icono salvia */ .psf-v8__h{ display:flex; align-items:center; gap:8px; font-family:var(--pf-serif); font-weight:500; font-size:24px; line-height:1.3; color:var(--pf-brand-deep); margin:0 0 24px; } .psf-v8__h .psf-v8-ic{ color:var(--pf-sage-tx); } /* Tarjeta blanca con hairline (la lámina del radar, etc.) */ .psf-v8__card{ background:var(--pf-surface); padding:24px; border:1px solid var(--pf-line); border-radius:2px; margin-bottom:32px; } .psf-v8__caption{ font-size:12px; line-height:1.4; color:var(--pf-ink-faint-tx); text-align:center; margin:16px 0 0; font-style:italic; } /* Prosa de la narrativa: el body-lg de la maqueta (ver cabecera) */ .psf-v8__prosa{ margin-bottom:24px; } .psf-v8__prosa p{ font-size:18px; line-height:1.65; color:var(--pf-ink-soft); margin:0 0 16px; } .psf-v8__prosa p:last-child{ margin-bottom:0; } .psf-v8__prosa strong, .psf-v8__prosa b{ color:var(--pf-ink); } /* ───────────────────────────────────────────────────────────────────── 5. TABLA de la maqueta (Ki y datos FDA) ───────────────────────────────────────────────────────────────────── */ .psf-v8-scroll{ overflow-x:auto; } .psf-v8-tabla{ width:100%; text-align:left; border-collapse:collapse; } .psf-v8-tabla th{ padding:12px 16px; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--pf-brand-deep); border-bottom:2px solid var(--pf-line); } .psf-v8-tabla td{ padding:12px 16px; font-size:14px; line-height:1.6; border-bottom:1px solid var(--pf-line); vertical-align:top; } .psf-v8-tabla tbody tr{ transition:background .15s; } .psf-v8-tabla tbody tr:hover{ background:var(--pf-paper-alt); } .psf-v8-tabla__r{ font-weight:500; color:var(--pf-sage-tx); white-space:nowrap; } .psf-v8-tabla__x{ color:var(--pf-ink-soft); } /* ───────────────────────────────────────────────────────────────────── 6. RADAR a lápiz y LÁMINAS de evolución ───────────────────────────────────────────────────────────────────── */ .psf-radar{ width:100%; height:auto; max-height:420px; display:block; } .psf-radar__t{ font-family:var(--pf-hand); font-size:30px; font-weight:600; fill:#2f3437; } .psf-radar__eje{ font-family:var(--pf-hand); font-size:21px; font-weight:600; fill:#2f3437; } .psf-radar__leyenda{ font-family:var(--pf-hand); font-size:18px; fill:var(--pf-ink-soft); } .psf-v8__laminas{ display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width:768px){ .psf-v8__laminas{ grid-template-columns:repeat(3,1fr); } } .psf-v8__lamina{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:8px; padding:16px; display:flex; flex-direction:column; align-items:stretch; margin:0; } .psf-v8__lamina figcaption{ text-align:center; } .psf-v8__lamina h4{ font-size:14px; font-weight:600; letter-spacing:.03em; line-height:1.4; color:var(--pf-brand-deep); text-align:center; margin:16px 0 0; } .psf-lam{ width:100%; height:auto; border-radius:4px; } .psf-lam__memb{ fill:#fdfdfb; stroke:#2f3437; stroke-width:3; stroke-linejoin:round; } .psf-lam__ves{ fill:#f6f7f5; stroke:#2f3437; stroke-width:1.8; stroke-dasharray:1 0; } .psf-lam__nt{ fill:#00bcd4; stroke:#00838f; stroke-width:1.4; } .psf-lam__sert{ fill:#e8ebee; stroke:#2f3437; stroke-width:1.8; } .psf-lam__rec{ fill:none; stroke:#2f3437; stroke-width:2; } .psf-lam__rec--nuevo{ stroke:#9c27b0; stroke-dasharray:4 3; } .psf-lam__farmaco{ fill:#ffb300; stroke:#8a6100; stroke-width:1.2; } .psf-lam__cruz{ stroke:var(--pf-danger-tx); stroke-width:2.4; stroke-linecap:round; } .psf-lam__bdnf{ fill:#9c27b0; fill-opacity:.85; stroke:#6a1b7a; stroke-width:1; } .psf-lam__brote{ fill:none; stroke:#9c27b0; stroke-width:2; stroke-dasharray:5 4; } .psf-lam__flecha{ fill:none; stroke:#2f3437; stroke-width:1.6; } .psf-lam__lbl{ font-family:var(--pf-hand); font-size:32px; font-weight:700; fill:#2f3437; } .psf-lam__lbl--peq{ font-family:var(--pf-hand); font-size:26px; fill:var(--pf-ink-soft); } /* ───────────────────────────────────────────────────────────────────── 7. SIMULACIÓN dinámica (Three.js) y sus botones de estado ───────────────────────────────────────────────────────────────────── */ .psf-v8__sim{ display:flex; flex-direction:column; gap:16px; } .psf-v8__lienzo{ width:100%; height:500px; background:var(--pf-paper-alt); border-radius:16px; overflow:hidden; position:relative; } @media (max-width:640px){ .psf-v8__lienzo{ height:340px; } } .psf-v8__lienzo canvas{ display:block; } .psf-v8__estados{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; } .psf-v8__estados button{ padding:10px 24px; border:0; cursor:pointer; background:var(--pf-brand-deep); color:var(--pf-surface); font-family:var(--pf-sans); font-size:14px; font-weight:600; letter-spacing:.03em; border-radius:8px; box-shadow:var(--pf-shadow); transition:background .2s, opacity .2s; opacity:.78; } .psf-v8__estados button:hover{ opacity:1; } .psf-v8__estados button.is-activo{ opacity:1; outline:2px solid var(--pf-sage-tx); outline-offset:2px; } .psf-v8__sim-nota{ font-size:12px; color:var(--pf-ink-faint-tx); text-align:center; margin:0; } /* ───────────────────────────────────────────────────────────────────── 8. RAIL clínico (columna derecha de la maqueta) ───────────────────────────────────────────────────────────────────── */ .psf-v8-rail__card{ background:var(--pf-paper); border:1px solid var(--pf-line); padding:24px; border-radius:2px; } .psf-v8-rail__h{ display:flex; justify-content:space-between; align-items:center; font-family:var(--pf-serif); font-weight:500; font-size:24px; line-height:1.3; color:var(--pf-brand-deep); margin:0 0 16px; border-bottom:1px solid var(--pf-line); padding-bottom:8px; } .psf-v8-rail__h .psf-v8-ic{ color:var(--pf-ink-faint); } /* [D-190 · v9.19.0] --pf-danger no se aclara en el tema oscuro (2,57:1 sobre --pf-surface); --pf-danger-tx sí (7:1). Es texto: va con el token de texto. */ .psf-v8-rail__h--error{ color:var(--pf-danger-tx); } .psf-v8-rail__h--error .psf-v8-ic{ color:var(--pf-danger-tx); } .psf-v8-rail__eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-ink-faint-tx); line-height:1.4; } .psf-v8-rail__big{ font-family:var(--pf-serif); font-weight:600; font-size:48px; line-height:1.1; letter-spacing:-.02em; color:var(--pf-sage-tx); margin:4px 0 24px; } .psf-v8-rail__big small{ font-family:var(--pf-sans); font-size:18px; font-weight:400; color:var(--pf-ink-soft); letter-spacing:0; /* [D-190 · v9.19.0] En línea heredaba la caja de 48 px del número y sus renglones quedaban separados por 53 px («mg/día en / esquizofrenia; 300 mg / en depresión bipolar»). En bloque, con su propio interlineado. */ display:block; line-height:1.35; margin-top:4px; } .psf-v8-rail__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .psf-v8-rail__lista li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.6; color:var(--pf-ink-soft); } .psf-v8-rail__lista .psf-v8-ic{ width:18px; height:18px; color:var(--pf-sage-tx); margin-top:2px; flex:none; } .psf-v8-rail__lista strong{ color:var(--pf-ink); } /* Perlas clínicas: banda gris con borde salvia y guiones largos */ .psf-v8-perlas{ background:var(--pf-paper-alt); border-left:4px solid var(--pf-sage-tx); padding:24px; border-radius:0 2px 2px 0; } .psf-v8-perlas__h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-brand-deep); margin:0 0 12px; } .psf-v8-perlas__h .psf-v8-ic{ width:18px; height:18px; color:var(--pf-sage-tx); } .psf-v8-perlas ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; } .psf-v8-perlas li{ position:relative; padding-left:16px; font-size:14px; line-height:1.6; color:var(--pf-ink-soft); } .psf-v8-perlas li::before{ content:'—'; position:absolute; left:0; color:var(--pf-sage-tx); } .psf-v8-perlas strong{ color:var(--pf-ink); } /* Efectos adversos: filas con etiqueta de frecuencia */ .psf-v8-ea__filas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .psf-v8-ea__filas li{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; line-height:1.5; color:var(--pf-ink-soft); } .psf-v8-ea__tag{ background:var(--pf-paper-alt); color:var(--pf-ink); padding:2px 8px; border-radius:2px; font-size:12px; white-space:nowrap; flex:none; } .psf-v8-ea__mas{ display:inline-block; margin-top:12px; font-size:13px; color:var(--pf-accent-tx); text-decoration:none; border-bottom:1px solid var(--pf-line); } .psf-v8-ea__mas:hover{ border-bottom-color:var(--pf-accent-tx); } /* ───────────────────────────────────────────────────────────────────── 11. IMPRESIÓN y movimiento reducido ───────────────────────────────────────────────────────────────────── */ @media print{ .psf-v8-nav, .psf-v8__lateral, .psf-v8__estados{ display:none!important; } .psf-v8__lienzo{ display:none!important; } .psf-v8__grid{ display:block; } /* [D-139 · v8.7.0] LA FICHA COMO IMPRESO DECENTE. Los residentes imprimen; la página deja de fingir que es pantalla. */ @page{ margin:16mm; } .psf-v8{ --pf-w-page:auto; } .psf-v8__marco{ max-width:100%; display:block; margin:0; } .psf-v8__main{ padding:0; } .psf-v8__hero-mol{ display:block; flex-basis:170px; } /* Las abreviaturas de los huecos declarados se expanden: en papel no hay cursor que enseñe el title, y el hueco debe seguir declarado. */ abbr[title]::after{ content:" (" attr(title) ")"; font-size:.85em; } } @media (prefers-reduced-motion: reduce){ .psf-v8-nav__buscar:hover{ transform:none; } } /* ───────────────────────────────────────────────────────────────────── 12. EL TÍTULO DEL TEMA, FUERA DE LA FICHA El hero de la maqueta pinta el nombre del fármaco en display serif; si el tema imprime además su propio H1, el nombre saldría dos veces. Se esconde solo en las fichas y solo con los selectores habituales de título de entrada (mismo espíritu que la lista de la portada). ───────────────────────────────────────────────────────────────────── */ body.single-farmaco .entry-title, body.single-farmaco h1.entry-title, body.single-farmaco .wp-block-post-title, body.single-diagnostico .entry-title, body.single-diagnostico h1.entry-title, body.single-diagnostico .wp-block-post-title{ display:none!important; } /* ───────────────────────────────────────────────────────────────────── 13. VARIANTE ANCHA DEL MAIN — índice, grupos y hojas transversales, que no llevan barra lateral y respiran mejor con más medida. ───────────────────────────────────────────────────────────────────── */ .psf-v8__main--ancho{ max-width:1180px; margin:0 auto; } /* ───────────────────────────────────────────────────────────────────── 14. CONVIVENCIA CON WORDPRESS [v8.1.1] Correcciones medidas en producción (captura del autor, 28-08-2026). ───────────────────────────────────────────────────────────────────── */ /* El marco declara su ancho de diseño para psf-medida.js: si el tema lo mete en una columna estrecha, el guion lo ensancha hasta aquí y lo centra en la ventana — al marco entero, nunca a sus hijos. */ .psf-v8{ --pf-w-page:1536px; } /* El contenedor del tema no debe recortar ni desplazar el marco. */ .psf-v8{ width:100%; } /* La barra de administración de WordPress es fija y mide 32 px (46 px por debajo de 783 px). Sin esto, tapa la cabecera sticky y descuadra los sticky de dentro. */ body.admin-bar .psf-v8-nav{ top:32px; } body.admin-bar .psf-v8__lateral{ top:calc(56px + 32px); min-height:calc(100vh - 56px - 32px); max-height:calc(100vh - 56px - 32px); } body.admin-bar .psf-v8__col-b{ top:calc(80px + 32px); } @media (max-width:782px){ body.admin-bar .psf-v8-nav{ top:46px; } }