/* =====================================================================
   adversos.css — «Efectos adversos frecuentes y su manejo»
   ---------------------------------------------------------------------
   Todo va prefijado con .psf-ea, igual que el módulo de Principios va
   prefijado con .psf-pb: así el tema no pinta nuestras tarjetas ni
   nosotros las suyas.

   REGLA DURA HEREDADA DE psf-tokens.css: aquí no se escribe ni un hex,
   ni un tamaño de fuente, ni un espaciado literal. Todo sale de los
   tokens --pf-*. Las dos únicas excepciones son los valores geométricos
   que no tienen token porque no son del sistema (anchos de barra de
   figura, por ejemplo), y están señaladas donde aparecen.

   DECISIONES ANOTADAS
   [D-37] Las tablas de esta página no llevan barra de desplazamiento
          horizontal: por debajo de 640 px se convierten en tarjetas
          usando el atributo data-l de cada celda. Se eligió así porque
          la auditoría de la v6.1.0 dejó una página con scrollX y
          porque una tabla de prevalencias se lee peor en scroll que
          apilada. El coste es que hay que escribir data-l en cada td;
          se comprueba en las pruebas de humo.
   [D-38] El superíndice de cita es un objetivo táctil de 44 px de alto
          por 24 de ancho, conseguido con un área invisible (::after) y
          no con padding, para que no separe las líneas del párrafo.
          El ancho de 24 px cumple 2.5.8 (AA); la altura de 44 cumple
          2.5.5 (AAA) en el eje donde sí se puede.
   ===================================================================== */

.psf-ea{
	--pf-cls:    var(--pf-cat-farmacos);
	--pf-cls-tx: var(--pf-cat-farmacos-tx);
	color:var(--pf-ink);
	font-family:var(--pf-sans);
	font-size:var(--pf-fs-body);
	line-height:var(--pf-lh-body);
}
.psf-ea *{ box-sizing:border-box; }
.psf-ea .ea-wrap{ max-width:var(--pf-w-read); margin:0 auto; padding:0 var(--pf-gutter-mobile); }
.psf-ea p{ margin:0 0 var(--pf-s-4); }
.psf-ea b, .psf-ea strong{ font-weight:var(--pf-w-semibold); }
.psf-ea a{ color:var(--pf-cls-tx); }
.psf-ea :focus-visible{
	outline:var(--pf-focus) solid var(--pf-cls-tx); outline-offset:2px;
	border-radius:var(--pf-r-sm);
}

/* ── Cabecera ──────────────────────────────────────────────────── */
.psf-ea .ea-cab{ padding:var(--pf-s-12) 0 var(--pf-s-8); }
.psf-ea .ea-eyebrow{
	/* [v8.1.0] El eyebrow pasa a chip de la maqueta: salvia sobre tinte. */
	display:inline-block; padding:4px 12px;
	background:var(--pf-sage-tint); color:var(--pf-sage-tx); border-radius:2px;
	font-family:var(--pf-sans); font-size:12px; font-weight:600;
	letter-spacing:.08em; text-transform:uppercase;
	margin:0 0 var(--pf-s-3);
}
.psf-ea .ea-cab h1{
	color:var(--pf-brand-deep);
	font-family:var(--pf-serif); font-size:48px;
	line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display);
	margin:0 0 var(--pf-s-4); font-weight:var(--pf-w-semibold);
}
.psf-ea .ea-lead{ font-size:var(--pf-fs-lead); color:var(--pf-ink-soft); }

/* ── Navegación por anclas ─────────────────────────────────────── */
/* [D-39] AQUÍ NO ES PEGAJOSA, y en Principios sí. La diferencia no es
   capricho: allí la lista tiene los subtipos de UN sistema —cuatro o
   cinco— y cabe en una línea. Aquí son once anclas, que a 680 px de
   columna ocupan tres líneas; pegada, la barra taparía un tercio de la
   pantalla del móvil durante toda la lectura. Se queda como índice de
   cabecera. Medido antes de decidirlo: 170 px de alto en escritorio. */
/* [D-208 · v9.32.0] Sin caja. Las carpetas ya son tarjetas blancas con su
   filete; meterlas dentro de un rectángulo gris ponía un marco alrededor de
   otro marco, que es justo lo que /farmaco/ no hace. */
.psf-ea .ea-anclas{ margin:var(--pf-s-8) 0 var(--pf-s-6); }
.psf-ea .ea-anclas-t{
	display: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-faint-tx);
	margin-bottom:var(--pf-s-2);
}
.psf-ea .ea-anclas-l{
	list-style:none; margin:0; padding:0;
	display:flex; flex-wrap:wrap; gap:var(--pf-s-1);
}
.psf-ea .ea-anclas-l a{
	display:flex; align-items:center; min-height:var(--pf-tap);
	padding:0 var(--pf-s-3); border-radius:var(--pf-r-pill);
	font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold);
	text-decoration:none; white-space:nowrap;
	color:var(--pf-ink-soft);
	background:var(--pf-surface); border:1px solid var(--pf-line);
}
.psf-ea .ea-anclas-l a:hover,
.psf-ea .ea-anclas-l a:focus-visible{
	background:var(--pf-paper-alt); color:var(--pf-cls-tx);
}
/* El ancla activa se marca con color Y con un punto, nunca solo con
   color: criterio 1.4.1. */
.psf-ea .ea-anclas-l a[aria-current="true"]{
	background:var(--pf-brand-tint); color:var(--pf-cls-tx);
	border-color:var(--pf-brand-line); font-weight:var(--pf-w-semibold);
}
.psf-ea .ea-anclas-l a[aria-current="true"]::before{
	content:"▸"; margin-right:var(--pf-s-1);
}

/* ── El índice, con la forma de /farmaco/  [D-208 · v9.32.0] ────────
   Encargo del autor: que este archivo se navegue como el de fármacos y no
   como el de diagnósticos. Así que la rejilla de tarjetas se va y entra la
   ESTANTERÍA: carpetas <details> por aparato —icono, rótulo, cuenta y
   chevron— y dentro una fila por efecto. Encima, el índice completo por
   orden alfabético, que allí resuelve «¿tenéis ficha de la lurasidona?» y
   aquí «¿está la hiperlipidemia?» sin obligar a adivinar la carpeta.

   SE COPIA LA FORMA, NO EL ARCHIVO. psf-archivo.css tiene sesenta y un
   colores escritos a mano, su propia paleta --ar-* y ninguna variante
   oscura; aquí no se escribe ni un hex. Reutilizarla habría traído además
   su contenedor .psf-arch, que lleva anchura y fondo de página, y esto es
   un shortcode dentro de la página del tema.

   TODO ES <details>: pliega sin JavaScript, va con el teclado y no depende
   del tema. Lo único que añade el guion es abrir la carpeta del efecto que
   se está leyendo, para que el lector vea dónde está. */
