/* =============================================================================
   ByPoint — alertas do sistema
   =============================================================================
   Reveste os diálogos do SweetAlert2, que é quem o template do Adianti usa
   quando 'dialogs.use_swal' está ligado. TMessage, TQuestion e as mensagens de
   erro do service acabam todas aqui: o desenho padrão do SweetAlert (círculo
   com anel grosso, tudo centralizado, botão roxo) não tem relação nenhuma com a
   identidade do produto, e o alerta é justamente a hora em que o sistema fala
   com quem está usando.

   O que muda:

     - o aviso lê como uma frase, não como um cartaz. Ícone pequeno à esquerda,
       título e texto alinhados à esquerda, ação no canto inferior direito, que
       é o caminho que o olho já faz em qualquer diálogo de sistema operacional;
     - o ícone é redesenhado aqui, em traço, e não depende do desenho interno do
       SweetAlert. As linhas que o plugin monta ficam escondidas e o glifo entra
       por máscara, então mudar de versão do plugin não desmonta o ícone;
     - a paleta é a da marca: fiorde na ação, bronze no foco, e a cor semântica
       só no ícone, em fundo de baixa saturação;
     - o cartão acompanha o tamanho do texto. Largura fixa deixa "Setor gravado."
       sozinho no meio de meia tela.

   O alerta é sempre claro, e isso é escolha, não esquecimento. O layout do
   template fixa data-bs-theme="light", e as mensagens que os controllers montam
   em HTML (o convite de acesso, a conferência) trazem cor e fundo próprios,
   escritos para papel branco: um cartão escuro deixaria esse texto ilegível.
   Se um dia o sistema ganhar tema escuro, essas mensagens entram na conta.

   Carregada em dois lugares, porque o alerta aparece nos dois: theme/login.html
   traz o <link> direto, e bin/apply-identity.sh põe um @import no custom.css do
   tema, que é o arquivo que os layouts internos já carregam.

   Duas convenções valem para o arquivo inteiro:

   **Todo seletor começa em .swal2-container.** Não é enfeite: o plugin escreve
   as regras dele como `div:where(.swal2-container) .swal2-html-container`, que
   pesa mais que uma classe solta. Sem o prefixo, metade daqui é ignorada em
   silêncio, e o texto continua centralizado sem que nada acuse o motivo.

   **Os tokens se repetem em vez de virem do login.css.** Esta folha também roda
   nas telas internas, onde login.css não é carregado, então ela não pode
   depender dele.
   ========================================================================== */

:root {
    --bpa-fundo:        #FFFFFF;
    --bpa-borda:        #E1EBEE;
    --bpa-titulo:       #0A2A35;
    --bpa-texto:        #46626D;
    --bpa-veu:          rgba(4, 22, 29, .55);
    --bpa-sombra:       0 2px 6px rgba(4, 22, 29, .08), 0 24px 56px -20px rgba(4, 22, 29, .45);

    --bpa-acao:         #0A2A35;
    --bpa-acao-hover:   #0F3543;
    --bpa-acao-texto:   #F4F8F9;
    --bpa-neutro-texto: #0F3543;
    --bpa-neutro-borda: #DCE7EA;
    --bpa-neutro-hover: #F4F8F9;

    --bpa-foco:         rgba(192, 138, 62, .40);
    --bpa-bronze:       #C08A3E;

    --bpa-erro:         #B4382F;
    --bpa-erro-fundo:   rgba(180, 56, 47, .10);
    --bpa-aviso:        #92661F;
    --bpa-aviso-fundo:  rgba(192, 138, 62, .15);
    --bpa-ok:           #1E7A57;
    --bpa-ok-fundo:     rgba(30, 122, 87, .12);
    --bpa-info:         #175062;
    --bpa-info-fundo:   rgba(23, 80, 98, .10);

    --bpa-campo-fundo:  #FFFFFF;
}

/* ------------------------------------------------------------------- o véu */

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: var(--bpa-veu);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.swal2-container.swal2-center {
    padding: 1rem;
}

/* --------------------------------------------------------------- o cartão */
/* Duas colunas: o ícone ocupa a primeira e atravessa as duas primeiras linhas,
   título e texto ficam na segunda, e tudo o mais desce para a linha inteira.
   As posições são explícitas justamente para que um campo de entrada ou uma
   mensagem de validação, que aparecem só em alguns diálogos, não caiam dentro
   da coluna do ícone. */

