/* ══════════════════════════════════════════════════════
   RESPONSIVO — se carga al final y solo sobrescribe lo necesario.
   Puntos de corte = los de Bootstrap 5 (lg 992, md 768, sm 576).
   ══════════════════════════════════════════════════════ */

/* dvh = alto real visible en móvil (descuenta la barra del navegador) */
#login-screen, #main-panel { height: 100vh; height: 100dvh; }
.login-box { width: min(360px, 92vw); padding: 2rem 1.5rem; }

/* ── Barra superior (navbar de Bootstrap) ── */
.topbar { position: relative; z-index: 1100; justify-content: space-between; }
.topbar .navbar-toggler { border-color: var(--border); padding: .25rem .5rem; box-shadow: none; }
.menu-principal { align-items: center; gap: .8rem; flex-wrap: wrap; }

/* Filtros: siempre visibles desde 768 px; plegables por debajo */
@media (min-width: 768px) {
  #filtros-panel.collapse:not(.show) { display: flex; }
}

/* ── Menú colapsado (tablet y móvil, < 992 px) ── */
@media (max-width: 991.98px) {
  .sidebar    { width: 250px; }
  .chat-panel { width: 290px; }
  .topbar .ultima-act { display: none; }

  /* el menú abierto flota sobre el mapa en lugar de empujarlo */
  .menu-principal {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: .75rem 1rem; max-height: calc(100dvh - 56px); overflow-y: auto;
  }
  .menu-principal.show, .menu-principal.collapsing { display: flex; flex-direction: column; align-items: stretch; }
  .menu-principal .spacer { display: none; }
  .menu-principal .usuario { order: -1; }
  .menu-principal .btn-logout, .menu-principal .btn-refresh { padding: .5rem .75rem; justify-content: flex-start; text-align: left; }
  .menu-principal .modo-mapa { flex-direction: column; align-items: stretch; }
  .menu-principal .rutas-rango-wrap { flex-wrap: wrap; }
}

/* ── Móvil y tablet vertical: todo en columna ── */
@media (max-width: 767.98px) {
  html, body { overflow: auto; }
  .workspace { flex-direction: column; }

  /* lista arriba (máx. 40 % de la pantalla), mapa debajo */
  .sidebar {
    width: 100%; max-height: 40dvh;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .map-area { flex: 1; min-height: 30dvh; }

  /* el chat se abre como panel inferior: el mapa sigue visible arriba */
  .chat-panel.open {
    width: 100%; height: 50dvh; flex-shrink: 0;
    border-left: 0; border-top: 1px solid var(--border);
  }
  .chat-header-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* 16 px evita el zoom automático de iOS al enfocar un campo */
  .form-control, .form-select, .filtros input, .filtros select,
  .chat-input, .rutas-datetime, .historial-selector { font-size: 16px; }

  .historial-header, .historial-fechas { flex-wrap: wrap; }
  .modal-footer { flex-wrap: wrap; }
}

/* ── Pantallas táctiles: no existe "hover" ── */
@media (hover: none) {
  .btn-del-device { display: inline-block; }   /* el 🗑 de cada equipo siempre visible */
  .btn-edit, .btn-trash, .btn-historial, .btn-cerrar,
  .btn-logout, .btn-refresh { min-height: 36px; }
}