/* =====================================================================
   psf-aprendizaje.css — Capa de aprendizaje  (v6.0.0)
   ---------------------------------------------------------------------
   Cuatro componentes nuevos:

     .psf-minimo    tarjeta de «lo mínimo», la capa cero de la ficha
     .psf-repaso    práctica de recuperación al final de la ficha
     .psf-buscador  caja de búsqueda del sitio
     .psf-cmp       tabla comparativa dentro del grupo

   REGLA DURA HEREDADA DE psf-tokens.css: ni un hex, ni un tamaño de
   fuente, ni un espaciado literal. Todo sale de los tokens --pf-.

   Y la regla [D-4]: los acentos de catálogo (--pf-brand, --pf-ink-faint,
   los de clase) NO pintan texto pequeño porque no llegan a 4,5:1. Para
   texto se usa siempre la variante -tx. Aquí eso afecta al rótulo del
   buscador, a la etiqueta de tipo, a los huecos declarados y a la
   marca de «revisado».
   ===================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   [D-94 · v6.22.0] TODA ESTA HOJA LEÍA LA ESCALA COMO SI FUERAN PÍXELES.
   ---------------------------------------------------------------------
   La escala de espaciado va por PASOS de 4 px: --pf-s-3 son 12 px y
   --pf-s-12 son CUARENTA Y OCHO. Quien escribió esta hoja leyó el número
   como la medida, y el resultado se acumulaba componente a componente.

   Medido en un teléfono de 390 px, en la tarjeta de «Lo mínimo»:
     · relleno de la tarjeta ....... 48 px arriba, 64 px a los lados
     · relleno de cada celda ....... 32 px arriba, 48 px a los lados
     · borde izquierdo ............. 16 px
     · ancho REAL para el texto .... 89 px
   Ochenta y nueve píxeles con tipografía monoespaciada de 15 px son unos
   seis caracteres por línea. De ahí «Noradrenal / ina», «muscarínic / os»,
   «recaptació / n»: no era un fallo de partición de palabras, era una
   columna de seis caracteres.

   El [D-74] ya había encontrado esto en la caja de búsqueda y corregido
   SOLO esa parte, dejando anotado que quedaban unas cuarenta declaraciones
   sin revisar. Estas son. Se corrigen dividiendo por cuatro, que es la
   conversión exacta entre las dos lecturas.

   QUÉ NO SE TOCA: las tres declaraciones de `.psf-buscador--grande`, que
   son las del hero de la portada y que el autor dejó marcadas como decisión
   pendiente. Siguen ahí, con su marca.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------- LO MÍNIMO */

.psf-minimo{
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	/* [D-94] 4 px, no 16. `--pf-s-4` son dieciséis, y como borde de acento en
	   un teléfono de 390 px eso es una franja, no una marca. El resto de barras
	   de acento del sitio usan 3 px. */
	border-left:4px solid var(--pf-brand);
	border-radius:0 var(--pf-r-md) var(--pf-r-md) 0;
	padding:var(--pf-s-4) var(--pf-s-6) var(--pf-s-4) var(--pf-s-4);
	margin:0 0 var(--pf-s-6);
}
.psf-min-head{margin-bottom:var(--pf-s-3)}
.psf-min-t{
	font-family:var(--pf-serif);
	font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-h3);
	line-height:var(--pf-lh-tight);
	margin:0;
	color:var(--pf-ink);
}
.psf-min-sub{
	margin:var(--pf-s-1) 0 0;
	font-size:var(--pf-fs-small);
	color:var(--pf-ink-soft);
}
.psf-min-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1px;
	background:var(--pf-line);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	overflow:hidden;
}
.psf-min-celda{
	background:var(--pf-surface);
	padding:var(--pf-s-2) var(--pf-s-3);
}
.psf-min-k{
	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);
}
.psf-min-v{
	display:block;
	font-family:var(--pf-mono);
	font-size:var(--pf-fs-data);
	line-height:var(--pf-lh-data);
	margin-top:var(--pf-s-2);
	color:var(--pf-ink);
	/* [D-94] `anywhere` parte la palabra en CUALQUIER punto, aunque quepa
	   entera en la línea siguiente. `break-word` solo parte cuando de verdad
	   no cabe, que es lo que hace falta para un nombre largo suelto. */
	overflow-wrap:break-word;
}
.psf-min-hueco .psf-min-v,
.psf-min-frase.psf-min-hueco{
	color:var(--pf-ink-faint-tx);
	font-style:italic;
}
.psf-min-frase{
	margin:var(--pf-s-3) 0 0;
	font-size:var(--pf-fs-body);
	line-height:var(--pf-lh-body);
	color:var(--pf-ink);
}
.psf-min-rev{
	margin:var(--pf-s-2) 0 0;
	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);
}
@media (max-width:640px){
	.psf-min-grid{grid-template-columns:1fr}
	.psf-minimo{padding:var(--pf-s-3) var(--pf-s-4)}
}