.psf-ea .ea-az{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); margin:0 0 var(--pf-s-3);
}
.psf-ea .ea-az-t{
	display:flex; align-items:center; gap:var(--pf-s-2);
	min-height:var(--pf-tap); padding:var(--pf-s-2) var(--pf-s-4);
	list-style:none; cursor:pointer;
	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-ea .ea-az-t::-webkit-details-marker{ display:none; }
.psf-ea .ea-az-t:hover{ color:var(--pf-cls-tx); }
.psf-ea .ea-az-n{
	margin-left:auto; font-variant-numeric:tabular-nums;
	color:var(--pf-ink-faint-tx);
}
.psf-ea .ea-az-l{
	list-style:none; margin:0; padding:0 var(--pf-s-4) var(--pf-s-3);
	display:grid; gap:0;
	grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
}
.psf-ea .ea-az-l a{
	display:flex; align-items:baseline; gap:var(--pf-s-2);
	min-height:var(--pf-tap); padding:var(--pf-s-1) 0;
	text-decoration:none; color:var(--pf-ink);
	font-size:var(--pf-fs-small);
}
.psf-ea .ea-az-l a:hover{ color:var(--pf-cls-tx); }
.psf-ea .ea-az-c{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}

/* Las carpetas */
.psf-ea .ea-carp{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); margin-bottom:var(--pf-s-3);
}
.psf-ea .ea-carp[open]{ border-color:var(--pf-cls); box-shadow:var(--pf-shadow); }
.psf-ea .ea-carp-tab{
	display:flex; align-items:center; gap:var(--pf-s-3);
	min-height:var(--pf-tap); padding:var(--pf-s-3) var(--pf-s-4);
	list-style:none; cursor:pointer;
}
.psf-ea .ea-carp-tab::-webkit-details-marker{ display:none; }
.psf-ea .ea-carp-tab:hover .ea-carp-nom{ color:var(--pf-cls-tx); }
.psf-ea .ea-carp-ico{
	flex:none; display:inline-flex; align-items:center; justify-content:center;
	width:var(--pf-s-8); height:var(--pf-s-8); border-radius:var(--pf-r-sm);
	background:var(--pf-brand-tint); color:var(--pf-cls-tx);
}
.psf-ea .ea-carp-ico svg{
	width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
	stroke-linecap:round; stroke-linejoin:round;
}
.psf-ea .ea-carp-txt{ flex:1; min-width:0; }
.psf-ea .ea-carp-nom{
	display:block; font-family:var(--pf-serif); font-size:var(--pf-fs-h4);
	font-weight:var(--pf-w-semibold); line-height:1.2; color:var(--pf-brand-deep);
}
.psf-ea .ea-carp-sub{
	display:block; margin-top:2px; font-size:var(--pf-fs-micro);
	line-height:1.45; color:var(--pf-ink-faint-tx);
}
.psf-ea .ea-carp-n{
	flex:none; display:inline-flex; align-items:center; justify-content:center;
	min-width:1.6rem; height:1.6rem; padding:0 var(--pf-s-1);
	border-radius:var(--pf-r-pill);
	background:var(--pf-brand-tint); color:var(--pf-cls-tx);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold);
}
/* El chevron, dibujado con bordes: ni glifo ni imagen. */
.psf-ea .ea-carp-chev{
	flex:none; width:.5em; height:.5em;
	border-right:2px solid var(--pf-ink-faint);
	border-bottom:2px solid var(--pf-ink-faint);
	transform:translateY(-25%) rotate(45deg);
}
.psf-ea .ea-carp[open] .ea-carp-chev{ transform:translateY(15%) rotate(-135deg); }
@media (prefers-reduced-motion:no-preference){
	.psf-ea .ea-carp-chev{ transition:transform .15s ease; }
}
.psf-ea .ea-carp-cuerpo{
	padding:var(--pf-s-1) var(--pf-s-4) var(--pf-s-4);
	border-top:1px dashed var(--pf-line);
}

/* Las filas de efecto */
.psf-ea .ea-ef-l{ list-style:none; margin:0; padding:0; display:grid; gap:var(--pf-s-2); }
.psf-ea .ea-ef-i{ margin:0; min-width:0; }
.psf-ea .ea-ef{
	display:flex; align-items:flex-start; gap:var(--pf-s-3);
	padding:var(--pf-s-3); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); background:var(--pf-paper-alt);
	text-decoration:none; color:inherit;
	transition:border-color .12s, transform .12s;
}
.psf-ea .ea-ef:hover, .psf-ea .ea-ef:focus-visible{
	border-color:var(--pf-cls-tx); transform:translateX(2px);
}
.psf-ea .ea-ef-n{
	flex:none; display:inline-flex; align-items:center; justify-content:center;
	min-width:1.6rem; height:1.6rem; border-radius:var(--pf-r-pill);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	color:var(--pf-cls-tx);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold);
}
.psf-ea .ea-ef-tx{ flex:1; min-width:0; }
.psf-ea .ea-ef-t{
	display:block; font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-small); line-height:1.25; color:var(--pf-ink);
	overflow-wrap:anywhere;
}
.psf-ea .ea-ef-x{
	display:block; margin-top:2px; font-size:var(--pf-fs-small);
	line-height:1.5; color:var(--pf-ink-soft); overflow-wrap:anywhere;
}
.psf-ea .ea-ef-d{
	display:block; margin-top:var(--pf-s-1);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}
.psf-ea .ea-ef-f{ flex:none; color:var(--pf-ink-faint); font-size:var(--pf-fs-small); }
.psf-ea .ea-ef:hover .ea-ef-f{ color:var(--pf-cls-tx); }
/* La fila del efecto abierto se marca con color Y con un signo: 1.4.1. */
.psf-ea .ea-ef[aria-current="true"]{
	border-color:var(--pf-cls); background:var(--pf-brand-tint);
}
.psf-ea .ea-ef[aria-current="true"] .ea-ef-t::before{ content:"\25B8\00A0"; }
@media (prefers-reduced-motion:reduce){
	.psf-ea .ea-ef{ transition:none; }
	.psf-ea .ea-ef:hover{ transform:none; }
}

.psf-ea .ea-salto{ display:none; }
.psf-ea--salto .ea-salto{
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--pf-s-2);
	margin:0 0 var(--pf-s-3);
}
.psf-ea .ea-salto-l{
	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);
}
/* ── La calculadora de QTc  [D-199 · v9.28.0] ────────────────────────
   Nace oculta con el atributo hidden y es el guion quien lo quita, ya al
   final. La regla de abajo hace falta porque el contenedor es grid y
   `display:grid` gana a `[hidden]` si no se dice lo contrario. */
