/* =========================================================================
   LA HOJA PARA EL PACIENTE  ·  [D-176 · v9.12.0]

   DOS DISEÑOS EN UNA HOJA. En pantalla es una página del sitio como las
   demás. En PAPEL —que es donde de verdad vive— tiene que caber, leerse a
   un brazo de distancia y sobrevivir a una impresora láser en blanco y
   negro de un hospital público.

   POR ESO LAS ALARMAS NO SE DISTINGUEN SOLO POR COLOR. Llevan filete
   grueso y negrita, que es lo que queda cuando la impresora no tiene tóner
   de color — y de paso es lo que exige [1.4.1] para quien no distingue
   colores. Un recuadro rojo que se imprime gris claro no avisa de nada.

   TODO EN TOKENS, sin un solo literal, como el resto de la casa.
   ========================================================================= */

.psf-hoja-main{background:var(--pf-paper);}
.psf-hoja{
	max-width:var(--pf-w-read);margin:0 auto;padding:var(--pf-s-8) var(--pf-s-4);
	color:var(--pf-ink);font-family:var(--pf-sans);}

/* ── Los mandos: solo en pantalla ─────────────────────────────────── */
.psf-hoja__mandos{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--pf-s-3);
	margin-bottom:var(--pf-s-4);}
.psf-hoja__pdf{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:var(--pf-tap);padding:var(--pf-s-2) var(--pf-s-4);
	background:var(--pf-ink);color:var(--pf-surface);
	border:2px solid var(--pf-ink);border-radius:var(--pf-r-pill);
	font-family:var(--pf-sans);font-size:var(--pf-fs-small);
	font-weight:var(--pf-w-semibold);cursor:pointer;}
.psf-hoja__pdf:hover{background:var(--pf-brand-tx);border-color:var(--pf-brand-tx);}
.psf-hoja__pdf:focus-visible{outline:3px solid var(--pf-ink);outline-offset:3px;}
.psf-hoja__pista{
	flex:1 1 22ch;font-size:var(--pf-fs-micro);line-height:1.5;
	color:var(--pf-ink-faint-tx);}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.psf-hoja__cab{margin-bottom:var(--pf-s-4);}
.psf-hoja__h1{
	margin:0 0 var(--pf-s-2);font-family:var(--pf-serif);
	font-size:var(--pf-fs-h2);line-height:1.15;color:var(--pf-brand-deep);}
.psf-hoja__entrada{
	margin:0;font-size:var(--pf-fs-lead);line-height:1.55;color:var(--pf-ink-soft);}

/* ── Los renglones que llena el médico ────────────────────────────── */
/* Se imprimen VACÍOS a propósito: se llenan a mano en la consulta, que es
   lo que convierte una hoja genérica en la hoja de ese paciente. */
.psf-hoja__datos{
	margin:0 0 var(--pf-s-4);padding:var(--pf-s-3) var(--pf-s-4);
	border:2px solid var(--pf-line);border-radius:var(--pf-r-md);
	background:var(--pf-paper-alt);}
.psf-hoja__campo{
	display:flex;align-items:baseline;gap:var(--pf-s-2);
	margin:0 0 var(--pf-s-3);}
.psf-hoja__campo:last-child{margin-bottom:0;}
.psf-hoja__et{
	flex:0 0 auto;font-size:var(--pf-fs-small);font-weight:var(--pf-w-semibold);
	color:var(--pf-ink);}
.psf-hoja__raya{
	flex:1 1 auto;height:0;border-bottom:1.5px solid var(--pf-ink-faint);
	transform:translateY(-2px);}

/* ── El recuadro de alarma ────────────────────────────────────────── */
/* Filete grueso a la izquierda Y negrita: si la impresora no tiene color,
   el aviso sigue avisando. */
.psf-hoja__urgente{
	margin:0 0 var(--pf-s-4);padding:var(--pf-s-3) var(--pf-s-4);
	border:2px solid var(--pf-ink);border-left-width:8px;
	border-radius:var(--pf-r-md);background:var(--pf-surface);}