/* ------------------------------------------------------------- REPASO */

.psf-repaso{
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-left:var(--pf-s-4) solid var(--pf-cat-principios);
	border-radius:0 var(--pf-r-lg) var(--pf-r-lg) 0;
	padding:var(--pf-s-6);
	margin:var(--pf-s-6) 0 0;
}
.psf-repaso-hueco{
	border-left-color:var(--pf-warn);
	background:var(--pf-warn-tint);
	font-size:var(--pf-fs-small);
	color:var(--pf-ink);
}
.psf-repaso-cap{
	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-cat-principios-tx);
}
.psf-repaso-t{
	font-family:var(--pf-serif);
	font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-h2);
	line-height:var(--pf-lh-tight);
	margin:var(--pf-s-4) 0 var(--pf-s-4);
	color:var(--pf-ink);
}
.psf-repaso-lead{
	margin:0 0 var(--pf-s-4);
	font-size:var(--pf-fs-small);
	line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft);
	max-width:60ch;
}
.psf-repaso-ultima{
	margin:0 0 var(--pf-s-2);
	font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro);
	color:var(--pf-ok-tx);
}

.psf-rq{
	border-top:1px solid var(--pf-paper-alt);
	padding:var(--pf-s-4) 0 var(--pf-s-4);
}
.psf-rq-enunciado{
	margin:0 0 var(--pf-s-2);
	font-size:var(--pf-fs-h4);
	font-weight:var(--pf-w-semibold);
	line-height:var(--pf-lh-data);
	color:var(--pf-ink);
}
.psf-rq-n{
	font-family:var(--pf-mono);
	font-weight:var(--pf-w-regular);
	color:var(--pf-ink-faint-tx);
	margin-right:var(--pf-s-2);
}
.psf-rq-abrir{
	background:none;
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	padding:var(--pf-s-2) var(--pf-s-4);
	min-height:var(--pf-tap);
	font-family:var(--pf-sans);
	font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-semibold);
	color:var(--pf-ink-soft);
	cursor:pointer;
}
.psf-rq-abrir:hover{
	border-color:var(--pf-brand);
	color:var(--pf-brand-tx);
}
.psf-rq-opciones{
	display:flex;
	flex-direction:column;
	gap:var(--pf-s-2);
	margin-top:var(--pf-s-4);
}
.psf-rq-op{
	text-align:left;
	background:var(--pf-paper);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	padding:var(--pf-s-3);
	min-height:var(--pf-tap);
	font-family:var(--pf-sans);
	font-size:var(--pf-fs-small);
	line-height:var(--pf-lh-data);
	color:var(--pf-ink);
	cursor:pointer;
}
.psf-rq-op:hover{background:var(--pf-paper-alt)}
/* [v6.1.0 · defecto 3] ACIERTO Y ERROR NO PUEDEN IR SOLO EN COLOR.
   WCAG 2.1 AA, criterio 1.4.1: el color no puede ser el unico medio de
   transmitir informacion. Tal como estaba, quien no distingue verde de rojo
   —y quien lee con lector de pantalla— no sabia si habia acertado.
   Se anaden dos senales mas: una FORMA (el simbolo del ::before) y una
   PALABRA (el texto que el JS mete en .psf-rq-op-eti, invisible a la vista
   pero no al lector de pantalla). Es el mismo criterio de tres senales
   redundantes que el §6.7 ya aplica a los grados de evidencia. */
