/* ═══════════════════════════════════════════════════════════════════
   psf-bzd-equivalencias.css — la tabla de Ashton y su convertidor.
   [D-227 · v9.48.0]

   NI UN LITERAL DE COLOR: todo sale de psf-tokens.css.

   Y UNA DECISIÓN DE JERARQUÍA QUE NO ES ESTÉTICA. La cita de la autora
   y el aviso de «nunca de golpe» van ARRIBA, antes del convertidor, y
   con peso visual suficiente para que no se salten. Un convertidor de
   dosis que enseña primero el número y después las reservas está
   enseñando a saltarse las reservas.
   ═══════════════════════════════════════════════════════════════════ */

.psf-bze{ padding-bottom:var(--pf-s-16); }
.psf-bze__cab{ max-width:var(--pf-w-read); }
.psf-bze__h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h1);
	line-height:var(--pf-lh-tight); letter-spacing:var(--pf-track-display);
	color:var(--pf-ink); margin:var(--pf-s-2) 0 var(--pf-s-3);
}
.psf-bze__lead{
	font-size:var(--pf-fs-lead); line-height:var(--pf-lh-body);
	color:var(--pf-ink-soft); margin:0 0 var(--pf-s-6); max-width:64ch;
}

/* ── La cita de Ashton ─────────────────────────────────────────── */
/* Filete a la izquierda y sangría: se lee como una cita, no como un
   callout. El color semántico se reserva para las señales clínicas. */
.psf-bze__cita{
	margin:0 0 var(--pf-s-6); padding:var(--pf-s-3) 0 var(--pf-s-3) var(--pf-s-6);
	border-left:3px solid var(--pf-sage);
}
.psf-bze__cita p{
	font-family:var(--pf-serif); font-size:var(--pf-fs-body);
	line-height:var(--pf-lh-body); color:var(--pf-ink); margin:0 0 var(--pf-s-2);
}
.psf-bze__cita-es{ color:var(--pf-ink-soft) !important; font-size:var(--pf-fs-small) !important; }
.psf-bze__cita cite{
	font-style:normal; font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); letter-spacing:var(--pf-track-label);
}

/* ── El aviso que no se salta ──────────────────────────────────── */
/* Este SÍ es un relleno de caja, y con el rojo apagado: es una alerta
   grave de verdad —la retirada brusca puede incluir convulsiones—, que
   es exactamente para lo que existe ese token. */
.psf-bze__alarma{
	background:var(--pf-danger-tint); border-left:4px solid var(--pf-danger);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-4);
	font-size:var(--pf-fs-small); line-height:var(--pf-lh-body);
	color:var(--pf-danger-tx); margin:0 0 var(--pf-s-8);
}
.psf-bze__alarma b{ font-weight:var(--pf-w-semibold); }

/* ── El convertidor ────────────────────────────────────────────── */
.psf-bze__calc{ max-width:var(--pf-w-read); }
.psf-bze__campos{ display:grid; grid-template-columns:2fr 1fr; gap:var(--pf-s-4); margin:var(--pf-s-4) 0; }
.psf-bze__campo{ display:grid; gap:var(--pf-s-2); }
.psf-bze__campo > span{
	font-size:var(--pf-fs-micro); font-weight:var(--pf-w-semibold);
	color:var(--pf-ink-soft); letter-spacing:var(--pf-track-label);
}
/* box-sizing EXPLÍCITO, y no es rutina: medido en el navegador a 390 px, el
   <input type="number"> con width:100% más su padding y su borde se salía 2 px
   y sacaba scroll horizontal a toda la página. Los controles de formulario no
   siempre heredan el border-box del resto de la hoja. */
.psf-bze__campo select,
.psf-bze__campo input{
	box-sizing:border-box;
	min-height:48px; padding:var(--pf-s-2) var(--pf-s-3);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); color:var(--pf-ink);
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm); width:100%;
}
.psf-bze__campo select:focus-visible,
.psf-bze__campo input:focus-visible{ outline:2px solid var(--pf-sage-tx); outline-offset:2px; }

.psf-bze__res{
	background:var(--pf-surface); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-md); padding:var(--pf-s-6); margin-top:var(--pf-s-4);
}
.psf-bze__res-q{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); margin:0 0 var(--pf-s-2); }
.psf-bze__res-n{
	font-family:var(--pf-mono); font-size:var(--pf-fs-h2);
	font-weight:var(--pf-w-semibold); color:var(--pf-brand-tx);
	line-height:var(--pf-lh-tight); margin:0;
}
.psf-bze__res-d{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); margin:var(--pf-s-2) 0 var(--pf-s-4); }
.psf-bze__res-ojo,
.psf-bze__res-dme,
.psf-bze__res-hueco,
.psf-bze__res-vida{
	font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body);
	margin:0 0 var(--pf-s-3); max-width:60ch;
}
.psf-bze__res-ojo{ color:var(--pf-warn-tx); }
.psf-bze__res-dme{ color:var(--pf-warn-tx); font-weight:var(--pf-w-medium); }
.psf-bze__res-hueco{ color:var(--pf-ink-faint-tx); font-style:italic; }
.psf-bze__res-vida{ color:var(--pf-ink-soft); }
.psf-bze__aviso{ font-size:var(--pf-fs-small); color:var(--pf-ink-faint-tx); margin:var(--pf-s-4) 0 0; }
.psf-bze__nojs{ font-size:var(--pf-fs-small); color:var(--pf-ink-soft); }

