/*
 * Sistema global de modais do Conecta PCSE.
 *
 * Esta folha é carregada globalmente somente até 767.98px. A aparência
 * desktop original é definida separadamente em `pcse-modals-desktop.css`.
 * Escape hatch mobile para fluxos excepcionais: `.modal-dialog.pcse-modal-plain`.
 */

:root {
    --pcse-modal-accent: var(--bs-theme, #00ff9c);
    --pcse-modal-accent-rgb: var(--bs-theme-rgb, 0, 255, 156);
    --pcse-modal-radius: 22px;
    --pcse-modal-bg: rgba(0, 20, 17, 0.985);
    --pcse-modal-header-bg: rgba(25, 57, 51, 0.96);
    --pcse-modal-footer-bg: rgba(24, 51, 46, 0.97);
    --pcse-modal-border: rgba(var(--pcse-modal-accent-rgb), 0.24);
    --pcse-modal-divider: rgba(255, 255, 255, 0.09);
    --pcse-modal-ink: rgba(255, 255, 255, 0.92);
    --pcse-modal-ink-soft: rgba(255, 255, 255, 0.64);
}

/*
 * No desktop, os modais seguem o shell compacto e translúcido já utilizado
 * nos fluxos institucionais: contorno discreto, cantos quase retos e
 * cabeçalho, corpo e rodapé visualmente separados.
 */
@media (min-width: 768px) {
    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content {
        position: relative;
        display: flex;
        max-height: calc(100dvh - 2rem);
        flex-direction: column;
        overflow: hidden;
        color: var(--pcse-modal-ink);
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 2px !important;
        background:
            linear-gradient(
                145deg,
                rgba(var(--pcse-modal-accent-rgb), 0.04),
                transparent 42%
            ),
            rgba(42, 54, 53, 0.84) !important;
        box-shadow:
            0 24px 64px rgba(0, 0, 0, 0.54),
            inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        backdrop-filter: blur(20px) saturate(1.04);
        -webkit-backdrop-filter: blur(20px) saturate(1.04);
    }

    /*
     * Remove adornos locais do shell sem interferir nos cartões e seções
     * internos de cada formulário.
     */
    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content::before,
    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content::after {
        display: none !important;
        content: none !important;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-header {
        min-height: 44px;
        flex: 0 0 auto;
        gap: 0.55rem;
        margin: 0;
        padding: 0.55rem 0.7rem !important;
        color: var(--pcse-modal-ink);
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0 !important;
        background: rgba(71, 83, 82, 0.68) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(16px) saturate(1.02);
        -webkit-backdrop-filter: blur(16px) saturate(1.02);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-body {
        min-height: 0;
        flex: 1 1 auto;
        padding: 0.75rem 0.9rem !important;
        overflow-x: hidden;
        overflow-y: auto;
        color: var(--pcse-modal-ink);
        background: rgba(31, 43, 42, 0.72) !important;
        scrollbar-width: thin;
        scrollbar-color:
            rgba(var(--pcse-modal-accent-rgb), 0.34)
            rgba(255, 255, 255, 0.025);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-footer {
        min-height: 48px;
        flex: 0 0 auto;
        gap: 0.5rem;
        margin: 0;
        padding: 0.55rem 0.7rem !important;
        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0 !important;
        background: rgba(54, 69, 67, 0.76) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(16px) saturate(1.02);
        -webkit-backdrop-filter: blur(16px) saturate(1.02);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) .modal-title {
        color: var(--pcse-modal-ink) !important;
        font-size: 0.92rem;
        line-height: 1.25;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) :is(.btn-close, button.close) {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
        margin: 0 0 0 auto !important;
        padding: 0.4rem !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 6px !important;
        background-color: rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.82 !important;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) button.close {
        font-size: 1.2rem;
        line-height: 1;
        text-shadow: none;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) :is(.btn-close, button.close):is(:hover, :focus-visible) {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.38) !important;
        background-color: rgba(255, 255, 255, 0.09) !important;
        outline: 2px solid rgba(var(--pcse-modal-accent-rgb), 0.34);
        outline-offset: 1px;
        opacity: 1 !important;
    }

    /*
     * Controles e ações mantêm a densidade do modal de referência. Somente os
     * cantos são normalizados; estados globais de validação continuam livres
     * para aplicar as bordas vermelha e amarela.
     */
    .modal .modal-dialog:not(.pcse-modal-plain) :is(
        .form-control,
        .form-select,
        .select2-selection,
        .input-group-text
    ) {
        border-radius: 2px !important;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-footer .btn {
        min-height: 34px;
        padding: 0.38rem 0.65rem;
        border-radius: 2px !important;
        font-size: 0.8rem;
    }

    .modal-backdrop.show {
        background: rgba(1, 14, 13, 0.86) !important;
        opacity: 0.72 !important;
        backdrop-filter: blur(10px) saturate(0.78) !important;
        -webkit-backdrop-filter: blur(10px) saturate(0.78) !important;
    }

    /*
     * Avisos preservam no desktop o vidro arredondado já consolidado em
     * produção. A exceção é restrita ao shell: no mobile continua valendo o
     * bottom sheet global definido abaixo.
     */
    .modal.aviso-modal .modal-dialog:not(.pcse-modal-plain) > .modal-content {
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal.aviso-modal
        .modal-dialog:not(.pcse-modal-plain)
        > .modal-content
        > .modal-header.aviso-modal__header {
        min-height: 0 !important;
        padding: 1.2rem 1.4rem 1.05rem !important;
        border-bottom: 1px solid var(--aviso-border) !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal.aviso-modal
        .modal-dialog:not(.pcse-modal-plain)
        > .modal-content
        > .modal-body.aviso-modal__body {
        padding: 1.35rem 1.4rem !important;
        overflow: auto !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal.aviso-modal
        .modal-dialog:not(.pcse-modal-plain)
        > .modal-content
        > .modal-footer.aviso-modal__footer {
        min-height: 0 !important;
        padding: 0.95rem 1.4rem !important;
        border-top: 1px solid var(--aviso-border) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .modal.aviso-modal
        .modal-dialog:not(.pcse-modal-plain)
        > .modal-content
        .modal-title.aviso-modal__title {
        font-size: 1.18rem !important;
        line-height: 1.3 !important;
    }

    body:has(.modal.aviso-modal.show) .modal-backdrop.show {
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 1 !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
}

@media (max-width: 767.98px) {
    body.modal-open {
        overflow: hidden;
    }

    .modal {
        padding: 0 !important;
    }

    /*
     * Todos os tamanhos Bootstrap viram a mesma folha inferior. O `!important`
     * é necessário para vencer tanto os modificadores fullscreen do Bootstrap
     * quanto skins locais antigas com seletor por ID.
     */
    .modal .modal-dialog:not(.pcse-modal-plain),
    .modal.fade .modal-dialog:not(.pcse-modal-plain),
    .modal.show .modal-dialog:not(.pcse-modal-plain) {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0;
        pointer-events: none;
        transform: none !important;
        transition: none !important;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content {
        position: relative;
        display: flex;
        width: 100%;
        max-width: none;
        height: auto !important;
        min-height: 0;
        max-height: calc(100dvh - 42px) !important;
        flex-direction: column;
        overflow: hidden !important;
        pointer-events: auto;
        color: var(--pcse-modal-ink);
        border: 1px solid var(--pcse-modal-border) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: var(--pcse-modal-radius) var(--pcse-modal-radius) 0 0 !important;
        background:
            linear-gradient(
                145deg,
                rgba(var(--pcse-modal-accent-rgb), 0.055),
                transparent 42%
            ),
            var(--pcse-modal-bg) !important;
        box-shadow:
            0 -22px 64px rgba(0, 0, 0, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        backdrop-filter: blur(18px) saturate(1.08);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    /* Alça visual da folha, independente dos pseudo-elementos dos módulos. */
    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content::after {
        position: absolute !important;
        z-index: 6;
        top: 8px !important;
        left: 50% !important;
        display: block !important;
        width: 44px !important;
        height: 4px !important;
        margin: 0 !important;
        content: "" !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.24) !important;
        box-shadow: none !important;
        transform: translateX(-50%) !important;
        pointer-events: none;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-header {
        position: sticky !important;
        z-index: 5;
        top: 0;
        display: flex;
        min-height: 68px;
        flex: 0 0 auto;
        gap: 0.75rem;
        margin: 0;
        padding: 1.35rem 1.15rem 1rem !important;
        color: var(--pcse-modal-ink);
        border: 0 !important;
        border-bottom: 1px solid var(--pcse-modal-divider) !important;
        background:
            linear-gradient(
                135deg,
                rgba(var(--pcse-modal-accent-rgb), 0.055),
                transparent 62%
            ),
            var(--pcse-modal-header-bg) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
        backdrop-filter: blur(16px) saturate(1.08);
        -webkit-backdrop-filter: blur(16px) saturate(1.08);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-body {
        min-height: 0;
        flex: 1 1 auto;
        padding: 1rem 1.15rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: var(--pcse-modal-ink);
        background: rgba(0, 14, 12, 0.28) !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color:
            rgba(var(--pcse-modal-accent-rgb), 0.4)
            rgba(255, 255, 255, 0.025);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content > .modal-footer {
        position: sticky !important;
        z-index: 5;
        bottom: 0;
        display: flex;
        min-height: 68px;
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.65rem;
        margin: 0;
        padding:
            0.8rem
            1.15rem
            calc(0.8rem + env(safe-area-inset-bottom)) !important;
        border: 0 !important;
        border-top: 1px solid var(--pcse-modal-divider) !important;
        background:
            linear-gradient(
                315deg,
                rgba(var(--pcse-modal-accent-rgb), 0.035),
                transparent 55%
            ),
            var(--pcse-modal-footer-bg) !important;
        box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(16px) saturate(1.08);
        -webkit-backdrop-filter: blur(16px) saturate(1.08);
    }

    .modal .modal-dialog:not(.pcse-modal-plain) .modal-title {
        color: var(--pcse-modal-ink) !important;
    }

    /*
     * O X é sempre branco. A regra cobre o botão Bootstrap 5 e o `.close`
     * legado sem atingir botões textuais como "Fechar" e "Cancelar".
     */
    .modal .modal-dialog:not(.pcse-modal-plain) :is(.btn-close, button.close) {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        margin: -0.35rem -0.45rem -0.35rem auto !important;
        padding: 0.75rem !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: transparent !important;
        box-shadow: none !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.88 !important;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) button.close {
        font-size: 1.65rem;
        line-height: 1;
        text-shadow: none;
    }

    .modal .modal-dialog:not(.pcse-modal-plain) :is(.btn-close, button.close):is(:hover, :focus-visible) {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.07) !important;
        outline: 2px solid rgba(255, 255, 255, 0.2);
        outline-offset: 1px;
        opacity: 1 !important;
    }

    .modal-backdrop.show {
        background: rgba(0, 9, 8, 0.9);
        opacity: 0.82 !important;
        backdrop-filter: blur(8px) saturate(0.72);
        -webkit-backdrop-filter: blur(8px) saturate(0.72);
    }

    .modal.show .modal-dialog:not(.pcse-modal-plain) > .modal-content {
        animation: pcse-modal-sheet-in 240ms cubic-bezier(0.2, 0.78, 0.22, 1) both !important;
    }
}

@keyframes pcse-modal-sheet-in {
    from {
        opacity: 0.88;
        transform: translateY(42px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal .modal-dialog:not(.pcse-modal-plain),
    .modal .modal-dialog:not(.pcse-modal-plain) > .modal-content {
        animation: none !important;
        transition: none !important;
    }
}