.psf-rq-op.psf-es-buena{
	background:var(--pf-ok-tint);
	border-color:var(--pf-ok);
	color:var(--pf-ok-tx);
	font-weight:var(--pf-w-semibold);
}
.psf-rq-op.psf-es-mala{
	background:var(--pf-danger-tint);
	border-color:var(--pf-danger);
	color:var(--pf-danger-tx);
}
.psf-rq-op.psf-es-buena::before,
.psf-rq-op.psf-es-mala::before{
	display:inline-block;
	width:1.35em; flex:none;
	font-family:var(--pf-mono);
	font-weight:700;
}
.psf-rq-op.psf-es-buena::before{content:"\2713\00a0";}   /* ✓ */
.psf-rq-op.psf-es-mala::before{content:"\2717\00a0";}    /* ✗ */
/* La palabra: fuera de la vista, dentro del arbol de accesibilidad. */
.psf-rq-op-eti{
	position:absolute; width:1px; height:1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.psf-rq-op[disabled]{cursor:default}
.psf-rq-expl{
	background:var(--pf-paper-alt);
	border-radius:var(--pf-r-sm);
	padding:var(--pf-s-3);
	margin-top:var(--pf-s-2);
}
.psf-rq-expl p{
	margin:0;
	font-size:var(--pf-fs-small);
	line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft);
}

.psf-repaso-pie{
	margin-top:var(--pf-s-4);
	padding-top:var(--pf-s-3);
	border-top:1px solid var(--pf-line);
}
.psf-repaso-marcador{
	margin:0 0 var(--pf-s-2);
	font-size:var(--pf-fs-small);
	color:var(--pf-ink-soft);
}
.psf-repaso-acciones{
	display:flex;
	gap:var(--pf-s-2);
	flex-wrap:wrap;
}
.psf-repaso-btn{
	display:inline-flex;
	align-items:center;
	gap:var(--pf-s-4);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	padding:var(--pf-s-2) var(--pf-s-4);
	min-height:var(--pf-tap);
	font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-semibold);
	text-decoration:none;
	background:var(--pf-surface);
	color:var(--pf-ink-soft);
}
.psf-repaso-btn:hover{
	background:var(--pf-paper-alt);
	color:var(--pf-ink);
}
@media (max-width:640px){
	.psf-repaso{padding:var(--pf-s-4)}
}


/* ═══════════════════════════════════════════════════════════════════════
   [D-74 · v6.17.0] LA ESCALA DE ESPACIADO SE CUENTA EN PASOS, NO EN PIXELES.
   ---------------------------------------------------------------------
   `--pf-s-12` NO son 12 px: son 48 px. La escala va por pasos de 4 px, de
   modo que --pf-s-3 = 12 px y --pf-s-12 = 48 px. Quien escribio esta hoja
   la leyo como si el numero fuera la medida, y la caja de busqueda acabo
   con 48 px de relleno arriba y abajo: 120 px de alto para un campo de una
   linea. Nadie lo noto porque la caja solo existia en dos paginas.
   Desde la v6.17.0 la caja va en las 91, asi que se corrige aqui.

   SOLO SE TOCA LA CAJA PEQUENA. La variante --grande es la del hero de la
   portada, que el autor ya reviso y aprobo tal como se ve; cambiarle el
   relleno cambiaria una pagina que esta dada por buena. Sus tres valores
   quedan marcados abajo para que el decida.
   ═══════════════════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------- BUSCADOR */

.psf-buscador{
	position:relative;
	max-width:420px;
	margin:0;
}
.psf-buscador--grande{
	max-width:var(--pf-w-read);
	margin:var(--pf-s-24) 0 var(--pf-s-8);
}
.psf-b-ic{
	position:absolute;
	left:14px;                       /* [D-74] era var(--pf-s-3) = 48 px */
	top:23px;
	transform:translateY(-50%);
	color:var(--pf-ink-faint-tx);
	pointer-events:none;
	line-height:1;
}
.psf-buscador--grande .psf-b-ic{
	left:var(--pf-s-16);             /* [D-74] pendiente de decisión: 64 px */
	top:29px;
	font-size:var(--pf-fs-h3);
}
.psf-b-input{
	width:100%;
	box-sizing:border-box;
	border:1px solid var(--pf-line);
	background:var(--pf-surface);
	border-radius:var(--pf-r-md);
	padding:var(--pf-s-3) var(--pf-s-3) var(--pf-s-3) 42px;   /* [D-74] eran 48 px */
	min-height:var(--pf-tap);
	font-family:var(--pf-sans);
	font-size:var(--pf-fs-small);
	color:var(--pf-ink);
}
.psf-buscador--grande .psf-b-input{
	border-radius:var(--pf-r-lg);
	padding:var(--pf-s-16) var(--pf-s-16) var(--pf-s-16) 52px; /* [D-74] pendiente: 64 px */
	min-height:58px;
	font-size:var(--pf-fs-body);
}
.psf-b-input:focus{
	outline:none;
	border-color:var(--pf-brand);
	box-shadow:0 0 0 var(--pf-focus) var(--pf-brand-tint);
}
.psf-b-pie{
	margin:var(--pf-s-4) var(--pf-s-2) 0;
	font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}
