/* ─────────────────────────────────────────────────────────────────────────
   X de fechar nos AVISOS (.alert) do sistema — pedido do Cesar, 15/09/2026.
   Par de static/js/alertas-fechaveis.js (o clique e o "volta a aparecer?").

   O X é um ::after, NÃO um <button> enfiado no aviso, de propósito: centenas
   de avisos são montados por JS inline que faz innerHTML/textContent no
   próprio aviso (o X sumiria no primeiro repinte) ou procura
   querySelector('button') nele (acharia o X). Pseudo-elemento não existe
   para o DOM das telas.

   ESTE SELETOR É O DONO da regra "quem ganha X": o JS pergunta ao CSS
   (--alerta-x no elemento) em vez de repetir a lista. Ficam de fora:
   - quem já fecha sozinho (.alert-dismissible);
   - aviso dentro de modal/offcanvas/dropdown/popover/toast — o X do aviso
     competiria com o X do diálogo, logo acima;
   - aviso com CONTROLE (button/input/select/textarea/.btn): é barra de ação
     ("3 selecionadas · Aprovar") ou aviso cuja ação é o ponto ("Tentar de
     novo") — fechar tiraria o controle da tela;
   - [data-sem-x] no aviso ou num ancestral: opt-out explícito.
   O seletor se repete nas duas regras abaixo — mudou um, muda o outro. (Sem
   CSS aninhado de propósito: navegador sem nesting aplicaria o recuo e
   descartaria o X.)

   Só em TELA (@media screen): impressão sai exatamente como antes.
   ───────────────────────────────────────────────────────────────────────── */

/* Não herda: um .alert aninhado não pode "ter X" por tabela do de fora. */
@property --alerta-x {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@media screen {
    .alert:not(.alert-dismissible, [data-sem-x],
               :is(.modal, .offcanvas, .dropdown-menu, .popover, .toast, [data-sem-x]) *,
               :has(button, input, select, textarea, .btn)) {
        --alerta-x: 1;
        /* !important porque os avisos usam px-3/p-4 (utilitários do Bootstrap
           já são !important) — sem isso o texto corre por baixo do X. */
        padding-right: 2.5rem !important;
    }

    .alert:not(.alert-dismissible, [data-sem-x],
               :is(.modal, .offcanvas, .dropdown-menu, .popover, .toast, [data-sem-x]) *,
               :has(button, input, select, textarea, .btn))::after {
        content: "";
        position: absolute;
        /* Centrado em aviso baixo (py-1/py-2 small), preso ao topo em aviso alto. */
        top: clamp(0px, calc(50% - .875rem), .4rem);
        right: .35rem;
        width: 1.75rem;
        height: 1.75rem;
        /* Máscara + currentColor: o X sai na cor do texto do aviso (marrom no
           warning, azul no info), sem um SVG por variante. */
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / .7rem no-repeat;
                mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / .7rem no-repeat;
        opacity: .5;
        transition: opacity .15s;
        /* O X é SÓ desenho: quem decide o clique é a posição, no JS. Sem isto
           o ::after (pintado por último) cobriria um ícone/selo posicionado no
           canto e roubaria o clique dele. */
        pointer-events: none;
    }

    /* Ponteiro em cima do X (classe posta pelo JS, que sabe a posição). */
    .alert.alerta-x-mira { cursor: pointer; }
    .alert.alerta-x-mira::after { opacity: .9; }
}

/* Fechar é ESCONDER, nunca remover do DOM: a tela guarda referência do aviso
   e volta a preenchê-lo. */
.alerta-fechada { display: none !important; }