/* ============================================================
   responsive.css — Die Hausmeister
   Reglas compartidas para que las pantallas con tablas largas y
   modales se vean bien en celular. Se linkea en el <head> de cada
   página: <link rel="stylesheet" href="/responsive.css">

   CÓMO USARLO EN UNA TABLA NUEVA:
   1) La tabla tiene que tener alguna de estas clases: .tabla-usuarios,
      .tabla-flota, .tabla-marcaciones, .tabla-rrhh, .tabla-proveedores,
      .tabla-gastos
      (agregá la que corresponda a esta lista si sumás una tabla en
      otra pantalla).
   2) Cada <td> generado por JS necesita el atributo data-label con el
      mismo texto que su <th> de encabezado, ej:
        <td data-label="Nombre">${nombre}</td>
      Eso es lo que se muestra como "etiqueta" cuando la fila se
      convierte en tarjeta apilada en pantallas chicas.
   3) Si una celda no debe mostrar etiqueta (por ej. la de acciones,
      que ya se entiende sola), usar data-label="" o directamente no
      ponerlo y agregarle la clase "sin-etiqueta".
   ============================================================ */

:root {
  --hm-radio: 720px;   /* debajo de este ancho: modo tarjeta */
  --hm-radio-chico: 420px;
}

@media (max-width: 720px) {

  /* Más aire en los bordes, menos padding grande de escritorio */
  .main-content { padding: 16px !important; }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-header h1 { font-size: 1.35rem; }
  .btn-nuevo { text-align: center; }

  /* ── Tablas → tarjetas apiladas ── */
  .tabla-usuarios,
  .tabla-flota,
  .tabla-marcaciones,
  .tabla-rrhh,
  .tabla-proveedores,
  .tabla-gastos {
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .tabla-usuarios thead,
  .tabla-flota thead,
  .tabla-marcaciones thead,
  .tabla-rrhh thead,
  .tabla-proveedores thead,
  .tabla-gastos thead {
    display: none;
  }
  .tabla-usuarios, .tabla-usuarios tbody,
  .tabla-flota, .tabla-flota tbody,
  .tabla-marcaciones, .tabla-marcaciones tbody,
  .tabla-rrhh, .tabla-rrhh tbody,
  .tabla-proveedores, .tabla-proveedores tbody,
  .tabla-gastos, .tabla-gastos tbody {
    display: block;
    width: 100%;
  }
  .tabla-usuarios tr,
  .tabla-flota tr,
  .tabla-marcaciones tr,
  .tabla-rrhh tr,
  .tabla-proveedores tr,
  .tabla-gastos tr {
    display: block;
    margin-bottom: 14px;
    background: #fff;
    border: 2px solid #053353;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(5,51,83,.08);
  }
  .tabla-usuarios tr.sin-datos,
  .tabla-flota tr.sin-datos,
  .tabla-marcaciones tr.sin-datos,
  .tabla-rrhh tr.sin-datos,
  .tabla-proveedores tr.sin-datos,
  .tabla-gastos tr.sin-datos {
    border-style: dashed;
    box-shadow: none;
  }
  .tabla-usuarios td,
  .tabla-flota td,
  .tabla-marcaciones td,
  .tabla-rrhh td,
  .tabla-proveedores td,
  .tabla-gastos td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 10px 14px;
    border-bottom: 1px solid #f0e8de;
    font-size: .88rem;
  }
  .tabla-usuarios td:last-child,
  .tabla-flota td:last-child,
  .tabla-marcaciones td:last-child,
  .tabla-rrhh td:last-child,
  .tabla-proveedores td:last-child,
  .tabla-gastos td:last-child {
    border-bottom: none;
  }
  .tabla-usuarios td[colspan],
  .tabla-flota td[colspan],
  .tabla-marcaciones td[colspan],
  .tabla-rrhh td[colspan],
  .tabla-proveedores td[colspan],
  .tabla-gastos td[colspan] {
    display: block;
    text-align: center;
  }
  .tabla-usuarios td::before,
  .tabla-flota td::before,
  .tabla-marcaciones td::before,
  .tabla-rrhh td::before,
  .tabla-proveedores td::before,
  .tabla-gastos td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #053353;
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .tabla-usuarios td:not([data-label])::before,
  .tabla-usuarios td[data-label=""]::before,
  .tabla-usuarios td.sin-etiqueta::before,
  .tabla-flota td:not([data-label])::before,
  .tabla-flota td[data-label=""]::before,
  .tabla-flota td.sin-etiqueta::before,
  .tabla-marcaciones td:not([data-label])::before,
  .tabla-marcaciones td[data-label=""]::before,
  .tabla-marcaciones td.sin-etiqueta::before,
  .tabla-rrhh td:not([data-label])::before,
  .tabla-rrhh td[data-label=""]::before,
  .tabla-rrhh td.sin-etiqueta::before,
  .tabla-proveedores td:not([data-label])::before,
  .tabla-proveedores td[data-label=""]::before,
  .tabla-proveedores td.sin-etiqueta::before,
  .tabla-gastos td:not([data-label])::before,
  .tabla-gastos td[data-label=""]::before,
  .tabla-gastos td.sin-etiqueta::before {
    content: none;
  }
  .tabla-usuarios td[colspan]::before,
  .tabla-flota td[colspan]::before,
  .tabla-marcaciones td[colspan]::before,
  .tabla-rrhh td[colspan]::before,
  .tabla-proveedores td[colspan]::before,
  .tabla-gastos td[colspan]::before {
    content: none;
  }

  .acciones-celda { justify-content: flex-end; flex-wrap: wrap; }

  /* ── Modales a pantalla completa (con margen chico) ── */
  .modal-overlay {
    align-items: flex-start;
    padding: 14px;
    padding-top: 34px;
    overflow-y: auto;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 22px;
  }

  /* Tarjetas / paneles en grilla que en escritorio van lado a lado */
  .grid-2, .grid-3, .grid-4,
  .kpis, .kpi-grid, .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .tabla-usuarios td,
  .tabla-flota td,
  .tabla-marcaciones td,
  .tabla-rrhh td,
  .tabla-proveedores td,
  .tabla-gastos td {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }
  .tabla-usuarios td::before,
  .tabla-flota td::before,
  .tabla-marcaciones td::before,
  .tabla-rrhh td::before,
  .tabla-proveedores td::before,
  .tabla-gastos td::before {
    font-size: .68rem;
  }
  .modal { padding: 18px; }
}

/* Botones de acción: que se puedan tocar cómodo con el dedo en cualquier ancho táctil */
@media (pointer: coarse) {
  .btn-accion { padding: 7px 14px; }
  .btn-confirmar, .btn-cancelar { padding: 11px 20px; }
}