/* =========================================================
   IECJS — E7.5A
   Hardening responsivo transversal
   Objetivo: corrigir comportamento de viewport/touch sem
   alterar estrutura funcional dos módulos.
========================================================= */

html,
body {
    max-width: 100%;
}

html.iecjs-contexto-interno body {
    overflow-x: clip;
}

html.iecjs-nav-travada,
html.iecjs-nav-travada body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.iecjs-contexto-interno :where(main, section, article, form, fieldset) {
    min-width: 0;
}

html.iecjs-contexto-interno :where(img, video, canvas, iframe, svg:not(.iecjs-icon-sprite)) {
    max-width: 100%;
}

html.iecjs-contexto-interno :where(
    p,
    li,
    dd,
    td,
    th,
    small,
    label,
    .ajuda,
    .descricao,
    .texto-secundario
) {
    overflow-wrap: anywhere;
}

/* Rolagem horizontal intencional deve continuar funcionando em tabelas. */
html.iecjs-contexto-interno :where(
    .table-wrap,
    .tabela-wrap,
    .table-container,
    .tabela-container,
    .evento-tabela-wrap,
    .professor-tabela-wrap
) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

@media (max-width: 760px) {
    /* Evita zoom automático em Safari/iOS ao focar inputs pequenos. */
    html.iecjs-contexto-interno :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select,
        textarea
    ) {
        font-size: max(16px, 1em);
    }

    html.iecjs-contexto-interno :where(
        button,
        input[type="button"],
        input[type="submit"],
        input[type="reset"],
        [role="button"]
    ) {
        min-height: 42px;
        touch-action: manipulation;
    }

    html.iecjs-contexto-interno :where(
        .admin-modal-container,
        .admin-min-modal-box,
        .admin-midia-modal-box,
        .midia-evento-modal-box,
        .midia-modal-box,
        .eventos-modal-caixa,
        .evento-modal-caixa,
        .cms-modal-caixa,
        .cms-modal-caixa-editor,
        .cms-modal-caixa-larga,
        .escala-modal-dialog,
        .professor-modal-dialog,
        .modal-pdf-container,
        .modal-boletim-container,
        .modal-atividade-aluno-container,
        .solicitacoes-config-modal-caixa,
        .solicitacoes-painel-modal-caixa,
        .ministerio-modal-container,
        .foto-modal-container
    ) {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin-inline: auto;
    }

    /* Conteúdo longo do modal rola dentro da viewport, não atrás do cabeçalho. */
    html.iecjs-contexto-interno :where(
        .admin-modal-container,
        .admin-min-modal-box,
        .admin-midia-modal-box,
        .midia-evento-modal-box,
        .midia-modal-box,
        .eventos-modal-caixa,
        .evento-modal-caixa,
        .cms-modal-caixa,
        .cms-modal-caixa-editor,
        .cms-modal-caixa-larga,
        .escala-modal-dialog,
        .professor-modal-dialog,
        .modal-boletim-container,
        .modal-atividade-aluno-container,
        .solicitacoes-config-modal-caixa,
        .solicitacoes-painel-modal-caixa,
        .ministerio-modal-container
    ) {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 430px) {
    html.iecjs-contexto-interno :where(
        .admin-modal-container,
        .admin-min-modal-box,
        .admin-midia-modal-box,
        .midia-evento-modal-box,
        .midia-modal-box,
        .eventos-modal-caixa,
        .evento-modal-caixa,
        .cms-modal-caixa,
        .cms-modal-caixa-editor,
        .cms-modal-caixa-larga,
        .escala-modal-dialog,
        .professor-modal-dialog,
        .modal-boletim-container,
        .modal-atividade-aluno-container,
        .solicitacoes-config-modal-caixa,
        .solicitacoes-painel-modal-caixa,
        .ministerio-modal-container,
        .foto-modal-container
    ) {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: var(--radius-md, 12px) !important;
    }
}

@supports (padding: max(0px)) {
    @media (max-width: 760px) {
        .portal-sidebar {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}