/* ───────────────────────────────────────────────────────────────────────── Voaro · responsividade compartilhada (mobile) Carregado por ÚLTIMO no de cada página → vence os estilos inline. Regras fora de @media são neutras no desktop (não alteram o visual atual). Breakpoint principal = 860px (mesmo das sidebars já existentes). ───────────────────────────────────────────────────────────────────────── */ /* Tabelas nunca estouram a página: rolam dentro do próprio container. O container .tbl-scroll é criado por responsive.js (só no mobile). */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .tbl-scroll > table { min-width: 100%; } @media (max-width: 860px) { /* Sem scroll horizontal acidental da página inteira (clip não quebra position:sticky) */ body { overflow-x: clip; } /* Mídia e blocos de código se ajustam à largura da tela */ img, video, canvas, iframe { max-width: 100%; height: auto; } pre, code { white-space: pre-wrap; word-break: break-word; } /* Modais/painéis ocupam quase a tela toda em vez de estourar */ .modal, .modal-overlay { padding: 14px !important; } .modal-card, .modal-panel, .modal-panel-lg, .modal-content, .modal-box { max-width: 100% !important; width: 100% !important; } /* Campos: 16px evita o zoom automático do iOS ao focar um input */ input, select, textarea { font-size: 16px !important; } /* Alvos de toque confortáveis nos botões principais (não afeta os .btn-xs de tabela) */ .btn, .btn-primary, .btn-neon, .btn-ghost { min-height: 42px; } /* Barras de topo / cabeçalhos quebram em vez de espremer */ .topbar, .bar, .toolbar, .actions { flex-wrap: wrap; } /* Layout de duas colunas (lista + detalhe, ex.: /updates) empilha */ [style*="grid-template-columns:360px 1fr"], [style*="grid-template-columns: 360px 1fr"] { grid-template-columns: 1fr !important; } } @media (max-width: 560px) { /* Reduz respiros grandes de conteúdo */ .main, .wrap, .content, main { padding-left: 16px !important; padding-right: 16px !important; } /* Empilha grids de 2 colunas declarados inline (os por classe são tratados nas páginas) */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"], .row2 { grid-template-columns: 1fr !important; } /* Toasts ocupam a largura (não ficam cortados no canto) */ .toast { left: 12px !important; right: 12px !important; bottom: 12px !important; text-align: center; } /* Títulos grandes proporcionais ao celular */ .greeting, .hero-title, h1 { font-size: 1.4rem !important; line-height: 1.2; } }