/* ============================================================
   La hoja para la consulta (F10-01): el papel y su impresión
   ------------------------------------------------------------
   La cargan la aplicación (vista previa en /hoja) y la página
   pública de lo compartido (/compartido). Se apoya en los tokens de
   core/design.css. Lo que es solo de la aplicación —el formulario
   que compone la hoja— está en web.css.

   Es un documento para leer y para imprimir: una sola columna, sin
   colores que signifiquen nada (se imprime en blanco y negro) y con
   las cifras alineadas.

   Todo va colgado de `.hoja`: dentro de la aplicación el papel vive
   en una .setup-card, cuyas reglas para <p> y <h1> pesan más que una
   clase suelta.
   ============================================================ */
.hoja{
  background:#fff;color:#16202e;font-size:14px;line-height:1.5;text-align:left;
  max-width:820px;margin:0 auto;padding:36px 40px 30px;
  border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(20,40,70,.05),0 8px 28px rgba(20,40,70,.08);
  overflow-wrap:anywhere;
}
.hoja :is(p,dd,dt,li,td,th){color:inherit}
.hoja .hoja-cab{border-bottom:2px solid #16202e;padding-bottom:12px;margin-bottom:6px}
.hoja .hoja-kicker{margin:0;font-size:12px;font-weight:600;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.hoja .hoja-nombre{margin:4px 0 2px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.2px;color:#16202e}
.hoja .hoja-ident,.hoja .hoja-fecha{margin:0;font-size:13px;color:#4a5a6e}
.hoja .hoja-consulta{margin:8px 0 2px;font-size:15.5px;font-weight:600;color:#16202e}

.hoja .hoja-sec{margin-top:22px}
/* los encabezados cambian de nivel según dónde se pinte la hoja (ctx.nivel):
   el primero de cada sección es su título; los demás, sus apartados */
.hoja .hoja-sec>:is(h2,h3,h4){margin:14px 0 4px;font-size:14px;font-weight:600;color:#16202e}
.hoja .hoja-sec>:is(h2,h3):first-child{
  margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid #c9d3de;font-size:15.5px;
}
.hoja .hoja-de{font-weight:400;font-size:12.5px;color:#5a6a7e}
.hoja .hoja-nota{margin:0;white-space:pre-wrap}
.hoja .hoja-fino{margin:0 0 6px;font-size:12.5px;color:#4a5a6e}

.hoja .hoja-dl{margin:0;display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:6px 16px}
.hoja .hoja-dl dt{font-weight:600}
.hoja .hoja-dl dt .hoja-de{display:block}
.hoja .hoja-dl dd{margin:0}
.hoja ul{margin:0;padding-left:18px}
.hoja li{margin:1px 0}

/* columnas fijas: cada bloque (analítica, función pulmonar…) es una tabla
   distinta y, si cada una repartiera el ancho a su aire, no quedarían alineadas */
.hoja .hoja-tabla{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px;margin-top:4px}
.hoja .hoja-tabla thead th:nth-child(1){width:30%}
.hoja .hoja-tabla thead th:nth-child(2){width:19%}
.hoja .hoja-tabla thead th:nth-child(3){width:19%}
.hoja .hoja-tabla :is(th,td){text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid #dfe6ee}
.hoja .hoja-tabla thead th{font-size:12px;font-weight:600;color:#4a5a6e;border-bottom:1px solid #9aa8b8}
.hoja .hoja-tabla tbody th{font-weight:500}
.hoja .hoja-num{font-variant-numeric:tabular-nums}
.hoja .hoja-fuera,.hoja .hoja-marca{font-weight:600}
.hoja .hoja-u{font-weight:400;color:#5a6a7e}
.hoja .hoja-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hoja .hoja-inf{padding:8px 0;border-bottom:1px solid #e6ebf1}
.hoja .hoja-inf:last-child{border-bottom:0}
.hoja .hoja-inf-cab{margin:0 0 2px}
.hoja .hoja-inf-dx{margin-top:3px;color:#33414f}

.hoja .hoja-vacia{margin:26px 0;color:#5a6a7e}
.hoja .hoja-pie{margin-top:26px;padding-top:10px;border-top:1px solid #c9d3de;font-size:11.5px;color:#5a6a7e}

@media (max-width:680px){
  .hoja{padding:22px 18px 20px;font-size:13.5px}
  .hoja .hoja-nombre{font-size:21px}
  .hoja .hoja-dl{grid-template-columns:1fr;gap:2px 0}
  .hoja .hoja-dl dd{margin-bottom:8px}
  .hoja .hoja-dl dt .hoja-de{display:inline}
  /* la tabla de valores no cabe a lo ancho: cada medida pasa a ser un bloque,
     con el nombre arriba y el resto debajo */
  .hoja .hoja-tabla,.hoja .hoja-tabla tbody,.hoja .hoja-tabla tr,.hoja .hoja-tabla :is(th,td){display:block;width:auto}
  .hoja .hoja-tabla thead{display:none}
  .hoja .hoja-tabla tr{padding:6px 0;border-bottom:1px solid #dfe6ee}
  .hoja .hoja-tabla :is(th,td){padding:1px 0;border:0}
  .hoja .hoja-tabla td:nth-child(3)::before,.hoja .hoja-tabla td:nth-child(4)::before{content:attr(data-rotulo) ": ";color:#5a6a7e;font-size:12.5px}
}

/* ---------------- impresión ----------------
   Solo sale el papel. `body.imprime-hoja` lo pone quien enseña la hoja
   (salida/pantallas.mjs mientras /hoja está abierta; la página pública,
   siempre): sin esa clase, imprimir cualquier otra vista de la aplicación
   sigue igual que antes. `.contiene-hoja` es el hijo de <body> que lleva el
   papel dentro; `.no-imprime`, lo que le acompaña en pantalla. */
@media print{
  @page{margin:15mm 14mm}
  body.imprime-hoja{background:#fff !important}
  body.imprime-hoja>*{display:none !important}
  body.imprime-hoja>.contiene-hoja{display:block !important;min-height:0;padding:0;background:none}
  body.imprime-hoja .no-imprime{display:none !important}
  body.imprime-hoja .contiene-hoja :is(.setup-card,.hoja-vista,.hoja-papel){
    display:block;position:static;max-width:none;max-height:none;overflow:visible;
    margin:0;padding:0;border:0;box-shadow:none;background:none;
  }
  body.imprime-hoja .hoja{max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;font-size:10.5pt}
  body.imprime-hoja .hoja .hoja-nombre{font-size:18pt}
  body.imprime-hoja .hoja .hoja-kicker{color:#16202e}
  .hoja .hoja-sec>:is(h2,h3,h4){break-after:avoid}
  .hoja :is(.hoja-inf,.hoja-tabla tr,.hoja-dl dt){break-inside:avoid}
}