/* =====================================================================
   Laboratorio - Pantallas chicas
   Lo que cambia cuando la ventana no da: la tabla se vuelve tarjetas.

   Parte de la hoja de estilos del Laboratorio, que se sirve en varios archivos
   enlazados en orden desde src/views/_estilos.php. El orden importa:
   la cascada es la concatenacion de todos ellos.
   ===================================================================== */
/* --------------------------------------------------------------------
   Pantallas chicas
   -------------------------------------------------------------------- */
/* En pantalla ancha el orden se elige clickeando el encabezado de la tabla, no
   con un selector. El selector sigue existiendo en el formulario -es lo que
   lleva el orden actual cuando filtras- pero no se muestra: dos controles
   visibles para lo mismo terminan contradiciendose.

   Va ANTES de la media query que lo muestra: las dos reglas tienen la misma
   especificidad, asi que gana la ultima que se lee. Al reves, el selector no
   apareceria nunca en el telefono. */
.solo-angosto { display: none; }
.solo-angosto-inline { display: none; }
.ubicacion-movil { display: none; }

/* El boton de sacar la foto. El campo de archivo real esta oculto y este label
   hace de boton: un <label for> abre el selector igual que el campo, y de paso
   sigue siendo alcanzable con el teclado.

   Ancho completo y alto comodo porque se aprieta con el pulgar, parado frente a
   una maquina y probablemente con una mano sola. */
.btn-camara {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Ventana angosta pero todavia con tabla: la columna del UID queda fija

   Entre 700 y 980px la tabla sigue siendo tabla y se scrollea de costado.
   Sin esto, al correrse para ver Estado se pierde de vista de QUE maquina
   es cada fila, que es el unico dato que permite orientarse. Fijandola,
   el UID viaja con el scroll y las otras columnas pasan por debajo.

   El fondo es obligatorio: una celda sticky sin fondo deja ver el texto
   que pasa por atras.
   -------------------------------------------------------------------- */
/* El UID es la referencia principal para ubicar una reparacion. Estas dos
   lineas lo separan visualmente del REQUI y de la ZONA sin sumar color ni
   ruido a cada fila. En telefono la tabla pasa a tarjetas y no hacen falta. */
@media (min-width: 701px) {
  .tabla-cards th:nth-child(4),
  .tabla-cards td:nth-child(4) {
    border-left: 2px solid var(--acento);
    border-right: 2px solid var(--acento);
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .tabla-cards th:nth-child(4),
  .tabla-cards td:nth-child(4) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--fondo-panel);
    box-shadow: 1px 0 0 var(--borde);
  }

  .tabla-reparaciones th:nth-child(4) { background: var(--fondo-suave); }
  .tabla-reparaciones th:nth-child(4).th-activa { background: var(--acento-suave); }

  .tabla-cards tr:hover td:nth-child(4) { background: var(--fondo-hover); }
}

