` novo mudaria a árvore e o portal tem CSS de filho direto e JS que anda por parentElement). Aqui só se dá o comportamento de rolagem. Isto NÃO decide a questão em aberto de tabela virar cartão: conter o estouro é melhor que a página inteira rolar, seja qual for a decisão. (B) Barra e fileira de botões em flex que não quebram linha. `flex-wrap` sozinho não basta: filho de flex tem `min-width:auto` e não encolhe abaixo do próprio conteúdo, então é preciso os dois. ========================================================================== */ @media screen and (max-width: 920px) { /* (A) */ .gt-tblscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* a tabela dentro do container rolável não pode ser espremida: ela mantém a largura natural e quem rola é o container */ .gt-tblscroll > table { max-width: none; } /* (B) contenção das barras que empurravam o documento */ .modo-bar, /* /contratos/dashboard: 618px numa tela de 390 */ .period-presets, /* /suprimentos/suprimentos */ .tab-btn-row, .tabs, .aba-row, .tab-bar, /* .tab-bar: 6px de estouro em /fluxo_caixa/ */ .filter-row, .filters { flex-wrap: wrap; min-width: 0; } .modo-bar > *, .period-presets > *, .filter-row > *, .filters > * { min-width: 0; } /* o carimbo "ao vivo" do /suprimentos/aco tem 213px de texto numa barra de 390 */ .aco-live { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* filho de flex do #gt-slim precisa poder encolher, senão a barra estica o documento e o resto da página passa a rolar junto. EXCEÇÃO: o hambúrguer. Medido em 31/07/2026, esta regra (especificidade 1,0,1) vencia a `#railMobileToggle{min-width:44px}` (1,0,0) do bloco de alvos, no MESMO arquivo, e deixava o botão com 35,4px de largura. Ou seja, o remédio do estouro cancelava o remédio do alvo. E o hambúrguer é o ÚNICO caminho de navegação no celular: é o alvo mais crítico da tela. */ #gt-slim > *:not(#railMobileToggle) { min-width: 0; } #gt-slim > #railMobileToggle { min-width: var(--tap-min); flex: 0 0 auto; } #gt-slim .slim-spacer { overflow: hidden; } /* (B2) os culpados que sobraram depois da primeira rodada, medidos em 31/07/2026. Aparecem em mais de uma rota porque são padrões compartilhados, então uma regra resolve várias páginas. */ /* barra de ação da página: 672px em /custos/cpn_orc, 337px em /suprimentos. flex-wrap sozinho não resolve: filho de flex tem min-width:auto e não encolhe abaixo do conteúdo. Os dois juntos, sempre. */ .topbar, .topbar-right, .topbar-left { flex-wrap: wrap; min-width: 0; max-width: 100%; } .topbar > *, .topbar-right > *, .topbar-left > * { min-width: 0; } /* /fechamento_trimestral: div.head > div.l e div.r sao filhos de flex com min-width:auto e min-content de 350px (o .badge tem white-space:nowrap), numa caixa de 262px. Faltavam 88px. */ .head { flex-wrap: wrap; } .head > .l, .head > .r { min-width: 0; max-width: 100%; } /* .tag e .badge: os dois sao selos de texto com white-space:nowrap, e o .tag media 350px numa caixa de 262px. Quebrar linha e o unico jeito de caberem sem cortar informacao. */ .head .badge, .head .tag, .head .r > *, .head .l > * { white-space: normal; max-width: 100%; } /* campo de formulário com largura fixa: 659px numa tela de 390 (/fechamento/justificativas) */ .field, .subgrid > .field, .mini-help { max-width: 100%; min-width: 0; } .field > label, .field > .mini-help { max-width: 100%; } /* grupo de filtro com select de min-width:170px (/contratos/comissoes: 447px) */ .fg, .filter-bar, .filter-group { flex-wrap: wrap; min-width: 0; max-width: 100%; } .fg > *, .filter-bar > *, .filter-group > * { min-width: 0; max-width: 100%; } .fg select, .fg input, .filter-group select, .filter-group input { min-width: 0; max-width: 100%; } /* balão de ajuda renderizado EM FLUXO: 312px empurrando o documento (/fechamento_trimestral). Sai do fluxo e passa a caber na tela. */ .itip { position: relative; } .itip > .pop, .pop { max-width: min(280px, calc(100vw - 2 * var(--mob-gutter))); inline-size: max-content; } /* `left: auto` é obrigatório: a página ancora o balão em `left:-6px`, e sem zerar isso o `right` não tem efeito (com width definida, o `left` manda). Era por isso que só limitar a largura não tirava o estouro. */ .itip .pop { left: auto; right: 0; } /* item de grid e de flex tem min-width:auto e NÃO encolhe abaixo do conteúdo, mesmo quando a grade já está em 1 coluna. Era o caso do .card de 591px em /custos/cpn_orc, cuja grade de 2 colunas já virava 1 em 520px e mesmo assim empurrava o documento. */ .grid-2 > *, .grid-3 > *, .kpi-strip > *, .card { min-width: 0; max-width: 100%; } /* select com opção longa estica sozinho: 429px soltos dentro de um

