/**
 * psf-guiones.css — tres guiones para leerle al paciente.  [D-246 · v9.65.0]
 *
 * LA DECISIÓN QUE ORDENA EL ARCHIVO: la LÍNEA y la ACOTACIÓN no se parecen en
 * nada. La línea va grande, en serif, casi como una cita; la acotación va
 * pequeña, en gris, en versalita y con el rótulo «no se dice» delante. Si las
 * dos se pintaran igual, alguien leería en voz alta la instrucción que era
 * para él — y en mitad de una crisis eso no es un detalle de estilo.
 *
 * La caja de contraindicaciones de TIPP va en rojo y ARRIBA del guion, no al
 * pie. Un aviso que aparece después de la maniobra llega tarde.
 *
 * Ni un hexadecimal propio: todo de psf-tokens.css.
 */

.psf-gui{ padding-bottom:var(--pf-s-12); }

/* ── cabecera ────────────────────────────────────────────────────────── */

.psf-gui__cab{ max-width:var(--pf-w-read); margin-bottom:var(--pf-s-6); }
.psf-gui__h1{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h2);
	line-height:1.15; margin:0 0 8px; color:var(--pf-ink); text-wrap:balance;
}
.psf-gui__lead{
	font-family:var(--pf-sans); font-size:var(--pf-fs-body);
	line-height:1.6; color:var(--pf-ink-soft); margin:0 0 var(--pf-s-3); max-width:64ch;
}
.psf-gui__lead b{ color:var(--pf-ink); font-weight:600; }

.psf-gui__mandos{
	display:flex; flex-wrap:wrap; align-items:center; gap:var(--pf-s-3);
	max-width:var(--pf-w-read); margin-bottom:var(--pf-s-6);
}
.psf-gui__imprimir{
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:700;
	min-height:var(--pf-tap); padding:10px 22px;
	background:var(--pf-brand); color:#fff;
	border:0; border-radius:var(--pf-r-pill); cursor:pointer;
}
.psf-gui__imprimir:hover{ background:var(--pf-brand-deep); }
.psf-gui__imprimir:focus-visible{ outline:var(--pf-focus) solid var(--pf-ink); outline-offset:2px; }
.psf-gui__pista{
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	color:var(--pf-ink-faint-tx); max-width:40ch;
}

.psf-gui__aviso{
	max-width:var(--pf-w-read); margin-bottom:var(--pf-s-8);
	padding:var(--pf-s-3) var(--pf-s-4);
	background:var(--pf-paper-alt); border:1px solid var(--pf-line);
	border-radius:var(--pf-r-sm);
}
.psf-gui__aviso p{
	margin:0 0 var(--pf-s-2);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); color:var(--pf-ink);
}

/* ── un guion ────────────────────────────────────────────────────────── */

.psf-gui__g{
	max-width:var(--pf-w-read); margin-bottom:var(--pf-s-12);
	padding-top:var(--pf-s-6); border-top:2px solid var(--pf-ink-faint);
}

.psf-gui__g-cab{ margin-bottom:var(--pf-s-4); }
.psf-gui__g-t{
	font-family:var(--pf-serif); font-size:var(--pf-fs-h2);
	margin:0; line-height:1.1; color:var(--pf-ink);
}
.psf-gui__g-ot{
	margin:2px 0 0;
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:.05em; color:var(--pf-ink-faint-tx);
}
.psf-gui__g-dura{
	display:inline-block; margin:var(--pf-s-2) 0 0; padding:2px 10px;
	background:var(--pf-brand-tint); border:1px solid var(--pf-brand-line);
	border-radius:var(--pf-r-pill);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-brand-tx);
}

.psf-gui__g-para,
.psf-gui__origen{
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:1.6; color:var(--pf-ink-soft); margin:0 0 var(--pf-s-4); max-width:64ch;
}
.psf-gui__g-para b,
.psf-gui__origen b{ color:var(--pf-ink); font-weight:700; }
.psf-gui__origen{
	margin-top:var(--pf-s-4); padding-top:var(--pf-s-2);
	border-top:1px dashed var(--pf-line); color:var(--pf-ink-faint-tx);
}

.psf-gui__g h3{
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro);
	letter-spacing:.09em; text-transform:uppercase;
	color:var(--pf-ink-faint-tx); margin:0 0 var(--pf-s-2);
}

/* ── en quién NO. Va arriba y en rojo. Véase la nota de cabecera. ────── */

.psf-gui__ojo{
	background:var(--pf-danger-tint); border:1px solid var(--pf-danger);
	border-left:4px solid var(--pf-danger);
	border-radius:var(--pf-r-sm); padding:var(--pf-s-3) var(--pf-s-4);
	margin-bottom:var(--pf-s-4);
}
.psf-gui__ojo h3{ color:var(--pf-danger-tx); }
.psf-gui__ojo ul{ margin:0; padding-left:var(--pf-s-6); }
.psf-gui__ojo li{
	margin-bottom:var(--pf-s-2);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:1.55; color:var(--pf-ink);
}
.psf-gui__ojo li:last-child{ margin-bottom:0; }
.psf-gui__ojo b{ color:var(--pf-danger-tx); font-weight:700; }