.psf-ea .ea-calc[hidden]{ display:none !important; }
.psf-ea .ea-calc{
	display:grid; gap:var(--pf-s-3);
	margin:var(--pf-s-6) 0; padding:var(--pf-s-4);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-md);
	background:var(--pf-paper-alt);
}
.psf-ea .ea-calc-t{
	margin:0; font-family:var(--pf-sans); font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-body); color:var(--pf-ink);
}
.psf-ea .ea-calc-n, .psf-ea .ea-calc-pie, .psf-ea .ea-calc-aviso, .psf-ea .ea-calc-sinjs{
	margin:0; font-size:var(--pf-fs-micro); line-height:1.55; color:var(--pf-ink-soft);
}
.psf-ea .ea-calc-modo{
	margin:0; padding:0; border:0;
	display:flex; flex-wrap:wrap; gap:var(--pf-s-2) var(--pf-s-4);
	font-size:var(--pf-fs-micro);
}
.psf-ea .ea-calc-modo legend{
	padding:0; margin:0 0 var(--pf-s-1); 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-ea .ea-calc-modo label{ display:flex; align-items:center; gap:var(--pf-s-1); }
.psf-ea .ea-calc-campos{
	display:grid; gap:var(--pf-s-3);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
}
.psf-ea .ea-calc-c{ margin:0; display:grid; gap:var(--pf-s-1); }
.psf-ea .ea-calc-c label{
	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-ea .ea-calc-c label span{ text-transform:none; letter-spacing:0; }
.psf-ea .ea-calc-c input, .psf-ea .ea-calc-c select{
	min-height:var(--pf-tap); padding:0 var(--pf-s-2);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	background:var(--pf-surface); color:var(--pf-ink);
	font-family:inherit; font-size:var(--pf-fs-small); width:100%;
}
.psf-ea .ea-calc-res{ list-style:none; margin:0; padding:0; display:grid; gap:var(--pf-s-1); }
.psf-ea .ea-calc-fila{
	display:grid; gap:var(--pf-s-2); align-items:baseline;
	grid-template-columns:max-content max-content 1fr;
	padding:var(--pf-s-2) var(--pf-s-3); border-radius:var(--pf-r-sm);
	background:var(--pf-surface); border-left:3px solid var(--pf-line);
	font-size:var(--pf-fs-small);
}
.psf-ea .ea-calc-f{ font-weight:var(--pf-w-semibold); color:var(--pf-ink); min-width:6.5rem; }
.psf-ea .ea-calc-v{ font-variant-numeric:tabular-nums; font-weight:var(--pf-w-semibold); color:var(--pf-ink); }
.psf-ea .ea-calc-e{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); }
/* El estado se marca con el borde Y con la palabra, nunca solo con color. */
.psf-ea .ea-calc-fila[data-estado="limite"]{ border-left-color:var(--pf-warn); }
.psf-ea .ea-calc-fila[data-estado="alto"]{ border-left-color:var(--pf-danger); background:var(--pf-danger-tint); }
.psf-ea .ea-calc-aviso{ border-top:1px solid var(--pf-line); padding-top:var(--pf-s-2); }
.psf-ea .ea-calc-sinjs{
	margin:var(--pf-s-4) 0; padding:var(--pf-s-3);
	border:1px dashed var(--pf-line); border-radius:var(--pf-r-sm);
}
@media (max-width:32rem){
	.psf-ea .ea-calc-fila{ grid-template-columns:1fr auto; }
	.psf-ea .ea-calc-e{ grid-column:1 / -1; }
}

.psf-ea .ea-salto-s{
	flex:1 1 14rem; min-height:var(--pf-tap);
	padding:0 var(--pf-s-3); border-radius:var(--pf-r-sm);
	border:1px solid var(--pf-line); background:var(--pf-surface);
	color:var(--pf-ink); font-family:inherit; font-size:var(--pf-fs-small);
}

/* ── Aviso global ──────────────────────────────────────────────── */
.psf-ea .ea-aviso-global{
	background:var(--pf-warn-tint); border:1px solid var(--pf-line);
	border-left:3px solid var(--pf-warn);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-4) var(--pf-s-6);
	margin-bottom:var(--pf-s-12);
}
.psf-ea .ea-aviso-global p{ font-size:var(--pf-fs-small); margin:0; }

/* ── Secciones ─────────────────────────────────────────────────── */
.psf-ea .ea-sec{
	padding-top:var(--pf-s-12); margin-bottom:var(--pf-s-12);
	border-top:1px solid var(--pf-line);
	scroll-margin-top:var(--pf-scroll-margin);
}
.psf-ea .ea-sec h2{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3); color:var(--pf-brand-deep);
	line-height:var(--pf-lh-tight); font-weight:500;
	margin:0 0 var(--pf-s-6); display:flex; align-items:center;
	gap:var(--pf-s-3);
}
/* La cifra va sobre el color de TEXTO de la clase, no sobre el de
   catálogo: con el valor base el blanco no llega a 4,5:1. Mismo
   arreglo que en las fichas. */
.psf-ea .ea-n{
	flex:none; display:inline-flex; align-items:center; justify-content:center;
	width:var(--pf-s-8); height:var(--pf-s-8); border-radius:50%;
	background:var(--pf-cls-tx); color:var(--pf-surface);
	font-family:var(--pf-mono); font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-semibold); line-height:1;
}
.psf-ea .ea-sec h3{
	font-family:var(--pf-sans); font-size:var(--pf-fs-h3);
	font-weight:var(--pf-w-semibold); line-height:var(--pf-lh-tight);
	margin:var(--pf-s-8) 0 var(--pf-s-4);
	padding-bottom:var(--pf-s-2); border-bottom:1px solid var(--pf-line);
}
.psf-ea .ea-sub{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); }

/* ── La entrada de cada efecto ─────────────────────────────────── */
/* [D-203 · v9.31.0]
   Encargo del autor: «una narración breve al principio en estilo
   párrafo, luego una breve descripción del problema, y luego sí los
   detalles». Antes cada sección caía del <h2> a un <h3> técnico y a
   un párrafo con cinco cifras: quien todavía no sabía de qué iba el
   asunto tenía que leerse media sección para averiguarlo.

   SON TRES ALTURAS DE LECTURA, y por eso son tres formatos distintos y
   no tres párrafos seguidos:
     · ea-relato   — la escena. En serif y a tamaño de entradilla, sin
                     una sola negrita y sin una sola cifra. Se lee como
                     prosa porque es prosa.
     · ea-problema — el nudo, enmarcado. Dos o tres frases con las
                     cifras que de verdad deciden, cada una con su cita.
     · los <h3>    — el detalle de siempre.
   El salto de serif a marco es lo que avisa del cambio de altura; con
   el mismo tipo de letra los tres bloques se leerían como uno solo. */
.psf-ea .ea-entrada{ margin:0 0 var(--pf-s-8); }
.psf-ea .ea-relato{
	font-family:var(--pf-serif); font-size:var(--pf-fs-lead);
	line-height:1.6; color:var(--pf-ink);
	max-width:60ch; margin:0 0 var(--pf-s-6);
}
/* SIN FONDO, SOLO FILETE. La página ya tiene cuatro cajas de color
   —dato, clave, alerta, figura— y una quinta justo debajo del <h2> las
   convertía en ruido: dos rectángulos tintados seguidos se leen como
   uno solo mal maquetado. Un filete grueso del color de la sección
   basta para decir «esto es de otra altura» sin añadir otra caja. */
.psf-ea .ea-problema{
	margin:0; max-width:64ch;
	padding:var(--pf-s-1) 0 var(--pf-s-1) var(--pf-s-6);
	border-left:4px solid var(--pf-cls);
}
.psf-ea .ea-problema-e{
	display:block; margin-bottom:var(--pf-s-1);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	text-transform:uppercase; letter-spacing:var(--pf-track-label);
	font-weight:var(--pf-w-medium); color:var(--pf-cls-tx);
}
@media (max-width:600px){
	.psf-ea .ea-relato{ font-size:var(--pf-fs-body); }
	.psf-ea .ea-problema{ padding-left:var(--pf-s-4); }
}

