/* Asistente de laboratorio SSUT — hoja única.
   Sin framework y sin CDN: la CSP del backend solo admite 'self'.

   Orden del archivo: variables · base · login · barra · piezas comunes ·
   importar · trabajo del día · carga de resultados · pantallas chicas. */

:root {
  color-scheme: light;   /* si no, los desplegables nativos salen negros en Windows oscuro */

  --papel: #f6f7f5;
  --blanco: #ffffff;
  --gris: #eef1ee;
  --tinta: #16211f;
  --tinta-2: #3c4b47;
  --apagado: #66756f;
  --linea: #d9dfdb;
  --linea-2: #c4ccc7;
  --acento: #0b6e5f;
  --acento-suave: #e2efeb;
  --alerta: #a8511b;
  --alerta-suave: #f6eadf;
  --error: #a32e22;

  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --sombra: 0 1px 2px rgba(22, 33, 31, .06), 0 10px 28px -20px rgba(22, 33, 31, .45);
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}

[hidden] { display: none !important; }

button { font: inherit; cursor: pointer; }

input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea-2);
  border-radius: 3px;
  padding: 6px 9px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
tr:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

h2 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

.lead { color: var(--tinta-2); margin: 0 0 22px; max-width: 62ch; }
.fino { font-size: 13px; color: var(--apagado); margin: 8px 0 0; }
.cargando { color: var(--apagado); font-size: 14px; }

.error {
  background: var(--alerta-suave);
  border-left: 3px solid var(--error);
  color: var(--error);
  padding: 9px 12px;
  margin: 0 0 14px;
  font-size: 13.5px;
  border-radius: 0 3px 3px 0;
}

.aviso-fuerte {
  border-left: 3px solid var(--alerta);
  background: var(--alerta-suave);
  padding: 10px 12px;
  margin: 14px 0;
  font-size: 13.5px;
  border-radius: 0 3px 3px 0;
}

.enlace {
  border: 0;
  background: none;
  color: var(--acento);
  padding: 2px;
  font-size: 13.5px;
}
.enlace:hover { text-decoration: underline; }

.primario {
  padding: 9px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
}
.primario:disabled { opacity: .55; cursor: progress; }

/* Rótulo en versalitas: se pide con una clase, no se le impone a todo <label>.
   La regla global anterior le pegaba también a las etiquetas de los analitos. */
.rotulo {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--apagado);
  margin: 0;
}

/* ---------------------------------------------------------------- login */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.tarjeta-login {
  width: 100%;
  max-width: 360px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 30px 28px 26px;
  box-shadow: var(--sombra);
}

.tarjeta-login h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px;
  letter-spacing: -.01em;
}

.tarjeta-login h1 span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--apagado);
  letter-spacing: .02em;
  margin-top: 4px;
}

.tarjeta-login .rotulo { margin: 0 0 5px; }
.tarjeta-login input { width: 100%; padding: 9px 11px; margin-bottom: 16px; }
#boton-entrar { width: 100%; padding: 10px; }

/* ---------------------------------------------------------------- barra */

.barra {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 52px;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.marca { font-size: 15px; color: var(--apagado); white-space: nowrap; }
.marca b { color: var(--tinta); }

#menu { display: flex; gap: 2px; flex: 1; }

.nav {
  border: 0;
  background: none;
  color: var(--tinta-2);
  padding: 7px 12px;
  border-radius: 3px;
  font-size: 14px;
}
.nav:hover:not(:disabled) { background: var(--acento-suave); }
.nav[aria-current="true"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.nav:disabled { color: var(--linea-2); cursor: default; }

.sesion {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--apagado);
  white-space: nowrap;
}

main { max-width: 1040px; margin: 0 auto; padding: 26px 20px 60px; }

/* ---------------------------------------------------------------- piezas comunes */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 14px 16px;
}

.tarjeta .n {
  display: block;
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.tarjeta .r { font-size: 13px; color: var(--apagado); }

.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 18px 20px 20px;
  margin-top: 18px;
}

.panel h3 { margin: 0 0 14px; }

.panel h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
  margin: 20px 0 8px;
}

.panel .primario { margin-top: 16px; }

/* ---------------------------------------------------------------- importar */

.zona {
  border: 2px dashed var(--linea-2);
  border-radius: 5px;
  background: var(--blanco);
  padding: 34px 24px;
  text-align: center;
  transition: border-color .12s, background .12s;
}

.zona.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona p { margin: 0 0 6px; }
.zona p:last-child { margin: 10px 0 0; }

