/* ============================================================
   Bodega VF · Móvil — tablas como tarjetas apiladas
   Dueño: tarea E. NO editar desde otras tareas.
   Se carga DESPUÉS de app.css.

   Idea: en el teléfono una tabla de 8 o 10 columnas obliga a
   arrastrar de lado. Aquí cada FILA se convierte en una TARJETA
   y cada celda pasa a ser una línea "ETIQUETA · valor".
   La etiqueta sale del atributo data-label que llevan los <td>
   en las plantillas (inventario, enobra, obras, guias, bitacora,
   guia).

   Seguro por diseño: TODO cuelga de :has(td[data-label]), así que
   solo se transforman las tablas que efectivamente traen etiquetas.
   Cualquier otra tabla de la app (panel, consulta, usuarios…) y la
   fila de "nada que mostrar" siguen exactamente como antes. Si el
   navegador fuera tan viejo que no entiende :has(), simplemente no
   aplica nada y queda la tabla con desplazamiento lateral de siempre.

   Es "screen and" a propósito: al imprimir una guía el ancho del
   papel puede quedar bajo 760px y las guías deben imprimirse como
   tabla, no como tarjetas.
   ============================================================ */

@media screen and (max-width:760px){

  /* ---------- el contenedor deja de ser una ventanita ----------
     Las plantillas traen max-height y overflow en el atributo style
     (max-height:65vh; overflow-y:auto). En modo tarjeta eso solo
     estorba: se desplaza la página completa, sin marcos anidados.
     Lleva !important porque el estilo en línea gana a la hoja. */
  .tabla-env:has(td[data-label]){
    max-height:none !important;
    overflow:visible !important;
    border-radius:0;
  }

  .tabla-env:has(td[data-label]) table{
    display:block;
    width:100%;
    font-size:14px;
  }
  .tabla-env:has(td[data-label]) tbody,
  .tabla-env:has(td[data-label]) tfoot{ display:block }

  /* ---------- encabezado ----------
     Ya no hace falta: cada dato lleva su etiqueta al lado. */
  .tabla-env:has(td[data-label]) thead{ display:none }

  /* …salvo cuando el encabezado trae un control de verdad
     (el "marcar todos" de Obras). En ese caso se rescata como una
     franja sobre las tarjetas para no perder la función. */
  .tabla-env:has(td[data-label]) thead:has(input,select,button){ display:block }
  .tabla-env:has(td[data-label]) thead tr{ display:block }
  .tabla-env:has(td[data-label]) thead th{
    display:none;
    position:static;          /* apaga el encabezado fijo (sticky) */
  }
  .tabla-env:has(td[data-label]) thead th:has(input,select,button){
    display:flex;align-items:center;gap:10px;
    border:0;padding:2px 2px 12px;
  }
  .tabla-env:has(td[data-label]) thead th:has(input[type="checkbox"])::after{
    content:"Marcar todos";
  }

  /* ---------- cada fila es una tarjeta ---------- */
  .tabla-env:has(td[data-label]) tbody tr{
    display:block;
    background:rgba(148,197,255,.045);
    border:1px solid var(--borde);
    border-radius:12px;
    padding:5px 0 6px;
    margin:0 0 10px;
  }
  .tabla-env:has(td[data-label]) tbody tr:last-child{ margin-bottom:0 }

  /* las filas que se pueden tocar se marcan con un filo celeste */
  .tabla-env:has(td[data-label]) tbody tr.clic{
    border-left:3px solid var(--acento);
  }
  .tabla-env:has(td[data-label]) tbody tr.clic:active{
    background:rgba(56,189,248,.12);
  }

  /* ---------- cada celda: etiqueta a la izquierda, dato a la derecha ----------
     La etiqueta va posicionada (no como parte del flujo) para que el
     valor conserve su contenido tal cual —negritas, insignias, campos—
     y para que un texto largo se acomode en varias líneas alineado. */
  .tabla-env:has(td[data-label]) td{
    display:block;
    position:relative;
    border:0;
    padding:6px 14px 6px 43%;
    text-align:left;            /* neutraliza td.num en modo tarjeta */
    font-size:14px;
    line-height:1.45;
    overflow-wrap:anywhere;     /* nada empuja el ancho de la página */
  }
  .tabla-env:has(td[data-label]) td::before{
    content:attr(data-label);
    position:absolute;
    left:14px;top:8px;
    width:37%;
    color:var(--tinta-2);
    font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }

  /* celdas sin etiqueta (o vacías): no dejan hueco ni línea en blanco */
  .tabla-env:has(td[data-label]) td:not([data-label]){ padding-left:14px }
  .tabla-env:has(td[data-label]) td:not([data-label])::before{ content:none }
  .tabla-env:has(td[data-label]) td:empty{ display:none }

  /* ---------- el dato principal va arriba, más grande ----------
     Son las columnas que dan nombre a la fila (y el detalle largo de
     la bitácora). Si se cambia un data-label en las plantillas, hay
     que actualizarlo también en esta lista. */
  .tabla-env:has(td[data-label]) td[data-label="Nombre"],
  .tabla-env:has(td[data-label]) td[data-label="Ítem"],
  .tabla-env:has(td[data-label]) td[data-label="Obra"],
  .tabla-env:has(td[data-label]) td[data-label="Equipo / herramienta"],
  .tabla-env:has(td[data-label]) td[data-label="Detalle"]{
    padding-left:14px;
    padding-top:8px;
    font-size:15.5px;
  }
  .tabla-env:has(td[data-label]) td[data-label="Nombre"]::before,
  .tabla-env:has(td[data-label]) td[data-label="Ítem"]::before,
  .tabla-env:has(td[data-label]) td[data-label="Obra"]::before,
  .tabla-env:has(td[data-label]) td[data-label="Equipo / herramienta"]::before,
  .tabla-env:has(td[data-label]) td[data-label="Detalle"]::before{
    position:static;
    display:block;
    width:auto;
    margin-bottom:2px;
  }

  /* ---------- campos dentro de la tarjeta ----------
     En Obras/En obra hay casillas, un campo de cantidad y una lista
     de estado dentro de la tabla: se les da ancho cómodo para el dedo
     (min-width gana sobre el width en línea de 90px). */
  .tabla-env:has(td[data-label]) td input[type="number"]{ min-width:140px }
  .tabla-env:has(td[data-label]) td select{ min-width:170px }

  /* ---------- totales (tfoot) ----------
     El pie sigue siendo un bloque aparte, destacado en celeste.
     La celda que solo decía "Total" se oculta: ese texto ya viaja
     como etiqueta de la celda del monto. */
  .tabla-env:has(td[data-label]) tfoot tr{
    display:block;
    background:rgba(56,189,248,.10);
    border:1px solid rgba(56,189,248,.28);
    border-radius:12px;
    margin-top:10px;
    padding:4px 0 5px;
  }
  .tabla-env:has(td[data-label]) tfoot td{
    font-size:15px;
    font-weight:700;
  }
  .tabla-env:has(td[data-label]) tfoot td.derecha{ display:none }
}