/*
 * Ajustes de responsividade e usabilidade.
 * Carregado depois do site.css. Só atua abaixo de 992px: o layout desktop não muda.
 */

/* Nunca gerar rolagem horizontal na página (clip não quebra position: sticky) */
body {
    overflow-x: hidden;
    overflow-x: clip;
    overflow-wrap: break-word;
}

/* Mídia nunca maior que a tela */
img,
video,
iframe {
    max-width: 100%;
}

@media (max-width: 991.98px) {

    img {
        height: auto;
    }

    /* ---------- Menu (colapsado) ---------- */
    .navbar-collapse .navbar-nav {
        padding: .5rem 0;
    }

        .navbar-collapse .navbar-nav .nav-item > .btn,
        .navbar-collapse .navbar-nav .dropdown > .btn {
            width: 100%;
            text-align: left;
            padding: .75rem .5rem;
        }

    .navbar-collapse .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding: 0 0 .5rem 1rem;
    }

        .navbar-collapse .dropdown-menu .btn {
            width: 100%;
            text-align: left;
            white-space: normal;
            padding: .6rem .5rem;
        }

    /* Saldo (usa float) fica abaixo do menu, sem sobrepor */
    .navbar-collapse .panel {
        overflow: hidden;
        padding: .5rem;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }

    /* ---------- Formulários ---------- */
    /* 16px evita o zoom automático do iOS ao focar o campo */
    .form-control,
    .form-select {
        font-size: 16px;
        min-height: 44px;
    }

    .btn:not(.btn-sm):not(.btn-close) {
        min-height: 44px;
    }

    /* ---------- Home: bloco Evolução empilhado ---------- */
    /* Divisória vertical vira horizontal quando as colunas empilham */
    #controleEmbaixador .border-end {
        border-right: 0 !important;
        border-bottom: 1px solid #212529;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    #controleEmbaixador .lado-info {
        padding: 1rem 0 0 !important;
    }

    /* ---------- Larguras fixas do site.css ---------- */
    .bgInsercao {
        width: 100%;
        max-width: 440px;
    }

    .itensHomeExibicao {
        width: 100%;
        max-width: 348px;
    }

    .embaixador .menuCampanha {
        width: 100%;
    }

    .menuCampanha ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem 1rem;
    }

    .programaParceriaDetalheslink a {
        width: auto;
        max-width: 100%;
    }

    .image {
        width: 100%;
        float: none;
    }

    .listaPerquntasQuiz video {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767.98px) {

    /* Tabelas rolam na horizontal dentro delas mesmas, sem empurrar a página */
    :not(.table-responsive):not([style*="overflow"]) > table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modais com respiro lateral e rolagem interna */
    .modal-dialog {
        margin: .5rem;
    }

    .modal-body {
        overflow-x: auto;
    }
}