/* ── preparación ─────────────────────────────────────────────────────── */

.psf-gui__antes{ margin-bottom:var(--pf-s-6); }
.psf-gui__antes ul{ margin:0; padding-left:var(--pf-s-6); }
.psf-gui__antes li{
	margin-bottom:var(--pf-s-2);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:1.55; color:var(--pf-ink-soft);
}

/* ── el guion: línea y acotación ─────────────────────────────────────── */

.psf-gui__pasos{ margin-bottom:var(--pf-s-6); }
.psf-gui__pasos ol{
	margin:0; padding-left:0; list-style:none;
	counter-reset:psf-gui-paso;
}
.psf-gui__pasos li{
	position:relative; counter-increment:psf-gui-paso;
	padding:0 0 var(--pf-s-4) var(--pf-s-8);
	border-left:2px solid var(--pf-line); margin-left:var(--pf-s-2);
}
.psf-gui__pasos li:last-child{ padding-bottom:0; }
.psf-gui__pasos li::before{
	content:counter(psf-gui-paso);
	position:absolute; left:calc(var(--pf-s-8) * -0.5 - 12px); top:0;
	width:24px; height:24px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--pf-surface); border:1.5px solid var(--pf-ink-faint);
	font-family:var(--pf-mono); font-size:var(--pf-fs-micro); color:var(--pf-ink-soft);
}

/* LA LÍNEA: se lee en voz alta. Grande, en serif, como una cita. */
.psf-gui__linea{
	margin:0 0 var(--pf-s-2);
	font-family:var(--pf-serif); font-size:var(--pf-fs-h4);
	line-height:1.45; color:var(--pf-ink); max-width:56ch;
}

/* LA ACOTACIÓN: no se pronuncia. Pequeña, gris, con su rótulo delante. */
.psf-gui__acot{
	margin:0; padding:var(--pf-s-2) var(--pf-s-3);
	background:var(--pf-paper-alt); border-radius:var(--pf-r-sm);
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	line-height:1.5; color:var(--pf-ink-faint-tx); max-width:60ch;
}
.psf-gui__acot-m{
	display:inline-block; margin-right:8px; padding:0 6px;
	background:var(--pf-ink-faint); color:var(--pf-surface);
	border-radius:2px;
	font-family:var(--pf-mono); font-size:calc(var(--pf-fs-micro) * .85);
	letter-spacing:.08em; text-transform:uppercase; vertical-align:1px;
}

/* ── si pasa esto ────────────────────────────────────────────────────── */

.psf-gui__si dl{ margin:0; }
.psf-gui__si dt{
	font-family:var(--pf-sans); font-size:var(--pf-fs-small); font-weight:700;
	color:var(--pf-ink); margin-top:var(--pf-s-3);
}
.psf-gui__si dd{
	margin:2px 0 0; padding-left:var(--pf-s-3);
	border-left:2px solid var(--pf-line);
	font-family:var(--pf-sans); font-size:var(--pf-fs-small);
	line-height:1.55; color:var(--pf-ink-soft);
}

.psf-gui__pie{
	max-width:var(--pf-w-read); margin:var(--pf-s-8) 0 0;
	padding-top:var(--pf-s-3); border-top:1px solid var(--pf-line);
	font-family:var(--pf-sans); font-size:var(--pf-fs-micro);
	line-height:1.6; color:var(--pf-ink-faint-tx);
}

/* ── teléfono ────────────────────────────────────────────────────────── */

@media (max-width:480px){
	.psf-gui__pasos li{ padding-left:var(--pf-s-6); margin-left:14px; }
	.psf-gui__pasos li::before{ left:-14px; width:22px; height:22px; }
	.psf-gui__ojo{ padding:var(--pf-s-3); }
}

/* ── impresión: es la razón por la que existe la página ──────────────── */

/*
 * Cada guion empieza en hoja nueva y NINGÚN paso se parte entre dos hojas: un
 * guion cortado a la mitad de un paso se lee en voz alta mal, que es el único
 * fallo que esta hoja no se puede permitir.
 */
@media print{
	.psf-gui__mandos,
	.psf-gui__pista{ display:none !important; }
	.psf-gui{ padding:0; }
	.psf-gui__g{
		break-before:page; page-break-before:always;
		border-top:0; padding-top:0;
	}
	.psf-gui__g:first-of-type{ break-before:auto; page-break-before:auto; }
	.psf-gui__pasos li,
	.psf-gui__ojo,
	.psf-gui__si dd{ break-inside:avoid; page-break-inside:avoid; }
	.psf-gui__g-t{ font-size:19pt; }
	.psf-gui__linea{ font-size:12pt; }
	.psf-gui__acot{ font-size:8.5pt; background:transparent; border-left:2pt solid #999; }
	.psf-gui__ojo{ border-left-width:3pt; }
	a[href]::after{ content:""; }
}
