/* Garante o comportamento correto da altura e elimina barras desnecessárias */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Remove a barra de rolagem horizontal */
}

.full-height {
    height: 100vh; /* Garante que ocupa exatamente 100% da altura da viewport */
    display: flex; /* Flexbox para alinhamento */
    flex-direction: column; /* Alinha elementos verticalmente */
    justify-content: space-between; /* Distribui espaço entre os elementos */
    align-items: center; /* Centraliza horizontalmente */
    padding-bottom: 60px; /* Adiciona espaço equivalente à altura da navbar */
    box-sizing: border-box; /* Inclui o padding no cálculo do tamanho total */
    overflow-x: hidden; /* Remove rolagem horizontal */
}

.navbar {
    height: 60px;
    z-index: 1050;
    position: relative;
    width: 100%; /* Garante que a navbar ocupe toda a largura */
}

/* Ajuste do menu colapsável */
.navbar-collapse {
    overflow: visible !important; /* Garante que o conteúdo seja visível */
    position: static; /* Evita problemas em telas maiores */
    top: auto;
    left: auto;
    background-color: transparent; /* Sem fundo em telas maiores */
    width: auto;
    padding: 0;
    z-index: 1050; /* Garante que esteja acima de outros elementos */
}

/* Correção para tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-collapse {
        position: absolute; /* Coloca o menu de forma adequada */
        top: 60px; /* Abaixo da navbar */
        left: 0;
        background-color: #343a40; /* Fundo escuro para o menu */
        width: 100%; /* Expande o menu para toda a largura */
        padding: 10px;
        z-index: 1051; /* Certifica que o menu está acima de outros elementos */
    }

    .navbar-toggler {
        display: block; /* Garante que o botão de menu esteja visível */
    }
}

/* Correção para telas menores */
@media (max-width: 768px) {
    .full-height {
        height: auto; /* Ajusta altura para caber no conteúdo */
        min-height: calc(100vh - 60px); /* Garante pelo menos 100vh no mobile */
        display: flex; /* Mantém Flexbox para alinhamento */
        flex-direction: column; /* Garante alinhamento vertical */
        align-items: center;
        justify-content: space-between; /* Distribui os elementos */
        padding-bottom: 20px; /* Garante espaço no rodapé */
        
    }

    .navbar-collapse {
        position: absolute; /* Garante que o menu colapsável seja posicionado */
        top: 60px; /* Abaixo da navbar */
        left: 0;
        background-color: #343a40; /* Fundo escuro para o menu */
        width: 100%; /* Expande para a largura da tela */
        padding: 10px;
        z-index: 1051; /* Garante que esteja acima do conteúdo */
    }

    .calculadora {
        width: 100%; /* Garante que a calculadora ocupe toda a largura no mobile */
        padding: 15px; /* Adiciona espaçamento interno */
    }
}


/* Estilo para tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .full-height {
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
        min-height: calc(100vh - 60px); /* Garante espaço suficiente abaixo da navbar */
        display: flex; /* Mantém o alinhamento com Flexbox */
        flex-direction: column; /* Organiza elementos verticalmente */
        justify-content: space-between; /* Distribui o espaço uniformemente */
        align-items: center; /* Centraliza horizontalmente */
        padding-bottom: 20px; /* Espaçamento no rodapé */
    }

    .calculadora {
        width: 90%; /* Calculadora ocupa 90% da largura da tela */
        max-width: 500px; /* Limita a largura máxima */
        margin: 0 auto; /* Centraliza horizontalmente */
        padding: 20px; /* Adiciona espaçamento interno */
    }
}