/* =========================================================
   PCONTROL: CELULAR (janela até 767px) - layout global
   Complementa tablet.css (que também vale aqui): avisos, barra de meta, barra de ferramentas,
   rodapé e formulários no celular em pé.
   Carregado com media="(max-width: 767.98px)"; ver cabeçalho de desktop.css e .ai/guidelines/ui-mobile.md.
   ========================================================= */

/* ---------- origem: menu_helper.css ---------- */

@media (max-width: 600px) {

    .saas-toolbar {
        gap: 8px;
        padding: 6px;
    }

    .saas-toolbar-main,
    .saas-toolbar-secondary {
        gap: 0;
    }

    .saas-toolbar-secondary {
        padding-left: 4px;
    }

    .saas-tool,
    .saas-icon-button,
    .saas-user-toggle {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }

    .saas-user {
        margin-left: 0;
        padding-left: 4px;
    }

    /* Suporte continua acessível em "Meus Chamados", no menu do usuário */
    .saas-tool-wrapper,
    .saas-tool-support {
        display: none;
    }



}

/* ---------- origem: v2-base.css ---------- */

@media (max-width: 767.98px) {
    .v2-footer {
        padding-bottom: 88px;
        text-align: center;
    }

    .v2-footer-top,
    .v2-footer-nav,
    .v2-footer-links {
        justify-content: center;
    }

    .v2-footer-top {
        flex-direction: column;
    }

    .v2-footer-nav {
        flex-direction: column;
    }

    .v2-footer-links {
        gap: var(--v2-space-1) var(--v2-space-4);
    }
}

/* ---------- origem: alertas.css ---------- */

@media (max-width: 767.98px) {
    .aviso {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--avs-s2) var(--avs-s3);
    }

    .aviso-texto {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-basis: calc(100% - 18px - var(--avs-s3));
    }

    .aviso-acoes {
        flex-basis: 100%;
        flex-wrap: wrap;
        padding-left: calc(18px + var(--avs-s3));
    }

    .aviso-fechar {
        margin-left: auto;
    }
}

/* ---------- origem: barra_meta.css ---------- */

@media (max-width: 767.98px) {
    .pc-meta-topo { flex-wrap: wrap; }
    .pc-meta-progresso { order: 5; flex-basis: 100%; }
    .pc-meta-atual { flex: 1 1 100%; order: 4; }
    .pc-meta-chevron { margin-left: auto; }
}

/* ---------- formulários (todas as telas) ---------- */

/* 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo e a tela "pula".
   height auto + 40px: o 34px fixo do Bootstrap 3 (app.css) cortaria o texto maior e fica pequeno para o dedo.
   Campos com altura fixa por id (ex.: #data_de em indicadores_v2.css) continuam com a altura deles. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px;
    }

    input.form-control,
    select.form-control,
    .form-select {
        height: auto;
        min-height: 40px;
    }
}