.swal2-container .swal2-popup {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    box-sizing: border-box;
    width: auto;
    min-width: min(21rem, calc(100vw - 2rem));
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 1.6rem 1.75rem 1.5rem;
    border: 1px solid var(--bpa-borda);
    border-radius: 18px;
    background: var(--bpa-fundo);
    color: var(--bpa-texto);
    box-shadow: var(--bpa-sombra);
}

.swal2-container .swal2-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0;
    color: var(--bpa-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    text-align: left;
}

.swal2-container .swal2-html-container {
    grid-column: 2;
    grid-row: 2;
    margin: .4rem 0 0;
    padding: 0;
    color: var(--bpa-texto);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    overflow-wrap: break-word;
}

.swal2-container .swal2-html-container a {
    color: var(--bpa-bronze);
}

/* Diálogo sem título não pode deixar a primeira linha vazia: o texto sobe para
   o lugar dela. O plugin esconde o título com estilo no próprio elemento, e é
   por ele que dá para saber. */
.swal2-container .swal2-title[style*="display: none"] + .swal2-html-container {
    grid-row: 1 / span 2;
    margin-top: 0;
}

/* ---------------------------------------------------------------- o ícone */
/* O desenho que o plugin monta com <span> some inteiro, e o glifo entra como
   máscara sobre a cor do tipo. É o que permite trocar círculo com anel grosso
   por um selo pequeno sem reposicionar linha por linha em cada versão nova. */

.swal2-container .swal2-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border: 0;
    border-radius: 14px;
    line-height: 0;
}

/* Três classes, e não duas: as linhas do ícone de sucesso são ligadas pelo
   plugin com uma regra que pesa mais que .swal2-container .swal2-icon > *, e
   com duas o visto verde antigo continua atravessando o selo. */
.swal2-container .swal2-popup .swal2-icon > * {
    display: none;
}

.swal2-container .swal2-icon::before {
    content: '';
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin: auto;
    background-color: currentColor;
    -webkit-mask: var(--bpa-glifo) center / contain no-repeat;
    mask: var(--bpa-glifo) center / contain no-repeat;
}

/* O plugin gira e estica o ícone na abertura, um efeito pensado para o círculo
   grande dele. Sobre um selo de 44px aquilo lê como falha de renderização. */
.swal2-container .swal2-icon.swal2-icon-show {
    animation: none;
}

.swal2-container .swal2-icon.swal2-error {
    color: var(--bpa-erro);
    background: var(--bpa-erro-fundo);
    --bpa-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m14.6 9.4-5.2 5.2m0-5.2 5.2 5.2'/%3E%3C/svg%3E");
}

.swal2-container .swal2-icon.swal2-warning {
    color: var(--bpa-aviso);
    background: var(--bpa-aviso-fundo);
    --bpa-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 2.5 19.3a1.4 1.4 0 0 0 1.2 2.1h16.6a1.4 1.4 0 0 0 1.2-2.1L12 3.6Z'/%3E%3Cpath d='M12 9.6v4.3'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
}

.swal2-container .swal2-icon.swal2-success {
    color: var(--bpa-ok);
    background: var(--bpa-ok-fundo);
    --bpa-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.3'/%3E%3C/svg%3E");
}

.swal2-container .swal2-icon.swal2-info {
    color: var(--bpa-info);
    background: var(--bpa-info-fundo);
    --bpa-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16.6v-5'/%3E%3Cpath d='M12 7.9h.01'/%3E%3C/svg%3E");
}

.swal2-container .swal2-icon.swal2-question {
    color: var(--bpa-info);
    background: var(--bpa-info-fundo);
    --bpa-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.4 9.4a2.7 2.7 0 0 1 5.2.9c0 1.8-2.6 2.7-2.6 2.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- as ações */

.swal2-container .swal2-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: .5rem;
    width: auto;
    margin: 1.4rem 0 0;
}