/* ── La tabla ──────────────────────────────────────────────────── */
.psf-bze__tabla-b{ max-width:var(--pf-w-read); margin-top:var(--pf-s-16); }
.psf-bze__scroll{ overflow-x:auto; margin:var(--pf-s-4) 0; }
.psf-bze__t{ width:100%; border-collapse:collapse; font-size:var(--pf-fs-small); }
.psf-bze__t caption{
	text-align:left; font-size:var(--pf-fs-micro); color:var(--pf-ink-faint-tx);
	padding-bottom:var(--pf-s-2);
}
.psf-bze__rev{
	display:inline-block; margin-left:var(--pf-s-2); padding:2px var(--pf-s-2);
	background:var(--pf-warn-tint); color:var(--pf-warn-tx);
	border-radius:var(--pf-r-pill); font-size:var(--pf-fs-micro);
}
.psf-bze__t th, .psf-bze__t td{
	text-align:left; padding:var(--pf-s-2) var(--pf-s-3);
	border-bottom:1px solid var(--pf-line); vertical-align:top;
}
.psf-bze__t thead th{
	font-size:var(--pf-fs-micro); letter-spacing:var(--pf-track-label);
	color:var(--pf-ink-soft); background:var(--pf-paper-alt);
}
.psf-bze__t tbody th{ font-weight:var(--pf-w-semibold); color:var(--pf-ink); }
/* EL ANCLA NO SE MARCA SOLO CON COLOR: lleva fondo Y peso. 1.4.1. */
.psf-bze__t tr.psf-bze__ancla{ background:var(--pf-brand-tint); }
.psf-bze__t tr.psf-bze__ancla th,
.psf-bze__t tr.psf-bze__ancla td{ font-weight:var(--pf-w-semibold); }
.psf-bze__z{
	display:inline-block; padding:1px var(--pf-s-2); margin-left:var(--pf-s-1);
	background:var(--pf-paper-alt); color:var(--pf-ink-faint-tx);
	border-radius:var(--pf-r-pill); font-size:var(--pf-fs-micro);
	font-weight:var(--pf-w-regular);
}

.psf-bze__h3{ font-family:var(--pf-serif); font-size:var(--pf-fs-h4); color:var(--pf-ink); margin:var(--pf-s-8) 0 var(--pf-s-3); }
.psf-bze__p{ font-size:var(--pf-fs-small); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); max-width:60ch; }
.psf-bze__citas{ padding-left:var(--pf-s-4); display:grid; gap:var(--pf-s-3); }
.psf-bze__citas li{ font-size:var(--pf-fs-micro); line-height:var(--pf-lh-body); color:var(--pf-ink-soft); }
.psf-bze__citas a{ color:var(--pf-accent-tx); word-break:break-word; }
.psf-bze__acceso{ color:var(--pf-ink-faint-tx); font-style:italic; }

/* ── El teléfono ───────────────────────────────────────────────── */
/* La tabla se rompe en tarjetas: cuatro columnas en 390 px obligarían a
   un scroll lateral dentro de otro scroll, que es donde se pierde la
   fila que se estaba leyendo. */
@media (max-width:560px){
	.psf-bze__h1{ font-size:var(--pf-fs-h2); }
	.psf-bze__campos{ grid-template-columns:1fr; }
	.psf-bze__res{ padding:var(--pf-s-4); }
	.psf-bze__res-n{ font-size:var(--pf-fs-h3); }
	.psf-bze__scroll{ overflow-x:visible; }
	.psf-bze__t thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
	.psf-bze__t tr{
		display:block; margin-bottom:var(--pf-s-3); padding:var(--pf-s-3);
		border:1px solid var(--pf-line); border-radius:var(--pf-r-sm);
	}
	.psf-bze__t th, .psf-bze__t td{ display:block; border:0; padding:var(--pf-s-1) 0; }
	.psf-bze__t td::before{
		content:attr(data-r) ": "; font-size:var(--pf-fs-micro);
		color:var(--pf-ink-faint-tx); letter-spacing:var(--pf-track-label);
	}
}

@media print{
	.psf-bze__calc{ display:none !important; }
}