/* =========================================================
   MUSICALWORLD — DENÚNCIAS DE PUBLICAÇÕES ARTÍSTICAS

   Arquivo:
   css/index/publicacoes/publicacoes-artisticas-denuncias.css

   Responsabilidades:
   - Estilizar o modal de denúncia.
   - Estilizar cabeçalho, título e botão de fechar.
   - Estilizar campos, select e textarea.
   - Estilizar contador de caracteres.
   - Estilizar mensagens de sucesso e erro.
   - Estilizar os botões de cancelar e enviar.
   - Adaptar a interface para tablets e celulares.
   - Preservar o visual claro do MusicalWorld.

   Compatível com:
   js/index/publicacoes/publicacoes-artisticas-denuncias.js

   IMPORTANTE:
   Os seletores deste arquivo correspondem às classes
   existentes no HTML gerado pelo JavaScript de denúncias.
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS VISUAIS
   ========================================================= */

:root {

    --mw-denuncia-primaria:
        #6d4aff;

    --mw-denuncia-primaria-hover:
        #5938e5;

    --mw-denuncia-primaria-suave:
        #f0ecff;

    --mw-denuncia-texto:
        #172033;

    --mw-denuncia-texto-secundario:
        #667085;

    --mw-denuncia-texto-terciario:
        #98a2b3;

    --mw-denuncia-fundo:
        #ffffff;

    --mw-denuncia-fundo-secundario:
        #f5f7fb;

    --mw-denuncia-borda:
        #e4e8f0;

    --mw-denuncia-borda-forte:
        #d0d7e5;

    --mw-denuncia-erro:
        #b42318;

    --mw-denuncia-erro-fundo:
        #fff1f0;

    --mw-denuncia-erro-borda:
        #f5c8c5;

    --mw-denuncia-sucesso:
        #168653;

    --mw-denuncia-sucesso-fundo:
        #eaf8f0;

    --mw-denuncia-sucesso-borda:
        #c7ead5;

    --mw-denuncia-raio-modal:
        22px;

    --mw-denuncia-raio-campo:
        12px;

    --mw-denuncia-raio-botao:
        12px;

    --mw-denuncia-sombra:
        0 24px 70px rgba(23, 32, 51, 0.20);

}


