/* =====================================================================
   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{
	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-3);
}
.psf-ea .ea-cab h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h1);
	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); }
.psf-ea .ea-contrato{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-left:3px solid var(--pf-cls);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6);
}
.psf-ea .ea-contrato p{ font-size:var(--pf-fs-small); }
.psf-ea .ea-contrato p:last-child{ margin-bottom:0; }

/* ── 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. */
.psf-ea .ea-anclas{
	background:var(--pf-paper-alt); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
	padding:var(--pf-s-4); 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);
}

/* ── 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-h2);
	line-height:var(--pf-lh-tight); font-weight:var(--pf-w-semibold);
	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); }

/* ── 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;
}

/* ── 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);
}
/* Ventana terapéutica de ocupación D2: 65-80 % de una escala 0-100.
   El tinte va detrás de la barra y los dos bordes DELANTE. Sin esa
   segunda capa, una barra que entra en la ventana la tapa justo donde
   importa: el lector no ve que la olanzapina cae dentro. */
.psf-ea .ea-barras--vent .ea-barra-p::before{
	content:""; position:absolute; left:65%; width:15%; top:0; bottom:0;
	background:var(--pf-ok-tint);
}
.psf-ea .ea-barras--vent .ea-barra-p::after{
	content:""; position:absolute; left:65%; width:15%; top:-2px; bottom:-2px;
	border-left:2px solid var(--pf-ok); border-right:2px solid var(--pf-ok);
	pointer-events:none;
}

/* ── 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; white-space:nowrap;
}
.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 ────────────────────────────────────────────────────── */
.psf-ea .ea-llevas{
	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-12) 0;
}
.psf-ea .ea-llevas-t{
	display:block; 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-bottom:var(--pf-s-4);
}
.psf-ea .ea-llevas ul{ margin:0; padding-left:var(--pf-s-6); }
.psf-ea .ea-llevas li{ margin-bottom:var(--pf-s-3); font-size:var(--pf-fs-small); }
.psf-ea .ea-llevas 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; }
}