/* ==========================================================================
   MONSTER — TEMA DO SWEETALERT2
   --------------------------------------------------------------------------
   Reveste o SweetAlert2 com os tokens da marca. Acompanha claro/escuro
   automaticamente, porque tudo sai das variáveis de tokens.css.

   Ordem: tokens.css → base.css → vendor/sweetalert2.min.css → este arquivo
   Documentação: docs/09-identidade-visual.md §12
   ========================================================================== */

.swal-monster {
    background-color: var(--fundo-superficie) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg) !important;
    box-shadow: var(--sombra-lg) !important;
    padding: var(--esp-6) !important;
}

.swal-monster__titulo {
    font-family: var(--fonte-display) !important;
    font-size: var(--txt-2xl) !important;
    font-weight: var(--peso-negrito) !important;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--texto) !important;
    padding: 0 0 var(--esp-2) !important;
}

.swal-monster__texto {
    font-family: var(--fonte-corpo) !important;
    font-size: var(--txt-base) !important;
    line-height: var(--altura-normal) !important;
    color: var(--texto-suave) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.swal-monster__acoes {
    gap: var(--esp-3);
    margin-top: var(--esp-6) !important;
}

/* Lista de erros de validação */
.swal-monster__lista {
    margin: var(--esp-2) 0 0;
    padding-left: var(--esp-5);
    text-align: left;
    color: var(--texto-suave);
}

.swal-monster__lista li {
    margin-bottom: var(--esp-1);
}

/* --------------------------------------------------------------------------
   Ícones — nas cores semânticas do projeto
   -------------------------------------------------------------------------- */

.swal-monster .swal2-icon.swal2-success       { border-color: var(--sucesso); color: var(--sucesso); }
.swal-monster .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--sucesso-borda); }
.swal-monster .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--sucesso); }

.swal-monster .swal2-icon.swal2-error         { border-color: var(--erro); color: var(--erro); }
.swal-monster .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--erro); }

.swal-monster .swal2-icon.swal2-warning       { border-color: var(--aviso); color: var(--aviso); }
.swal-monster .swal2-icon.swal2-info          { border-color: var(--info);  color: var(--info); }

/* Pergunta usa o laranja da marca */
.swal-monster .swal2-icon.swal2-question      { border-color: var(--laranja-500); color: var(--laranja-500); }

/* --------------------------------------------------------------------------
   Campos dentro do diálogo — herdam o estilo de .entrada do base.css
   -------------------------------------------------------------------------- */

.swal-monster .swal2-input,
.swal-monster .swal2-textarea,
.swal-monster .swal2-select {
    background-color: var(--fundo) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda-forte) !important;
    border-radius: var(--raio) !important;
    box-shadow: none !important;
    font-family: var(--fonte-corpo) !important;
    font-size: var(--txt-base) !important;
    min-height: var(--alvo-toque);
    padding: var(--esp-3) !important;
    margin: var(--esp-4) 0 0 !important;
    width: 100%;
}

.swal-monster .swal2-input:focus,
.swal-monster .swal2-textarea:focus,
.swal-monster .swal2-select:focus {
    outline: none;
    border-color: var(--foco) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent) !important;
}

.swal-monster .swal2-validation-message {
    background-color: var(--erro-suave) !important;
    color: var(--erro) !important;
    border-radius: var(--raio);
    font-size: var(--txt-sm);
}

.swal-monster .swal2-validation-message::before {
    background-color: var(--erro) !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Barra de progresso e carregamento
   -------------------------------------------------------------------------- */

.swal-monster .swal2-timer-progress-bar { background: var(--laranja-500) !important; }
.swal-monster .swal2-loader             { border-color: var(--laranja-500) transparent var(--laranja-500) transparent !important; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.swal-monster--toast {
    padding: var(--esp-3) var(--esp-4) !important;
    box-shadow: var(--sombra-lg) !important;
}

.swal-monster--toast .swal-monster__titulo,
.swal-monster--toast .swal2-title {
    font-family: var(--fonte-corpo) !important;
    font-size: var(--txt-sm) !important;
    font-weight: var(--peso-medio) !important;
    text-transform: none;
    letter-spacing: 0;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Fundo do overlay
   -------------------------------------------------------------------------- */

/*
 * ⚠️ O escurecimento vale só para DIÁLOGO, nunca para toast.
 *
 * Em modo toast o SweetAlert2 dá ao container `width: 360px` e fundo
 * transparente, mas mantém a classe `swal2-backdrop-show`. Pintar esse
 * container produzia uma faixa escura de 360px atravessando a tela de cima a
 * baixo, ao lado do toast. Daí o `body:not(.swal2-toast-shown)`.
 */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show {
    background: rgba(10, 9, 8, 0.72) !important;
}

/* Container do toast: transparente e sem capturar clique da página */
body.swal2-toast-shown .swal2-container {
    background: transparent !important;
    pointer-events: none;
}

body.swal2-toast-shown .swal2-container .swal2-popup {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Foco visível nos botões — acessibilidade (docs/09 §11)
   -------------------------------------------------------------------------- */

.swal-monster .btn:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

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