/* =============================================================================
   Alerta — acabamento dos popups do SweetAlert2 (ver public/assets/js/alerts.js)
   -----------------------------------------------------------------------------
   O SweetAlert2 injeta o CSS dele no <head> quando carrega — DEPOIS deste
   arquivo. Mesmo assim estas regras ganham: as dele vêm embrulhadas em
   :where(), que zera a especificidade, e as daqui usam classe. Não depende da
   ordem de carregamento, e não precisa de !important.

   As cores são as do painel (panel.css) repetidas em variáveis próprias, e não
   as --pn-*: o site institucional também mostra estes popups (formulário de
   contato) e não carrega o panel.css.
   ========================================================================== */

.swal2-container {
    --alerta-texto: #0f172a;
    --alerta-mudo: #475569;
    --alerta-borda: #e2e8f0;
    --alerta-borda-forte: #cbd5e1;
    --alerta-superficie-2: #f8fafc;
    --alerta-grad: linear-gradient(92deg, #06b6d4, #3b82f6 60%, #818cf8);
    --alerta-ciano: #0891b2;
    --alerta-cor: #0891b2;

    --swal2-backdrop: rgba(15, 23, 42, .45);
    --swal2-outline: 0 0 0 3px rgba(6, 182, 212, .35);
}

/* Cor de cada nível: pinta a borda do toast, a barra de tempo e o título. */
.alerta-sucesso { --alerta-cor: #059669; }
.alerta-info    { --alerta-cor: #0891b2; }
.alerta-aviso   { --alerta-cor: #d97706; }
.alerta-erro    { --alerta-cor: #dc2626; }

/* ----------------------------------------------------------------- modal */

.swal2-popup.alerta-popup {
    width: min(34em, calc(100vw - 2rem));
    padding: 1.5rem 1.25rem 1.25rem;
    border: 1px solid var(--alerta-borda);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
    color: var(--alerta-texto);
    font-family: inherit;
}

.alerta-popup .swal2-title {
    padding: .75rem 1rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.35;
    color: var(--alerta-texto);
}

/* A saída de uma rotina chega com quebras de linha na mensagem (ver
   RoutineController). O texto entra por textContent, então pre-line é o que
   mantém "Faturas marcadas: 3" e "Clientes suspensos: 1" em linhas próprias. */
.alerta-popup .swal2-html-container {
    padding: .6rem 1.25rem 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--alerta-mudo);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.alerta-popup .swal2-icon { margin-top: .5rem; }

.alerta-popup .swal2-actions {
    gap: .5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.alerta-popup .swal2-validation-message {
    margin: 1rem 0 0;
    border-radius: .6rem;
    background: #fffbeb;
    color: #92400e;
    font-size: .88rem;
}

/* --------------------------------------------------------------- botões */

.alerta-btn {
    min-width: 7.5rem;
    padding: .5rem 1.1rem;
    border-radius: .6rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.alerta-btn:focus-visible { outline: 0; box-shadow: var(--swal2-outline); }

.alerta-btn-primario {
    border: 0;
    background: var(--alerta-grad);
    color: #fff;
    box-shadow: 0 6px 18px rgba(6, 182, 212, .3);
}

.alerta-btn-primario:hover,
.alerta-btn-primario:focus { color: #fff; filter: brightness(1.06); }

.alerta-btn-perigo {
    border: 0;
    background: #dc2626;
    color: #fff;
    box-shadow: 0 6px 18px rgba(220, 38, 38, .25);
}

.alerta-btn-perigo:hover,
.alerta-btn-perigo:focus { color: #fff; background: #b91c1c; }

.alerta-btn-secundario {
    border: 1px solid var(--alerta-borda-forte);
    background: #fff;
    color: var(--alerta-mudo);
}

.alerta-btn-secundario:hover,
.alerta-btn-secundario:focus { background: var(--alerta-superficie-2); color: var(--alerta-texto); }

/* ----------------------------------------------------------------- toast */

.swal2-container.swal2-top-end.alerta-container-toast,
.swal2-container.swal2-top-right.alerta-container-toast { padding: 1rem; }

.swal2-popup.alerta-toast {
    width: min(26rem, calc(100vw - 2rem));
    padding: .75rem .9rem;
    border: 1px solid var(--alerta-borda);
    border-left: 4px solid var(--alerta-cor);
    border-radius: .8rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    color: var(--alerta-texto);
    font-family: inherit;
}

/* O ícone ocupa todas as linhas da grade do toast e o título só a primeira:
   é a margem de cima que o deixa na altura do meio do ícone. */
.alerta-toast .swal2-title {
    margin: .4rem .5rem;
    padding: 0;
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--alerta-texto);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.alerta-toast .swal2-html-container {
    margin: .15rem .5rem 0;
    padding: 0;
    font-size: .88rem;
    color: var(--alerta-mudo);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.alerta-toast .swal2-close {
    align-self: flex-start;
    font-size: 1.4rem;
    color: #94a3b8;
}

.alerta-toast .swal2-close:hover { color: var(--alerta-texto); }

.alerta-toast .swal2-timer-progress-bar-container {
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}

.alerta-toast .swal2-timer-progress-bar {
    height: .2rem;
    background: var(--alerta-cor);
    opacity: .55;
}

/* ------------------------------------------ lista (validação, avisos) --- */

.alerta-lista-corpo {
    max-height: min(55vh, 28rem);
    overflow-y: auto;
    text-align: left;
    white-space: normal;
}

.alerta-lista-intro { margin: 0 0 .75rem; }

/* Sem text-transform: o título do grupo traz dado do servidor (o número do
   ofício), e caixa-alta forçada o reescreveria na tela. */
.alerta-lista-grupo {
    margin: .9rem 0 .35rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--alerta-borda);
    font-size: .85rem;
    font-weight: 700;
    color: var(--alerta-texto);
}

.alerta-lista-grupo:first-child { margin-top: 0; }

.alerta-lista {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .92rem;
    color: var(--alerta-texto);
}

.alerta-lista li { margin-bottom: .35rem; white-space: pre-line; }
.alerta-lista li::marker { color: var(--alerta-cor); }

/* ----------------------------------------- valor mostrado uma vez só --- */

.alerta-segredo { text-align: left; white-space: normal; }

.alerta-segredo-texto,
.alerta-segredo-rodape { margin: 0 0 .75rem; white-space: pre-line; }

.alerta-segredo-rodape { margin: .75rem 0 0; font-size: .85rem; }

.alerta-segredo-grupo {
    display: flex;
    gap: .5rem;
}

.alerta-segredo-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--alerta-borda-forte);
    border-radius: .6rem;
    background: var(--alerta-superficie-2);
    color: var(--alerta-texto);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
}

.alerta-segredo-campo:focus { outline: 0; border-color: #06b6d4; box-shadow: var(--swal2-outline); }

.alerta-segredo-copiar {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
}

.alerta-segredo-copiar.copiado { border-color: #059669; color: #059669; }

@media (max-width: 480px) {
    .alerta-segredo-grupo { flex-direction: column; }
    .alerta-btn { flex: 1 1 auto; }
}

/* Os ícones do SweetAlert2 animam ao abrir; quem pediu menos movimento ao
   sistema recebe o popup parado. */
@media (prefers-reduced-motion: reduce) {
    .swal2-popup.alerta-popup,
    .swal2-popup.alerta-toast,
    .alerta-popup .swal2-icon,
    .alerta-toast .swal2-icon { animation: none !important; }
}

/* ------------------------------------------ banner de reserva do flash --- */

/* Só aparece sem o Alerta (ver partials/flash-banners). A mensagem mantém as
   quebras de linha — a saída de uma rotina tem várias —, e só ela: o resto do
   banner segue o fluxo normal do HTML. */
.flash-banner-texto { white-space: pre-line; }