/* ========================================================================== Header fixo no topo — SÓ no celular (aditivo; no computador nada muda). --------------------------------------------------------------------------- POR QUE O sticky-top DO BOOTSTRAP NUNCA FUNCIONOU A `.main-header` já vinha com `sticky-top`, mas nunca grudou — nem no computador. Medido na página real: rolando 1200px, o header ia para `top: -1200`. A causa é a árvore do `base.html`. Apesar de a indentação sugerir que a `.content-wrapper` está dentro da `.wrapper`, o navegador monta assim: body ├── div.wrapper → NAV.main-header, ASIDE.main-sidebar └── div.content-wrapper ← IRMÃ da .wrapper, não filha Um `` fecha a `.wrapper` cedo demais. Como a sidebar é `fixed`, a `.wrapper` fica com altura ~0, e `position: sticky` só gruda dentro da caixa do pai: sem caixa, não há onde grudar. Corrigir a árvore do `base.html` resolveria na origem, mas mexe no layout de TODAS as telas — não é conversa de hotfix. Aqui a gente fixa o header de verdade e devolve o espaço ao conteúdo. --------------------------------------------------------------------------- POR QUE O ESPAÇO VAI NO body, E NÃO NA .content-wrapper A primeira versão reservava o espaço com `padding-top` na `.content-wrapper`. Isso quebrou nas telas de Logística, porque o `mobile_kit.css` também declara `.content-wrapper { padding-top: 12px }` — mesma especificidade, carregado depois, então ele vencia e o conteúdo subia para trás do header. O mesmo valia para qualquer tela que mexesse nesse seletor. Ancorar no `body` tira a regra dessa disputa: nenhuma tela mexe no padding do body, e o header, sendo `fixed`, ignora esse padding e continua colado no topo. Uma regra só, válida para o sistema inteiro. O seletor é `body.sidebar-mini` (classe que o `base.html` sempre aplica) para não pegar as páginas que vivem fora do shell do AdminLTE e zeram o padding do body — `api_docs` e `folha_de_rosto` —, que nem têm header. --------------------------------------------------------------------------- ORDEM DE CARREGAMENTO Este arquivo precisa ser o ÚLTIMO CSS do documento. O CSS de cada tela é incluído dentro do bloco de conteúdo, ou seja, depois do ; carregando daqui a gente vence por ordem, sem precisar de `!important`. Ver o final do `base.html`. --top-bars-offset é a convenção já usada pelos overlays de tela cheia: se existir uma barra fixa acima (ambiente, impersonação), tudo desce junto. --mob-header-h é medida em `header_fixo_mobile.js`; o 57px é só o fallback do primeiro quadro, antes do script rodar. ========================================================================== */ @media (max-width: 767.98px) { /* altura total do que fica fixo no topo da tela */ body.sidebar-mini { --mob-topo: calc(var(--top-bars-offset, 0px) + var(--mob-header-h, 57px)); } .main-header { position: fixed; top: var(--top-bars-offset, 0px); left: 0; right: 0; } /* devolve ao conteúdo o espaço que o header deixou de ocupar no fluxo */ body.sidebar-mini { padding-top: var(--mob-topo); } /* ------------------------------------------------------------------ Barras grudadas no topo da PÁGINA precisam começar abaixo do header, senão escorregam para trás dele ao rolar. Só entram aqui as que grudam no viewport. Ficam de fora, de propósito, as que grudam dentro de um container que rola por conta própria — o `.modal-header` do mini-sheet, a `.filtro-mobile-head` do painel de filtro e o cabeçalho de resultado do select2: essas se resolvem sozinhas. ------------------------------------------------------------------ */ .sticky-top:not(.main-header), #cm-barra.cm-ativa, .pg-modulo-cab, .fluxo-anexos-toolbar { top: var(--mob-topo); } /* ------------------------------------------------------------------ Modo "Selecionar atividades": a barra azul é `fixed` no topo e o `atividades_mobile.css` já reserva 52px para ela na `.content-wrapper`. Sem descer a barra, ela cobriria o header e sobrariam 57px de vão. Descendo, o que fica fixo no topo (header + barra) passa a bater com o espaço reservado (padding do body + os 52px da `.content-wrapper`). ------------------------------------------------------------------ */ .mob-sel-head { top: var(--mob-topo); } }