.psf-b-pie kbd{
	font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
	padding:0 var(--pf-s-4);
	background:var(--pf-paper-alt);
}
.psf-b-res{
	position:absolute;
	z-index:120;
	top:calc(100% + var(--pf-s-4));
	left:0;
	right:0;
	margin:0;
	padding:var(--pf-s-1) 0;              /* [D-74] eran 16 px */
	list-style:none;
	max-height:340px;
	overflow-y:auto;
	background:var(--pf-surface);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
	box-shadow:var(--pf-shadow-pop);
}
.psf-b-fila{
	display:flex;
	align-items:baseline;
	gap:var(--pf-s-2);                    /* [D-74] eran 32 px */
	padding:var(--pf-s-2) var(--pf-s-3);  /* [D-74] eran 32/48 px: la fila no cabía */
	cursor:pointer;
	flex-wrap:wrap;
	min-height:var(--pf-tap);
}
.psf-b-fila:hover,
.psf-b-fila[aria-selected="true"]{background:var(--pf-paper-alt)}
.psf-b-nom{
	font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-small);
	color:var(--pf-ink);
}
.psf-b-tipo{
	flex:none;
	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);
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-pill);
	padding:0 var(--pf-s-2);              /* [D-74] eran 32 px */
}
.psf-b-det{
	margin-left:auto;
	text-align:right;
	font-size:var(--pf-fs-micro);
	color:var(--pf-ink-soft);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:45%;
}
.psf-b-vacio{
	padding:var(--pf-s-3);                /* [D-74] eran 48 px */
	font-size:var(--pf-fs-small);
	color:var(--pf-ink-faint-tx);
}
@media (max-width:640px){
	.psf-b-det{display:none}
}

/* -------------------------------------------------------- COMPARACIÓN */

.psf-cmp{margin:var(--pf-s-6) 0}
.psf-cmp-cap{
	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-ink-faint-tx);
}
.psf-cmp-t{
	font-family:var(--pf-serif);
	font-weight:var(--pf-w-semibold);
	font-size:var(--pf-fs-h2);
	line-height:var(--pf-lh-tight);
	margin:var(--pf-s-4) 0 var(--pf-s-4);
	color:var(--pf-ink);
}
.psf-cmp-lead{
	margin:0 0 var(--pf-s-4);
	font-size:var(--pf-fs-body);
	line-height:var(--pf-lh-body);
	max-width:60ch;
	color:var(--pf-ink-soft);
}
.psf-cmp-wrap{
	border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md);
	overflow:hidden;
	background:var(--pf-surface);
}
.psf-cmp-tabla{
	width:100%;
	border-collapse:collapse;
	font-size:var(--pf-fs-small);
}
.psf-cmp-tabla th[scope="col"]{
	background:var(--pf-paper-alt);
	font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-medium);
	letter-spacing:var(--pf-track-label);
	text-transform:uppercase;
	text-align:left;
	color:var(--pf-ink-soft);
	padding:var(--pf-s-2) var(--pf-s-3);
	border-bottom:1px solid var(--pf-line);
}
.psf-cmp-tabla td,
.psf-cmp-tabla th[scope="row"]{
	padding:var(--pf-s-2) var(--pf-s-3);
	vertical-align:top;
	text-align:left;
	line-height:var(--pf-lh-data);
	border-bottom:1px solid var(--pf-paper-alt);
}
.psf-cmp-tabla tr:last-child td,
.psf-cmp-tabla tr:last-child th[scope="row"]{border-bottom:none}
.psf-cmp-nom{
	font-weight:var(--pf-w-semibold);
	white-space:nowrap;
	color:var(--pf-ink);
}
.psf-cmp-nom a{color:var(--pf-brand-tx);text-decoration:none}
/* [v6.1.0] El nombre es el enlace de salida de la fila, no un enlace dentro
   de una frase: por debajo de 1024 px le toca el objetivo tactil de 44 px, y
   crece por padding, no por tamano de letra (D-21). */