@media (max-width: 700px) {
  /* Las tres vistas de TOTAL FS caben en una sola franja táctil; el total y
     la mayor demora conservan la suya sin agrandar la tarjeta. */
  .resumen-total-fs {
    display: block;
    padding: 6px 9px;
  }
  .resumen-total-fs .resumen-cifra {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
    width: 100%;
  }
  .resumen-total-fs .resumen-num { font-size: 1.9rem; }
  .resumen-total-fs .resumen-rot { display: contents; }
  .resumen-total-fs .resumen-titulo {
    align-self: center;
    font-size: .85rem;
    line-height: 1.25;
  }
  .resumen-total-fs .resumen-desglose {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 2px 0 0;
  }
  .resumen-total-fs .resumen-punto { display: none; }
  .resumen-total-fs .resumen-desglose a {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 2px 3px;
    white-space: normal;
    text-decoration: none;
  }
  .resumen-total-fs .resumen-desglose-num {
    font-size: .95rem;
    line-height: 1;
    color: var(--acento);
  }
  .resumen-total-fs .resumen-desglose-etq {
    font-size: .72rem;
    line-height: 1.2;
    color: var(--acento);
  }
  .resumen-total-fs .resumen-detalle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid var(--borde);
  }
  .resumen-total-fs .resumen-peor {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .resumen-total-fs .resumen-peor-caso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
  }
  .resumen-total-fs .resumen-peor-etiqueta {
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 400;
  }
  .resumen-total-fs .resumen-peor-dias { white-space: nowrap; }
  .resumen-total-fs .resumen-cola { align-self: flex-start; }

  /* --- Bitácora: el área con desplegable ----------------------------
     Los cuatro chips de área ocupaban dos renglones antes de la primera
     entrada. En el teléfono se elige con un desplegable, igual que el
     tipo de entrada. */
  .bit-area-chips  { display: none; }
  .bit-area-select { display: inline-block; }

  /* --- Menú hamburguesa ---------------------------------------------
     La barra de navegación se envolvía a dos renglones y quedaba
     desprolija. Ahora, en el teléfono:

       - SIN JavaScript: el menú queda visible, apilado. Todo alcanzable,
         nada de hamburguesa. Es el fallback razonable.
       - CON JavaScript (fs.js le pone la clase `js` al <html>): aparece
         el botón, el menú se colapsa, y se abre al tocarlo.

     Cada bloque ocupa la fila entera con `flex: 0 0 100%`: sin eso, la
     nav —que trae `flex: 1` de su regla base— se quedaba AL COSTADO de la
     marca en vez de bajar. Ese era el bug de la versión anterior.

     Y el primer renglón —marca, sala, usuario, campanita y hamburguesa—
     es una caja propia, .cabecera-barra, que acá se enciende y no se
     envuelve: ver armazón. */
  /* Acá la barra NO se queda pegada arriba. Con el menú abierto ocupa casi
     media pantalla, y clavada arriba dejaría el listado mirando por una
     rendija. Al no pegarse, lo que se pega dentro del contenido vuelve a
     hacerlo contra el borde de la ventana: fs.js ve que la barra no quedó
     pegada y deja --alto-cabecera en cero solo.

     La especificidad tiene que empatarle a `html.js .cabecera` de armazón y
     ganarle por orden, así que lleva el mismo `html.js` adelante. fs.js
     también lo ve: le pregunta al navegador si la barra quedó pegada, no
     por el ancho de la ventana. */
  html.js .cabecera { position: relative; }

  .cabecera-int {
    padding: 8px 14px;
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
  }

  /* El primer renglón deja de ser parte del envoltorio de la cabecera y pasa
     a ser un renglón propio que NO se corta: ocupa la fila entera y adentro
     no se envuelve. Lo que no entra se achica. */
  .cabecera-barra {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 10px;
    min-width: 0;
  }

  /* Quién cede cuando no entra todo:

     Cede el nombre de quien está trabajando, y nadie más. Se corta con
     puntos suspensivos, que es barato: el nombre entero sigue en el `title`
     y a un toque de distancia, en el perfil. La marca son dos letras y la
     sala es el dato por el que todo esto se mudó al lado de la marca; si se
     cortan, no queda nada que leer.

     Antes la marca era la que se estiraba (`flex: 1 1 0`) y por eso a un
     usuario de una sola sala le quedaba un hueco entre el FS y la sala: el
     nombre del sistema se comía todo el lugar que sobraba. Ahora ese lugar
     se lo lleva el margen automático de la pastilla del usuario, que empuja
     al usuario, la campanita y la hamburguesa contra el borde derecho y deja
     al FS y a la sala pegados a la izquierda. */
  .marca { flex: 0 0 auto; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }

  /* Con el menu colapsado no quedaba ninguna senal de con que cuenta se esta
     trabajando. Va en la barra, al lado de la campanita, y lleva al perfil.
     El nombre va entero; si es muy largo se corta con puntos y el `title`
     tiene el completo con el rol. */
  .usuario-movil {
    display: block;
    order: 1;
    /* El único que se achica del primer renglón, y el que empuja lo que
       viene después contra el borde derecho. Cuando no sobra lugar el margen
       automático vale cero y la pastilla cede: no hay que elegir. */
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 0;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .usuario-movil:hover { text-decoration: none; opacity: .85; }
  .usuario-movil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* El nombre ya esta en la barra; repetirlo dentro del menu abierto sobra. */
  .cabecera-der .usuario { display: none; }

  .actividad-encabezado { order: 2; margin-right: 2px; }

  .nav { order: 4; }
  .form-ir { order: 5; }
  .cabecera-der { order: 6; }

  /* Apilado a fila entera. Vale para el fallback y para el menú abierto. */
  .nav {
    flex: 0 0 100%;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .nav a { padding: 11px 12px; font-size: 1rem; }

  /* Acá el menú es una pila, no una fila: la barra de la sección abierta va
     al costado y no abajo, donde se leería como la línea que separa un
     renglón del siguiente. */
  .nav a.activo { box-shadow: inset 3px 0 0 var(--acento-banda); }

  /* La sala se queda al lado de la marca también acá, que es donde más falta
     hacía: con el menú cerrado no se veía en ningún lado. Y se lleva entero
     el lugar que necesita: es lo último que uno quiere leer a medias. */
  .sala-marca { flex: 0 0 auto; margin-left: -6px; padding: 0 9px; }
  .sala-fija,
  .form-sala select { font-size: .98rem; letter-spacing: .09em; }

  .form-ir { flex: 0 0 100%; margin: 4px 0 8px; }
  .form-ir input { width: 100%; box-sizing: border-box; }

  .cabecera-der {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: flex-start;   /* controles a su tamaño natural, no estirados */
    gap: 10px;
    padding-bottom: 10px;
  }
  .cabecera-der .usuario { text-align: left; }
  /* En pantalla chica un panel anclado al botón puede desbordar a un lado.
     Se usa el ancho seguro completo, centrado debajo de la cabecera. */
  .actividad-panel {
    position: fixed;
    z-index: 110;
    top: 62px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 76px);
  }

  /* Con JavaScript: el botón manda. Colapsa el menú y lo abre la clase
     `menu-abierto`, que fs.js pone y saca en la barra. */
  html.js .nav-toggle { display: block; order: 3; padding: 8px 4px; }
  html.js .nav,
  html.js .form-ir,
  html.js .cabecera-der { display: none; }
  html.js .menu-abierto .nav,
  html.js .menu-abierto .form-ir,
  html.js .menu-abierto .cabecera-der { display: flex; }

  .contenido { padding: 16px 14px 34px; }
  .panel { padding: 14px; }
  .tabla-scroll { margin: 0 -14px; padding: 0 14px; }
  .fila-campos .campo-ancho { grid-column: span 1; }
  .titulo-ficha { flex-direction: column; gap: 10px; }

  /* La cabecera de la ficha de reparación: sin los puntos de separación.
     A lo ancho de un teléfono el segundo renglón se parte en dos o tres, y
     un punto que queda colgando al final de un renglón se lee como basura.
     Cada pieza ya se distingue sola por su color y su letra —la marca en
     negrita, el estado en condensada de color, los días en mono—, así que
     el separador sólo hacía falta cuando todo entraba en una línea. En su
     lugar, más aire. */
  .ficha-cab .ficha-sep { display: none; }
  .ficha-cab-como { gap: 4px 14px; }

  /* Las barras verticales tampoco sobreviven al envolver: la del tramo que
     arranca un renglon nuevo queda colgando a la izquierda, sin nada que
     separar. Acá los tramos se apilan y la separación la hace el espacio. */
  .ficha-cab-quien { align-items: baseline; gap: 2px 12px; min-height: 0; }
  .ficha-quien-uid { padding-right: 0; flex: 0 0 100%; }
  .ficha-tramo { padding: 0; border-left: 0; }
  .ficha-prioridad { padding-left: 0; }

  /* --- La via de una parte, de costado -------------------------------
     Seis hitos a lo ancho de 375px dan 62px por columna, y «AL LABORATORIO»
     no entra en 62px. Aca la via se para: los hitos bajan en fila y la
     linea corre por la izquierda.

     No es la misma grilla angostada, es otro dibujo, y por eso la grilla
     se deshace del todo. Las medias lineas de ::before y ::after se
     vuelven verticales -misma logica, el hito pinta la de abajo y el
     anterior la de arriba- y el rotulo y la fecha se van al costado, en
     un renglon, que es donde ahora hay lugar de sobra. */
  .viaje {
    display: block;
    margin: 12px 0 10px;
  }

  .viaje-hito {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 0 0 12px 24px;
    text-align: left;
    min-height: 22px;
  }
  .viaje-hito:last-child { padding-bottom: 0; }

  .viaje-hito::before,
  .viaje-hito::after {
    top: auto;
    left: 6px;
    right: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 2px dashed var(--borde-medio);
  }
  .viaje-hito::before { top: 0; bottom: 50%; }
  .viaje-hito::after  { top: 50%; bottom: 0; }
  .viaje-hito:first-child::before,
  .viaje-hito:last-child::after { content: none; }

  .viaje-hecho::after,
  .viaje-malo::after,
  .viaje-hecho + .viaje-hito::before,
  .viaje-malo  + .viaje-hito::before {
    border-top: 0;
    border-left-style: solid;
    border-left-color: var(--verde);
  }

  .viaje-punto { top: 50%; left: 0; transform: translateY(-50%); }

  .viaje-rotulo { display: inline; font-size: .82rem; }
  .viaje-fecha  { display: inline; font-size: .78rem; min-height: 0; }

  /* ------------------------------------------------------------------
     En telefono la tabla deja de ser tabla y cada fila es una tarjeta

     Doce columnas en 375px de ancho son ilegibles se scrollee como se
     scrollee: para ver el Estado hay que arrastrar hasta perder de vista
     el UID. Apilado, cada reparacion entra entera en la pantalla.

     El nombre de cada dato sale de data-col, el mismo atributo que la
     fila ya trae: no hay un segundo marcado que mantener en paralelo, y
     si alguien agrega una columna aparece sola en la tarjeta.
     ------------------------------------------------------------------ */
  .tabla-cards, .tabla-cards tbody, .tabla-cards tr, .tabla-cards td {
    display: block;
    width: auto;
  }

  /* Los encabezados se van, pero no con display:none: se sacan de la vista
     dejandolos accesibles al lector de pantalla. */
  .tabla-cards thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Cada reparación se lee como una tarjeta bien despegada del fondo: borde de
     máximo contraste (blanco fuerte sobre el tema oscuro, casi negro sobre el
     claro), sombra y aire entre una y otra, para que en el teléfono se
     distinga de un vistazo dónde empieza y termina cada una. */
  /* La tarjeta es una columna flex: así el UID puede saltar al frente con
     `order`, sin cambiar el orden de las columnas en la tabla de escritorio. */
  .tabla-cards tr {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--borde-contraste);
    border-radius: 12px;
    background: var(--fondo-panel);
    box-shadow: var(--sombra);
    padding: 12px 14px;
    margin-bottom: 14px;
  }

  /* Sin resaltado de fila: en una tarjeta no aporta, y en pantalla tactil el
     :hover se queda pegado despues de tocar.

     Va con `tbody tr` y no solo `tr` para igualar la especificidad de la regla
     base .tabla tbody tr:hover (0,2,2). Con `.tabla-cards tr:hover` (0,2,1)
     perdia, y las media queries no suman especificidad: la regla existia y no
     hacia nada. */
  .tabla-cards tbody tr:hover { background: var(--fondo-panel); }

  .tabla-cards td {
    border: 0;
    padding: 2px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    text-align: left;
  }

  /* Celdas que en escritorio van centradas (.centro) en la tarjeta se leen
     a la izquierda como todas las demas filas clave-valor. */
  .tabla-cards td.centro,
  .tabla-cards .centro {
    text-align: left;
    justify-content: flex-start;
  }

  /* La etiqueta del dato (Vendor, Modelo, …) en negrita, para que se lea como
     el nombre del campo y no como texto tenue de relleno. */
  .tabla-cards td::before {
    content: attr(data-col);
    flex: 0 0 6.5rem;
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
  }

  /* La fecha, en negrita también (etiqueta y valor). */
  .tabla-cards td[data-col="Fecha FS"],
  .tabla-cards td[data-col="Fecha OK"] { font-weight: 600; }

  /* El numero de orden no aporta nada apilado: la lista ya se ve. */
  .tabla-cards .celda-orden { display: none; }

  /* El UID encabeza la tarjeta, grande y sin etiqueta: es el titulo. `order: -1`
     lo lleva al frente aunque en la tabla vaya en la cuarta columna. */
  .tabla-cards .uid-fuerte {
    order: -1;
    font-size: 1.15rem;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-cards .uid-fuerte::before { content: none; }
  .tabla-cards .uid-fuerte a { color: var(--acento); }

  /* En una tarjeta el estado se lee bastante más abajo. Esta etiqueta acompaña
     al UID para decir enseguida dónde está el caso abierto; solo aparece en
     teléfono, porque la fila de escritorio ya tiene su columna Estado. */
  .tabla-cards .ubicacion-movil {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35;
    vertical-align: 1px;
    white-space: nowrap;
  }
  .tabla-cards .ubicacion-sala { background: var(--gris-bg); color: var(--texto-suave); }
  .tabla-cards .ubicacion-laboratorio { background: var(--acento-suave); color: var(--acento); }

  /* En la tarjeta sobra el ancho: el motivo va entero, en varias lineas. */
  .tabla-cards .celda-motivo {
    max-width: none;
    overflow: visible;
    white-space: normal;
  }

  /* Y las palabras larguisimas se cortan donde sea.

     white-space: normal parte por los espacios, asi que un dato sin ninguno
     -un codigo de serie, un modelo largo, una FALLA tipeada de corrido- se
     iba de la tarjeta. Y no se quedaba ahi: el documento pasaba a medir 428 px
     de ancho en una pantalla de 375, y como el boton flotante "+ Nueva
     reparacion" se ancla al borde derecho de ESE ancho, terminaba 31 px afuera
     con el texto cortado. Un dato mal tipeado se llevaba puesto el boton
     principal de la pantalla.

     anywhere y no break-word: los dos parten la palabra al pintar, pero solo
     anywhere achica tambien el ancho minimo de la celda, que es lo que hace
     que la tabla deje de empujar. */
  .tabla-cards td { overflow-wrap: anywhere; }

  /* El scroll horizontal ya no tiene sentido, y sus margenes negativos
     comerian el borde de las tarjetas. */
  .tabla-cards-cont { overflow-x: visible; margin: 0; padding: 0; }

  /* En el telefono el encabezado del panel es el control que lo abre: cursor
     de mano, la flecha a la vista y el mismo circulo azul que los grupos de
     REQUI, para que se lea como algo que se toca y no como un titulo mas. */
  .panel-plegable > summary { cursor: pointer; }
  .panel-plegable > summary .panel-cab,
  .panel-plegable[open] > summary { margin-bottom: 12px; }
  .panel-plegable:not([open]) > summary { margin-bottom: 0; }

  .panel-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    background: var(--fondo-panel);
    color: var(--acento);
    font-size: .85rem;
    line-height: 1;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  .panel-plegable > summary:hover .panel-flecha,
  .panel-plegable > summary:focus-visible .panel-flecha {
    border-color: var(--acento);
    background: var(--acento-suave);
  }

  .panel-plegable[open] > summary .panel-flecha { transform: scaleY(-1); }

  /* --- Las tablas de la ficha de una maquina ------------------------
     Las dos usan el mismo apilado. La de REQUIs era la que peor entraba:
     con tres nombres de parte en una celda, esa columna quedaba de seis
     caracteres de ancho y el UID caia fuera de la pantalla. */

  /* El numero de REQUI encabeza la tarjeta, como el UID en el listado. */
  .tabla-requis .celda-requi {
    order: -1;
    font-size: 1.15rem;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--borde);
  }
  .tabla-requis .celda-requi::before { content: none; }

  /* Aca el UID es un dato mas de la tarjeta, no su titulo: se le saca el
     trato que le da el listado de reparaciones, donde si lo es. */
  .tabla-requis td .uid-fuerte {
    order: 0;
    font-size: 1rem;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* Los otros UID de la misma requisicion cuelgan debajo, no al costado.
     Sin sangria: con flex-basis 100% mas un margen izquierdo, la linea medía
     mas que la tarjeta y aparecia scroll horizontal. */
  .tabla-requis td[data-col="UID"] { flex-wrap: wrap; }
  .tabla-requis .requi-otros-uid { flex: 1 0 100%; margin-left: 0; }

  /* El boton de la fila no lleva etiqueta y va despegado del ultimo dato. */
  .tabla-cards .celda-accion::before { content: none; }
  .tabla-cards .celda-accion { margin-top: 10px; }

  /* Con las tarjetas no hay encabezados que clickear: el orden vuelve a
     ser un selector. Solo existe uno de los dos a la vez. */
  .solo-angosto { display: block; }
  .solo-angosto-inline { display: inline; }
}