/* ============================================================================ Luminous — Responsive móvil compartido (responsive.css) Inyectado por app.py en el de las páginas de la APP (módulos, Mi Cuenta, Staff). El landing y las públicas se EXCLUYEN (ya responsive). Apunta al sistema de clases de facto de los módulos: .modal/.modal-bg/ .overlay, .form-grid, .kpi-grid/.info-grid, .toolbar/.filtros/.filters. Breakpoint 768px (igual que sidebar.js). ============================================================================ */ @media (max-width: 768px) { /* 1. Tablas → bloque deslizable (no rompen el layout). !important para ganarle al CSS de tabla propio de algunos módulos (p.ej. modulo-facturacion define reglas de tabla más específicas). */ table { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; white-space: nowrap !important; } /* 2. Guard anti-desborde de la página SIN romper position:sticky/fixed. clip (no hidden) evita promover overflow-y a auto. */ html { overflow-x: clip; } /* 3. Medios e imágenes no desbordan */ img, canvas, svg, video { max-width: 100%; height: auto; } /* 4. Inputs/selects/textarea con ancho fijo en px → tope */ input, select, textarea { max-width: 100%; } /* 5. Formularios e info a 1 columna */ .form-grid, .info-grid { grid-template-columns: 1fr !important; } /* 6. KPIs a 2 columnas (legible, menos scroll) */ .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* 7. Barras de filtros/herramientas envuelven */ .toolbar, .filtros, .filters { flex-wrap: wrap !important; } /* 8. Modales caben en pantalla (la panel; el backdrop sigue full) */ .modal { width: 95vw !important; max-width: 95vw !important; max-height: 90vh; overflow-y: auto; } /* 9. Padding de contenido reducido */ main { padding: 16px !important; } }