@media (max-width:1024px){
	.psf-cmp-nom a{display:inline-flex;align-items:center;min-height:44px}
}
.psf-cmp-nom a:hover{text-decoration:underline}
.psf-cmp-num{
	font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro);
	white-space:nowrap;
}
.psf-cmp-hueco{
	color:var(--pf-ink-faint-tx);
	font-style:italic;
}
.psf-cmp-nota{
	margin:var(--pf-s-2) var(--pf-s-2) 0;
	font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx);
}

/* En pantalla estrecha la tabla no se encoge ni se desborda: cada fila
   pasa a ser una tarjeta con la etiqueta delante. Es donde de verdad la
   lee un residente, y es donde toda tabla de dosis se rompe. */
@media (max-width:1024px){
	/*
	 * [v6.1.0] NOTA, PORQUE CASI ME CUELA UN ARREGLO DE ALGO QUE NO ESTABA
	 * ROTO. Midiendo la v6.1.0 en un navegador, esta tabla salia de 1.062 px
	 * a 390 px de ventana y estiraba la pagina. Parecia un defecto de la
	 * v6.0.0: <tr>, <th> y <td> pasan a display:block aqui abajo, pero
	 * <table> y <tbody> se quedan en su display de tabla, que es justo el
	 * patron que suele fallar.
	 *
	 * NO ERA ESO. Era que el generador estatico con el que medi no incluia
	 * esta hoja en su lista, asi que la tabla salia sin ninguno de estos
	 * estilos. Con la hoja cargada, el repliegue de la v6.0.0 FUNCIONA:
	 * medido, 372 px de tabla y 390 de pagina. Se deja escrito para que
	 * nadie —yo el primero— vuelva a «arreglarlo».
	 */
	.psf-cmp-tabla thead{
		position:absolute;
		width:1px;height:1px;
		overflow:hidden;
		clip:rect(0 0 0 0);
		white-space:nowrap;
	}
	.psf-cmp-tabla tr{
		display:block;
		border-bottom:1px solid var(--pf-line);
		padding:var(--pf-s-2) 0;
	}
	.psf-cmp-tabla tr:last-child{border-bottom:none}
	.psf-cmp-tabla th[scope="row"]{
		display:block;
		border:none;
		font-family:var(--pf-serif);
		font-size:var(--pf-fs-h3);
		font-weight:var(--pf-w-semibold);
		padding:var(--pf-s-2) var(--pf-s-3) var(--pf-s-2);
		background:var(--pf-paper-alt);
		white-space:normal;
	}
	.psf-cmp-tabla td{
		display:grid;
		grid-template-columns:112px 1fr;
		gap:var(--pf-s-2);
		border:none;
		padding:var(--pf-s-4) var(--pf-s-3);
		white-space:normal;
	}
	.psf-cmp-tabla td::before{
		content:attr(data-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);
		padding-top:var(--pf-s-2);
	}
}

/* ---------------------------------------------- accesibilidad y motion */

.psf-b-input:focus-visible,
.psf-rq-abrir:focus-visible,
.psf-rq-op:focus-visible,
.psf-repaso-btn:focus-visible,
.psf-cmp-nom a:focus-visible{
	outline:2px solid var(--pf-brand);
	outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
	.psf-minimo,.psf-repaso,.psf-cmp,.psf-b-res{
		transition:none !important;
		animation:none !important;
	}
}

/* [R9 · v6.1.0] Caption real y filas de agrupación de la tabla comparativa.
   El caption se oculta a la vista —el rótulo visible sigue siendo
   .psf-cmp-cap— pero no a los lectores de pantalla, que es para quien es. */
.psf-cmp-caption{
	position:absolute; width:1px; height:1px;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.psf-cmp-sep th{
	background:var(--pf-band); color:var(--pf-ink);
	font-family:var(--pf-mono); text-transform:uppercase;
	letter-spacing:.05em; font-size:var(--pf-fs-micro);
	font-weight:700; text-align:left; padding:var(--pf-s-2) var(--pf-s-3);
}
.psf-cmp-grado{text-align:center;}
@media (max-width:900px){
	.psf-cmp-sep th{border-radius:var(--pf-r-sm); margin:var(--pf-s-4) 0 var(--pf-s-2);}
	.psf-cmp-grado{text-align:left;}
}