--- /tmp/dash-mobile-snap/estrutura.php.base 2026-05-19 20:09:28.003231005 +0000 +++ componentes/Missoes/Dashboards/sinais/Expedicao/html/estrutura.php 2026-05-19 20:50:29.784661926 +0000 @@ -413,6 +413,86 @@ background: #fef3c7 !important; border-color: #fcd34d !important; } + + /* ========================================================= + MOBILE / RESPONSIVO — camada isolada (só CSS, sem JS). + Wallboard (1 tela, zoom 80%, scroll interno, grid 6x3) → + fluxo vertical rolável no celular. Tiers ≤768 / ≤480. + Sem display:none — só reflow; não altera desktop. + ========================================================= */ + @media (max-width: 768px) { + /* desfaz zoom 80% e o "uma tela só" */ + html { font-size: 100% !important; } + html, body { height: auto !important; overflow: visible !important; } + #dash-exp-root { height: auto !important; min-height: 0 !important; } + + /* viewport interno deixa de ser tela fixa → rola a página */ + #dash-exp-root .max-w-screen-2xl { + height: auto !important; + max-height: none !important; + max-width: none !important; + width: 100% !important; + overflow: visible !important; + padding: 0.5rem !important; + } + + /* cabeçalho/filtros empilham e quebram */ + #dash-exp-root .max-w-screen-2xl > header { + flex-direction: column !important; + align-items: stretch !important; + gap: 0.6rem !important; + margin-bottom: 0.75rem !important; + } + #dash-exp-root .max-w-screen-2xl > header > div { + flex-wrap: wrap !important; + width: 100% !important; + gap: 0.5rem !important; + } + #dash-exp-root .dash-filtro-grupo { + display: flex; + flex-wrap: wrap; + width: 100%; + border-radius: 0.75rem; + } + #dash-exp-root .btn-filter { flex: 0 0 auto; } + #dash-exp-root #dash-btn-tema { align-self: flex-end; } + + /* grid principal 6x3 (e internos) → 1 coluna, linhas automáticas */ + #dash-exp-root .max-w-screen-2xl > .grid, + #dash-exp-root .grid { + grid-template-columns: 1fr !important; + grid-template-rows: auto !important; + gap: 0.6rem !important; + } + #dash-exp-root [class*="col-span-"] { grid-column: auto / span 1 !important; } + #dash-exp-root [class*="row-span-"] { grid-row: auto !important; } + + /* grids internos densos (Distância 3col, Big Numbers 5col) → 2 col */ + #dash-exp-root .dash-card-distancia > .grid, + #dash-exp-root .dash-card-bignumbers > .grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + /* cards: menos padding, altura natural, números menores */ + #dash-exp-root .card { padding: 0.9rem !important; } + #dash-exp-root .text-6xl { font-size: 2.5rem !important; } + #dash-exp-root .text-4xl { font-size: 1.6rem !important; } + #dash-exp-root .text-2xl { font-size: 1.15rem !important; } + #dash-exp-root .text-xl { font-size: 1rem !important; } + + /* charts com altura utilizável no mobile */ + #dash-exp-root .chart-container { min-height: 220px !important; } + #dash-exp-root .dash-chart-grande { min-height: 260px !important; } + } + + @media (max-width: 480px) { + #dash-exp-root .dash-card-distancia > .grid, + #dash-exp-root .dash-card-bignumbers > .grid { + grid-template-columns: 1fr !important; + } + #dash-exp-root .text-6xl { font-size: 2rem !important; } + #dash-exp-root .card { padding: 0.75rem !important; } + }