/* ── Cajas de dato ─────────────────────────────────────────────── */
.psf-ea .ea-dato{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-left:3px solid var(--pf-ink-faint);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-4) var(--pf-s-6);
	margin:var(--pf-s-6) 0;
}
.psf-ea .ea-dato p:last-child{ margin-bottom:0; }
.psf-ea .ea-dato-clave{ background:var(--pf-info-tint); border-left-color:var(--pf-info); }
.psf-ea .ea-dato-alerta{ background:var(--pf-danger-tint); border-left-color:var(--pf-danger); }

/* ── Figuras ───────────────────────────────────────────────────── */
.psf-ea .ea-fig{
	margin:var(--pf-s-8) 0; padding:var(--pf-s-6);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
}
.psf-ea .ea-fig-t{
	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); margin-bottom:var(--pf-s-4);
}
/* [D-29] La figura ocupa el ancho de su tarjeta; sin esto el SVG se
   quedaba en 640 px y dejaba un vacío a la derecha. */
.psf-ea .ea-fig svg{ display:block; width:100%; max-width:none; height:auto; }
.psf-ea .ea-fig-n{
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
	margin:var(--pf-s-4) 0 0;
}

/* ── El esquema a lápiz ─────────────────────────────────────────── */
/* [D-206 · v9.32.0]
   El único dibujo de la página. Todo el color sale de tokens y el trazo
   es `currentColor`, así que el mismo SVG funciona en claro y en oscuro
   sin duplicar nada — que es exactamente lo que un PNG no sabe hacer.

   Y RESPETA LA REGLA [D-40] POR OTRO CAMINO. Las figuras de datos de esta
   página se dibujan con HTML porque un SVG ancho deja su texto en 4 px en
   un móvil. Un dibujo no se puede hacer con barras, así que en vez de un
   SVG de 720 hay DOS de 340 en una rejilla que se apila: en un teléfono
   cada panel ocupa el ancho entero, la escala ronda 1 y sus rótulos de 15
   unidades se ven a 15 px. */
.psf-ea .ea-lap-g{
	display:grid; gap:var(--pf-s-6);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.psf-ea .ea-lap-p{ min-width:0; }
/* [D-209 · v9.33.0] La escalera son tres paneles, no dos, así que su rejilla
   admite columnas más estrechas — y sus dibujos son más estrechos también
   (220 de viewBox contra 340), para que al caber tres en fila los rótulos
   sigan viéndose por encima de 13 px. La regla es la misma de siempre: el
   texto del dibujo no puede encogerse. */
.psf-ea .ea-lap-g--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); }
.psf-ea .ea-lap-t{
	margin:0 0 var(--pf-s-2); font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold);
	color:var(--pf-ink);
}
.psf-ea .ea-lap-t span{ font-weight:var(--pf-w-regular); color:var(--pf-ink-soft); }
/* [D-209 · v9.33.0] El pie de cada panel es HTML, no texto dentro del SVG.
   Es la misma razón de [D-40]: así reflota, se puede seleccionar, lo indexa
   el buscador de la página y lo lee un lector de pantalla sin depender del
   `desc`. Dentro del dibujo solo queda «D2», que es un rótulo de dos
   caracteres y no se puede sacar sin perder a qué apunta. */
.psf-ea .ea-lap-pie{
	margin:var(--pf-s-2) 0 0; font-size:var(--pf-fs-small);
	line-height:1.5; color:var(--pf-ink-soft);
}
.psf-ea .ea-lap-pie b{ color:var(--pf-ink); }
.psf-ea .ea-lap-svg{ display:block; width:100%; height:auto; color:var(--pf-ink-soft); }