.swal2-container .swal2-actions .swal2-styled {
    margin: 0;
    padding: .6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.swal2-container .swal2-actions .swal2-styled.swal2-confirm {
    background-color: var(--bpa-acao);
    color: var(--bpa-acao-texto);
}

/* Botão de negar em vermelho é herança do plugin. Aqui o 'Não' de uma pergunta
   é a saída sem consequência, e nada que não destrói nada se veste de perigo. */
.swal2-container .swal2-actions .swal2-styled.swal2-deny,
.swal2-container .swal2-actions .swal2-styled.swal2-cancel {
    border-color: var(--bpa-neutro-borda);
    background-color: transparent;
    color: var(--bpa-neutro-texto);
}

/* O plugin escurece o botão no hover jogando um gradiente preto por cima, o
   que sobre o fiorde só deixa a cor suja. Trocado por mudança de cor. */
.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:hover,
.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-confirm:active {
    background-color: var(--bpa-acao-hover);
    background-image: none;
}

.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-deny:hover,
.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-deny:active,
.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:hover,
.swal2-container .swal2-actions:not(.swal2-loading) .swal2-styled.swal2-cancel:active {
    background-color: var(--bpa-neutro-hover);
    background-image: none;
}

.swal2-container .swal2-actions .swal2-styled:focus-visible {
    outline: 2px solid var(--bpa-bronze);
    outline-offset: 2px;
    box-shadow: none;
}

.swal2-container .swal2-loader {
    border-color: var(--bpa-bronze) rgba(0, 0, 0, 0) var(--bpa-bronze) rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------- o resto do cartão */

.swal2-container .swal2-close {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    justify-self: end;
    align-self: start;
    width: 1.75rem;
    height: 1.75rem;
    margin: -.4rem -.5rem 0 0;
    border-radius: 8px;
    color: var(--bpa-texto);
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1;
}

.swal2-container .swal2-close:hover {
    background: var(--bpa-neutro-hover);
    color: var(--bpa-titulo);
}

.swal2-container .swal2-input,
.swal2-container .swal2-file,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select,
.swal2-container .swal2-radio,
.swal2-container .swal2-checkbox,
.swal2-container .swal2-validation-message,
.swal2-container .swal2-progress-steps,
.swal2-container .swal2-image,
.swal2-container .swal2-footer {
    grid-column: 1 / -1;
}

.swal2-container .swal2-input,
.swal2-container .swal2-file,
.swal2-container .swal2-textarea {
    width: 100%;
    margin: 1rem 0 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bpa-neutro-borda);
    border-radius: 10px;
    background: var(--bpa-campo-fundo);
    box-shadow: none;
    color: var(--bpa-titulo);
    font-size: .95rem;
}

.swal2-container .swal2-input:focus,
.swal2-container .swal2-file:focus,
.swal2-container .swal2-textarea:focus {
    border: 1px solid var(--bpa-bronze);
    box-shadow: 0 0 0 3px var(--bpa-foco);
}

.swal2-container .swal2-validation-message {
    margin: .9rem 0 0;
    padding: .55rem .75rem;
    border-radius: 10px;
    background: var(--bpa-erro-fundo);
    color: var(--bpa-erro);
    font-size: .9rem;
    font-weight: 500;
}

.swal2-container .swal2-validation-message::before {
    margin: 0 .5rem 0 0;
    background-color: var(--bpa-erro);
}

.swal2-container .swal2-footer {
    margin: 1.2rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--bpa-borda);
    color: var(--bpa-texto);
    font-size: .9rem;
    text-align: left;
}

.swal2-container .swal2-timer-progress-bar-container {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.swal2-container .swal2-timer-progress-bar {
    background: var(--bpa-bronze);
}

/* ------------------------------------------------------------- o movimento */
/* Curto e vindo de baixo. O alerta interrompe o que a pessoa estava fazendo;
   entrada demorada transforma interrupção em espera. */

@keyframes bp-alerta-entra {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes bp-alerta-sai {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(6px) scale(.98); }
}

.swal2-container .swal2-popup.swal2-show {
    animation: bp-alerta-entra .24s cubic-bezier(.2, .8, .25, 1);
}

.swal2-container .swal2-popup.swal2-hide {
    animation: bp-alerta-sai .14s ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
    .swal2-container .swal2-popup.swal2-show,
    .swal2-container .swal2-popup.swal2-hide {
        animation: none;
    }

    .swal2-container.swal2-backdrop-show {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------------------------------------------------------------- celular */
/* É onde o sistema mais roda. Botão de largura inteira, na ordem em que se lê,
   e o ícone menor para o texto não ficar espremido numa tela de 320px. */

@media (max-width: 480px) {
    .swal2-container .swal2-popup {
        column-gap: .75rem;
        min-width: 0;
        padding: 1.25rem 1.25rem 1.15rem;
        border-radius: 16px;
    }

    .swal2-container .swal2-icon {
        width: 2.25rem;
        min-width: 2.25rem;
        height: 2.25rem;
        border-radius: 12px;
    }

    .swal2-container .swal2-icon::before {
        width: 1.25rem;
        height: 1.25rem;
    }

    .swal2-container .swal2-title {
        font-size: 1.05rem;
    }

    .swal2-container .swal2-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 1.2rem;
    }

    .swal2-container .swal2-actions .swal2-styled {
        width: 100%;
        padding: .7rem 1rem;
    }
}