em /admin_webhooks. `max-width:100%` sozinho NAO resolve: 100% resolve contra o PAI, e se o pai tambem esticou (form em linha de flex), 100% continua sendo 429px. Por isso o pai tambem precisa poder encolher. */ select, .ef-input { max-width: 100%; } form, .toolbar, .section-header { min-width: 0; max-width: 100%; } .toolbar > *, .section-header > *, form > * { min-width: 0; max-width: 100%; } /* ── mapa de torres do /estoque/painel ────────────────────────────────── `.towers-row` tem `min-width: max-content` cravado e 2.085px: era o maior estouro do portal (1.709px), e fazia a PAGINA INTEIRA rolar de lado, levando junto a barra do topo e a gaveta. Aqui a rolagem passa a acontecer DENTRO da fileira, com encaixe por torre: cada arrasto para uma torre inteira em vez de parar no meio de um apartamento. A versao com acordeao por torre (uma torre por vez, sem arrasto) e a proposta de fundo, e fica para a analise conjunta junto com a decisao de tabela. */ .towers-row { min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--mob-gutter); } .towers-row > .tower-card { scroll-snap-align: start; flex: 0 0 auto; } /* toast fixo fora da tela some do lado direito e estica o documento */ .toast { max-width: calc(100vw - 2 * var(--mob-gutter)); right: var(--mob-gutter); } } /* ========================================================================== 5d. RESPIRO DO CARTAO NO APARELHO PEQUENO (Lote 7) Em 360px de largura, o gráfico do /conselho/painel_fluxo renderiza com 274px, 6px abaixo do piso de 280 em que a leitura ainda funciona. A culpa não é do gráfico: são 86px somados de padding de container numa tela de 360. Só abaixo de 400px, para não mexer no respiro do celular comum. ========================================================================== */ @media screen and (max-width: 400px) { .card, .panel, .box, .chart-card, .cons-card, .aco-chart-card, .chart-box { padding-left: 10px; padding-right: 10px; } } /* ========================================================================== 6. ESQUELETOS que os Lotes 4 e 6 vão consumir Nascem aqui, sem consumidor ainda, para que aqueles lotes não dependam de lote posterior. São CSS puro dentro de media query: inertes até alguém pôr a classe no HTML. ========================================================================== */ @media screen and (max-width: 600px) { /* barra de ação fixa no rodapé: resolve "conferir e agir em pontos opostos" */ .gt-actionbar { position: sticky; bottom: 0; z-index: var(--z-actionbar); display: flex; align-items: center; gap: 10px; padding: 10px var(--mob-gutter) calc(10px + var(--safe-b)); background: var(--bg-card, #121212); border-top: 1px solid var(--border, rgba(255,255,255,.10)); } .gt-actionbar .gt-actionbar-resumo { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; } .gt-actionbar button { min-height: var(--tap-min); } /* tabela vira cartão empilhado. O rótulo da coluna vem por ::before lendo --col, definido por :nth-child no CSS, sem custo de HTML. Os roles são REPOSTOS de propósito: o Safari descarta a semântica nativa da tabela em qualquer mudança de display, e o Safari é o aparelho da diretoria. */ .gt-cardlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .gt-cardlist tr { display: block; margin: 0 0 10px; padding: 12px; border: 1px solid var(--border, rgba(255,255,255,.10)); border-radius: var(--radius, 12px); background: var(--bg-card, #121212); } .gt-cardlist td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; } .gt-cardlist td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; color: var(--text-muted, #979796); font-weight: 600; } } /* ========================================================================== 6b. GAVETA DE NAVEGAÇÃO (Lote 1b) Medido em 31/07/2026: dos 4 comportamentos que o aceite pede, NENHUM existia. Com a gaveta aberta o fundo rolava 600px, Escape não fechava, não havia botão de fechar, e os 13 itens do menu tinham 36px de altura com 2px de folga entre si. Alvo de 36px com 2px de vizinho é onde o dedo escolhe por sorte. ========================================================================== */ @media screen and (max-width: 920px) { /* O fundo não rola enquanto a gaveta está aberta. Sem isto o usuário rola a página por baixo do menu e perde o lugar onde estava. PRECISA DO `html` TAMBÉM: travar só o body não resolve, porque em várias páginas quem rola é o elemento raiz. Medido no /home, que tem `@media (max-width:900px){ html, body { overflow:auto } }`: com o body em hidden o documento ainda rolou 600px. */ html.gt-gaveta-aberta, body.rail-open { overflow: hidden; } /* `html.gt-gaveta-aberta` e posta pelo /js/mobile.js espelhando a body.rail-open. Tentei antes com `html:has(body.rail-open)` e NAO funcionou na medicao (o documento continuou rolando 600px), entao a classe explicita substitui: nao depende de suporte a :has() nem de como cada navegador resolve o seletor no elemento raiz. */ /* itens do menu: 44px de altura e 8px de folga, que é o que o lote pede */ #gt-rail .rail-link { min-height: var(--tap-min); } #gt-rail .nav > li + li { margin-top: var(--tap-gap); } #gt-rail .rail-sub li + li { margin-top: 4px; } #gt-rail .rail-sub a { min-height: var(--tap-min); display: flex; align-items: center; } /* botão de fechar: o .rail-collapse-btn já existe no HTML e estava escondido no mobile (não há colapso em celular). Aqui ele é reaproveitado como "fechar", em vez de injetar elemento novo na árvore. */ #gt-rail .rail-collapse-btn { display: inline-flex !important; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); font-size: 20px; line-height: 1; } } /* ========================================================================== 7. PRIMEIRA DOBRA (Lote 5) Medido em 31/07/2026 nas 6 rotas executivas, em 390x844 (788px úteis abaixo da barra fixa): em /fluxo_caixa/, /custos/painel e /vgv o PRIMEIRO conteúdo da tela é o link "← Portal", e o primeiro KPI só começa entre y=193 e y=633. Ou seja, o topo da tela é gasto com moldura antes de qualquer número. O remédio não é mexer nos KPIs: é encolher a moldura. Nada some (o link continua lá e continua com 44px de alvo), só muda de tamanho e de peso visual. ========================================================================== */ @media screen and (max-width: 920px) { /* título da página: no celular ele competia em tamanho com o número herói */ .page-head h1, .fl-head h1, .topbar h1, main > header h1, .cons-head h1 { font-size: clamp(1.25rem, 5.2vw, 1.6rem); line-height: 1.15; margin: 0 0 2px; } /* subtítulo explicativo: some da PRIMEIRA dobra, não da página. Continua legível logo abaixo, mas deixa de empurrar o dado para fora da tela. */ .fl-sub, .page-sub, .subtitulo, .topbar .sub { font-size: .86rem; line-height: 1.3; margin: 0 0 6px; } /* o "← Portal" vira âncora compacta no canto, não uma linha inteira. Mantém os 44px de alvo por padding (o alvo cresce, a caixa visual não). */ .back-link, .back, .voltar-portal { display: inline-flex; align-items: center; font-size: .82rem; padding: 12px; margin: -12px 0 -12px -12px; } /* respiro entre o topo e o primeiro cartão */ main, .fl-wrap, .wrap, .container { padding-top: 8px; } .page-head, .fl-head, main > header { margin-bottom: 8px; gap: 4px; } /* ── /home: a faixa de KPI deixa de ser rolador horizontal ────────────── Medido em 390x844: os 5 KPIs vivem numa `.kpi-strip` com `overflow-x:auto` e `scrollbar-width:none`, somando 1.178px numa tela de 390. Ou seja, o usuário vê 2 e NÃO TEM COMO SABER que existem mais três: a barra de rolagem está escondida de propósito. Rolador horizontal sem pista é o pior padrão da página. Vira grade de 2 colunas, com o primeiro cartão em largura cheia (o herói). */ .kpi-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-x: visible; overflow-y: visible; } .kpi-strip > .kpi-tile { min-width: 0; } .kpi-strip > .kpi-tile:first-child { grid-column: 1 / -1; } /* O herói ganha corpo de número: 24px é o piso em que um valor lidera a tela. A classe é `.kpi-t-value` (medida no HTML servido, não adivinhada: a primeira tentativa mirou `.kpi-value`/`.kpi-val`, que não existem nesta página, e o número continuou em 18px). */ .kpi-strip > .kpi-tile:first-child .kpi-t-value { font-size: clamp(24px, 7vw, 30px); } /* ⚠️ CONSERTO de um estrago que a regra acima causou (relatado pelo dono em 05/08/2026, reproduzido e medido no mesmo dia). A regra `.kpi-strip` acima é GLOBAL, e eu a escrevi olhando só para a /home. O /estoque/painel usa a mesma classe, mas lá a faixa mora dentro de um `#kpi-strip-wrap` que tem `max-height:120px; overflow:hidden`. Esse teto não é descuido: ele existe para a animação do botão "Ocultar resumo", que transiciona de 120px para 0. No desktop os cartões ficam numa linha só e cabem nos 120px. Virando grade, eles passam a ocupar 792px numa tela de 390, e o teto escondia TUDO menos o primeiro cartão, sem deixar rolar em nenhuma direção: o painel ficava inutilizável, e o único jeito de mexer nele era "Ocultar resumo", que sumia com o que restava. Medido: caixa 390x120 para um conteúdo de 390x792. `:not(.kpi-collapsed)` de propósito: sobe para (1,1,0) e vence o `max-height:120px` da página por ESPECIFICIDADE, sem depender de qual folha carrega primeiro, e não briga com `#kpi-strip-wrap.kpi-collapsed{max-height:0}`, porque os dois seletores nunca casam ao mesmo tempo. 200vh em vez de `none` para a transição do botão continuar animando. */ #kpi-strip-wrap:not(.kpi-collapsed) { max-height: 200vh; } /* ── /vgv: o herói é `.card.hero .valor`, e renderizava a 22,4px ─────────── */ .kpi-wrapper .card.hero .val { font-size: clamp(24px, 7vw, 30px); } /* Barra de filtros recolhida. O botão é criado pelo /js/mobile.js e mostra quantos filtros estão aplicados: sem isso, alguém lê número filtrado achando que é total. */ .gt-filtro-tog { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; } .gt-filtro-tog::after { content: "▾"; color: var(--brand); transition: transform .15s; } .gt-filtro-tog.aberto::after { transform: rotate(180deg); } .gt-filtro-recolhido { display: none !important; } }