/* =========================================================
   2. MODAL PRINCIPAL

   O JavaScript utiliza:
   .feed-publicacao-artistica-modal
   .feed-publicacao-artistica-modal-denuncia
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia {

    position:
        fixed;

    inset:
        0;

    z-index:
        10050;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    height:
        100dvh;

    padding:
        24px;

    overflow:
        hidden;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    background:
        transparent;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;

    -webkit-tap-highlight-color:
        transparent;

}

.feed-publicacao-artistica-modal-denuncia.feed-publicacao-artistica-modal--aberto {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


/* =========================================================
   3. FUNDO ESCURECIDO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(15, 23, 42, 0.58);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity:
        0;

    transition:
        opacity 180ms ease;

}

.feed-publicacao-artistica-modal-denuncia.feed-publicacao-artistica-modal--aberto
.feed-publicacao-artistica-modal-backdrop {

    opacity:
        1;

}


/* =========================================================
   4. PAINEL DO FORMULÁRIO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-painel--denuncia {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    max-width:
        540px;

    max-height:
        calc(100dvh - 48px);

    min-height:
        0;

    margin:
        auto;

    overflow:
        hidden;

    color:
        var(--mw-denuncia-texto);

    background:
        var(--mw-denuncia-fundo);

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius:
        var(--mw-denuncia-raio-modal);

    box-shadow:
        var(--mw-denuncia-sombra);

    opacity:
        0;

    transform:
        translateY(12px) scale(0.985);

    transition:
        opacity 200ms ease,
        transform 200ms ease;

}

.feed-publicacao-artistica-modal-denuncia.feed-publicacao-artistica-modal--aberto
.feed-publicacao-artistica-modal-painel--denuncia {

    opacity:
        1;

    transform:
        translateY(0) scale(1);

}


/* =========================================================
   5. CABEÇALHO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-cabecalho {

    position:
        relative;

    display:
        flex;

    flex-shrink:
        0;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    width:
        100%;

    padding:
        24px 26px 20px;

    background:
        var(--mw-denuncia-fundo);

    border-bottom:
        1px solid var(--mw-denuncia-borda);

}

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-cabecalho > div {

    flex:
        1;

    min-width:
        0;

}


/* =========================================================
   6. TÍTULO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-titulo {

    margin:
        0;

    padding:
        0;

    color:
        var(--mw-denuncia-texto);

    font-family:
        "Sora",
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        21px;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        -0.55px;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   7. BOTÃO FECHAR
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-fechar {

    display:
        inline-flex;

    flex-shrink:
        0;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    min-width:
        38px;

    margin:
        0;

    padding:
        0;

    color:
        var(--mw-denuncia-texto-secundario);

    background:
        var(--mw-denuncia-fundo-secundario);

    border:
        1px solid transparent;

    border-radius:
        50%;

    cursor:
        pointer;

    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;

}

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-fechar:hover {

    color:
        var(--mw-denuncia-texto);

    background:
        #e9edf5;

    border-color:
        var(--mw-denuncia-borda);

}

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-fechar:active {

    transform:
        scale(0.94);

}

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-fechar:focus-visible {

    outline:
        3px solid rgba(109, 74, 255, 0.25);

    outline-offset:
        3px;

}

.feed-publicacao-artistica-modal-denuncia
.feed-publicacao-artistica-modal-fechar svg {

    display:
        block;

    width:
        19px;

    height:
        19px;

}


/* =========================================================
   8. CONTEÚDO DO FORMULÁRIO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-conteudo {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    min-height:
        0;

    width:
        100%;

    padding:
        24px 26px 26px;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;

    scrollbar-color:
        #cbd2e1 transparent;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-conteudo::-webkit-scrollbar {

    width:
        6px;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-conteudo::-webkit-scrollbar-track {

    background:
        transparent;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-conteudo::-webkit-scrollbar-thumb {

    background:
        #cbd2e1;

    border-radius:
        20px;

}


/* =========================================================
   9. TEXTO DE INTRODUÇÃO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-introducao {

    margin:
        0 0 24px;

    padding:
        0;

    color:
        var(--mw-denuncia-texto-secundario);

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.75;

    overflow-wrap:
        anywhere;

}


/* =========================================================
   10. FORMULÁRIO
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-formulario {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

    width:
        100%;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;

}


/* =========================================================
   11. CAMPOS
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-campo {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    width:
        100%;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

}


/* =========================================================
   12. RÓTULOS
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-label {

    display:
        block;

    margin:
        0;

    padding:
        0;

    color:
        var(--mw-denuncia-texto);

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        13px;

    font-weight:
        750;

    line-height:
        1.5;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-opcional {

    color:
        var(--mw-denuncia-texto-secundario);

    font-size:
        12px;

    font-weight:
        500;

}


/* =========================================================
   13. SELECT — MOTIVO DA DENÚNCIA
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-select {

    display:
        block;

    width:
        100%;

    min-width:
        0;

    min-height:
        49px;

    margin:
        0;

    padding:
        12px 40px 12px 14px;

    color:
        var(--mw-denuncia-texto);

    background-color:
        #ffffff;

    border:
        1px solid var(--mw-denuncia-borda-forte);

    border-radius:
        var(--mw-denuncia-raio-campo);

    outline:
        none;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.5;

    cursor:
        pointer;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;

    -webkit-appearance:
        auto;

    appearance:
        auto;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-select:hover {

    border-color:
        #b8bfd0;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-select:focus {

    border-color:
        var(--mw-denuncia-primaria);

    box-shadow:
        0 0 0 4px rgba(109, 74, 255, 0.12);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-select:disabled {

    color:
        var(--mw-denuncia-texto-terciario);

    background:
        #f2f4f7;

    cursor:
        not-allowed;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-select option {

    color:
        var(--mw-denuncia-texto);

    background:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        13px;

}


/* =========================================================
   14. TEXTAREA — DESCRIÇÃO ADICIONAL
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-textarea {

    display:
        block;

    width:
        100%;

    min-width:
        0;

    min-height:
        126px;

    margin:
        0;

    padding:
        13px 14px;

    color:
        var(--mw-denuncia-texto);

    background:
        #ffffff;

    border:
        1px solid var(--mw-denuncia-borda-forte);

    border-radius:
        var(--mw-denuncia-raio-campo);

    outline:
        none;

    resize:
        vertical;

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.7;

    overflow-wrap:
        anywhere;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-textarea::placeholder {

    color:
        var(--mw-denuncia-texto-terciario);

    opacity:
        1;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-textarea:hover {

    border-color:
        #b8bfd0;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-textarea:focus {

    border-color:
        var(--mw-denuncia-primaria);

    box-shadow:
        0 0 0 4px rgba(109, 74, 255, 0.12);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-textarea:disabled {

    color:
        var(--mw-denuncia-texto-terciario);

    background:
        #f2f4f7;

    cursor:
        not-allowed;

}


/* =========================================================
   15. CONTADOR DE CARACTERES
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-contador {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        3px;

    width:
        100%;

    margin:
        -2px 0 0;

    color:
        var(--mw-denuncia-texto-secundario);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.5;

    font-variant-numeric:
        tabular-nums;

}


/* =========================================================
   16. MENSAGEM DE SUCESSO OU ERRO

   O JavaScript utiliza:
   .mw-denuncia-mensagem
   data-tipo="sucesso" ou data-tipo="erro"
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-mensagem {

    display:
        block;

    width:
        100%;

    margin:
        0;

    padding:
        13px 14px;

    color:
        var(--mw-denuncia-erro);

    background:
        var(--mw-denuncia-erro-fundo);

    border:
        1px solid var(--mw-denuncia-erro-borda);

    border-radius:
        12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.7;

    overflow-wrap:
        anywhere;

    animation:
        mw-denuncia-mensagem-entrar 180ms ease-out;

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-mensagem[hidden] {

    display:
        none !important;

}


/* Mensagem de sucesso */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-mensagem[data-tipo="sucesso"] {

    color:
        var(--mw-denuncia-sucesso);

    background:
        var(--mw-denuncia-sucesso-fundo);

    border-color:
        var(--mw-denuncia-sucesso-borda);

}