/* El trazo. Nada de relleno: es un lápiz, no una infografía. */
.psf-ea .ea-lap-tinta{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.psf-ea .ea-lap-l{ stroke-width:2.1; }
.psf-ea .ea-lap-s{ stroke-width:1.4; opacity:.62; }   /* surcos y sombreado */
.psf-ea .ea-lap-c{ stroke-width:1.4; opacity:.5; stroke-dasharray:3 5; } /* la lupa */
.psf-ea .ea-lap-d{ stroke-width:1.8; stroke-dasharray:9 7; color:var(--pf-cls-tx); }
.psf-ea .ea-lap-r{ fill:currentColor; stroke:none; opacity:.78; }  /* dopamina, prolactina */
/* [D-210] La cápsula era var(--pf-danger), y eso rompía la regla del
   catálogo: el rojo apagado es SIEMPRE alerta grave, y aquí solo quiere
   decir «el fármaco». Pasa al vino decorativo, que no significa nada. */
.psf-ea .ea-lap-fx{ fill:var(--pf-deco-vino-l); stroke:none; }
.psf-ea .ea-lap-w{ stroke-width:4.5; color:var(--pf-cls-tx); }      /* la salida, engordada */

.psf-ea .ea-lap-x{
	font-family:var(--pf-mono); font-size:15px; fill:var(--pf-ink-faint-tx);
}
.psf-ea .ea-lap-x--ojo{ fill:var(--pf-cls-tx); font-weight:600; }

/* En papel el filtro de turbulencia sale sucio en algunas impresoras: se
   quita y queda el trazo limpio, que dice lo mismo. */
@media print{
	.psf-ea .ea-lap-tinta{ filter:none !important; }
}

/* ── Color decorativo y garabatos  [D-210 · v9.34.0] ────────────────
   Encargo del autor: «un poquito más de color —amarillo pasteloso, algo
   de naranja, un vino pastel ocasional— y garabatos ocasionales».

   LA REGLA VIENE DE psf-tokens.css y aquí se cumple al pie: los colores
   semánticos son RELLENOS DE CAJA y los decorativos son TRAZOS Y
   MARCAS. Ningún --pf-deco-* pinta jamás el fondo de un bloque de
   texto, porque un rectángulo tintado en esta página significa siempre
   algo —nota, precaución, alerta— y un amarillo bonito al lado del
   mostaza de precaución enseñaría una regla falsa.

   Y «OCASIONALES» ES UNA CIFRA, no una impresión: siete garabatos en
   toda la página. Uno bajo el título, uno junto al enlace de fuentes,
   uno en cada una de las cuatro cajas de «lo que hay que llevarse» y
   uno en el índice alfabético. Si algún día son treinta, dejan de ser
   una nota al margen y pasan a ser papel pintado. */

/* El rotulador. Un barrido detrás de la frase, no un recuadro: se
   dibuja con un degradado que ocupa solo la mitad baja de la línea,
   que es como pinta un rotulador de verdad y como NO pinta un callout.
   Va sobre la PRIMERA negrita de cada «El problema», que es una por
   sección —diez en toda la página— y cae siempre sobre la frase que
   decide. */
.psf-ea .ea-problema b:first-of-type{
	background-image:linear-gradient(to top,
		var(--pf-deco-sol) 0, var(--pf-deco-sol) .58em, transparent .58em);
	padding:0 .12em .05em;
	/* El barrido se sale un poco por la izquierda, como el rotulador que
	   arranca antes de la palabra. */
	margin-left:-.12em;
	box-decoration-break:clone;
	-webkit-box-decoration-break:clone;
}

/* Las pastillas de las carpetas. Cada aparato con su tinte: son iconos
   de 32 px, no cajas, y sirven para distinguir cuatro carpetas de un
   vistazo. El acento lo pone el guion del índice con data-deco. */
.psf-ea .ea-carp[data-deco="vino"]      .ea-carp-ico{ background:var(--pf-deco-vino); color:var(--pf-deco-vino-l); }
.psf-ea .ea-carp[data-deco="mandarina"] .ea-carp-ico{ background:var(--pf-deco-mandarina); color:var(--pf-ink-soft); }
.psf-ea .ea-carp[data-deco="sol"]       .ea-carp-ico{ background:var(--pf-deco-sol); color:var(--pf-ink-soft); }

/* ── Los garabatos ──────────────────────────────────────────────── */
/* Todos salen del mismo sprite y todos van en el lápiz cálido. Son
   decoración pura: aria-hidden, y en papel no se imprimen. */
.psf-ea .ea-gar{
	display:inline-block; vertical-align:middle;
	fill:none; stroke:var(--pf-deco-lapiz);
	stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
	pointer-events:none;
}
/* La raya lleva aspect-ratio y no una altura fija: con una altura suelta,
   `preserveAspectRatio` centraba el trazo dentro de una caja más ancha que
   él y la raya arrancaba a 45 px del margen, flotando. */
.psf-ea .ea-gar--raya{
	display:block; width:min(19rem,68%); height:auto; aspect-ratio:220/14;
	margin:calc(-1 * var(--pf-s-2)) 0 var(--pf-s-4);
}
.psf-ea .ea-gar--flecha{ width:2.2rem; height:1.1rem; margin-left:var(--pf-s-2); }
.psf-ea .ea-gar--estrella{ width:1.05rem; height:1.05rem; margin-right:var(--pf-s-2); stroke-width:2.8; }

/* [D-211 · v9.35.0] Los que van al lado de un título de sección. Van a
   .95 rem —menos que la letra que acompañan— y con el trazo un punto más
   grueso, que es lo que hace que un dibujo pequeño se lea como dibujo y
   no como una mancha. El margen los separa del título; nunca al revés. */
.psf-ea .ea-gar--chispa,
.psf-ea .ea-gar--estrellita,
.psf-ea .ea-gar--espiral,
.psf-ea .ea-gar--carita{
	width:.95rem; height:.95rem; margin-left:var(--pf-s-2); stroke-width:2.6;
}
/* Los tres esquemas de neurotransmisión son más anchos que altos, así que
   llevan su propia medida: apretarlos en un cuadrado los deforma. */
.psf-ea .ea-gar--neurona{ width:1.95rem; height:1.38rem; margin-left:var(--pf-s-2); stroke-width:1.9; }
.psf-ea .ea-gar--sinapsis{ width:1.95rem; height:1.38rem; margin-left:var(--pf-s-2); stroke-width:1.9; }
.psf-ea .ea-gar--vesicula{ width:1.35rem; height:1.25rem; margin-left:var(--pf-s-2); stroke-width:1.9; }

/* Los tonos. Se usan con cuentagotas y NUNCA sobre una carita que esté al
   lado de una cifra de daño — pero eso ya no puede pasar, porque no hay
   ninguna carita al lado de un efecto adverso. */
.psf-ea .ea-gar--sol{ stroke:var(--pf-warn-tx); }
.psf-ea .ea-gar--mandarina{ stroke:var(--pf-deco-vino-l); }

/* La estrella de las cajas de «lo que hay que llevarse» va en vino:
   es el único sitio donde el vino aparece como trazo, y marca las
   cuatro conclusiones de la página. */
.psf-ea .ea-llevar-t .ea-gar{ stroke:var(--pf-deco-vino-l); }
.psf-ea .ea-llevar-t{ display:flex; align-items:center; }

/* El sprite no se ve nunca. */
.psf-ea .ea-gar-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

@media print{
	.psf-ea .ea-gar{ display:none !important; }
	.psf-ea .ea-problema b:first-of-type{ background-image:none; }
}

/* ── Barras: figuras de HTML, no de SVG ────────────────────────── */
/* [D-40] Las figuras comparativas de esta página se dibujan con HTML y
   CSS, no con SVG. El motivo es medido: los SVG del capítulo 8 con
   viewBox de 960 dejaban su texto en 4 px a 390 px de ancho, y hubo que
   inventar dos variantes de cada figura [D-30]. Aquí la etiqueta es
   texto de verdad, sale del token de tamaño, reflows, se puede
   seleccionar y la lee el lector de pantalla sin aria-label. El coste es
   que no se pueden dibujar formas libres; para una barra no hacen falta.

   NUNCA SOLO COLOR. Cada barra lleva su cifra escrita al lado, así que
   el color es redundante y no portador: criterio 1.4.1. */
.psf-ea .ea-barras{ display:grid; gap:var(--pf-s-3); margin:var(--pf-s-4) 0 0; }
.psf-ea .ea-barra{
	display:grid; align-items:center; gap:var(--pf-s-3);
	grid-template-columns:minmax(96px,32%) 1fr minmax(76px,max-content);
}
.psf-ea .ea-barra-n{ font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold); }
.psf-ea .ea-barra-n small{
	display:block; font-weight:var(--pf-w-regular);
	color:var(--pf-ink-faint-tx);
}
.psf-ea .ea-barra-p{
	position:relative; height:var(--pf-s-6);
	background:var(--pf-paper-alt); border-radius:var(--pf-s-1);
}
.psf-ea .ea-barra-r{
	position:absolute; top:0; bottom:0;
	left:var(--x,0%); width:var(--w,0%); min-width:3px;
	background:var(--c,var(--pf-ink-faint)); border-radius:var(--pf-s-1);
}
.psf-ea .ea-barra-v{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold); text-align:right;
}
.psf-ea .ea-barra--mal{    --c:var(--pf-danger); }
.psf-ea .ea-barra--bien{   --c:var(--pf-ok); }
.psf-ea .ea-barra--ojo{    --c:var(--pf-brand); }
.psf-ea .ea-barra--neutro{ --c:var(--pf-ink-faint); }
/* Fila que no es un fármaco sino un umbral o un total. */
.psf-ea .ea-barra--regla .ea-barra-p{ background:transparent; border:1px dashed var(--pf-line); }

/* Eje y leyenda */
.psf-ea .ea-eje{
	display:flex; justify-content:space-between;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); margin-top:var(--pf-s-2);
}
.psf-ea .ea-eje--sangrado{ padding-left:calc(32% + var(--pf-s-3)); }
.psf-ea .ea-leyenda{
	font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	margin:var(--pf-s-3) 0 0;
}

/* Cero para las escalas que van de negativo a positivo. */
.psf-ea .ea-barras--cero .ea-barra-p::after{
	content:""; position:absolute; left:var(--cero,50%);
	top:-2px; bottom:-2px; width:1px; background:var(--pf-ink-faint);
}

