/* ==========================================================================
   mobile-fixes.css  —  hotfix RESPONSIVE MOVIL (2026-08-02)
   --------------------------------------------------------------------------
   Override chico e INDEPENDIENTE del tema para el prod actual (que corre un
   build distinto a este repo y no tiene la media query movil). Se incluye
   DESPUES del CSS del tema para ganar especificidad. Selectores verificados
   en vivo sobre alertracker.com a 390px.

   Fuente "de verdad" (para builds del repo): _rollout-responsive.scss.
   Colores claros: correctos para los temas light-* (el tenant reportante usa
   light-coral, superficies blancas). Nota: en un tenant con tema OSCURO la
   celda sticky se veria clara (cosmetico, no funcional) -> ajustar si aparece.
   ========================================================================== */
@media (max-width: 767px) {

  .table-responsive {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  /* padding compacto -> tabla mas angosta, menos scroll */
  .table.table-list > thead > tr > th,
  .table.table-list > tbody > tr > td,
  .table.table-list > tbody > tr > th {
    padding: 8px 12px;
  }

  /* columna de ACCIONES fija al borde derecho: siempre alcanzable sin scrollear */
  .table.table-list > tbody > tr > td.actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .16);
  }
  .table.table-list > thead > tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 4;
    background-color: #f3f4f6;
    border-left: 1px solid #e5e7eb;
    box-shadow: -8px 0 8px -6px rgba(0, 0, 0, .16);
  }

  /* modal "Tablero" del mapa a hoja de pantalla completa (sin el borde que filtra) */
  #dashboard.modal-full {
    margin: 0;
    width: auto;
  }
  #dashboard .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }

  /* Hamburguesa del header (boton de menu): las .icon-bar venian en display:inline
     con tamano auto -> colapsaban a nada y el boton quedaba como un cuadrito vacio.
     Se restaura el patron hamburguesa de Bootstrap (3 barras visibles) y se lo hace
     un boton tappable al borde derecho. El color de las barras lo pone el tema. */
  .navbar-main .navbar-header {
    width: 100%;
  }
  .navbar-main .navbar-toggle {
    padding: 9px 10px;
    margin: 11px 0;
    border-radius: 6px;
  }
  .navbar-main .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }
  .navbar-main .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
  }
}