/* Mensagem de erro */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-mensagem[data-tipo="erro"] {

    color:
        var(--mw-denuncia-erro);

    background:
        var(--mw-denuncia-erro-fundo);

    border-color:
        var(--mw-denuncia-erro-borda);

}


/* =========================================================
   17. ÁREA DE AÇÕES
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-acoes {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

    width:
        100%;

    margin:
        2px 0 0;

    padding:
        0;

}


/* =========================================================
   18. BOTÕES DE CANCELAR E ENVIAR

   Reaproveita as classes existentes do modal de confirmação
   e redefine os estilos somente dentro do modal de denúncia.
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-acoes
.feed-publicacao-artistica-confirmacao-botao {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 1 auto;

    min-width:
        136px;

    min-height:
        46px;

    margin:
        0;

    padding:
        12px 18px;

    border:
        1px solid transparent;

    border-radius:
        var(--mw-denuncia-raio-botao);

    font-family:
        "Manrope",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        12px;

    font-weight:
        750;

    line-height:
        1.4;

    text-align:
        center;

    white-space:
        normal;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;

}


/* =========================================================
   19. BOTÃO CANCELAR
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-acoes
.feed-publicacao-artistica-confirmacao-botao--secundario {

    color:
        #475467;

    background:
        #ffffff;

    border-color:
        var(--mw-denuncia-borda-forte);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-acoes
.feed-publicacao-artistica-confirmacao-botao--secundario:hover:not(:disabled) {

    color:
        var(--mw-denuncia-texto);

    background:
        var(--mw-denuncia-fundo-secundario);

    border-color:
        #bdc6d7;

}


/* =========================================================
   20. BOTÃO ENVIAR DENÚNCIA
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-botao-enviar {

    color:
        #ffffff;

    background:
        var(--mw-denuncia-primaria);

    border-color:
        var(--mw-denuncia-primaria);

    box-shadow:
        0 3px 8px rgba(109, 74, 255, 0.16);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-botao-enviar:hover:not(:disabled) {

    color:
        #ffffff;

    background:
        var(--mw-denuncia-primaria-hover);

    border-color:
        var(--mw-denuncia-primaria-hover);

    box-shadow:
        0 5px 14px rgba(109, 74, 255, 0.22);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-botao-enviar:active:not(:disabled) {

    transform:
        translateY(1px);

}

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-botao-enviar:disabled {

    color:
        #ffffff;

    background:
        #9b87f5;

    border-color:
        #9b87f5;

    opacity:
        0.85;

    cursor:
        wait;

}


/* =========================================================
   21. FOCO DE ACESSIBILIDADE
   ========================================================= */

.feed-publicacao-artistica-modal-denuncia
.mw-denuncia-acoes
.feed-publicacao-artistica-confirmacao-botao:focus-visible {

    outline:
        3px solid rgba(109, 74, 255, 0.28);

    outline-offset:
        3px;

}


/* =========================================================
   22. CLASSE DE BODY COM MODAL ABERTO

   Preserva a classe existente do projeto.
   ========================================================= */

body.feed-publicacao-artistica-modal-aberto {

    overflow:
        hidden;

}