.psf-hoja__uh{
	margin:0 0 var(--pf-s-2);font-family:var(--pf-sans);
	font-size:var(--pf-fs-h3);line-height:1.2;
	font-weight:var(--pf-w-bold);color:var(--pf-ink);}
.psf-hoja__urgente ul{margin:0;padding-left:1.15em;}
.psf-hoja__urgente li{
	margin-bottom:var(--pf-s-2);font-size:var(--pf-fs-body);line-height:1.5;}
.psf-hoja__up{
	margin:var(--pf-s-2) 0 0;font-size:var(--pf-fs-small);
	line-height:1.5;color:var(--pf-ink-soft);}

/* ── El cuerpo ────────────────────────────────────────────────────── */
.psf-hoja__bl{margin:0 0 var(--pf-s-4);}
.psf-hoja__bh{
	margin:0 0 var(--pf-s-2);font-family:var(--pf-sans);
	font-size:var(--pf-fs-h3);line-height:1.25;
	font-weight:var(--pf-w-semibold);color:var(--pf-brand-tx);}
.psf-hoja__bl ul{margin:0;padding-left:1.15em;}
.psf-hoja__bl li{
	margin-bottom:var(--pf-s-2);font-size:var(--pf-fs-body);line-height:1.55;}

/* ── Pie ──────────────────────────────────────────────────────────── */
.psf-hoja__pie{
	margin-top:var(--pf-s-8);padding-top:var(--pf-s-3);
	border-top:2px solid var(--pf-line);}
.psf-hoja__aviso{
	margin:0 0 var(--pf-s-3);padding:var(--pf-s-2) var(--pf-s-3);
	border-left:4px solid var(--pf-ink-faint);background:var(--pf-paper-alt);
	font-size:var(--pf-fs-small);line-height:1.55;color:var(--pf-ink-soft);}
.psf-hoja__mas{
	margin:0 0 var(--pf-s-3);font-size:var(--pf-fs-micro);
	line-height:1.5;color:var(--pf-ink-faint-tx);overflow-wrap:anywhere;}
.psf-hoja__mas a{color:var(--pf-brand-tx);}
.psf-hoja__ftes h3{
	margin:0 0 var(--pf-s-2);font-family:var(--pf-sans);
	font-size:var(--pf-fs-small);font-weight:var(--pf-w-semibold);
	color:var(--pf-ink-soft);}
.psf-hoja__ftes ol{margin:0;padding-left:1.4em;}
.psf-hoja__ftes li{
	margin-bottom:var(--pf-s-1);font-size:var(--pf-fs-micro);
	line-height:1.45;color:var(--pf-ink-faint-tx);}
.psf-hoja__url{display:block;overflow-wrap:anywhere;}
.psf-hoja__marca{
	margin:var(--pf-s-3) 0 0;font-family:var(--pf-mono);
	font-size:var(--pf-fs-micro);color:var(--pf-ink-faint-tx);}

/* =========================================================================
   PAPEL. Aquí es donde esta hoja hace su trabajo.
   ========================================================================= */
@media print{
	.psf-hoja__mandos{display:none !important;}
	.psf-hoja{max-width:none;padding:0;}
	.psf-hoja__h1{font-size:19pt;}
	.psf-hoja__entrada{font-size:10.5pt;}
	.psf-hoja__uh,.psf-hoja__bh{font-size:12.5pt;}
	.psf-hoja__urgente li,.psf-hoja__bl li{font-size:10.5pt;line-height:1.4;}
	.psf-hoja__ftes li,.psf-hoja__marca,.psf-hoja__mas{font-size:7.5pt;}

	/* Un bloque partido entre dos hojas se lee mal y se fotocopia peor. */
	.psf-hoja__urgente,.psf-hoja__bl,.psf-hoja__datos{
		break-inside:avoid;page-break-inside:avoid;}

	/* Los renglones en blanco tienen que verse para poder escribir encima. */
	.psf-hoja__raya{border-bottom-width:1pt;}

	/* La dirección de la ficha, impresa: en papel un enlace no se pulsa. */
	.psf-hoja__mas a::after{content:"";}
}