/* ── Tablas ────────────────────────────────────────────────────── */
.psf-ea .ea-tabla{
	width:100%; border-collapse:collapse; margin:var(--pf-s-6) 0;
	font-size:var(--pf-fs-small);
}
.psf-ea .ea-tabla caption{
	caption-side:top; text-align:left;
	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); padding-bottom:var(--pf-s-3);
}
.psf-ea .ea-tabla th, .psf-ea .ea-tabla td{
	padding:var(--pf-s-3); text-align:left; vertical-align:top;
	border-bottom:1px solid var(--pf-line);
}
.psf-ea .ea-tabla thead th{
	background:var(--pf-paper-alt); font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-micro); text-transform:uppercase;
	letter-spacing:var(--pf-track-label); color:var(--pf-ink-soft);
	border-bottom:2px solid var(--pf-line);
}
.psf-ea .ea-tabla th[scope="row"]{ font-weight:var(--pf-w-semibold); }
.psf-ea .ea-tabla-tot th, .psf-ea .ea-tabla-tot td{
	background:var(--pf-paper-alt); font-weight:var(--pf-w-semibold);
}
.psf-ea .ea-fuente{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); }

/* ── Listas ────────────────────────────────────────────────────── */
.psf-ea .ea-lista{ margin:0 0 var(--pf-s-4); padding-left:var(--pf-s-6); }
.psf-ea .ea-lista li{ margin-bottom:var(--pf-s-3); }

/* ── Manejo: la lista numerada con insignia de evidencia ───────── */
.psf-ea .ea-m-marco{
	background:var(--pf-paper-alt); border-radius:var(--pf-r-sm);
	padding:var(--pf-s-4) var(--pf-s-6); font-size:var(--pf-fs-small);
}
.psf-ea .ea-manejo{ list-style:none; margin:var(--pf-s-6) 0; padding:0; counter-reset:ea-m; }
.psf-ea .ea-manejo > li{
	counter-increment:ea-m;
	border-left:3px solid var(--pf-line);
	padding:0 0 var(--pf-s-2) var(--pf-s-6);
	margin-bottom:var(--pf-s-8);
}
.psf-ea .ea-m-t{
	font-size:var(--pf-fs-h4); font-weight:var(--pf-w-semibold);
	margin-bottom:var(--pf-s-3);
}
.psf-ea .ea-m-t::before{
	content:counter(ea-m) "."; font-family:var(--pf-mono);
	color:var(--pf-ink-faint-tx); margin-right:var(--pf-s-2);
	font-weight:var(--pf-w-regular);
}
.psf-ea .ea-m-nota{
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
	border-left:2px solid var(--pf-line); padding-left:var(--pf-s-4);
}
/* Lo que NO funciona se marca con borde discontinuo, no con color a
   secas: criterio 1.4.1. */
.psf-ea .ea-m-no{ border-left-style:dashed; border-left-color:var(--pf-danger); }

/* Insignia de evidencia. La letra va en blanco sobre el color del
   grado; los cinco valores están verificados en psf-tokens.css. */
.psf-ea .ea-ev{
	display:inline-block; margin-right:var(--pf-s-2);
	padding:var(--pf-s-1) var(--pf-s-3); border-radius:var(--pf-r-pill);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold); text-transform:uppercase;
	letter-spacing:var(--pf-track-label);
	background:var(--pf-g-i); color:var(--pf-surface);
	vertical-align:middle;
	/* SIN nowrap, Y A PROPÓSITO. Lo llevaba, y está bien para «B» o «ECA»;
	   pero la insignia más larga del capítulo —«Estudio pre-post con medición
	   objetiva», 340 px— se salía 13 px por la derecha en un móvil de 390 y
	   arrastraba con ella el scroll horizontal de TODA la página. Medido en
	   /efectos-adversos/gastrointestinales/ al partir el capítulo [D-212].
	   Una insignia en dos renglones se lee; una página que se mueve de lado,
	   no. */
	max-width:100%;
}
.psf-ea .ea-ev-a{ background:var(--pf-g-a); }
.psf-ea .ea-ev-b{ background:var(--pf-g-b); }
.psf-ea .ea-ev-c{ background:var(--pf-g-c); }
.psf-ea .ea-ev-d{ background:var(--pf-g-d); }
.psf-ea .ea-ev-no{ background:var(--pf-g-d); }

/* ── Dos columnas de cifra ─────────────────────────────────────── */
.psf-ea .ea-2col{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:var(--pf-s-4); margin:var(--pf-s-6) 0;
}
.psf-ea .ea-2col-c{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-4);
}
.psf-ea .ea-2col-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); margin:0 0 var(--pf-s-2);
}
.psf-ea .ea-2col-v{
	font-family:var(--pf-mono); font-size:var(--pf-fs-h2);
	line-height:var(--pf-lh-data); font-weight:var(--pf-w-semibold);
	color:var(--pf-cls-tx); margin:0 0 var(--pf-s-1);
}
.psf-ea .ea-2col-s{ font-size:var(--pf-fs-micro); color:var(--pf-ink-soft); margin:0; }

/* Fila de la tabla que hay que mirar dos veces. Lleva marca, no solo
   color: el ▸ del ::before es la señal no cromática. */
.psf-ea .ea-fila-ojo th[scope="row"]::before{
	content:"▸ "; color:var(--pf-cls-tx);
}
.psf-ea .ea-fila-ojo th, .psf-ea .ea-fila-ojo td{ background:var(--pf-brand-tint); }

/* ── Coadyuvantes ──────────────────────────────────────────────── */
.psf-ea .ea-coad{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6);
	margin:var(--pf-s-6) 0;
}
.psf-ea .ea-coad-p{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h3);
	font-weight:var(--pf-w-semibold); margin:0 0 var(--pf-s-3);
}
.psf-ea .ea-coad-v{
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
	border-top:1px solid var(--pf-line); padding-top:var(--pf-s-3);
	margin-top:var(--pf-s-4); margin-bottom:0;
}
.psf-ea .ea-coad-si{ border-left:3px solid var(--pf-ok); }

/* ── Cierre ────────────────────────────────────────────────────── */
/* [D-207 · v9.32.0] Antes era UN bloque de cinco puntos al final de la
   página —«si te llevas cinco cosas»— y ahí no lo leía quien venía a mirar
   un efecto concreto, que es casi todo el mundo desde que la página se
   navega por secciones: el resumen quedaba detrás de diez apartados que
   ese lector no abre. Ahora cada punto vive al final de SU sección, que es
   donde el lector ya está y donde las cifras que lo sostienen acaban de
   pasar por delante. Cinco puntos, cuatro secciones. */
.psf-ea .ea-llevar{
	background:var(--pf-brand-tint); border:1px solid var(--pf-brand-line);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6);
	margin:var(--pf-s-8) 0 0;
}
.psf-ea .ea-llevar-t{
	display:block; margin:0 0 var(--pf-s-4);
	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);
}
.psf-ea .ea-llevar ul{ margin:0; padding-left:var(--pf-s-6); }
.psf-ea .ea-llevar li{ margin-bottom:var(--pf-s-3); font-size:var(--pf-fs-small); }
.psf-ea .ea-llevar li:last-child{ margin-bottom:0; }

