/* ==========================================================================
   RutaCC — Ajustes responsive transversales
   Se carga AL FINAL en todas las páginas: corrige patrones que se repiten
   (barra superior, grillas de formularios, barras de herramientas, paneles
   flotantes) sin tocar el CSS propio de cada página.
   Criterio: WCAG 2.2 — 1.4.10 Reflow (AA): a 320 px CSS de ancho el contenido
   no debe requerir desplazamiento horizontal ni quedar cortado (salvo mapas y
   tablas de datos, que pueden desplazarse dentro de su contenedor).
   Anchos verificados: 360, 768, 1024 y 1400 px.
   ========================================================================== */

/* ── Paneles flotantes: nunca más anchos que la pantalla ── */
.float-panel { max-width: calc(100vw - 16px); }

/* ── Barras de herramientas: siempre pueden bajar de línea (ruta.html las dejaba en nowrap) ── */
.toolbar { flex-wrap: wrap; }

/* ── Columnas de grilla que contienen tablas: deben poder encogerse
      (con min-width: auto la tabla empujaba la columna fuera de la pantalla) ── */
.content-grid > * { min-width: 0; }

/* ── Tablets y notebooks chicos (≤ 1100 px) ── */
/* (Ruta e Histórico de rutas acomodan sus ventanas por JS: js/ventanas_mapa.js) */

/* ── Tablet (≤ 768 px) ── */
/* Pestañas (reportes, dashboard…): bajan de línea en vez de cortarse, en cualquier ancho
   (con el tema Intelliti, en Inter, las de Reportes de costos no caben en una línea a 1024 px) */
.tabs-container, .tabs-left { flex-wrap: wrap; }

/* Formularios en grilla: un campo no impone su ancho mínimo a la columna (en 320 px la
   columna 1fr quedaba más ancha que la ficha y el campo se cortaba con los temas claros) */
.form-grid > * { min-width: 0; }
.form-grid .field-input, .form-grid .field-select { min-width: 0; max-width: 100%; }

/* Gráficos: el lienzo nunca más ancho que su tarjeta (sin datos, Chart.js deja 300 px) */
.chart-body canvas { max-width: 100%; }

@media (max-width: 768px) {
    /* Paneles flotantes sobre el mapa (ruta, histórico): pasan al flujo de la página, uno bajo otro */
    .main:has(#map) .float-panel {
        position: static !important;
        width: auto !important;
        max-height: none !important;
        transform: none !important;   /* Despachos de Ruta venía centrado con translateX(-50%) y quedaba medio fuera */
        margin: 8px;
    }


    /* Barras de opciones (ej. criterio de ruta OSRM) */
    .osrm-criterio { flex-wrap: wrap; border-left: none; padding-left: 0; }

    /* Páginas con mapa (ruta, histórico): al pasar los paneles al flujo, el mapa
       quedaba como una franja. Mapa con alto propio y la página se desplaza */
    .main:has(> .content > #map) { overflow-y: auto; }
    .content:has(> #map) { flex: none; height: 55vh; min-height: 300px; }
    .content:has(> #map) #map { height: 100%; }
    /* Tracking en vivo: mapa y panel están en un contenedor flex horizontal → columna */
    .main:has(.tracking-layout) { overflow-y: auto; }
    .tracking-layout { flex-direction: column; height: auto; }
    .tracking-layout > .content { flex: none; height: 55vh; min-height: 300px; }

    /* Tablas simples sin contenedor con scroll (ej. orden de despacho):
       se desplazan dentro de sí mismas en vez de cortarse */
    .tabla-despacho { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── Celular (≤ 600 px) ── */
@media (max-width: 600px) {
    /* Barra superior: solo lo esencial (menú, volver, título y hora) */
    .topbar { padding: 0 10px; gap: 6px; }
    .topbar .status-dot, .topbar-sep { display: none; }
    .topbar-title, .topbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .topbar-sub { max-width: 30vw; }
    .topbar-back { padding: 5px 8px; }
    /* Reloj: se oculta la fecha y queda la hora (el HTML es "<strong>hh:mm:ss</strong> · fecha") */
    .topbar-time { font-size: 0; white-space: nowrap; }
    .topbar-time strong { font-size: 0.7rem; }

    /* Formularios: una columna. Los campos con "grid-column: span 2" creaban una
       2ª columna implícita que se salía de la pantalla */
    .form-grid { grid-template-columns: 1fr !important; }
    .form-grid > * { grid-column: 1 / -1 !important; }

    /* Barras de herramientas y botones de acción */
    .toolbar { padding: 10px 12px; }
    .toolbar .btn { flex: 1 1 auto; }

    /* Filtros de fecha (Desde/Hasta) y paginación de grillas: bajan de línea */
    .date-wrap, .pagination-controls, .date-shortcuts { flex-wrap: wrap; }
    .date-wrap .date-input { min-width: 0; flex: 1 1 130px; }
}