.hojas { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 16px; }

.hoja {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--linea);
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.hoja:hover { background: var(--papel); }
.hoja input { grid-row: 1 / span 3; align-self: center; margin: 0; }
.hoja-nombre { font-weight: 600; }
.hoja .fino { margin: 0; grid-column: 2; }
.hoja.sospechosa { border-color: var(--alerta); background: var(--alerta-suave); }

.marca-aviso {
  grid-column: 2;
  font-size: 12px;
  color: var(--alerta);
  font-weight: 600;
}

.progreso { margin-top: 18px; }

.barra-progreso {
  height: 6px;
  background: var(--linea);
  border-radius: 3px;
  overflow: hidden;
}

.barra-progreso span { display: block; height: 100%; width: 0; background: var(--acento); transition: width .2s; }

ul.avisos { margin: 0; padding-left: 18px; font-size: 14px; color: var(--tinta-2); }
ul.avisos li { margin-bottom: 6px; }
ul.avisos li::marker { color: var(--alerta); }

/* ---------------------------------------------------------------- trabajo del día */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.filtros label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.filtros input, .filtros select { font-size: 14px; max-width: 230px; }
.filtros button { margin-bottom: 7px; }

.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: 4px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--blanco); }

.tabla th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
  font-weight: 600;
  padding: 9px 10px;
  border-bottom: 1.5px solid var(--linea-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--blanco);
}

.tabla td { padding: 7px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--acento-suave); }
.tabla tbody tr:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.tabla .cod { font-family: var(--mono); font-weight: 600; color: var(--acento); }
.tabla .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.tabla .pac { font-weight: 500; }
.tabla .avance-td { white-space: nowrap; }

.avance {
  display: inline-block;
  width: 52px;
  height: 5px;
  background: var(--linea);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}

.avance-relleno { display: block; height: 100%; background: var(--acento); }
.avance-txt { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); margin-left: 7px; }

.pinta {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--linea-2);
  color: var(--apagado);
  white-space: nowrap;
}

.pinta.parcial   { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-suave); }
.pinta.completa  { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }
.pinta.entregada { color: #fff; background: var(--acento); border-color: var(--acento); }

/* ---------------------------------------------------------------- carga de resultados */

.cabecera-orden {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 12px 16px 14px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: end;
}

.cabecera-orden #volver { grid-column: 1 / -1; justify-self: start; padding: 0; }

.titulo-orden { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cod-grande {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acento);
  letter-spacing: .05em;
}

.pac-grande {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Cuando el paciente no está en el padrón local no es un título: es una nota. */
.pac-grande.sin-padron {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--apagado);
}

.titulo-orden .fino { margin: 2px 0 0; }

.toma { display: flex; gap: 12px; }
.toma label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.toma input { font-size: 14px; width: 148px; }

.examenes-pedidos {
  font-size: 13px;
  color: var(--tinta-2);
  background: var(--acento-suave);
  border-radius: 3px;
  padding: 9px 12px;
  margin: 0 0 16px;
  line-height: 1.6;
}

.seccion {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}

.seccion header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.seccion h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.subtitulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
  padding: 12px 14px 3px;
  border-bottom: 1px solid var(--linea);
}

/* Cinco columnas fijas: etiqueta · valor · unidad · referencia · botón.
   Un campo largo (texto libre, lista de antibióticos) ocupa de la 2 a la 4 y
   NO dibuja unidad ni referencia: si las dibujara, el botón caería a la fila
   siguiente y toda la sección quedaría desalineada. */
.campo {
  display: grid;
  grid-template-columns: minmax(140px, 260px) 132px 62px minmax(90px, 1fr) 32px;
  gap: 10px;
  align-items: center;
  padding: 4px 14px;
  border-bottom: 1px solid var(--linea);
}

.campo:last-child { border-bottom: 0; }
.campo:focus-within { background: var(--acento-suave); }

.campo-etq {
  font-size: 14px;
  color: var(--tinta);
  margin: 0;
  overflow-wrap: anywhere;
}

.campo.sangrado .campo-etq { padding-left: 18px; color: var(--tinta-2); }

.campo .valor {
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 5px 8px;
  width: 100%;
  margin: 0;
}

.campo .valor.larga {
  grid-column: 2 / 5;
  text-align: left;
  font-family: var(--sans);
  resize: vertical;
  min-height: 34px;
}

.campo-un, .campo-ref { font-family: var(--mono); font-size: 12px; color: var(--apagado); }
.campo-ref { overflow-wrap: anywhere; }
.campo-ref .previo { color: var(--acento); margin-left: 6px; }

