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

   Parte de la hoja de estilos de FS, 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) {
  /* --- 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. */
  .cabecera-int {
    padding: 8px 14px;
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
  }

  /* Puede achicarse: la pastilla del usuario y la campanita tienen prioridad
     sobre el nombre del sistema, que si no entra se corta con puntos. */
  .marca { flex: 1 1 0; min-width: 0; 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;
    flex: 0 1 auto;
    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; }

  .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; }

  /* ------------------------------------------------------------------
     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; }
}