/* ── Citas y bibliografía ──────────────────────────────────────── */
.psf-ea .ea-ref{
	position:relative; cursor:pointer;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold); color:var(--pf-cls-tx);
	padding:0 1px; vertical-align:super; line-height:0;
}
/* [D-38] El objetivo táctil se agranda con un área invisible, no con
   padding: así el interlineado del párrafo no cambia. */
.psf-ea .ea-ref::after{
	content:""; position:absolute; left:50%; top:50%;
	transform:translate(-50%,-50%);
	width:24px; height:var(--pf-tap);
}
.psf-ea .ea-ref:hover{ text-decoration:underline; }
/* Dos citas seguidas se leían pegadas: «5259» en vez de «52 59». */
.psf-ea .ea-ref + .ea-ref{ margin-left:var(--pf-s-1); }
.psf-ea .ea-biblio{
	margin:var(--pf-s-6) 0 0; padding-left:var(--pf-s-8);
	font-size:var(--pf-fs-small); color:var(--pf-ink-soft);
}
.psf-ea .ea-biblio li{
	margin-bottom:var(--pf-s-4); scroll-margin-top:var(--pf-scroll-margin);
}
.psf-ea .ea-biblio li:target{
	background:var(--pf-brand-tint); border-radius:var(--pf-r-sm);
	padding:var(--pf-s-2); margin-left:calc(var(--pf-s-2) * -1);
}
/* El DOI es un enlace y tiene que poder pulsarse: en línea se queda en
   16 px de alto. inline-block más relleno vertical lo lleva a 24 sin
   mover el interlineado de la cita. Criterio 2.5.8. */
.psf-ea .ea-biblio-u{
	display:inline-block; padding-block:var(--pf-s-2);
	word-break:break-all; font-size:var(--pf-fs-micro);
}

/* El globo de la referencia, sin salir de la página. */
.psf-ea .ea-globo{
	position:fixed; z-index:60; display:none;
	background:var(--pf-surface); color:var(--pf-ink);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-md);
	box-shadow:var(--pf-shadow-pop);
	padding:var(--pf-s-6) var(--pf-s-6) var(--pf-s-4);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:var(--pf-lh-body);
}
.psf-ea .ea-globo.ea-on{ display:block; }
.psf-ea .ea-globo .ea-gn{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:var(--pf-s-6); height:var(--pf-s-6); padding:0 var(--pf-s-1);
	border-radius:var(--pf-r-pill); margin-right:var(--pf-s-2);
	background:var(--pf-cat-farmacos-tx); color:var(--pf-surface);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-semibold);
}
.psf-ea .ea-globo .ea-gx{
	position:absolute; top:var(--pf-s-1); right:var(--pf-s-1);
	width:var(--pf-tap); height:var(--pf-tap);
	background:none; border:0; cursor:pointer;
	color:var(--pf-ink-faint-tx); font-size:var(--pf-fs-h3);
	line-height:1;
}
.psf-ea .ea-globo .ea-gver{
	display:inline-flex; align-items:center; min-height:var(--pf-tap);
	margin-top:var(--pf-s-2); cursor:pointer;
	font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold);
	color:var(--pf-cat-farmacos-tx);
}

/* ── Hueco declarado: correcciones locales ─────────────────────── */
/* [D-36] .psf-gap nace con white-space:nowrap porque se diseñó para una
   frase corta en línea; dentro de un párrafo largo eso desbordaba en
   móvil. El bloque lo devuelve a normal. */
.psf-ea .psf-gap{ white-space:normal; }
.psf-ea .psf-gap--bloque{ max-width:100%; margin:var(--pf-s-3) 0; }

/* =====================================================================
   MÓVIL — por debajo de 640 px
   ===================================================================== */
@media (max-width:640px){

	.psf-ea .ea-wrap{ padding:0 var(--pf-s-4); }
	.psf-ea .ea-cab h1{ font-size:var(--pf-fs-h2); }
	.psf-ea .ea-sec h2{ font-size:var(--pf-fs-h3); }
	.psf-ea .ea-lead{ font-size:var(--pf-fs-body); }

	/* La barra de anclas cabe en una línea que se desliza. */
	.psf-ea .ea-anclas-l{
		flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
		padding-bottom:var(--pf-s-1);
	}
	.psf-ea .ea-anclas-l li{ flex:none; }

	/* [D-37] Tabla → tarjetas. Ninguna tabla de esta página se
	   desplaza en horizontal. */
	.psf-ea .ea-tabla thead{
		position:absolute; width:1px; height:1px; overflow:hidden;
		clip:rect(0 0 0 0); white-space:nowrap;
	}
	.psf-ea .ea-tabla, .psf-ea .ea-tabla tbody,
	.psf-ea .ea-tabla tr, .psf-ea .ea-tabla td,
	.psf-ea .ea-tabla th{ display:block; width:auto; }
	.psf-ea .ea-tabla tr{
		background:var(--pf-surface); border:1px solid var(--pf-line);
		border-radius:var(--pf-r-sm); padding:var(--pf-s-3);
		margin-bottom:var(--pf-s-4);
	}
	.psf-ea .ea-tabla th[scope="row"]{
		border-bottom:1px solid var(--pf-line);
		font-size:var(--pf-fs-body); padding-left:0; padding-right:0;
	}
	.psf-ea .ea-tabla td{ border-bottom:0; padding-left:0; padding-right:0; }
	.psf-ea .ea-tabla td[data-l]::before{
		content:attr(data-l); display: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-faint-tx); margin-bottom:var(--pf-s-1);
	}
	.psf-ea .ea-fig{ padding:var(--pf-s-4); }
	/* La barra pasa a dos filas: nombre arriba, pista y cifra debajo.
	   A 390 px una rejilla de tres columnas deja el nombre en 4 o 5
	   caracteres por línea. */
	.psf-ea .ea-barra{
		grid-template-columns:1fr max-content;
		grid-template-areas:"n v" "p p"; gap:var(--pf-s-1) var(--pf-s-3);
		margin-bottom:var(--pf-s-2);
	}
	.psf-ea .ea-barra-n{ grid-area:n; }
	.psf-ea .ea-barra-v{ grid-area:v; }
	.psf-ea .ea-barra-p{ grid-area:p; }
	.psf-ea .ea-eje--sangrado{ padding-left:0; }
	.psf-ea .ea-manejo > li{ padding-left:var(--pf-s-4); }
	.psf-ea .ea-biblio{ padding-left:var(--pf-s-6); }
}

/* =====================================================================
   IMPRESIÓN — la página tiene que servir en papel
   ===================================================================== */
@media print{
	.psf-ea .ea-anclas, .psf-ea .ea-globo{ display:none !important; }
	.psf-ea .ea-sec{ break-inside:auto; }
	.psf-ea .ea-fig, .psf-ea .ea-dato, .psf-ea .ea-coad{ break-inside:avoid; }
	.psf-ea .ea-biblio-u{ font-size:9pt; }
}