/* =========================================================
   23. TABLETS — ATÉ 768px
   ========================================================= */

@media (max-width: 768px) {

    .feed-publicacao-artistica-modal-denuncia {

        padding:
            20px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-painel--denuncia {

        max-width:
            510px;

        max-height:
            calc(100dvh - 40px);

        border-radius:
            21px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-cabecalho {

        padding:
            22px 22px 18px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-titulo {

        font-size:
            20px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-conteudo {

        padding:
            22px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-introducao {

        margin-bottom:
            22px;

        font-size:
            13px;

    }

}


/* =========================================================
   24. CELULARES — ATÉ 480px
   ========================================================= */

@media (max-width: 480px) {

    .feed-publicacao-artistica-modal-denuncia {

        align-items:
            center;

        justify-content:
            center;

        padding:
            12px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-painel--denuncia {

        width:
            100%;

        max-width:
            none;

        max-height:
            calc(100dvh - 24px);

        border-radius:
            19px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-cabecalho {

        gap:
            12px;

        padding:
            19px 18px 16px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-titulo {

        font-size:
            18px;

        line-height:
            1.4;

        letter-spacing:
            -0.35px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-fechar {

        width:
            35px;

        height:
            35px;

        min-width:
            35px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-fechar svg {

        width:
            18px;

        height:
            18px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-conteudo {

        padding:
            19px 18px 20px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-introducao {

        margin-bottom:
            20px;

        font-size:
            12px;

        line-height:
            1.75;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-formulario {

        gap:
            19px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-campo {

        gap:
            8px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-label {

        font-size:
            12px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-opcional {

        font-size:
            11px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-select {

        min-height:
            47px;

        padding:
            11px 12px;

        font-size:
            12px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-textarea {

        min-height:
            112px;

        padding:
            12px;

        font-size:
            12px;

        line-height:
            1.7;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-contador {

        font-size:
            10px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-mensagem {

        padding:
            11px 12px;

        font-size:
            11px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-acoes {

        display:
            flex;

        flex-direction:
            column-reverse;

        align-items:
            stretch;

        gap:
            10px;

        margin-top:
            1px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-acoes
    .feed-publicacao-artistica-confirmacao-botao {

        flex:
            0 0 auto;

        width:
            100%;

        min-width:
            0;

        min-height:
            45px;

        padding:
            12px 14px;

        font-size:
            12px;

    }

}


/* =========================================================
   25. CELULARES PEQUENOS — ATÉ 360px
   ========================================================= */

@media (max-width: 360px) {

    .feed-publicacao-artistica-modal-denuncia {

        padding:
            8px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-painel--denuncia {

        max-height:
            calc(100dvh - 16px);

        border-radius:
            16px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-cabecalho {

        padding:
            16px 14px 14px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-titulo {

        font-size:
            17px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-fechar {

        width:
            33px;

        height:
            33px;

        min-width:
            33px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-conteudo {

        padding:
            16px 14px 17px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-introducao {

        margin-bottom:
            17px;

        font-size:
            11px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-formulario {

        gap:
            17px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-select {

        font-size:
            11px;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-textarea {

        min-height:
            100px;

        font-size:
            12px;

    }

}


/* =========================================================
   26. CELULAR NA HORIZONTAL

   Mantém o formulário utilizável quando a altura da tela
   é reduzida pela orientação horizontal.
   ========================================================= */

@media (max-height: 560px) and (max-width: 900px) {

    .feed-publicacao-artistica-modal-denuncia {

        align-items:
            flex-start;

        padding:
            10px;

        overflow-y:
            auto;

    }

    .feed-publicacao-artistica-modal-denuncia
    .feed-publicacao-artistica-modal-painel--denuncia {

        flex-shrink:
            0;

        max-height:
            none;

        min-height:
            auto;

        margin:
            auto;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-conteudo {

        overflow:
            visible;

    }

    .feed-publicacao-artistica-modal-denuncia
    .mw-denuncia-textarea {

        min-height:
            90px;

    }

}


/* =========================================================
   27. ANIMAÇÃO DA MENSAGEM
   ========================================================= */

@keyframes mw-denuncia-mensagem-entrar {

    from {

        opacity:
            0;

        transform:
            translateY(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   28. ACESSIBILIDADE — MOVIMENTO REDUZIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .feed-publicacao-artistica-modal-denuncia,
    .feed-publicacao-artistica-modal-denuncia *,
    .feed-publicacao-artistica-modal-denuncia
    *::before,
    .feed-publicacao-artistica-modal-denuncia
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}