/* src/web/publico/laboratorio.css — EleMa™ LaboSuite. Hereda las tablas centradas de estilo.css.
   Regla de la casa (Mario, 18 y 25/9/2026): todo va CENTRADO, nada pegado a la izquierda adentro de un cuadrito.
   Los colores son los del tema (--alerta, --error, --papel), así cambian solos en el oscuro; interfaz.test.ts
   no deja usar una variable que nadie declara. */
.lab-bandera { font-weight: 700; margin-left: .35rem; }
.lab-bandera.fuera { color: var(--alerta); }
.lab-bandera.critica { color: var(--papel); background: var(--error); border-radius: 4px; padding: 0 .3rem; }
.lab-valor.fuera, .lab-valor.critica { font-weight: 700; }
.lab-captura input, .lab-captura select { width: 100%; min-width: 7rem; text-align: center; text-align-last: center; }
.lab-captura textarea { width: 100%; min-height: 3rem; text-align: center; }
/* Los rangos de un parámetro (Exámenes) son NUEVE columnas: con los 7rem de la captura medían ~1150 px y en el
   cuadro de 900 px «Crítico alto», «Texto» y «Quitar» quedaban escondidos a la derecha (medido en Edge a 1280). */
.lab-rangos input { min-width: 4rem; }
.lab-rangos select { min-width: 7rem; }   /* «Masculino» y la flechita: con 4rem se leía «Masc» */
.lab-rangos td { padding: 6px 4px; }
.lab-anterior { font-size: .85em; opacity: .75; }
.lab-examen { margin-bottom: 1rem; }
.lab-examen header { display: flex; justify-content: center; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; text-align: center; }
.lab-lista-examenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .25rem .75rem; }
.lab-lista-examenes label { display: flex; gap: .4rem; align-items: baseline; justify-content: center; text-align: center; }
.lab-grafica { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
.lab-grafica .linea { fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.lab-grafica .punto { fill: currentColor; }
.lab-grafica .punto.fuera { fill: var(--alerta); }
.lab-grafica text { font-size: 11px; fill: currentColor; }
.lab-consentimiento { max-height: 9rem; overflow: auto; font-size: .9em; padding: .5rem; border: 1px solid var(--borde); border-radius: 6px; text-align: center; }
.lab-demo { border: 1px dashed var(--alerta); padding: .5rem .75rem; border-radius: 6px; text-align: center; }
/* Un renglón flex (casilla con su frase, botones) o un texto, al centro de su columna. */
.lab-centrado { justify-content: center; text-align: center; }
/* Los pacientes que calzan, en la orden nueva: «nombre · cédula · nacimiento» no cabe en un botón de 320 px y
   `.boton` no parte renglón, así que el texto se salía por los dos lados (medido en Edge a 375). Aquí se envuelve. */
.lab-pacientes .boton { white-space: normal; }
/* La banda del respaldo (parte B): arriba de todo, como la de la prueba gratis. */
.lab-banda { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; text-align: center; background: var(--alerta-suave); }
.lab-banda.normal { background: var(--alerta-suave); }
.lab-banda.alerta { background: var(--alerta-suave); font-weight: 600; }
.lab-banda.suave { background: var(--papel); border-bottom: 1px solid var(--alerta-suave); }

/* ======================================================================================
   FRONTEND VERSIÓN 3 · FASE 7 (7/10/2026) — SOLO LA CARA. Las cuatro pantallas llevan `.lab`.
   Usa la escala de diseno.css (espacios, radios, letra) y la pieza `.dn-fichas`
   (diseno.css): en el teléfono cada renglón de una tabla es una tarjeta, con el
   MISMO DOM —por él encuentra el recorrido «Abrir» y la columna «Resultado»—.
   No cambia ningún texto, ningún botón ni lo que se manda; la hoja de resultados
   (resultados.css) no se toca.
   ====================================================================================== */
.lab { gap: var(--e-4); }
.lab > .dn-cabecera { margin-bottom: 0; }

/* LOS FILTROS, COMPACTOS: los estados al centro, y debajo buscar y las fechas en un renglón
   (la rejilla repartía el ancho en tres partes iguales). «Por cobrar» no es un estado de la
   orden sino su cobro: va apartado de los demás, con su raya. */
.lab .dn-segmentos { align-self: center; justify-content: center; }
.lab-estados > [data-k="porCobrar"] { margin-left: var(--e-3); position: relative; }
.lab-estados > [data-k="porCobrar"]::before {
  content: ""; position: absolute; left: calc(var(--e-3) / -2 - 1px); top: 20%; bottom: 20%; border-left: 1px solid var(--borde-fuerte);
}
.lab .fila-filtros { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: var(--e-2) var(--e-3); }
.lab .fila-filtros > .campo:has(input[type="search"]),
.lab .fila-filtros > input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.lab .fila-filtros input[type="search"] { width: 100%; }

/* LA ORDEN ABIERTA: de quién es, en su franja; y los botones, cada uno con los suyos. */
.lab-titulo { justify-content: center; }
.lab-titulo > h3 { margin: 0; font: 650 20px/1.2 var(--fuente-titulo); }
.lab-contexto {
  margin: 0; padding: var(--e-3) var(--e-4);
  background: var(--papel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-grande);
  line-height: 1.6;
}
/* LOS BOTONES DE LA ORDEN, EN UN SOLO CUADRO (Mario, 7/10/2026, al ver «Cobro» en una cajita y «Entrega»
   en otra: «ese cobro que está en otro cuadrito se ve feo así, por qué no va todo junto … En un solo
   cuadrito o de alguna forma q se vea mejor estéticamente»). UNA tarjeta, al centro y del ancho de lo que
   trae. Adentro los grupos siguen en su orden —Cobro, Entrega, La orden—, sin cajita propia y sin rótulo
   a la vista (su nombre es para el lector de pantalla): los separa una raya fina, que va en el grupo que
   SIGUE (así el primero no lleva ninguna, y uno que no está no deja raya suelta). Los grupos no se parten
   de renglón: si falta ancho, se parten los botones de adentro. */
.lab-acciones {
  align-self: center; max-width: 100%;
  display: flex; justify-content: center; align-items: stretch;
  padding: var(--e-3) var(--e-2);
  background: var(--papel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
}
.lab-grupo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2); min-width: 0; padding: 0 var(--e-4); }
.lab-grupo + .lab-grupo { border-left: 1px solid var(--borde); }

/* CADA EXAMEN DICE SU ESTADO CON SU FILO: por capturar, por validar, en corrección o validado.
   Lo que dice sigue siendo el texto de la cabeza; el color solo lo acompaña. */
.lab-examen { margin-bottom: 0; border-left-width: 4px; }
.lab-examen.por-capturar { border-left-color: var(--borde-fuerte); }
.lab-examen.por-validar, .lab-examen.correccion { border-left-color: var(--alerta); }
.lab-examen.validado { border-left-color: var(--exito); }
.lab-examen header strong { font: 650 var(--t-titulo) var(--fuente-titulo); }

@media (max-width: 700px) {
  /* Todo lo que se toca mide al menos 40 px. */
  .lab .boton, .lab .dn-segmentos button,
  .lab input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .lab select { min-height: 40px; }
  .lab .boton { display: inline-flex; align-items: center; justify-content: center; }
  .lab > .dn-cabecera .dn-acciones { width: 100%; }
  .lab > .dn-cabecera .dn-acciones > .boton { flex: 1 1 auto; }
  .lab .dn-segmentos { align-self: stretch; }
  .lab .dn-segmentos button { flex: 1 1 auto; }
  .lab-estados > [data-k="porCobrar"] { margin-left: 0; }
  .lab-estados > [data-k="porCobrar"]::before { content: none; }
  .lab .fila-filtros > .campo { flex: 1 1 130px; }
  .lab .fila-filtros > .campo:has(input[type="search"]) { flex: 1 1 100%; max-width: none; }
  /* En el teléfono, el mismo cuadro a lo ancho: un grupo debajo del otro («Cobrar» de primero), con la raya
     acostada, y los botones de dos en dos en renglones parejos —el que queda solo, a todo el ancho—. Un
     texto largo («Mandar por WhatsApp» a 320) se parte en dos renglones y su vecino crece con él. */
  .lab-acciones { align-self: stretch; flex-direction: column; padding: 0 var(--e-3); }
  .lab-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; padding: var(--e-3) 0; }
  .lab-grupo + .lab-grupo { border-left: 0; border-top: 1px solid var(--borde); }
  .lab-grupo > .boton { white-space: normal; text-align: center; }
  .lab-grupo > .boton:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* EL «GUARDAR» DE UN EXAMEN, SIEMPRE A LA VISTA: con 19 parámetros (un examen general de orina) son
     19 tarjetas y los botones quedaban a 3,900 px. Van pegados abajo mientras se recorre su examen, de
     borde a borde de la tarjeta (los márgenes negativos son el relleno del cuerpo: 14 px y 16 px), y al
     llegar al fondo descansan en su sitio. Son los mismos botones, con su `boton()`: solo cambia dónde se
     ven. −10 px es el relleno de `main` en el teléfono: con 0 quedaba una rendija debajo. */
  .lab-examen > .cuerpo > .acciones {
    position: sticky; bottom: -10px; z-index: 2;
    margin: 0 calc(-1 * var(--e-4)) -14px;
    padding: var(--e-2) var(--e-3);
    background: var(--papel);
    border-top: 1px solid var(--borde);
    border-radius: 0 0 calc(var(--radio-grande) - 1px) calc(var(--radio-grande) - 1px);
  }
  /* La captura, una tarjeta por parámetro: el resultado al lado de su rótulo y el comentario a lo ancho. */
  .envoltorio-tabla.dn-fichas .lab-captura td[data-papel="monto"] { align-items: center; justify-content: flex-end; }
  .envoltorio-tabla.dn-fichas .lab-captura td[data-papel="monto"]::before { margin-right: auto; }
  .envoltorio-tabla.dn-fichas .lab-captura td[data-papel="monto"] :is(input, select) { flex: 0 1 11rem; width: auto; min-width: 0; }
  .envoltorio-tabla.dn-fichas .lab-captura td.lab-anterior { opacity: 1; font-size: 13px; }
}