.campo .marcar {
  border: 1px solid var(--linea-2);
  background: var(--blanco);
  color: var(--apagado);
  border-radius: 3px;
  width: 28px;
  height: 26px;
  line-height: 1;
  font-size: 15px;
  justify-self: end;
}

.campo .marcar:hover { border-color: var(--acento); color: var(--acento); }

.campo.no-realizado .valor { color: var(--apagado); border-style: dashed; }
.campo.no-realizado .marcar { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.campo.por-defecto .valor { color: var(--tinta-2); background: var(--acento-suave); }
.campo.fuera .valor {
  border-color: var(--alerta);
  color: var(--alerta);
  font-weight: 600;
  background: var(--alerta-suave);
}

.pie-carga {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 14px;
  box-shadow: 0 -4px 16px -12px rgba(22, 33, 31, .5);
}

.pie-carga .fino { margin: 0; }
.pie-carga .primario { margin: 0; }

/* ---------------------------------------------------------------- pantallas chicas */

@media (max-width: 780px) {
  .cabecera-orden { grid-template-columns: 1fr; }
  .toma { flex-wrap: wrap; }

  .campo { grid-template-columns: minmax(0, 1fr) 120px 32px; row-gap: 2px; }
  .campo .valor.larga { grid-column: 1 / 3; }
  .campo-un, .campo-ref { grid-column: 1 / -1; }
  .campo-un:empty, .campo-ref:empty { display: none; }

  .filtros input, .filtros select { max-width: none; width: 100%; }
  .filtros label { flex: 1 1 150px; }
}

.pie-carga .acompana { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.pie-carga select { font-size: 13.5px; padding: 5px 7px; max-width: 210px; }

.pie-carga #imprimir {
  padding: 9px 16px;
  border: 1px solid var(--acento);
  border-radius: 3px;
  background: var(--blanco);
  color: var(--acento);
  font-weight: 600;
}
.pie-carga #imprimir:hover { background: var(--acento-suave); }
.pie-carga #imprimir:disabled { opacity: .55; cursor: progress; }

/* ---------------------------------------------------------------- hoja imprimible

   En pantalla no se ve: existe solo para el diálogo de impresión del navegador.
   Los márgenes se ajustan con @page para el papel membretado que ya usa el
   laboratorio (3,7 cm arriba, medidos sobre el Excel actual). */

#impresion { display: none; }

/* Margen CERO a propósito, y el margen real como padding de la hoja.
   No es un capricho: mientras @page tenga margen, el navegador usa ese espacio para
   imprimir SU encabezado y SU pie —la fecha, el título de la pestaña, la URL y "1/2"—
   y no hay forma estándar de apagarlos desde CSS. Sin margen no le queda lugar y
   desaparecen. El margen del papel membretado lo pone .pagina con padding. */
@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body { background: #fff; margin: 0; padding: 0; }
  #pantalla-app > header,
  #pantalla-app main,
  #pantalla-login { display: none !important; }

  #impresion { display: block; }

  /* La hoja no hereda nada de la pantalla: sin fondos, sin bordes, sin radios.
     `.seccion`, `.titulo` y compañía existen también en la interfaz. */
  .pagina, .pagina * {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .pagina table { border: 0; }

  .pagina {
    page-break-after: always;
    break-after: page;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 9.5pt;
    color: #000;
    /* Solo los márgenes laterales. Los de arriba y abajo los ponen el thead y el tfoot
       de .pagina-marco, que es lo que los hace aparecer en TODAS las páginas. */
    padding: 0 1.6cm;
    box-sizing: border-box;
  }
  .pagina:last-child { page-break-after: auto; break-after: auto; }

  /* EL MARGEN DEL MEMBRETE, EN CADA PÁGINA
     ---------------------------------------
     Antes era el padding de arriba de .pagina, así que lo tenía la primera página y
     ninguna más: una hoja que se pasaba a una segunda arrancaba pegada al borde, encima
     del membrete impreso. Se había medido que ninguna de las 5.717 hojas de 2026 se
     pasaba — y después aparecieron los estudios agregados a mano, que sí la pasan.

     Un <thead> es lo único que el navegador repite solo al imprimir. Con la hoja montada
     sobre una tabla, el espacio del membrete y los datos del paciente viven en el thead
     y vuelven a salir arriba de cada página; el pie vive en el tfoot y hace lo mismo
     abajo. @page sigue en margen 0 para que el navegador no meta SU encabezado. */
  .pagina-marco { width: 100%; border-collapse: collapse; }
  .pagina-marco > thead { display: table-header-group; }
  .pagina-marco > tfoot { display: table-footer-group; }
  .pagina-marco > thead > tr > td.pagina-tope { padding: 3.7cm 0 0 0; }
  .pagina-marco > tbody > tr > td.pagina-cuerpo { padding: 0; vertical-align: top; }
  .pagina-marco > tfoot > tr > td.pagina-fondo { padding: 0 0 2cm 0; }

  .pagina-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1pt solid #000;
    padding-bottom: 5pt;
    margin-bottom: 8pt;
  }

  .pagina-pac .nombre { font-size: 12pt; font-weight: 700; }
  .pagina-pac .sub { font-size: 8.5pt; color: #333; }

  .pagina-datos { border-collapse: collapse; font-size: 8.5pt; }
  .pagina-datos td { color: #333; padding: 0 8pt 1pt 0; white-space: nowrap; }
  .pagina-datos th { text-align: left; padding: 0 0 1pt 0; white-space: nowrap; }

  table.pagina-bloque { width: 100%; border-collapse: collapse; margin-bottom: 9pt; break-inside: avoid; }

  .pagina-bloque .titulo th {
    text-align: left;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5pt 0 2pt;
    border-bottom: .5pt solid #888;
  }

  .pagina-bloque .cabecera th {
    font-size: 7pt;
    font-weight: 400;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2pt 0;
    text-align: left;
  }
  .pagina-bloque .cabecera th:nth-child(2) { text-align: right; }

  .pagina-bloque td { padding: 1.6pt 0; vertical-align: top; }
  .pagina-bloque .etq { width: 40%; }
  .pagina-bloque .etq.sangrado { padding-left: 10pt; }
  .pagina-bloque .val { width: 16%; text-align: right; font-weight: 700; padding-right: 10pt; white-space: nowrap; }
  .pagina-bloque .val.largo { text-align: left; font-weight: 400; white-space: normal; }
  .pagina-bloque .un { width: 13%; color: #444; font-size: 8.5pt; }
  .pagina-bloque .ref { color: #444; font-size: 8.5pt; }
  .pagina-bloque tr.sub td {
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #444;
    padding-top: 4pt;
  }

  .pagina-pie {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 14pt;
    padding-top: 5pt;
    font-size: 8.5pt;
  }
  .pagina-pie .ref-hoja { color: #777; font-size: 7.5pt; }
}

/* ---------------------------------------------------------------- hojas y frecuentes */

.grupo { margin-bottom: 22px; }

.grupo-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 0 2px 8px;
  border-bottom: 2px solid var(--acento);
  margin-bottom: 10px;
}

.grupo-cab h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acento);
}

.grupo-muestra { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.grupo-muestra select { font-size: 13.5px; padding: 4px 7px; min-width: 170px; }

/* La celda de botones mantiene juntos "respuestas frecuentes" y "no realizado". */
.campo .botones { display: flex; gap: 4px; justify-self: end; }

.campo .respuestas {
  border: 1px solid var(--linea-2);
  background: var(--blanco);
  color: var(--apagado);
  border-radius: 3px;
  width: 24px;
  height: 26px;
  line-height: 1;
  font-size: 12px;
}
.campo .respuestas:hover { border-color: var(--acento); color: var(--acento); }

.frecuentes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 0 8px;
}

.chip {
  border: 1px solid var(--linea-2);
  background: var(--papel);
  color: var(--tinta-2);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.chip:hover { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.chip.nuevo { border-style: dashed; color: var(--acento); }
.chip-x { color: var(--linea-2); font-size: 13px; padding: 0 1px; }
.chip-x:hover { color: var(--error); }

/* El nombre a mano, cuando el paciente no está en el padrón de esta computadora. */
#nombre-manual {
  font-size: 16px;
  font-weight: 600;
  padding: 5px 9px;
  width: 100%;
  max-width: 420px;
  border-style: dashed;
  border-color: var(--alerta);
  background: var(--alerta-suave);
}
#nombre-manual::placeholder { font-weight: 400; color: var(--alerta); }

/* El botón de respuestas se distingue cuando ya hay alguna guardada. */
.campo .respuestas.con-lista { border-color: var(--acento); color: var(--acento); }

/* ---------------------------------------------------------------- cabeceras pegadas

   La barra de navegación y los datos del paciente se quedan arriba al bajar por el
   formulario: en una orden de 40 campos, saber a quién se le está cargando importa
   tanto como el campo que se está escribiendo. */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
}

.cabecera-orden {
  position: sticky;
  top: 52px;              /* justo debajo de la barra */
  z-index: 15;
  box-shadow: 0 4px 14px -12px rgba(22, 33, 31, .7);
}

/* Al quedar pegada ocupa menos: el botón de volver se corre al lado del código. */
@media (min-width: 781px) {
  .cabecera-orden {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 9px 16px 10px;
  }
  .cabecera-orden #volver {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    padding-right: 14px;
    border-right: 1px solid var(--linea);
    white-space: nowrap;
  }
  .pac-grande { font-size: 17px; }
}

/* Los títulos de sección también, para no perder de vista en qué hoja se está. */
.grupo-cab {
  position: sticky;
  top: 132px;
  z-index: 10;
  background: var(--papel);
  padding-top: 8px;
}

/* El QR de la hoja impresa: arriba a la derecha, al lado del bloque de datos. */
@media print {
  .pagina-qr { flex: 0 0 auto; align-self: flex-start; margin-left: 10pt; }
}

/* La lista de trabajo entra sin scroll lateral: lo que se mira —código, paciente,
   avance y estado— tiene columna propia, y el contexto (empresa, área, transcripción,
   centro) va en una segunda línea que se enciende con "más datos". */
.tabla th, .tabla td { white-space: nowrap; }
.tabla .pac { white-space: normal; min-width: 180px; }
.tabla .med { white-space: normal; max-width: 150px; font-size: 13.5px; }
.tabla td:last-child { text-align: right; }

.tabla .contexto {
  font-size: 11.5px;
  color: var(--apagado);
  font-weight: 400;
  line-height: 1.35;
  margin-top: 1px;
  white-space: normal;
}

.mas-datos {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  font-size: 13.5px;
  color: var(--tinta-2);
  cursor: pointer;
  white-space: nowrap;
}
.mas-datos input { margin: 0; }

/* La cabecera de la tabla se queda arriba, debajo de la barra de navegación.
   Para que `sticky` funcione contra el scroll de la página, el contenedor NO puede
   tener overflow: por eso solo se le pone scroll lateral en pantallas angostas, donde
   la tabla no entra de ninguna manera. */
.tabla th { top: 52px; }
.tabla-scroll { overflow: visible; }

@media (max-width: 900px) {
  .tabla-scroll { overflow-x: auto; }
  .tabla th { position: static; }
}

/* ---------------------------------------------------------------- estudios agregados

   Lo que el médico pide en "Observaciones" de ASSI —un campo que el export no trae—.
   Se agrega a mano, desde el catálogo o escrito entero, a la hoja que corresponda. */

.agregar { padding: 4px 2px 0; }

.agregar-caja {
  background: var(--blanco);
  border: 1px dashed var(--linea-2);
  border-radius: 4px;
  padding: 12px 14px 14px;
  margin-top: 6px;
}

.agregar-caja .fino { margin: 0 0 8px; }

.buscar-estudio { width: 100%; max-width: 420px; font-size: 14px; }

.hallazgos { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.hallazgos .chip[disabled] { opacity: .5; cursor: default; }

.libre-nuevo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}

.libre-nuevo input { font-size: 13.5px; }
.libre-nuevo .nl-etiqueta { flex: 2 1 190px; }
.libre-nuevo .nl-valor { flex: 1 1 120px; }
.libre-nuevo .nl-unidad { flex: 0 1 90px; }
.libre-nuevo .nl-referencia { flex: 1 1 150px; }

.seccion.libres { border-style: dashed; }

.campo.libre { grid-template-columns: minmax(140px, 260px) 132px 62px minmax(90px, 1fr) 32px; }
.campo.libre input { font-size: 13.5px; margin: 0; }
.campo.libre .campo-etq-libre { font-family: var(--sans); }
.campo.libre .campo-un-libre,
.campo.libre .campo-ref-libre { font-family: var(--mono); font-size: 12px; }

/* Un analito del catálogo que se sumó a mano: se distingue del que pidió el médico. */
.campo.agregado .campo-etq::before {
  content: "+";
  color: var(--acento);
  font-weight: 700;
  margin-right: 5px;
}

.quitar-estudio {
  border: 0;
  background: none;
  color: var(--linea-2);
  font-size: 14px;
  padding: 0 3px;
  line-height: 1;
}
.quitar-estudio:hover { color: var(--error); }