/* Quien pide menos movimiento no lo tiene. */
@media (prefers-reduced-motion:reduce){
	.psf-ea *{ scroll-behavior:auto !important; }
}

/* =====================================================================
   UNA PÁGINA POR EFECTO, Y UN BUSCADOR   [D-212 · v9.36.0]
   ---------------------------------------------------------------------
   Aquí vivía el pliegue del «modo por pasos»: `.psf-ea--pasos .ea-sec{
   display:none }`, diez secciones escondidas por CSS para que se leyera
   una. El capítulo está partido en doce URLs de verdad y ese pliegue se
   ha ido entero —con su clase, su regla de impresión y el ancla activa
   que lo acompañaba—. Se anota porque el hueco se nota al leer el
   archivo: no falta nada, sobraba.

   LO QUE SÍ SE QUEDA es la lección que lo hizo seguro: NADA DE CONTENIDO
   NACE OCULTO. En Principios básicos las vistas nacían con display:none y
   el día que su guion no llegó la página docente se quedó en blanco. De
   ahí que lo único que sigue naciendo oculto sea un MANDO —el
   desplegable, bajo `.psf-ea--salto`—, porque un <select> sin JavaScript
   no navega y enseñarlo sería mentir.
   ===================================================================== */

/* ── El buscador ─────────────────────────────────────────────────── */
.ea-busca{ margin-top:var(--pf-s-3); }
.ea-busca-l{
	display:block; margin-bottom:var(--pf-s-1);
	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);
}
.ea-busca-i{
	width:100%; box-sizing:border-box; min-height:var(--pf-tap);
	padding:var(--pf-s-2) var(--pf-s-3);
	background:var(--pf-surface); color:var(--pf-ink);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
}
.ea-busca-i:focus{
	outline:none; border-color:var(--pf-brand);
	box-shadow:0 0 0 3px var(--pf-brand-tint);
}
.ea-busca-est{
	margin:var(--pf-s-2) 0 0; font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}
.ea-busca-res{ list-style:none; margin:var(--pf-s-2) 0 0; padding:0; }
.ea-busca:not(.ea-busca--on) .ea-busca-res{ display:none; }
.ea-busca-res li{ margin:0 0 var(--pf-s-1); }
.ea-busca-hit{
	display:block; width:100%; text-align:left; cursor:pointer;
	text-decoration:none;
	padding:var(--pf-s-2) var(--pf-s-3);
	background:var(--pf-surface); color:var(--pf-ink);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); line-height:1.5;
}
.ea-busca-hit:hover{ border-color:var(--pf-brand); }
.ea-busca-hit:focus-visible{ outline:3px solid var(--pf-ink); outline-offset:2px; }
.ea-busca-sec{
	display:block; font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	text-transform:uppercase; letter-spacing:var(--pf-track-label);
	color:var(--pf-brand-tx); margin-bottom:2px;
}
.ea-busca-tx{ display:block; color:var(--pf-ink-soft); }

/* El trozo al que se ha saltado. Fondo Y filete: el color solo no vale. */
.ea-hallado{
	background:var(--pf-brand-tint);
	box-shadow:-4px 0 0 var(--pf-brand);
}

/* En papel se imprime la página entera, que para eso es papel. */
@media print{
	.ea-busca{ display:none !important; }
	/* Las migas y el «anterior/siguiente» son mandos: en papel no llevan
	   a ninguna parte y solo gastan tinta. */
	.psf-ea .ea-migas, .psf-ea .ea-pasar{ display:none !important; }
}

/* =====================================================================
   LAS PIEZAS DE UNA PÁGINA PARTIDA   [D-212 · v9.36.0]
   ---------------------------------------------------------------------
   Un capítulo en doce URLs necesita tres cosas que en una sola no hacían
   falta: saber dónde estás (las migas), poder seguir leyendo (el
   anterior/siguiente) y tener las fuentes a mano sin cambiar de página
   (la bibliografía local, renumerada desde 1 por el guion).
   ===================================================================== */

.psf-ea .ea-wrap--efecto{ padding-top:var(--pf-s-4); }

/* ── Las migas ──────────────────────────────────────────────────── */
.psf-ea .ea-migas{
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--pf-s-2);
	margin:0 0 var(--pf-s-4);
	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-ea .ea-migas a{
	color:var(--pf-brand-tx); text-decoration:none;
	border-bottom:1px solid var(--pf-brand-line);
}
.psf-ea .ea-migas a:hover{ border-bottom-color:var(--pf-brand); }
/* La página en la que estás no es un enlace, y se dice sin color: en
   una tira de letra pequeña el peso se lee antes que el tono. */
.psf-ea .ea-migas [aria-current="page"]{ color:var(--pf-ink); font-weight:var(--pf-w-semibold); }

/* El buscador cuando no hay estantería donde meterlo. */
.psf-ea .ea-busca--suelta{ margin:0 0 var(--pf-s-6); }

/* ── La bibliografía de la página ──────────────────────────────── */
/* Va separada por una línea de verdad y no solo por espacio: es el final
   del texto y el principio del aparato, y el lector tiene que verlo sin
   leerlo. */
.psf-ea .ea-sec--biblio{
	margin-top:var(--pf-s-12); padding-top:var(--pf-s-6);
	border-top:2px solid var(--pf-line);
}
.psf-ea .ea-biblio-t{
	margin:0 0 var(--pf-s-2);
	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-ea .ea-sec--biblio .ea-sub{
	margin:0 0 var(--pf-s-4); font-size:var(--pf-fs-small);
	color:var(--pf-ink-soft);
}

/* ── Anterior y siguiente ──────────────────────────────────────── */
/* Dos columnas en pantalla ancha, una encima de otra en el móvil; y el
   «siguiente» se pega a la derecha aunque no haya «anterior», que es lo
   que pasa en la primera página. */
.psf-ea .ea-pasar{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
	gap:var(--pf-s-3);
	margin:var(--pf-s-12) 0 var(--pf-s-8);
	padding-top:var(--pf-s-6); border-top:1px solid var(--pf-line);
}
.psf-ea .ea-pasar-a{
	display:block; padding:var(--pf-s-3) var(--pf-s-4);
	border:1px solid var(--pf-line); border-radius:var(--pf-r-md);
	background:var(--pf-surface); color:var(--pf-ink);
	text-decoration:none; min-height:var(--pf-tap);
}
.psf-ea .ea-pasar-a:hover{ border-color:var(--pf-brand); background:var(--pf-brand-tint); }
.psf-ea .ea-pasar-a:focus-visible{ outline:3px solid var(--pf-ink); outline-offset:2px; }
.psf-ea .ea-pasar-a--alante{ text-align:right; grid-column:-2; }
.psf-ea .ea-pasar-k{
	display:block; margin-bottom:2px;
	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-ea .ea-pasar-k::before{ content:"\2190\00A0"; }
.psf-ea .ea-pasar-a--alante .ea-pasar-k::before{ content:""; }
.psf-ea .ea-pasar-a--alante .ea-pasar-k::after{ content:"\00A0\2192"; }
.psf-ea .ea-pasar-v{
	display:block; font-family:var(--pf-serif); font-size:var(--pf-fs-body);
	line-height:var(--pf-lh-tight);
}