/* ===================================================================== psf-componentes.css — Biblioteca de componentes de psicofarma.co --------------------------------------------------------------------- Paso 2 de la sección 12 del documento de diseño. Se define UNA VEZ y se reutiliza en todo el sitio. No se crean variantes ad hoc: si un componente no encaja, se extiende aquí y se anota en el documento de diseño. DEPENDE DE psf-tokens.css. Regla dura: en este archivo no puede haber un solo valor hex, ni un tamaño de fuente, ni un espaciado literal. Todo entra por var(--pf-*). Las únicas excepciones son los valores de las @media, porque CSS no admite var() en media queries. Índice A. Base y utilidades B. Encabezado, búsqueda y navegación C. Piezas de texto: eyebrow, lead, pull, capítulos, intención D. Chips, badges y evidencia (los dos ejes) E. Callouts semánticos y RECUADRO NEGRO F. Tablas de datos y dosificación condicional G. Los bloques clínicos nuevos H. Perlas, diagramas, mnemotecnias, biblioteca de referencia I. TOC, migas, salidas y relacionados J. Cabecera de ficha y pestañas K. Autoevaluación L. Descargo, trazabilidad y pie ===================================================================== */ /* ═══════════════════════════════════════════════════════════════ A. BASE Y UTILIDADES ═══════════════════════════════════════════════════════════════ */ .psf-r{ box-sizing:border-box; } .psf-r *,.psf-r *::before,.psf-r *::after{ box-sizing:inherit; } /* Contenedores (diseño §5.2) */ .psf-wrap { max-width:var(--pf-w-sidebar); margin:0 auto; padding:0 var(--pf-gutter-desktop); } .psf-wrap--index{ max-width:var(--pf-w-index); } .psf-read { max-width:var(--pf-w-read); } /* 680px: 65-75 caracteres */ /* Tipografía base. Se aplica al contenedor del plugin, no a , para no pelearse con el tema. */ .psf-r{ font-family:var(--pf-sans); font-size:var(--pf-fs-body); line-height:var(--pf-lh-body); color:var(--pf-ink); } .psf-r h1,.psf-r h2,.psf-r h3{ font-family:var(--pf-serif); font-weight:var(--pf-w-semibold); line-height:var(--pf-lh-tight); margin:0; } .psf-r h1{ font-size:var(--pf-fs-h1); letter-spacing:-.01em; } .psf-r h2{ font-size:var(--pf-fs-h2); } .psf-r h3{ font-size:var(--pf-fs-h3); margin:var(--pf-s-6) 0 var(--pf-s-2); } /* H4 en sans y semibold: la corrección de §4.3. Hoy es 13,5px = cuerpo. */ .psf-r h4{ font-family:var(--pf-sans); font-size:var(--pf-fs-h4); font-weight:var(--pf-w-semibold); line-height:1.35; margin:var(--pf-s-4) 0 var(--pf-s-1); color:var(--pf-ink); } .psf-r p{ margin:0 0 var(--pf-s-3); max-width:var(--pf-w-read); } .psf-r a{ color:var(--pf-brand-tx); text-decoration:none; } .psf-r a:hover{ color:var(--pf-brand-tx); text-decoration:underline; } /* Foco visible en todo elemento interactivo (diseño §8) */ .psf-r a:focus-visible, .psf-r button:focus-visible, .psf-r input:focus-visible, .psf-r summary:focus-visible{ outline:var(--pf-focus) solid var(--pf-brand); outline-offset:2px; border-radius:var(--pf-r-sm); } /* Objetivo táctil mínimo. Se aplica a todo control del plugin. */ .psf-tap, .psf-r button, .psf-r input[type=text], .psf-r input[type=search]{ min-height:var(--pf-tap); } .psf-mono{ font-family:var(--pf-mono); } .psf-num { font-family:var(--pf-mono); white-space:nowrap; } /* Enlace "saltar al contenido" (diseño §8) */ .psf-skip{ position:absolute; left:-9999px; top:0; z-index:100000; background:var(--pf-ink); color:var(--pf-surface); padding:var(--pf-s-3) var(--pf-s-4); border-radius:0 0 var(--pf-r-sm) 0; font-weight:var(--pf-w-semibold); } .psf-skip:focus{ left:0; } /* Solo para lectores de pantalla */ .psf-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ═══════════════════════════════════════════════════════════════ B. ENCABEZADO, BÚSQUEDA Y NAVEGACIÓN [diseño §6.2, §6.3] ═══════════════════════════════════════════════════════════════ */ .psf-header{ position:sticky; top:0; z-index:60; background:var(--pf-band); border-bottom:1px solid var(--pf-line); } .psf-header__in{ max-width:var(--pf-w-sidebar); margin:0 auto; padding:0 var(--pf-gutter-desktop); display:flex; align-items:center; gap:var(--pf-s-6); height:var(--pf-sticky-top); } .psf-brand{ font-family:var(--pf-serif); font-weight:var(--pf-w-bold); font-size:var(--pf-fs-h2); white-space:nowrap; color:var(--pf-ink); } .psf-brand__dot{ color:var(--pf-brand-tx); } .psf-brand__co { font-weight:var(--pf-w-regular); color:var(--pf-ink-soft); } .psf-nav{ display:flex; gap:var(--pf-s-6); } .psf-nav a{ font-size:var(--pf-fs-small); font-weight:var(--pf-w-semibold); color:var(--pf-ink-soft); padding:calc((var(--pf-sticky-top) - 24px) / 2) 2px; border-bottom:2px solid transparent; text-decoration:none; display:inline-flex; align-items:center; min-height:var(--pf-tap); } /* Estado activo marcado con el color de la categoría (§3.3) */ .psf-nav a[aria-current]{ color:var(--pf-ink); border-bottom-color:var(--pf-cls); } /* Búsqueda global: siempre visible, atajo "/" */ .psf-search{ margin-left:auto; position:relative; width:290px; } .psf-search input{ width:100%; border:1px solid var(--pf-line); background:var(--pf-surface); border-radius:var(--pf-r-pill); padding:11px var(--pf-s-4) 11px 38px; font-family:var(--pf-sans); font-size:var(--pf-fs-small); color:var(--pf-ink); min-height:var(--pf-tap); } .psf-search input::placeholder{ color:var(--pf-ink-faint-tx); } .psf-search input:focus{ outline:none; border-color:var(--pf-brand); box-shadow:0 0 0 3px var(--pf-brand-tint); } .psf-search__ic { position:absolute; left:var(--pf-s-4); top:50%; transform:translateY(-50%); color:var(--pf-ink-faint-tx); } .psf-search__kbd{ position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); border:1px solid var(--pf-line); border-radius:5px; padding:1px 6px; background:var(--pf-paper); } .psf-results{ position:absolute; top:52px; left:0; right:0; background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); box-shadow:var(--pf-shadow); overflow:hidden; display:none; max-height:60vh; overflow-y:auto; } .psf-results[data-abierto]{ display:block; } .psf-results__g{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--pf-ink-faint-tx); padding:var(--pf-s-3) var(--pf-s-4) var(--pf-s-1); } .psf-results__r{ display:flex; align-items:center; gap:var(--pf-s-3); padding:var(--pf-s-3) var(--pf-s-4); border-top:1px solid var(--pf-paper-alt); cursor:pointer; min-height:var(--pf-tap); text-decoration:none; color:var(--pf-ink); } .psf-results__r:hover, .psf-results__r[aria-selected=true]{ background:var(--pf-paper-alt); } .psf-results__nm{ font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); } .psf-results__br{ color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-micro); } .psf-results mark{ background:var(--pf-brand-tint); color:inherit; } .psf-results__vacio{ padding:var(--pf-s-4); color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-small); } /* ═══════════════════════════════════════════════════════════════ C. PIEZAS DE TEXTO [diseño §5.3] ═══════════════════════════════════════════════════════════════ */ /* Eyebrow: la firma visual más barata y característica del sitio */ .psf-eyebrow{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase; color:var(--pf-ink-faint-tx); display:flex; align-items:center; gap:9px; margin-bottom:var(--pf-s-2); } .psf-eyebrow::before{ content:""; width:20px; height:1.5px; background:currentColor; flex:none; } .psf-eyebrow--cls{ color:var(--pf-cls-tx); } .psf-lead{ font-size:var(--pf-fs-lead); color:var(--pf-ink-soft); line-height:1.6; max-width:var(--pf-w-read); } /* Cita destacada dentro del hilo principal */ .psf-pull{ font-family:var(--pf-serif); font-size:var(--pf-fs-h3); line-height:1.4; color:var(--pf-ink); background:color-mix(in srgb, var(--pf-cls) 7%, transparent); border-left:4px solid var(--pf-cls); border-radius:0 var(--pf-r-md) var(--pf-r-md) 0; padding:var(--pf-s-4) var(--pf-s-6); margin:var(--pf-s-6) 0; max-width:var(--pf-w-read); } /* Píldoras de capítulo con tiempo de lectura. Tomadas de Principios básicos. Es el elemento que más reduce la ansiedad del lector, y se extiende a grupos y fichas largas. */ .psf-caps{ display:flex; flex-wrap:wrap; gap:var(--pf-s-2); margin:var(--pf-s-4) 0; } .psf-cap{ display:inline-flex; align-items:center; gap:var(--pf-s-2); background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-pill); padding:0 var(--pf-s-4); min-height:40px; font-size:var(--pf-fs-small); color:var(--pf-ink-soft); text-decoration:none; } .psf-cap:hover{ border-color:var(--pf-cls); color:var(--pf-ink); } .psf-cap__n{ font-family:var(--pf-mono); font-weight:var(--pf-w-semibold); color:var(--pf-cls-tx); } .psf-cap__m{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); } /* Contrato declarado: para quién es, cuánto cuesta, qué sabrás al terminar */ .psf-contract{ background:var(--pf-surface); border:1px solid var(--pf-line); border-left:4px solid var(--pf-cls); border-radius:0 var(--pf-r-md) var(--pf-r-md) 0; padding:var(--pf-s-4) var(--pf-s-6); margin:var(--pf-s-6) 0; max-width:var(--pf-w-read); } .psf-contract p{ margin:0 0 var(--pf-s-2); font-size:var(--pf-fs-small); } .psf-contract p:last-child{ margin-bottom:0; } /* Tarjetas de intención: las tres puertas de entrada. Se segmenta por LO QUE LA PERSONA VIENE A HACER, nunca por su nivel de formación (regla dura del autor, diseño §2 principio 2). */ .psf-doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-3); margin:var(--pf-s-4) 0; } .psf-door{ display:block; background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); padding:var(--pf-s-4) var(--pf-s-4) var(--pf-s-3); text-decoration:none; min-height:var(--pf-tap); } .psf-door:hover{ border-color:var(--pf-cls); box-shadow:var(--pf-shadow); } .psf-door__k{ display:block; /* [D-8] era inline: se pegaba al valor */ font-family:var(--pf-hand); font-size:var(--pf-fs-h3); color:var(--pf-brand-tx); line-height:1.1; } .psf-door__v{ display:block; /* [D-8] */ font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); color:var(--pf-ink); margin-top:var(--pf-s-1); } /* ═══════════════════════════════════════════════════════════════ D. CHIPS, BADGES Y LOS DOS EJES DE EVIDENCIA ═══════════════════════════════════════════════════════════════ */ .psf-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:var(--pf-r-pill); background:var(--pf-paper-alt); color:var(--pf-ink-soft); border:1px solid var(--pf-line); } .psf-chip__sw{ width:9px; height:9px; border-radius:50%; background:var(--pf-cls); flex:none; } .psf-chip--time{ background:var(--pf-brand-tint); border-color:var(--pf-brand-line); color:var(--pf-brand-tx); } .psf-chip--upd { background:var(--pf-ok-tint); border-color:var(--pf-ok-line); color:var(--pf-ok-tx); } .psf-chip--reg { background:transparent; border-color:var(--pf-line); color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-micro); letter-spacing:.06em; } .psf-chip--off { color:var(--pf-warn-tx); border-color:var(--pf-warn); } /* ---- Eje 1: FUERZA. Triple señal: letra + color + barra. ---- */ .psf-grade{ width:30px; height:30px; border-radius:var(--pf-r-sm); display:inline-flex; align-items:center; justify-content:center; color:var(--pf-surface); font-family:var(--pf-mono); font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); flex:none; } .psf-grade[data-g="A"]{ background:var(--pf-g-a); } .psf-grade[data-g="B"]{ background:var(--pf-g-b); } .psf-grade[data-g="C"]{ background:var(--pf-g-c); } .psf-grade[data-g="D"]{ background:var(--pf-g-d); } .psf-grade[data-g="I"]{ background:var(--pf-g-i); } .psf-bar{ height:7px; background:var(--pf-paper-alt); border-radius:var(--pf-r-pill); overflow:hidden; margin-top:7px; max-width:300px; } .psf-bar i{ display:block; height:100%; border-radius:var(--pf-r-pill); } .psf-bar[data-g="A"] i{ width:var(--pf-g-a-w); background:var(--pf-g-a); } .psf-bar[data-g="B"] i{ width:var(--pf-g-b-w); background:var(--pf-g-b); } .psf-bar[data-g="C"] i{ width:var(--pf-g-c-w); background:var(--pf-g-c); } .psf-bar[data-g="D"] i{ width:var(--pf-g-d-w); background:var(--pf-g-d); } .psf-bar[data-g="I"] i{ width:var(--pf-g-i-w); background:var(--pf-g-i); } /* ---- Eje 2: PROCEDENCIA. Forma y palabra, NUNCA color. ---- Es la regla que impide que los dos ejes compitan, y la que hace que la señal siga funcionando en daltonismo y en impresión. */ .psf-proc{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-proc-color); white-space:nowrap; display:inline-flex; align-items:center; gap:var(--pf-s-2); } /* [D-6] La marca es geometría, no un carácter: ● ◐ ○ ◌ no existen en el subconjunto latino de ninguna de las cuatro familias y los pintaría la fuente del sistema, distinta en cada equipo. El carácter vive solo en el texto alternativo del HTML, para el lector de pantalla. */ .psf-proc::before{ content:""; flex:none; width:var(--pf-proc-d); height:var(--pf-proc-d); border-radius:50%; border:1.5px solid var(--pf-proc-color); background:transparent; } /* ● propia — disco lleno */ .psf-proc[data-p="propia"]::before{ background:var(--pf-proc-color); } /* ◐ propia con reparos — medio disco */ .psf-proc[data-p="reparos"]::before{ background:linear-gradient(90deg,var(--pf-proc-color) 50%,transparent 50%); } /* ○ de clase — contorno continuo */ .psf-proc[data-p="clase"]::before{ background:transparent; } /* ◌ hueco — contorno punteado [D-7] */ .psf-proc[data-p="hueco"]::before{ border-style:dotted; border-width:2px; } /* Fila de indicación: los dos ejes juntos sin competir */ .psf-ind{ list-style:none; padding:0; margin:0; max-width:var(--pf-w-read); } .psf-ind > li{ display:flex; gap:var(--pf-s-3); align-items:flex-start; padding:var(--pf-s-3) 0; border-top:1px solid var(--pf-paper-alt); } .psf-ind > li:first-child{ border-top:none; } .psf-ind__b{ flex:1; min-width:0; } .psf-ind__top{ display:flex; align-items:baseline; gap:var(--pf-s-3); flex-wrap:wrap; } .psf-ind__nm{ font-weight:var(--pf-w-semibold); } .psf-ind__top .psf-proc{ margin-left:auto; } .psf-ind__det{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); margin-top:5px; line-height:1.45; } /* Leyenda de los dos ejes. Va al pie de toda lista de indicaciones. */ .psf-ev-leyenda .psf-proc{ font-size:inherit; letter-spacing:0; text-transform:none; } .psf-ev-leyenda{ font-size:var(--pf-fs-small); color:var(--pf-ink-faint-tx); margin-top:var(--pf-s-3); max-width:var(--pf-w-read); } /* Mini-perfil de evidencia: permite comparar sin abrir la ficha. Solo lleva el eje de fuerza; a esta densidad, dos ejes serían ruido. */ .psf-mini{ display:flex; gap:3px; margin-top:6px; } .psf-mini i{ display:block; width:22px; height:6px; border-radius:2px; } .psf-mini i[data-g="A"]{ background:var(--pf-g-a); } .psf-mini i[data-g="B"]{ background:var(--pf-g-b); } .psf-mini i[data-g="C"]{ background:var(--pf-g-c); } .psf-mini i[data-g="D"]{ background:var(--pf-g-d); } .psf-mini i[data-g="I"]{ background:var(--pf-g-i); } /* ═══════════════════════════════════════════════════════════════ E. CALLOUTS SEMÁNTICOS Y RECUADRO NEGRO ═══════════════════════════════════════════════════════════════ */ /* Los cuatro callouts COMUNICAN, NO DECORAN (§3.5). Mostaza es siempre precaución; rojo apagado, siempre alerta grave. */ .psf-callout{ border-left:4px solid var(--pf-c); background:var(--pf-t); border-radius:0 var(--pf-r-md) var(--pf-r-md) 0; padding:var(--pf-s-4) var(--pf-s-6); margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-callout__t{ font-weight:var(--pf-w-bold); font-size:var(--pf-fs-small); display:flex; align-items:center; gap:var(--pf-s-2); color:var(--pf-ct); } .psf-callout p{ margin:7px 0 0; font-size:var(--pf-fs-small); } .psf-callout--info { --pf-c:var(--pf-info); --pf-t:var(--pf-info-tint); --pf-ct:var(--pf-info-tx); } .psf-callout--warn { --pf-c:var(--pf-warn); --pf-t:var(--pf-warn-tint); --pf-ct:var(--pf-warn-tx); } .psf-callout--danger{ --pf-c:var(--pf-danger); --pf-t:var(--pf-danger-tint); --pf-ct:var(--pf-danger-tx); } .psf-callout--ok { --pf-c:var(--pf-ok); --pf-t:var(--pf-ok-tint); --pf-ct:var(--pf-ok-tx); } /* ---- ★ RECUADRO NEGRO ---------------------------------------- Componente NUEVO. Contenido §3.1: campo propio, con tratamiento visual distinto de los cuatro callouts, heredado por clase. Va SIEMPRE fuera de las pestañas: no se puede esconder tras un clic (diseño §2, principio 3). Su gravedad se comunica por contorno y por el rótulo, no por un color más saturado: en una paleta desaturada, el negro es más fuerte que cualquier rojo. */ .psf-blackbox{ background:var(--pf-surface); border:1px solid var(--pf-ink); border-left:6px solid var(--pf-ink); border-radius:0 var(--pf-r-md) var(--pf-r-md) 0; padding:var(--pf-s-4) var(--pf-s-6); margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-blackbox + .psf-blackbox{ margin-top:var(--pf-s-2); } .psf-blackbox__k{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--pf-ink); display:flex; align-items:center; gap:9px; } .psf-blackbox__k::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--pf-ink); flex:none; } .psf-blackbox__b{ margin:var(--pf-s-2) 0 0; font-size:var(--pf-fs-data); font-weight:var(--pf-w-semibold); } .psf-blackbox__s{ margin:var(--pf-s-2) 0 0; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); letter-spacing:.03em; } /* Heredada de la clase frente a propia del fármaco: misma forma, distinta procedencia, declarada en el pie. */ .psf-blackbox[data-origen="clase"] .psf-blackbox__s::before{ content:"Heredada de la clase · "; } /* ---- ★ HUECO DECLARADO --------------------------------------- Contenido §7.2: el hueco silencioso está prohibido; el declarado es obligatorio, y con UNA SOLA redacción en todo el sitio. Distingue "no hay dato" de "no aplica", que hoy el sitio confunde. */ .psf-gap{ color:var(--pf-ink-faint-tx); font-style:italic; /* [D-4] */ font-size:var(--pf-fs-small); display:inline-flex; align-items:center; gap:var(--pf-s-2); white-space:nowrap; /* la frase del hueco no se parte por la mitad */ /* [D-95 · v6.22.0] SIN `wrap` AQUÍ, LA RAZÓN DEL HUECO SE ESTRANGULA. La regla de `.psf-gap__razon` le da `flex-basis:100%` para que caiga a su propia línea. Eso funciona dentro de `.psf-gap--bloque`, que sí lleva `flex-wrap:wrap`; en la variante EN LÍNEA no lo llevaba, así que el hijo con base del 100 % y `min-width:0` se comprimía en vez de bajar. Medido en la ficha de la agomelatina a 390 px: la razón quedaba en 7 px de ancho y 1.208 de alto — una letra por línea, en 60 fichas. Es el coletazo del [D-22], que subió la regla de la razón a la base sin subir también el `wrap` que la hacía funcionar. */ flex-wrap:wrap; } /* El hueco lleva la misma marca que la procedencia «hueco»: contorno punteado. Dibujada, no un carácter [D-6]. */ .psf-gap::before{ content:""; flex:none; width:var(--pf-proc-d); height:var(--pf-proc-d); border-radius:50%; border:2px dotted var(--pf-ink-faint); } .psf-gap--bloque{ display:flex; padding:var(--pf-s-3) var(--pf-s-4); background:var(--pf-paper-alt); border:1px dashed var(--pf-line); border-radius:var(--pf-r-sm); max-width:var(--pf-w-read); align-items:flex-start; flex-wrap:wrap; } /* [D-22] La razón del hueco desbordaba la pantalla en móvil: como hijo de un contenedor flex no podía encogerse por debajo de su contenido. El arreglo que se le puso al bloque de dicotomías en la v5.72 se sube aquí, a la base, que es donde tenía que haber estado. Medido: tres páginas desbordaban a 390 px de ancho; ahora ninguna. */ .psf-gap__razon{ font-style:normal; color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-micro); display:block; margin-top:var(--pf-s-1); flex-basis:100%; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* ═══════════════════════════════════════════════════════════════ F. TABLAS DE DATOS Y DOSIFICACIÓN CONDICIONAL ═══════════════════════════════════════════════════════════════ */ .psf-tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--pf-r-sm); } .psf-table{ width:100%; border-collapse:collapse; margin:var(--pf-s-3) 0; font-size:var(--pf-fs-small); } .psf-table th{ background:var(--pf-paper-alt); text-align:left; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); text-transform:uppercase; letter-spacing:.07em; color:var(--pf-ink-soft); padding:var(--pf-s-3); font-weight:var(--pf-w-semibold); } .psf-table td{ border-top:1px solid var(--pf-line); padding:11px var(--pf-s-3); vertical-align:top; } .psf-table td.psf-num{ font-family:var(--pf-mono); white-space:nowrap; } .psf-table tr.psf-me td{ background:var(--pf-brand-tint); } .psf-table tr.psf-me td:first-child{ font-weight:var(--pf-w-bold); } .psf-table caption{ caption-side:top; text-align:left; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--pf-ink-faint-tx); padding-bottom:var(--pf-s-2); } /* ---- ★ TABLA DE DOSIS CONDICIONAL ----------------------------- Contenido §3.3: la celda "Máxima" y la celda "Inicio" deben poder desdoblarse por indicación, formulación, edad, función renal/hepática y genotipo. La tabla simple de las maquetas no basta: todos los errores de dosis detectados en la auditoría empujan HACIA ARRIBA. */ .psf-dosing{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); overflow:hidden; margin:var(--pf-s-4) 0; box-shadow:var(--pf-shadow); } .psf-dosing__h{ background:var(--pf-paper-alt); padding:var(--pf-s-3) var(--pf-s-6); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--pf-ink-soft); border-bottom:1px solid var(--pf-line); display:flex; align-items:center; justify-content:space-between; gap:var(--pf-s-3); } .psf-dosing__cond{ font-size:var(--pf-fs-micro); letter-spacing:.06em; color:var(--pf-ink-faint-tx); text-transform:none; } .psf-dosing .psf-table{ margin:0; } .psf-dosing .psf-table th:first-child, .psf-dosing .psf-table td:first-child{ padding-left:var(--pf-s-6); } /* La fuente reguladora se declara POR CELDA, no por tabla (§7.1) */ .psf-dosing__src{ display:block; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.05em; color:var(--pf-ink-faint-tx); text-transform:uppercase; margin-top:3px; } /* Fila de condicional: sangrada bajo su indicación madre */ .psf-dosing tr[data-cond] td:first-child{ padding-left:var(--pf-s-12); color:var(--pf-ink-soft); font-size:var(--pf-fs-small); } .psf-dosing tr[data-cond] td:first-child::before{ content:"\21B3"; margin-right:7px; color:var(--pf-ink-faint-tx); /* ↳ */ } /* Curva dosis-respuesta: el componente firma. El contraste entre la ED95 y el máximo autorizado es de lo más valioso que enseña el sitio y hoy está enterrado en prosa. */ .psf-dr{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); overflow:hidden; margin:var(--pf-s-4) 0; box-shadow:var(--pf-shadow); } .psf-dr__h{ background:var(--pf-paper-alt); padding:var(--pf-s-3) var(--pf-s-6); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--pf-ink-soft); border-bottom:1px solid var(--pf-line); } .psf-dr__b{ padding:var(--pf-s-6); } .psf-dr__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-4); } .psf-dr__k{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ink-faint-tx); } .psf-dr__v{ font-family:var(--pf-mono); font-size:var(--pf-fs-h2); font-weight:var(--pf-w-semibold); margin-top:2px; } .psf-dr__cell--hi .psf-dr__v{ color:var(--pf-ok-tx); } .psf-dr__cell--max .psf-dr__v{ color:var(--pf-danger-tx); } .psf-dr__curve{ margin-top:var(--pf-s-4); border-top:1px solid var(--pf-paper-alt); padding-top:var(--pf-s-3); } /* ═══════════════════════════════════════════════════════════════ G. LOS BLOQUES CLÍNICOS NUEVOS ═══════════════════════════════════════════════════════════════ */ /* Contenedor común de los bloques estructurados. Todos comparten forma para que el lector automatice dónde mirar (§2, principio 5). */ .psf-block{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); overflow:hidden; margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-block__h{ background:var(--pf-paper-alt); padding:var(--pf-s-3) var(--pf-s-6); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--pf-ink-soft); border-bottom:1px solid var(--pf-line); } .psf-block__b{ padding:var(--pf-s-4) var(--pf-s-6); } .psf-block__b > :last-child{ margin-bottom:0; } /* ---- ★ EFICACIA CON MAGNITUD ---------------------------------- Contenido §1.3: la magnitud es parte del hecho. §2.1 R4: ninguna cifra de efecto sin n y sin IC. Este componente hace imposible publicar un tamaño de efecto sin su denominador. */ .psf-efficacy__row{ display:grid; grid-template-columns:1fr auto; gap:var(--pf-s-2) var(--pf-s-4); padding:var(--pf-s-3) 0; border-top:1px solid var(--pf-paper-alt); } .psf-efficacy__row:first-child{ border-top:none; padding-top:0; } .psf-efficacy__out{ font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); } .psf-efficacy__val{ font-family:var(--pf-mono); font-size:var(--pf-fs-data); text-align:right; white-space:nowrap; } .psf-efficacy__meta{ grid-column:1 / -1; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); line-height:1.5; } /* Distintivo de cifra derivada por el sitio (§2.1 R5) */ .psf-derivada{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--pf-warn-tx); border:1px solid var(--pf-warn); border-radius:3px; padding:1px 5px; margin-left:6px; vertical-align:middle; } /* ---- ★ TOXICIDAD EN SOBREDOSIS -------------------------------- Contenido §3.2: la omisión de mayor riesgo del sitio para su público de médicos generales, porque es el dato que cambia la decisión de prescribir a un paciente con ideación suicida. Cinco campos fijos. */ .psf-overdose{ border:1px solid var(--pf-danger); border-left:6px solid var(--pf-danger); background:var(--pf-danger-tint); border-radius:0 var(--pf-r-md) var(--pf-r-md) 0; padding:var(--pf-s-4) var(--pf-s-6); margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-overdose__k{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--pf-danger-tx); font-weight:var(--pf-w-semibold); display:flex; align-items:center; gap:var(--pf-s-2); } .psf-overdose dl{ margin:var(--pf-s-3) 0 0; display:grid; grid-template-columns:auto 1fr; gap:var(--pf-s-2) var(--pf-s-4); } .psf-overdose dt{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--pf-ink-soft); padding-top:3px; white-space:nowrap; } .psf-overdose dd{ margin:0; font-size:var(--pf-fs-small); } /* ---- ★ INTERACCIONES ------------------------------------------ Contenido §4.1 §13: farmacocinéticas y farmacodinámicas SEPARADAS. Hoy van diluidas dentro de farmacocinética, que es donde el lector no las busca. */ .psf-interactions__sub{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--pf-ink-faint-tx); margin:var(--pf-s-4) 0 var(--pf-s-2); padding-bottom:var(--pf-s-1); border-bottom:1px solid var(--pf-line); } .psf-interactions__sub:first-child{ margin-top:0; } .psf-interactions ul{ margin:0; padding-left:20px; } .psf-interactions li{ margin:var(--pf-s-2) 0; font-size:var(--pf-fs-small); } .psf-interactions li b{ font-weight:var(--pf-w-semibold); } /* Papel del fármaco en cada citocromo: sustrato / inhibidor / inductor */ .psf-cyp-rol{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.06em; text-transform:uppercase; border-radius:3px; padding:1px 6px; margin-right:6px; border:1px solid var(--pf-line); color:var(--pf-ink-soft); } .psf-cyp-rol[data-rol="inhibidor"]{ color:var(--pf-warn-tx); border-color:var(--pf-warn); } .psf-cyp-rol[data-rol="inductor"] { color:var(--pf-info-tx); border-color:var(--pf-info); } /* ---- ★ POBLACIONES ESPECIALES --------------------------------- Siete celdas FIJAS. Ninguna puede quedar en blanco: en una plantilla fija, un campo vacío se lee como "no aplica" (§1, principio 6). */ .psf-populations{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--pf-line); } .psf-populations > div{ background:var(--pf-surface); padding:var(--pf-s-3) var(--pf-s-4); } .psf-populations dt, .psf-populations .psf-populations__k{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ink-faint-tx); } .psf-populations .psf-populations__v{ font-size:var(--pf-fs-small); margin-top:3px; } .psf-populations .psf-populations__v .psf-num{ font-family:var(--pf-mono); } /* ---- ★ RETIRADA Y DESCENSO ------------------------------------ Contenido §3.2: el campo actual se llama "Titulación y retirada" y NUNCA trata la retirada. La sección de Principios demuestra magistralmente por qué retirar es peligroso y no dice cómo retirar. */ .psf-taper__steps{ list-style:none; margin:0; padding:0; counter-reset:psf-t; } .psf-taper__steps li{ position:relative; padding:var(--pf-s-2) 0 var(--pf-s-2) var(--pf-s-8); border-top:1px solid var(--pf-paper-alt); font-size:var(--pf-fs-small); } .psf-taper__steps li:first-child{ border-top:none; } .psf-taper__steps li::before{ counter-increment:psf-t; content:counter(psf-t); position:absolute; left:0; top:var(--pf-s-2); width:24px; height:24px; border-radius:50%; background:var(--pf-paper-alt); color:var(--pf-ink-soft); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); display:flex; align-items:center; justify-content:center; } .psf-taper__meta{ display:flex; flex-wrap:wrap; gap:var(--pf-s-4); margin-top:var(--pf-s-3); padding-top:var(--pf-s-3); border-top:1px solid var(--pf-line); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); } /* ---- ★ POSICIÓN EN GUÍAS -------------------------------------- Contenido §4.1 §16: con la guía nombrada y su recomendación LITERAL. Prohibido el guion vacío. */ .psf-guides__g{ padding:var(--pf-s-3) 0; border-top:1px solid var(--pf-paper-alt); } .psf-guides__g:first-child{ border-top:none; padding-top:0; } .psf-guides__n{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--pf-ink-soft); display:flex; align-items:baseline; gap:var(--pf-s-2); flex-wrap:wrap; } .psf-guides__yr{ color:var(--pf-ink-faint-tx); } .psf-guides__q{ margin:var(--pf-s-2) 0 0; padding-left:var(--pf-s-4); border-left:3px solid var(--pf-line); font-size:var(--pf-fs-small); color:var(--pf-ink); font-style:normal; } .psf-guides__lv{ display:inline-block; margin-top:var(--pf-s-2); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); } /* ═══════════════════════════════════════════════════════════════ H. PERLAS, DIAGRAMAS, MNEMOTECNIAS, BIBLIOTECA ═══════════════════════════════════════════════════════════════ */ .psf-pearls{ background:var(--pf-brand-tint); border:1px solid var(--pf-brand-line); border-radius:var(--pf-r-lg); padding:var(--pf-s-4) var(--pf-s-6); max-width:var(--pf-w-read); margin:var(--pf-s-4) 0; } .psf-pearls__t{ font-family:var(--pf-hand); font-size:var(--pf-fs-h2); color:var(--pf-brand-tx); line-height:1; margin-bottom:var(--pf-s-2); } .psf-pearls ul{ margin:0; padding-left:20px; } .psf-pearls li{ margin:7px 0; font-size:var(--pf-fs-data); } .psf-diagram{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); padding:var(--pf-s-4); margin:var(--pf-s-4) 0; text-align:center; max-width:var(--pf-w-read); } .psf-figcap{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.07em; color:var(--pf-ink-faint-tx); margin-top:var(--pf-s-2); } /* El contenido no puede vivir solo dentro de la imagen (§6.6) */ .psf-figalt{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); text-align:left; margin-top:var(--pf-s-3); padding-top:var(--pf-s-3); border-top:1px solid var(--pf-paper-alt); } .psf-mnem{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); padding:var(--pf-s-4); margin:var(--pf-s-4) 0; text-align:center; } .psf-mnem img{ max-width:100%; height:auto; border-radius:var(--pf-r-md); } .psf-mnem__cap{ font-family:var(--pf-hand); font-size:var(--pf-fs-h2); color:var(--pf-brand-tx); margin-top:var(--pf-s-2); } /* Biblioteca de referencia: los antiguos acordeones apilados, como rejilla etiquetada. Se ve QUÉ hay sin abrir nada (§6.8). */ .psf-lib{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-3); margin:var(--pf-s-4) 0; } .psf-lib__i{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); padding:var(--pf-s-4); text-decoration:none; min-height:var(--pf-tap); display:block; } .psf-lib__i:hover{ border-color:var(--pf-cls); box-shadow:var(--pf-shadow); } .psf-lib__n{ font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); color:var(--pf-ink); } .psf-lib__m{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); margin-top:3px; } /* Rejilla de moléculas con mini-perfil */ .psf-mols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pf-s-3); margin:var(--pf-s-4) 0; } .psf-mol{ background:var(--pf-surface); border:1px solid var(--pf-line); border-top:3px solid var(--pf-cls); border-radius:var(--pf-r-md); padding:var(--pf-s-3) var(--pf-s-4); text-decoration:none; display:block; min-height:var(--pf-tap); } .psf-mol:hover{ box-shadow:var(--pf-shadow); } .psf-mol__n{ font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); color:var(--pf-ink); } .psf-mol__b{ font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); } /* ═══════════════════════════════════════════════════════════════ I. TOC, MIGAS, SALIDAS Y RELACIONADOS ═══════════════════════════════════════════════════════════════ */ /* [D-75 · v6.17.0] `screen-reader-text` la define el TEMA, no nosotros — y por eso la etiqueta «Buscar en el sitio» se veía impresa encima de la caja en la exportación estática, donde no hay tema. Una etiqueta que debe ser invisible y a veces no lo es no puede depender de terceros: el plugin declara la regla para su propio marcado. Es la definición canónica de WordPress, así que si el tema también la trae, coinciden. */ .psf-ubic .screen-reader-text, .psf-buscador .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; } .psf-crumb{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); padding:var(--pf-s-6) 0 0; letter-spacing:.02em; } /* LA BARRA: dónde estoy + con qué buscar, en una sola fila. [D-60 · v6.17.0] Las dos mitades contestan la misma pregunta y comparten banda horizontal, que en móvil es lo más caro que hay. La caja no crece: 260 px bastan para ver lo que se teclea, y todo lo que sobra se lo queda la ruta, que es la que puede ser larga. */ .psf-ubic{ display:flex; align-items:center; justify-content:space-between; gap:var(--pf-s-4); flex-wrap:wrap; padding-bottom:var(--pf-s-3); border-bottom:1px solid var(--pf-line); margin-bottom:var(--pf-s-5); } .psf-ubic .psf-crumb{ padding-top:0; flex:1 1 auto; min-width:0; } .psf-ubic__b{ flex:0 1 260px; min-width:180px; } .psf-ubic__b .psf-buscador{ margin:0; } @media (max-width:640px){ /* En móvil la ruta va arriba y la caja debajo, a todo el ancho: apretadas en una línea, la ruta se parte en tres renglones y la caja queda tan estrecha que no cabe una palabra. */ .psf-ubic{ flex-direction:column; align-items:stretch; gap:var(--pf-s-2); } .psf-ubic__b{ flex:1 1 auto; } } /* [D-77 · v6.17.0] 24 px de alto, que es el criterio 2.5.8 de WCAG en nivel AA. Medidos sin esto: 19 px. La anotación [D-16] del bloque 1 dejó dicho que los enlaces DENTRO DE PROSA no se pueden estirar sin romper el interlineado, y eso sigue siendo cierto; una miga no es prosa, es un destino de navegación suelto, y ahí el criterio aplica de lleno. Se llega con relleno, no con interlineado, para no separar las migas entre sí. */ .psf-crumb a{ color:var(--pf-ink-soft); /* [D-88 · v6.20.0] `min-height` + flex, NO relleno a ojo. La v6.17.0 puso `padding:3px 0` y midió 25 px... en el escritorio, donde la fuente es de 15 px. En el teléfono baja a 12 px y el mismo relleno da 21 px: por debajo del criterio 2.5.8. Medir un tamaño táctil en una sola anchura es no medirlo. Con `min-height` la caja cumple sea cual sea la fuente, y el flex mantiene el texto centrado en vez de pegado arriba. */ display:inline-flex; align-items:center; min-height:24px; } .psf-crumb__cur{ color:var(--pf-cls-tx); font-weight:var(--pf-w-semibold); } .psf-toc{ position:sticky; top:var(--pf-scroll-margin); font-size:var(--pf-fs-small); } .psf-toc__t{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); text-transform:uppercase; letter-spacing:.1em; color:var(--pf-ink-faint-tx); margin-bottom:var(--pf-s-3); } .psf-toc a{ display:block; padding:7px var(--pf-s-3); color:var(--pf-ink-soft); border-left:2px solid var(--pf-line); line-height:1.35; text-decoration:none; } .psf-toc a[aria-current]{ color:var(--pf-ink); border-left-color:var(--pf-cls); font-weight:var(--pf-w-semibold); background:color-mix(in srgb, var(--pf-cls) 7%, transparent); } .psf-tocm{ display:none; margin:var(--pf-s-4) 0 0; } .psf-tocm details{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); padding:var(--pf-s-2) var(--pf-s-4); } .psf-tocm summary{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); text-transform:uppercase; letter-spacing:.08em; font-weight:var(--pf-w-semibold); cursor:pointer; min-height:var(--pf-tap); display:flex; align-items:center; } .psf-tocm a{ display:block; padding:9px 0; color:var(--pf-ink-soft); border-top:1px solid var(--pf-paper-alt); } /* Ancla ¶ por sección */ .psf-anchor{ font-family:var(--pf-mono); color:var(--pf-line); font-size:var(--pf-fs-h4); text-decoration:none; } .psf-r h2:hover .psf-anchor{ color:var(--pf-brand-tx); } /* Ningún callejón sin salida (§2, principio 4). Las tres salidas corresponden a las tres intenciones del lector. */ .psf-next{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-3); margin-top:var(--pf-s-3); } .psf-next__c{ --pf-ct:var(--pf-cls-tx); border:1px solid var(--pf-line); background:var(--pf-surface); border-radius:var(--pf-r-md); padding:var(--pf-s-3) var(--pf-s-4); border-left:4px solid var(--pf-c); text-decoration:none; display:block; min-height:var(--pf-tap); } .psf-next__k{ display:block; /* [D-8] */ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ct); } .psf-next__v{ display:block; /* [D-8] */ font-weight:var(--pf-w-semibold); margin-top:var(--pf-s-1); font-size:var(--pf-fs-small); color:var(--pf-ink); } .psf-next__c[data-area="principios"] { --pf-c:var(--pf-cat-principios); --pf-ct:var(--pf-cat-principios-tx); } .psf-next__c[data-area="diagnosticos"]{ --pf-c:var(--pf-cat-diagnosticos); --pf-ct:var(--pf-cat-diagnosticos-tx); } .psf-next__c[data-area="farmacos"] { --pf-c:var(--pf-cat-farmacos); --pf-ct:var(--pf-cat-farmacos-tx); } /* [D-9] faltaba */ .psf-next__c[data-area="sobre-mi"] { --pf-c:var(--pf-cat-sobremi); --pf-ct:var(--pf-cat-sobremi-tx); } /* [D-9] faltaba */ .psf-next__c[data-area="clase"] { --pf-c:var(--pf-cls); --pf-ct:var(--pf-cls-tx); } /* El cierre: rótulo + las tres salidas. [v6.17.0] El rótulo existe para que el bloque no se lea como «más contenido»: sin él, tres tarjetas al final de una ficha parecen tres datos más. */ .psf-cierre{ margin-top:var(--pf-s-6); padding-top:var(--pf-s-5); border-top:1px solid var(--pf-line); } .psf-cierre__t{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); text-transform:uppercase; letter-spacing:var(--pf-track-label); color:var(--pf-ink-faint-tx); margin:0; } .psf-related{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--pf-s-3); margin-top:var(--pf-s-2); } .psf-related__c{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); padding:var(--pf-s-3) var(--pf-s-4); display:block; min-height:var(--pf-tap); text-decoration:none; } .psf-related__c:hover{ border-color:var(--pf-cls); } .psf-related__n{ font-weight:var(--pf-w-semibold); color:var(--pf-ink); } .psf-related__cl{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); text-transform:uppercase; letter-spacing:.06em; } /* ═══════════════════════════════════════════════════════════════ J. CABECERA DE FICHA Y PESTAÑAS ═══════════════════════════════════════════════════════════════ */ .psf-summary{ background:var(--pf-surface); border:1px solid var(--pf-line); border-top:4px solid var(--pf-cls); border-radius:var(--pf-r-lg); padding:var(--pf-s-6); box-shadow:var(--pf-shadow); } .psf-summary__head{ display:flex; gap:var(--pf-s-6); align-items:flex-start; } .psf-summary h1{ font-size:var(--pf-fs-h1); margin:var(--pf-s-2) 0 var(--pf-s-1); } .psf-summary__brands{ color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-small); } .psf-summary__ill{ flex:none; width:104px; height:104px; border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); background:var(--pf-paper); display:flex; align-items:center; justify-content:center; } .psf-metarow{ display:flex; flex-wrap:wrap; gap:var(--pf-s-3); margin-top:var(--pf-s-3); align-items:center; } /* Línea temporal descubrimiento → aprobación → comercialización. Recurso narrativo excelente y poco común. Se conserva. */ .psf-timeline, .psf-glance{ display:grid; gap:1px; background:var(--pf-line); border:1px solid var(--pf-line); border-radius:var(--pf-r-md); overflow:hidden; margin-top:var(--pf-s-4); } .psf-timeline{ grid-template-columns:repeat(3,1fr); } .psf-glance { grid-template-columns:repeat(2,1fr); } .psf-timeline > div, .psf-glance > div{ background:var(--pf-surface); padding:var(--pf-s-3) var(--pf-s-4); } .psf-timeline > div{ text-align:center; } .psf-timeline__k,.psf-glance__k{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ink-faint-tx); } .psf-timeline__v,.psf-glance__v{ font-family:var(--pf-mono); font-size:var(--pf-fs-small); margin-top:3px; color:var(--pf-ink); } /* Pestañas. Se conservan las tres, con su contrato explícito. */ .psf-tabs{ display:flex; gap:var(--pf-s-1); background:var(--pf-paper-alt); border:1px solid var(--pf-line); border-radius:var(--pf-r-pill); padding:var(--pf-s-1); margin:var(--pf-s-6) 0 var(--pf-s-2); width:fit-content; max-width:100%; flex-wrap:wrap; } .psf-tabs button{ border:none; background:none; font-family:var(--pf-sans); font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-small); color:var(--pf-ink-soft); padding:var(--pf-s-3) var(--pf-s-4); border-radius:var(--pf-r-pill); cursor:pointer; min-height:var(--pf-tap); } .psf-tabs button[aria-selected=true]{ background:var(--pf-surface); color:var(--pf-ink); box-shadow:0 1px 3px rgba(25,28,29,.1); } .psf-tabnote{ font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-3); max-width:var(--pf-w-read); } /* Secciones de la ficha */ .psf-sec{ padding:var(--pf-s-8) 0; border-bottom:1px solid var(--pf-line); scroll-margin-top:var(--pf-scroll-margin); } .psf-sec:last-child{ border-bottom:none; } .psf-sec > h2{ display:flex; align-items:baseline; gap:var(--pf-s-3); } /* ═══════════════════════════════════════════════════════════════ K. AUTOEVALUACIÓN ═══════════════════════════════════════════════════════════════ */ .psf-quiz{ background:var(--pf-surface); border:1px solid var(--pf-line); border-radius:var(--pf-r-lg); overflow:hidden; margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-quiz__h{ background:var(--pf-paper-alt); padding:var(--pf-s-3) var(--pf-s-6); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--pf-ink-soft); border-bottom:1px solid var(--pf-line); display:flex; align-items:center; justify-content:space-between; gap:var(--pf-s-3); } .psf-quiz__b{ padding:var(--pf-s-6); } .psf-quiz__q{ padding:var(--pf-s-4) 0; border-top:1px solid var(--pf-paper-alt); } .psf-quiz__q:first-child{ border-top:none; padding-top:0; } .psf-quiz__num{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-cls-tx); font-weight:var(--pf-w-semibold); margin-right:var(--pf-s-2); } .psf-quiz__opts{ list-style:none; margin:var(--pf-s-3) 0 0; padding:0; } .psf-quiz__opts li{ margin:var(--pf-s-2) 0; } .psf-quiz__opt{ display:flex; align-items:flex-start; gap:var(--pf-s-3); width:100%; text-align:left; cursor:pointer; background:var(--pf-paper); border:1px solid var(--pf-line); border-radius:var(--pf-r-sm); padding:var(--pf-s-3) var(--pf-s-4); font-family:var(--pf-sans); font-size:var(--pf-fs-small); color:var(--pf-ink); min-height:var(--pf-tap); } .psf-quiz__opt:hover{ border-color:var(--pf-cls); } .psf-quiz__opt[data-estado="ok"] { border-color:var(--pf-ok); background:var(--pf-ok-tint); } .psf-quiz__opt[data-estado="mal"] { border-color:var(--pf-danger); background:var(--pf-danger-tint); } .psf-quiz__opt::before{ content:attr(data-letra); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); flex:none; padding-top:2px; } .psf-quiz__exp{ margin-top:var(--pf-s-3); padding:var(--pf-s-3) var(--pf-s-4); background:var(--pf-info-tint); border-left:3px solid var(--pf-info); border-radius:0 var(--pf-r-sm) var(--pf-r-sm) 0; font-size:var(--pf-fs-small); } /* ═══════════════════════════════════════════════════════════════ L. DESCARGO, TRAZABILIDAD Y PIE ═══════════════════════════════════════════════════════════════ */ .psf-disclaimer{ background:var(--pf-paper-alt); border-top:1px solid var(--pf-line); margin-top:var(--pf-s-6); } .psf-disclaimer__in{ max-width:var(--pf-w-sidebar); margin:0 auto; display:flex; gap:var(--pf-s-3); align-items:flex-start; padding:var(--pf-s-4) var(--pf-gutter-desktop); font-size:var(--pf-fs-small); color:var(--pf-ink-soft); } .psf-disclaimer__tri{ color:var(--pf-warn-tx); font-size:var(--pf-fs-body); flex:none; } .psf-disclaimer b{ color:var(--pf-ink); } /* ---- ★ TRAZABILIDAD ------------------------------------------- Contenido §10 y §8. La fecha es un dato real por página, no un sello estático: es lo que ha permitido que navacaprant, el REMS de clozapina y ARISE queden desfasados bajo un "Actualizado: jul 2026". */ .psf-traza{ background:var(--pf-paper-alt); border-top:1px solid var(--pf-line); padding:var(--pf-s-4) 0; margin-top:var(--pf-s-6); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); max-width:var(--pf-w-read); } .psf-traza__k{ letter-spacing:.1em; text-transform:uppercase; font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); } .psf-traza__links{ margin-top:var(--pf-s-2); } /* [v6.1.0] Los tres enlaces de trazabilidad son una fila de navegacion, no enlaces dentro de una frase: por debajo de 1024 px les toca el objetivo tactil de 44 px, y el area crece por padding (D-21). */ @media (max-width:1024px){ .psf-traza__links{ display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; } .psf-traza__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px; } } .psf-traza a{ color:var(--pf-brand-tx); } .psf-traza__reg{ margin-top:var(--pf-s-1); color:var(--pf-ink-faint-tx); } .psf-footer{ background:var(--pf-footer-bg); color:var(--pf-footer-ink); border-top:1px solid var(--pf-line); margin-top:0; padding:var(--pf-s-8) 0; } .psf-footer__in{ max-width:var(--pf-w-sidebar); margin:0 auto; padding:0 var(--pf-gutter-desktop); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pf-s-8); } .psf-footer h3{ font-family:var(--pf-serif); font-size:var(--pf-fs-h4); color:var(--pf-footer-strong); margin:0 0 var(--pf-s-3); } .psf-footer a{ color:var(--pf-footer-ink); text-decoration:none; display:block; padding:var(--pf-s-1) 0; font-size:var(--pf-fs-small); } .psf-footer a:hover{ color:var(--pf-footer-strong); text-decoration:underline; } /* La autoría es autoría, no reclamo comercial (§5.3) */ .psf-footer__autoria{ grid-column:1 / -1; border-top:1px solid var(--pf-line); padding-top:var(--pf-s-4); font-size:var(--pf-fs-small); } .psf-footer__autoria a{ color:var(--pf-footer-link); display:inline; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE [diseño §7] Primero la columna única, después dos columnas a partir de 1024px. Las tablas se repliegan a "etiqueta: valor" apilado, nunca scroll horizontal ciego. ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ .psf-toc { display:none; } .psf-tocm{ display:block; } } @media (max-width:860px){ .psf-mols{ grid-template-columns:repeat(2,1fr); } .psf-doors,.psf-lib{ grid-template-columns:1fr; } .psf-next{ grid-template-columns:1fr; } .psf-footer__in{ grid-template-columns:1fr; gap:var(--pf-s-6); } } @media (max-width:760px){ .psf-wrap,.psf-header__in,.psf-disclaimer__in,.psf-footer__in{ padding-left:var(--pf-gutter-mobile); padding-right:var(--pf-gutter-mobile); } .psf-header__in{ height:auto; padding-top:var(--pf-s-2); padding-bottom:var(--pf-s-3); flex-wrap:wrap; gap:var(--pf-s-2); } .psf-nav{ display:none; } .psf-search{ margin-left:0; width:100%; order:3; } .psf-summary{ padding:var(--pf-s-4); } .psf-summary__head{ gap:var(--pf-s-3); } .psf-summary__ill{ width:74px; height:74px; } .psf-tabs{ width:100%; } .psf-tabs button{ flex:1; padding:var(--pf-s-3) var(--pf-s-2); font-size:var(--pf-fs-micro); } .psf-dr__grid{ grid-template-columns:1fr; } .psf-dr__v{ font-size:var(--pf-fs-h3); } .psf-populations{ grid-template-columns:1fr; } .psf-related{ grid-template-columns:1fr; } .psf-mols{ grid-template-columns:1fr; } .psf-overdose dl{ grid-template-columns:1fr; gap:var(--pf-s-1); } .psf-overdose dd{ margin-bottom:var(--pf-s-2); } .psf-efficacy__row{ grid-template-columns:1fr; } .psf-efficacy__val{ text-align:left; } /* Timeline y glance apilan a "etiqueta: valor" */ .psf-timeline,.psf-glance{ grid-template-columns:1fr; } .psf-timeline > div,.psf-glance > div{ text-align:left; display:flex; justify-content:space-between; align-items:baseline; gap:var(--pf-s-3); } /* Tablas replegadas: cada fila es una tarjeta etiqueta/valor. Requiere data-l="" en cada . */ .psf-table--fold thead{ display:none; } .psf-table--fold tr{ display:block; border:1px solid var(--pf-line); border-radius:var(--pf-r-sm); margin-bottom:var(--pf-s-3); background:var(--pf-surface); padding:var(--pf-s-2) var(--pf-s-3); } .psf-table--fold td{ display:flex; justify-content:space-between; gap:var(--pf-s-3); border-top:none; border-bottom:1px solid var(--pf-paper-alt); padding:var(--pf-s-2) 0; } .psf-table--fold td:last-child{ border-bottom:none; } .psf-table--fold td::before{ content:attr(data-l); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--pf-ink-faint-tx); flex:none; padding-top:3px; } } @media print{ /* [v6.17.0] La barra y el cierre se suman a la lista de lo que NO se imprime. No es cosmética: el generador de PDF de Principios básicos imprime el sitio real, así que todo lo que se olvide aquí acaba dentro de los nueve documentos y de las nueve presentaciones. Una fila de migas y tres tarjetas de enlaces en cada portada de PDF serían basura impresa, y enlaces que en papel no llevan a ninguna parte. */ .psf-header,.psf-search,.psf-toc,.psf-tocm,.psf-next,.psf-quiz__opts, .psf-ubic,.psf-cierre,.psf-az{ display:none; } .psf-r{ font-size:11pt; } .psf-blackbox,.psf-overdose{ break-inside:avoid; } /* Los grados y la procedencia siguen legibles sin color */ .psf-grade{ border:1px solid var(--pf-ink); } } /* ═══════════════════════════════════════════════════════════════ S. DICOTOMÍA TÍPICO / ATÍPICO (figura 1 de McCutcheon 2024) ─────────────────────────────────────────────────────────────── Bloque de la página de clase de antipsicóticos. Todos los valores salen de los tokens; cero hex sueltos, cero tamaños literales. ═══════════════════════════════════════════════════════════════ */ .psf-dic{ background:var(--pf-surface); border:1px solid var(--pf-line); border-top:3px solid var(--pf-cls); border-radius:var(--pf-r-md); padding:var(--pf-s-6); margin:var(--pf-s-4) 0; max-width:var(--pf-w-read); } .psf-dic__eyebrow{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase; color:var(--pf-cls-tx); margin:0 0 var(--pf-s-2); } .psf-dic__h{ font-family:var(--pf-serif); font-size:var(--pf-fs-h3); font-weight:var(--pf-w-semibold); line-height:var(--pf-lh-tight); color:var(--pf-ink); margin:0 0 var(--pf-s-2); } .psf-dic__lead{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); margin:0 0 var(--pf-s-4); } /* Los tres paneles */ .psf-dic__panel{ border-left:3px solid var(--pf-line); padding-left:var(--pf-s-4); margin:0 0 var(--pf-s-4); } .psf-dic__k{ display:flex; align-items:baseline; gap:var(--pf-s-2); font-weight:var(--pf-w-semibold); font-size:var(--pf-fs-h4); color:var(--pf-ink); margin:0 0 var(--pf-s-1); } .psf-dic__letra{ flex:none; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold); /* [D-15] Contorno, no relleno: la letra blanca sobre el color de la clase baja a 3,45:1 en la clase de noradrenalina y dopamina. */ color:var(--pf-cls-tx); background:transparent; border:1.5px solid var(--pf-cls); width:20px; height:20px; border-radius:var(--pf-r-sm); display:inline-flex; align-items:center; justify-content:center; } .psf-dic__b{ font-size:var(--pf-fs-small); color:var(--pf-ink); margin:0 0 var(--pf-s-2); } .psf-dic__a{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); background:var(--pf-paper-alt); border-radius:var(--pf-r-sm); padding:var(--pf-s-2) var(--pf-s-3); margin:0; } /* Las dos listas de moléculas */ .psf-dic__listas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--pf-s-4); margin:var(--pf-s-4) 0 var(--pf-s-2); } .psf-dic__lt{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ink-soft); margin:0 0 var(--pf-s-2); display:flex; align-items:center; gap:var(--pf-s-2); } .psf-dic__lt span{ font-weight:var(--pf-w-semibold); color:var(--pf-cls-tx); background:var(--pf-paper-alt); border-radius:var(--pf-r-pill); padding:2px var(--pf-s-2); } .psf-dic__mols{ display:flex; flex-wrap:wrap; gap:var(--pf-s-2); } .psf-dic__mol{ font-size:var(--pf-fs-micro); color:var(--pf-ink); border-bottom:2px solid var(--pf-cls); text-decoration:none; line-height:1.5; } .psf-dic__mol:hover{ color:var(--pf-cls-tx); } .psf-dic__mol--sin{ color:var(--pf-ink-faint-tx); border-bottom:1px dotted var(--pf-ink-faint); font-style:italic; } .psf-dic__nota{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); margin:0 0 var(--pf-s-4); } .psf-dic__fuente{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); border-top:1px solid var(--pf-line); padding-top:var(--pf-s-3); margin:var(--pf-s-4) 0 0; } .psf-dic__nivel{ display:inline-block; font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label); text-transform:uppercase; color:var(--pf-ink-soft); background:var(--pf-paper-alt); border:1px solid var(--pf-line); border-radius:var(--pf-r-pill); padding:2px var(--pf-s-2); margin-right:var(--pf-s-2); } @media (max-width:760px){ .psf-dic{ padding:var(--pf-s-4); } .psf-dic__listas{ grid-template-columns:1fr; } } /* El hueco declarado, dentro de la tarjeta: hereda su ancho y su razón envuelve. Sin esto la razón se desbordaba por la derecha. */ .psf-dic .psf-gap--bloque{ max-width:100%; } .psf-dic .psf-gap{ white-space:normal; } .psf-dic .psf-gap__razon{ white-space:normal; } /* Panel (b) reconstruido con Huhn 2019 */ .psf-dic__tabla{ margin:var(--pf-s-4) 0; } .psf-dic__t{ font-size:var(--pf-fs-micro); min-width:520px; } .psf-dic__t th[scope="col"]{ vertical-align:bottom; } .psf-dic__th{ display:block; font-weight:var(--pf-w-semibold); } .psf-dic__sub{ display:block; font-family:var(--pf-sans); text-transform:none; letter-spacing:0; font-weight:var(--pf-w-regular); color:var(--pf-ink-soft); margin-top:2px; max-width:15ch; } .psf-dic__n{ display:block; font-family:var(--pf-mono); color:var(--pf-ink-faint-tx); margin-top:2px; } .psf-dic__t th[scope="row"]{ text-align:left; font-weight:var(--pf-w-regular); white-space:nowrap; background:var(--pf-surface); } .psf-dic__t th[scope="row"] a{ color:var(--pf-ink); border-bottom:1px solid var(--pf-cls); text-decoration:none; } .psf-dic__t th[scope="row"] a:hover{ color:var(--pf-cls-tx); } .psf-dic__etq{ display:inline-block; min-width:6.5ch; margin-right:var(--pf-s-2); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); border:1px solid var(--pf-line); border-radius:var(--pf-r-pill); padding:0 var(--pf-s-2); text-align:center; } /* La etiqueta se distingue por FORMA, no solo por color: el atípico va en contorno continuo y el típico en punteado, igual que el eje de procedencia. */ .psf-dic__t th[data-etq="tipico"] .psf-dic__etq{ border-style:dotted; } .psf-dic__num{ font-family:var(--pf-mono); text-align:right; white-space:nowrap; } .psf-dic__nd{ text-align:right; color:var(--pf-ink-faint-tx); } .psf-dic__cruces{ margin:0 0 var(--pf-s-4); padding-left:var(--pf-s-5); } .psf-dic__cruces li{ font-size:var(--pf-fs-small); margin:var(--pf-s-2) 0; } .psf-dic__cruces b{ color:var(--pf-cls-tx); } .psf-dic__aviso{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); background:var(--pf-warn-tint); border-left:3px solid var(--pf-warn); border-radius:0 var(--pf-r-sm) var(--pf-r-sm) 0; padding:var(--pf-s-2) var(--pf-s-3); margin:var(--pf-s-2) 0 0; } .psf-dic__n{ text-transform:none; } /* --- Panel (c): los cuatro conglomerados por receptores [v5.74.0] --------- Sustituyen al hueco que había: el artículo de McCutcheon 2023 tampoco imprime los pKi, pero sí enumera en texto la composición de los grupos. Rejilla de dos columnas en pantalla ancha, una sola en móvil. */ .psf-dic__c{ margin:var(--pf-s-4) 0 0; } .psf-dic__cl{ border:1px solid var(--pf-line); border-left:3px solid var(--pf-cls); border-radius:0 var(--pf-r-sm) var(--pf-r-sm) 0; padding:var(--pf-s-3); margin:0 0 var(--pf-s-3); background:var(--pf-surface); } .psf-dic__cl-h{ display:flex; align-items:baseline; gap:var(--pf-s-2); font-size:var(--pf-fs-small); font-weight:var(--pf-w-semibold); color:var(--pf-ink); margin:0 0 var(--pf-s-1); } .psf-dic__cl-n{ display:inline-flex; align-items:center; justify-content:center; width:1.35em; height:1.35em; flex:none; border:1.5px solid var(--pf-cls); border-radius:50%; color:var(--pf-cls-tx); font-family:var(--pf-mono); font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold); } .psf-dic__cl-c{ margin-left:auto; font-family:var(--pf-mono); font-weight:var(--pf-w-regular); font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx); white-space:nowrap; } .psf-dic__cl-r{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); margin:0 0 var(--pf-s-2); } .psf-dic__t--pred{ min-width:0; width:100%; margin:var(--pf-s-3) 0 var(--pf-s-2); } .psf-dic__t--pred th[scope="row"]{ font-weight:var(--pf-w-regular); } .psf-dic__t--pred td{ font-family:var(--pf-mono); text-align:right; white-space:nowrap; } .psf-dic__gana th[scope="row"], .psf-dic__gana td{ font-weight:var(--pf-w-semibold); color:var(--pf-ok-tx); } .psf-dic__gana th[scope="row"]::before{ content:"\2192"; margin-right:var(--pf-s-1); color:var(--pf-ok-tx); } @media (min-width:720px){ .psf-dic__c .psf-dic__cl{ margin-bottom:var(--pf-s-3); } } /* ═══════════════════════════════════════════════════════════════ T. PIE DE PÁGINA [D3 — decisión del autor: lo imprime el plugin] ─────────────────────────────────────────────────────────────── Sustituye al del tema, que servía ocho cadenas `trans-` sin resolver y enlaces sociales rotos en todas las páginas. Diseño §5.3: fondo oscuro, secciones, recursos y una línea de atribución de autoría con el enlace en terracota claro. ═══════════════════════════════════════════════════════════════ */ /* [D-110] El pie deja de ser la superficie oscura del sitio: banda clara sobre --pf-footer-bg (gris frío), separada del contenido por un filete, como manda la maqueta («evitar fondos oscuros por completo»). */ .psf-pie{ background:var(--pf-footer-bg); color:var(--pf-footer-ink); border-top:1px solid var(--pf-line); font-family:var(--pf-sans); font-size:var(--pf-fs-small); line-height:var(--pf-lh-body); margin-top:var(--pf-s-12); padding:var(--pf-s-12) var(--pf-gutter-desktop) var(--pf-s-6); } .psf-pie__in{ max-width:var(--pf-w-sidebar); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--pf-s-8); } .psf-pie__wm{ font-family:var(--pf-serif); font-size:var(--pf-fs-h3); font-weight:var(--pf-w-bold); color:var(--pf-footer-strong); margin:0 0 var(--pf-s-2); letter-spacing:var(--pf-track-display); } .psf-pie__dot{ color:var(--pf-footer-link); } .psf-pie__co{ font-weight:var(--pf-w-regular); } .psf-pie__lema{ margin:0; font-size:var(--pf-fs-micro); max-width:34ch; } .psf-pie__h{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase; color:var(--pf-footer-ink); font-weight:var(--pf-w-semibold); margin:0 0 var(--pf-s-3); } .psf-pie__col ul{ list-style:none; margin:0; padding:0; } .psf-pie__col li{ margin:0 0 var(--pf-s-2); } .psf-pie__col a{ color:var(--pf-footer-strong); text-decoration:none; font-size:var(--pf-fs-micro); display:inline-flex; align-items:center; /* [D-16] 28 px, no --pf-tap (44 px). Decisión deducida, no está en ninguno de los dos documentos, y por eso queda anotada aquí y en el §10 del documento de diseño. Razón: 44 px es el criterio 2.5.5 de WCAG, que es AAA; el nivel al que aspira el sitio —AA— pide 24 px (2.5.8). Con 44 px una lista de seis enlaces medía 320 px de alto y abría un hueco vertical en el pie que se leía como un fallo de maquetación. 28 px cumple AA con holgura y devuelve al pie su densidad. En el cuerpo del sitio se sigue usando --pf-tap: allí los objetivos son de dedo, aquí son de fin de página. */ min-height:28px; padding:var(--pf-s-1) 0; border-bottom:1px solid transparent; } .psf-pie__col li{ margin:0 0 var(--pf-s-1); } .psf-pie__col a:hover{ border-bottom-color:var(--pf-footer-link); } .psf-pie__fina{ max-width:var(--pf-w-sidebar); margin:var(--pf-s-8) auto 0; border-top:1px solid var(--pf-line); padding-top:var(--pf-s-4); } .psf-pie__autoria{ margin:0 0 var(--pf-s-1); font-size:var(--pf-fs-micro); } .psf-pie__autoria b{ color:var(--pf-footer-strong); } .psf-pie__autoria a{ color:var(--pf-footer-link); border-bottom:1px solid var(--pf-brand-line); text-decoration:none; } .psf-pie__autoria a:hover{ border-bottom-color:var(--pf-footer-link); } .psf-pie__legal{ margin:0; font-size:var(--pf-fs-micro); } @media (max-width:760px){ .psf-pie{ padding:var(--pf-s-8) var(--pf-gutter-mobile) var(--pf-s-6); } .psf-pie__in{ grid-template-columns:1fr; gap:var(--pf-s-6); } } @media print{ .psf-pie{ display:none; } } /* ═══════════════════════════════════════════════════════════════ U. PÁGINAS DE METODOLOGÍA Y GOBERNANZA ─────────────────────────────────────────────────────────────── «Cómo leemos la evidencia», «Política editorial», «¿Ves un error?» y «Conflictos de interés». Columna de lectura de 680 px y escala tipográfica completa: son las páginas donde el §4 del documento de diseño se ve más claro. ═══════════════════════════════════════════════════════════════ */ .psf-met{ max-width:var(--pf-w-read); margin:0 auto; padding:var(--pf-s-8) var(--pf-gutter-mobile) var(--pf-s-12); color:var(--pf-ink); font-family:var(--pf-sans); font-size:var(--pf-fs-body); line-height:var(--pf-lh-body); } .psf-met__eyebrow{ font-family:var(--pf-mono); font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-eyebrow); text-transform:uppercase; color:var(--pf-cls-tx); margin:0 0 var(--pf-s-2); display:flex; align-items:center; gap:var(--pf-s-2); } .psf-met__eyebrow::before{ content:""; width:20px; height:1.5px; background:currentColor; } .psf-met__h1{ font-family:var(--pf-serif); font-size:var(--pf-fs-h1); font-weight:var(--pf-w-semibold); line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display); margin:0 0 var(--pf-s-3); } .psf-met__lead{ font-size:var(--pf-fs-lead); color:var(--pf-ink-soft); line-height:1.45; margin:0 0 var(--pf-s-8); } .psf-met h2{ font-family:var(--pf-serif); font-size:var(--pf-fs-h2); font-weight:var(--pf-w-semibold); line-height:var(--pf-lh-tight); margin:var(--pf-s-8) 0 var(--pf-s-3); } .psf-met h3{ font-family:var(--pf-serif); font-size:var(--pf-fs-h3); font-weight:var(--pf-w-semibold); margin:var(--pf-s-6) 0 var(--pf-s-2); } .psf-met p{ margin:0 0 var(--pf-s-4); } .psf-met ul, .psf-met ol{ margin:0 0 var(--pf-s-4); padding-left:var(--pf-s-5); } .psf-met li{ margin:var(--pf-s-2) 0; } .psf-met__t{ font-size:var(--pf-fs-small); } .psf-met__t th[scope="row"]{ text-align:left; vertical-align:top; padding-top:var(--pf-s-3); } .psf-met__et{ font-weight:var(--pf-w-semibold); white-space:nowrap; } .psf-met__nota{ display:block; font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); margin-top:var(--pf-s-1); } .psf-met__matriz td{ text-align:center; } .psf-met__si{ color:var(--pf-ok-tx); font-weight:var(--pf-w-bold); } .psf-met__no{ color:var(--pf-ink-faint-tx); } .psf-met__procs{ list-style:none; padding:0; } .psf-met__procs li{ border-top:1px solid var(--pf-line); padding:var(--pf-s-3) 0; margin:0; } .psf-met__procs p{ margin:var(--pf-s-1) 0 0; font-size:var(--pf-fs-small); color:var(--pf-ink-soft); } @media (min-width:761px){ .psf-met{ padding-left:var(--pf-gutter-desktop); padding-right:var(--pf-gutter-desktop); } } /* ═══════════════════════════════════════════════════════════════ V. OBJETIVOS TÁCTILES [D-21 — §6.2 y §7: ≥44 × 44 px] ─────────────────────────────────────────────────────────────── Medido en las 80 páginas: 446 objetivos por debajo de 44 px en móvil, de los cuales 164 son cuatro elementos repetidos en las 50 fichas —las tres pestañas y el encabezado del cuestionario—. Una regla los cubre todos. Se aplica solo por debajo de 1024 px: en escritorio el objetivo es el puntero, no el pulgar, y forzar 44 px allí desmontaría la densidad de las tablas. ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ .psf-switch-btn, .psf-tabs button, .psf-quiz-toggle, .psf-quiz-h, .psf-preg-h, .psf-ov-migas a, .psf-arch-migas a, .psf-chip, .psf-carpeta > summary, .psf-ov-desp > summary, .psf-arch-link, .psf-mnemo-farmaco, .psf-nav-farmaco a, .psf-pie__col a{ min-height:44px; display:inline-flex; align-items:center; } .psf-carpeta > summary, .psf-ov-desp > summary{ display:flex; } /* El área táctil crece sin que crezca el texto: padding, no font-size. */ .psf-switch-btn, .psf-chip, .psf-mnemo-farmaco{ padding-block:10px; } } /* ═══════════════════════════════════════════════════════════════ W. FOCO VISIBLE [D-23 — §8: navegación por teclado con foco visible] ─────────────────────────────────────────────────────────────── Medido: 52 elementos interactivos sin ningún indicador de foco. Se usa :focus-visible, no :focus, para que el anillo aparezca al navegar con teclado y no al hacer clic con el ratón, que es la razón por la que muchos temas acaban desactivándolo del todo. ═══════════════════════════════════════════════════════════════ */ .psf-ficha :focus-visible, .psf-dx :focus-visible, .psf-arch :focus-visible, .psf-ov :focus-visible, .psf-portada :focus-visible, .psf-pb :focus-visible, .psf-met :focus-visible, .psf-pie :focus-visible, .psf-intro :focus-visible{ outline:var(--pf-focus,3px) solid var(--pf-brand,#1a365d); outline-offset:2px; border-radius:2px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } } /* ═══════════════════════════════════════════════════════════════ X. CAPA CORRECTORA DE LA ESCALA TIPOGRÁFICA [D-24 — §4.2 y §4.3] ─────────────────────────────────────────────────────────────── POR QUÉ EXISTE. La migración de las nueve hojas heredadas se hizo por el nombre del selector, y el nombre no siempre dice el papel: un H3 pintado por una clase llamada `.psf-ov-desp-h` no se reconoce como título. Medido después de aquella pasada: H2 a 22,5 px de mediana y H3 a 15, cuando la escala pide 26 y 20. Esta capa corrige por ELEMENTO, que es lo que no se puede confundir, y va la última para ganar por orden de cascada. No sube la especificidad más de lo necesario: un selector de clase basta contra las reglas de las hojas heredadas. ═══════════════════════════════════════════════════════════════ */ .psf-ficha h2, .psf-dx h2, .psf-arch h2, .psf-ov h2, .psf-met h2, .psf-intro h2, .psf-portada h2{ font-size:var(--pf-fs-h2); line-height:1.25; } .psf-ficha h3, .psf-dx h3, .psf-arch h3, .psf-ov h3, .psf-met h3, .psf-intro h3, .psf-portada h3{ font-size:var(--pf-fs-h3); line-height:1.3; } /* §4.2: el H4 es la corrección que más se nota — hoy medía lo mismo que el cuerpo, así que no daba estructura escaneable. */ .psf-ficha h4, .psf-dx h4, .psf-arch h4, .psf-ov h4, .psf-met h4, .psf-intro h4, .psf-portada h4{ font-size:var(--pf-fs-h4); font-weight:var(--pf-w-semibold); font-family:var(--pf-sans); line-height:1.35; } /* §4.3: columna de lectura. Solo párrafos y listas de prosa; nada dentro de una tabla, una rejilla o un diagrama, donde el ancho es funcional y recortarlo rompería la comparación entre columnas. */ .psf-ficha > p, .psf-ficha > div > p, .psf-dx > p, .psf-dx > div > p, .psf-ov > p, .psf-ov > div > p, .psf-arch > p, .psf-arch > div > p, .psf-met p, .psf-met li{ max-width:var(--pf-w-read); } /* §4.3 · la columna de lectura, ahora sobre todo el texto de prosa. Se aplica ancho, y se levanta dentro de tablas, rejillas y celdas, donde el ancho es funcional: recortarlo rompería la comparación. */ .psf-ficha p, .psf-ficha li, .psf-dx p, .psf-dx li, .psf-ov p, .psf-ov li, .psf-arch p, .psf-arch li{ max-width:var(--pf-w-read); } .psf-ficha table p, .psf-ficha table li, .psf-ficha td p, .psf-ficha td li, .psf-dx table p, .psf-dx table li, .psf-dx td p, .psf-dx td li, .psf-ov table p, .psf-ov table li, .psf-ov td p, .psf-ov td li, .psf-arch table p, .psf-arch table li, .psf-arch td p, .psf-arch td li, .psf-ficha figure p, .psf-ov figure p, [class*="rejilla"] p, [class*="grid"] p, [class*="glance"] p{ max-width:none; } /* ═══════════════════════════════════════════════════════════════ Z. MEDIDA DE PÁGINA — todas las páginas del plugin, centradas ═══════════════════════════════════════════════════════════════ [D-41] EL ENCARGO. «Centra todas las páginas del plugin. Deja espacio a ambos lados para que los estudiantes y yo podamos hacer notas» (03-08-2026). Dos cosas, no una: una medida máxima, y que esa medida quede en el centro de la pantalla. LA MEDIDA. --pf-w-page. Se aplica a la RAÍZ de cada módulo, no a la prosa: la prosa sigue teniendo su propia columna de lectura, más estrecha. Lo que sobra a los lados es margen de anotación. EL CENTRADO, EN DOS CAPAS. La primera es CSS: margin-inline:auto con !important, que basta cuando el contenedor del tema ocupa todo el ancho y solo hay una regla suya alineando a la izquierda. La segunda es psf-medida.js, que MIDE dónde ha quedado el bloque y lo desplaza con position:relative + left hasta el centro real de la ventana. Hace falta la segunda porque hay un caso que el CSS no puede resolver: cuando el contenedor del tema es él mismo una columna descentrada —una plantilla con barra lateral, por ejemplo—. Un hijo no puede centrarse dentro de un padre que ya está descentrado, y en CSS no hay manera de saber dónde empieza el padre. POR QUÉ NO SE USA EL TRUCO DE 100vw. Es la solución habitual —salir del contenedor con margin:calc(50% - 50vw)— y NO sirve aquí: ese 50% se resuelve contra el ancho del padre, no contra su posición, así que centra solo si el padre ya estaba centrado. Medido: con un padre de 1 090 px alineado a la izquierda en una ventana de 2 600, el bloque quedaba con su centro en 553 px en vez de 1 300. Además arrastra la barra de desplazamiento horizontal de los 15 px del scrollbar. Se descartó por las dos razones. POR QUÉ left Y NO transform. translateX crearía un bloque contenedor para los descendientes position:fixed, y el globo de la referencia de Efectos adversos es uno. Con position:relative + left eso no pasa. PARA DESACTIVARLO en un tema que ya centre bien: add_filter( 'psf_medida_pagina', '__return_false' ); */ .psf-pb, .psf-ea, .psf-bz, .psf-portada, .psf-aviso, .psf-met, .psf-ficha, .psf-arch, .psf-dx, .smpf{ box-sizing:border-box; max-width:var(--pf-w-page); margin-left:auto !important; margin-right:auto !important; padding-left:var(--pf-gutter-desktop); padding-right:var(--pf-gutter-desktop); } @media (max-width:640px){ .psf-pb, .psf-ea, .psf-bz, .psf-portada, .psf-aviso, .psf-met, .psf-ficha, .psf-arch, .psf-dx, .smpf{ padding-left:var(--pf-gutter-mobile); padding-right:var(--pf-gutter-mobile); } } /* Dos módulos traían su propia medida, más ancha, en una hoja que se carga después: el archivo de fármacos (1 200 px) y Sobre mí (1 120 px). Se igualan a la medida del sitio con el selector doblado, que sube la especificidad sin recurrir a !important. Si mañana uno de los dos necesita más ancho, se cambia --pf-w-page y cambian todos a la vez, que es justo lo que se quería. */ .psf-arch.psf-arch, .smpf.smpf{ max-width:var(--pf-w-page); } /* El desplazamiento que calcula psf-medida.js. Se declara aquí, en 0, para que el salto no se vea si el guion tarda en ejecutarse. */ .psf-medida-centrado{ position:relative; left:var(--psf-centrar, 0px); } /* En papel no hay ventana que centrar: manda el margen de la impresora, que es donde el lector escribe de verdad. */ @media print{ .psf-pb, .psf-ea, .psf-bz, .psf-portada, .psf-aviso, .psf-met, .psf-ficha, .psf-arch, .psf-dx, .smpf{ max-width:none; padding-left:0; padding-right:0; } .psf-medida-centrado{ position:static; left:auto; } } /* [D-90 · v6.20.0] El enlace de autoría del pie medía 16 px de alto y está en las 89 páginas. Va dentro de una frase, así que estirarlo rompería el interlineado del párrafo; se le da relleno vertical, que agranda el área táctil sin mover la línea base. Es el mismo compromiso que ya se anotó en [D-16] para los enlaces dentro de prosa, resuelto esta vez en vez de anotado. */ .psf-pie__autoria a{ display:inline-block; padding:4px 0; }