/*.footer {
    background-color: #111;
    text-align: center;
    padding: 1rem;
    color: #aaa;

}
*/


/* ==========================
   Footer global (fixo)
   ========================== */

:root {
    /* altura “visual” do footer; ajuste se quiser maior/menor */
    --footer-h: 40px;
}

/* estilos existentes + fixação no fundo */
.footer {
    background-color: #111;
    text-align: center;
    color: #aaa;
    /* mantém o seu padding visual */
    padding: 1rem;
    /* FIXA no rodapé da janela */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* garante largura/altura e camada por cima do conteúdo */
    width: 100%;
    min-height: var(--footer-h);
    z-index: 1000;
    /* só pra dar um realce (opcional) */
    box-shadow: 0 -6px 18px rgba(0,0,0,.25);
}

/* ==========================
   Espaço de segurança
   (apenas na página Registrar Presença)
   ========================== */

/* a página já usa este wrapper; reservamos espaço para o footer fixo */
.presenca-wrapper {
    padding-bottom: calc(var(--footer-h) + 16px);
}

/* se você tiver um wrapper global de conteúdo, pode manter o colchão também lá
   (descomente se precisar)
   .content-wrapper, main { padding-bottom: calc(var(--footer-h) + 16px); } 
*/

/* iOS safe area (opcional) */
@supports (padding: max(0px)) {
    .footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* responsivo: diminui a altura “virtual” em telas menores (opcional) */
@media (max-width: 480px) {
    :root {
        --footer-h: 64px;
    }
}