/* Ajustes comunes para celular (app / PWA). Se carga al FINAL del <head> de cada página para poder
   corregir sus estilos; todo va dentro de max-width: 640px, así que en la PC no cambia nada.
   Regla: nada puede ser más ancho que la pantalla; las tablas anchas se desplazan dentro de su caja.
   Comprobar con: python tools/auditar_movil.py  (22/22 OK el 27-oct-2026) */
@media (max-width: 640px) {
    /* Contenedores: menos margen */
    .container, .wrap { padding: 10px !important; }

    /* Encabezado azul: logo arriba, título debajo, botones en filas */
    .dashboard-header, .dash-header { padding: 14px !important; gap: 10px !important;
        flex-direction: column; align-items: stretch !important; }
    .header-left, .h-left { flex-direction: column; align-items: flex-start !important; gap: 10px !important; min-width: 0; }
    .header-logo-box, .logo-box { padding: 4px 10px !important; }
    .header-logo, .logo-box img { height: 28px !important; }
    .dashboard-header h1, .dash-header h1, .header-title h1, .h-titles h1 {
        font-size: 17px !important; line-height: 1.25; overflow-wrap: anywhere; }
    .header-actions, .header-nav, .header-right, .h-right,
    .dashboard-header > div, .dash-header > div { flex-wrap: wrap; gap: 8px !important; max-width: 100%; }
    .header-left > *, .h-left > *, .header-title, .h-titles { min-width: 0; max-width: 100%; }

    /* Tarjetas de indicadores: de a dos, sin que el contenido estire la columna */
    .kpi-row, .kpi-row-2, .kpi-grid:not(.g1):not(.g3) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .kpi-row > *, .kpi-row-2 > *, .kpi-grid > * { min-width: 0; }
    .kpi-value, .kpi-val { font-size: 18px !important; letter-spacing: -0.3px; }
    .kpi-card { padding: 14px !important; }

    /* Filas de gráficos: una columna */
    .chart-row, .charts-row, .dos-col { grid-template-columns: minmax(0, 1fr) !important; }
    .chart-row > *, .charts-row > *, .dos-col > * { min-width: 0; }
    canvas { max-width: 100% !important; }

    /* Pestañas: bajan de línea en vez de salirse */
    .tab-nav, .tabs { flex-wrap: wrap; }
    .tab-btn { padding: 8px 12px !important; }

    /* Filtros: cada control puede ocupar el ancho completo */
    .filtros-bar select, .filters-bar select, .filter-group select { max-width: 100%; }
}