/* ============================================================================= base.css — estilos-base compartilhados (FONTE ÚNICA). Carregado por templates/_head_base.html, portanto vale para TODAS as páginas (atuais e futuras) sem repetição. NÃO copie estas regras para telas individuais. ============================================================================= */ /* ----------------------------------------------------------------------------- Sticky footer — o rodapé fica SEMPRE no fim da página: colado na base da janela quando o conteúdo é curto, e empurrado para baixo pelo conteúdo quando ele é longo (sem nunca sobrepor). Por que uma CLASSE (.app-shell) e não o seletor `body` cru? Uma classe tem precedência (especificidade) maior que o seletor de elemento `body`, então estas regras vencem o `body { ... }` que cada tela já define no seu próprio CSS — independentemente da ordem de carregamento. E, por ser opt-in, telas com layout próprio (ex.: o login full-screen) ficam intocadas. ----------------------------------------------------------------------------- */ .app-shell { min-height: 100vh; /* fallback p/ navegadores sem suporte a dvh */ min-height: 100dvh; /* viewport dinâmica — melhor no mobile (barra do navegador) */ display: flex; flex-direction: column; } /* O rodapé é o último filho DIRETO do (o {% include "_rodape.html" %} fica logo antes de ). O margin-top: auto absorve toda a folga vertical e joga o rodapé para o fim — sem precisar marcar o miolo de cada página como flex:1. */ .app-shell > footer { margin-top: auto; }