/* EducaSaude · tema do SweetAlert2
   Depende de tokens.css (mesmas --es-*). Carregar DEPOIS do sweetalert2.min.css.
   Escopo: os diálogos CENTRADOS e, desde 2026-09-10, também o TOAST do canto
   (bloco no fim do arquivo). A separação entre os dois é feita por :not(.swal2-toast)
   nas regras de diálogo e por .swal2-toast nas de toast — nenhuma regra vale para os dois.
   O TAMANHO da caixa do toast continua em tokens.css, que carrega em toda tela. */

/* Véu do DIÁLOGO. O `body:not(.swal2-toast-shown)` não é enfeite: o toast do canto também
   ganha `.swal2-backdrop-show` no container, e em modo toast esse container é uma caixa de
   453px de largura por 100% de altura encostada no canto superior direito — pintá-la deixava
   uma FAIXA vertical escura descendo a tela inteira ao lado do aviso.
   Aparecia só no tema escuro, e foi por isso que passou: no claro a regra da biblioteca
   (`body.swal2-toast-shown .swal2-container`, 0-2-1) vence a nossa (0-2-0) e devolve o
   transparente; no escuro a nossa (0-3-0) vencia e pintava. Não é da frente do tom — nasceu
   em 2026-09-10, quando o aviso do canto virou toast de verdade: até ali ele era um diálogo
   modal ancorado no canto, e o véu era correto. Ver a seção TOAST DO CANTO, no fim do arquivo. */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(11, 23, 51, 0.46); }
[data-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(4, 7, 18, 0.70); }

.swal2-popup:not(.swal2-toast) {
  width: 460px; max-width: calc(100vw - 32px); padding: 0;
  background: var(--es-surface); color: var(--es-ink);
  border: 1px solid var(--es-line); border-radius: 14px;
  box-shadow: 0 28px 64px -18px rgba(11, 23, 51, 0.34);
  font-family: var(--es-font-sans); letter-spacing: -0.01em;
}
[data-theme="dark"] .swal2-popup:not(.swal2-toast) { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.70); }
/* diálogo com conteúdo vindo do servidor (partial) */
.swal2-popup.es-dialog--wide { width: 620px; }

/* ── ícone: 52px, anel + glifo · uma rodada na abertura ── */
/* ADENDO LOCAL (2026-09-07, ao aplicar o tema): as regras abaixo estavam soltas e apagavam o ícone
   DA BIBLIOTECA sempre — mas quem desenha o ícone novo é o wrapper (swal2-educasaude.js), que ainda
   não foi adotado nos 43 arquivos que chamam Swal.fire direto. Sem escopo, o resultado era uma caixa
   vazia de 52px no lugar do ícone. Ficaram condicionadas a :has(.es-dialog__icon) — ou seja, só
   valem quando o wrapper já injetou o substituto. Enquanto isso, o ícone da lib continua aparecendo,
   reduzido para caber na nova proporção. Quando o wrapper for adotado, este adendo pode sair.
   Verificado nos 6 estados em 07/09. */
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon {
  width: 52px; height: 52px; margin: 26px auto 0; border: none; position: relative;
}
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon .swal2-icon-content { font-size: 0; }
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon::before,
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon .swal2-success-ring,
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon .swal2-x-mark-line-left,
.swal2-popup:not(.swal2-toast):has(.es-dialog__icon) .swal2-icon .swal2-x-mark-line-right { display: none; }

/* Fallback enquanto o wrapper não é adotado: o ícone da lib fica, na proporção do desenho novo.
   ADENDO LOCAL (2026-09-10): era `transform: scale(.62)`, e isso brigava com a animação de
   entrada. Os ícones de erro, aviso, info e interrogação têm `animation: swal2-animate-error-icon`,
   cujos keyframes animam TRANSFORM (rotateX(100deg) -> 0). Enquanto a animação roda ela
   substitui o transform inteiro, então o ícone aparecia em tamanho cheio por meio segundo e
   saltava para 62% ao terminar — pequeno, grande, normal. O André viu na tela de funcionários.
   `--swal2-icon-zoom` é o eixo que a própria biblioteca expõe para isto e não colide com
   transform, então a rotação toca por cima de um ícone que já nasce no tamanho certo.
   As margens sobem porque o zoom encolhe a CAIXA (o transform não encolhia) e também as
   escala: 35 e 44 valem 22,7px e 27,3px na tela — a mesma geometria de antes, medida. */
.swal2-popup:not(.swal2-toast):not(:has(.es-dialog__icon)) .swal2-icon {
  --swal2-icon-zoom: .62; margin: 35px auto 44px;
}
.es-dialog__icon {                      /* span injetado no didOpen (ver JS abaixo) */
  width: 52px; height: 52px; margin: 26px auto 0;
  display: flex; align-items: center; justify-content: center; position: relative;
  /* ADENDO LOCAL (2026-09-07): a animação corria junto com a entrada do popup (.swal2-show, .3s) e
     ficava imperceptível. O atraso tira uma da frente da outra:
     o diálogo entra, assenta, e só então o ícone se desenha. */
  animation: es-dlg-pop .42s cubic-bezier(.16, 1, .3, 1) .26s both;
}
.es-dialog__icon svg.es-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-dialog__icon svg.es-ring circle.ring {
  stroke-dasharray: 170; stroke-width: 1.6; fill: none; opacity: .55;
  animation: es-dlg-ring .34s cubic-bezier(.16, 1, .3, 1) .30s both;
}
.es-dialog__icon .es-glyph * {
  stroke-dasharray: 60; animation: es-dlg-glyph .28s cubic-bezier(.16, 1, .3, 1) .44s both;
}
@keyframes es-dlg-pop   { 0% { transform: scale(.78); opacity: 0 } 70% { transform: scale(1.06) } 100% { transform: scale(1); opacity: 1 } }
@keyframes es-dlg-ring  { 0% { stroke-dashoffset: 170; opacity: 0 } 22% { opacity: .55 } 100% { stroke-dashoffset: 0; opacity: .55 } }
@keyframes es-dlg-glyph { 0% { stroke-dashoffset: 60; opacity: 0 } 25% { opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .es-dialog__icon, .es-dialog__icon svg.es-ring circle.ring, .es-dialog__icon .es-glyph * {
    animation: none; stroke-dashoffset: 0; opacity: 1; transform: none;
  }
}
/* tom do ícone — a classe vai no popup: es-tone--primary|danger|warn|success|accent */
.es-tone--primary .es-dialog__icon { color: var(--es-primary) }
.es-tone--danger  .es-dialog__icon { color: var(--es-danger) }
.es-tone--warn    .es-dialog__icon { color: var(--es-warn) }
.es-tone--success .es-dialog__icon { color: var(--es-success) }
.es-tone--accent  .es-dialog__icon { color: var(--es-accent) }
.es-dialog__icon .es-fill { fill: currentColor; opacity: .08 }
[data-theme="dark"] .es-dialog__icon .es-fill { opacity: .16 }

/* ── kicker (linha mono acima do título) ── */
.es-dialog__kicker {
  font-family: var(--es-font-label); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-align: center; margin: 14px 0 5px;
}
/* par de texto: sobre branco, warn/accent/success não alcançam 4.5:1 em corpo pequeno */
.es-tone--primary .es-dialog__kicker { color: var(--es-primary) }
.es-tone--danger  .es-dialog__kicker { color: var(--es-danger) }
.es-tone--warn    .es-dialog__kicker { color: #8A5606 }
.es-tone--accent  .es-dialog__kicker { color: #07626D }
.es-tone--success .es-dialog__kicker { color: #0B6B48 }
[data-theme="dark"] .es-tone--warn    .es-dialog__kicker { color: var(--es-warn) }
[data-theme="dark"] .es-tone--accent  .es-dialog__kicker { color: var(--es-accent) }
[data-theme="dark"] .es-tone--success .es-dialog__kicker { color: var(--es-success) }

/* ── título: centrado, 17.5px (era 1.875em) ── */
.swal2-popup:not(.swal2-toast) .swal2-title {
  padding: 0 26px; margin: 0 auto; max-width: 340px;
  font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.023em;
  color: var(--es-ink); text-align: center;
}
.swal2-popup.es-dialog--wide .swal2-title { max-width: 420px; }

/* ── corpo: texto corrido à esquerda ── */
.swal2-popup:not(.swal2-toast) .swal2-html-container {
  margin: 11px 24px 0; padding: 0;
  font-size: 13.5px; line-height: 1.62; color: var(--es-ink-soft);
  text-align: left; text-wrap: pretty; overflow: visible;
}
.swal2-html-container strong { color: var(--es-ink); font-weight: 700; }

/* blocos reaproveitáveis dentro do corpo */
.es-notice {
  display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; margin-top: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--es-ink);
}
.es-notice--info   { background: rgba(14,165,183,.08); border: 1px solid rgba(14,165,183,.18) }
.es-notice--warn   { background: rgba(197,123,10,.08); border: 1px solid rgba(197,123,10,.18) }
.es-notice--danger { background: rgba(192,58,47,.08);  border: 1px solid rgba(192,58,47,.18) }
.es-data { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--es-line-soft) }
.es-data__k {
  font-family: var(--es-font-label); font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--es-muted); width: 106px; flex: 0 0 106px;
}
.es-data__v { font-size: 12.5px; font-weight: 600; color: var(--es-ink) }

/* ── campos nativos do SweetAlert ── */
.swal2-input, .swal2-select, .swal2-textarea {
  height: 42px; margin: 8px 24px 0; width: calc(100% - 48px); box-sizing: border-box;
  padding: 0 13px; border: 1.5px solid var(--es-line); border-radius: 9px;
  background: var(--es-surface); color: var(--es-ink);
  font-family: inherit; font-size: 13.5px; box-shadow: none;
}
.swal2-textarea { height: auto; padding: 11px 13px; }
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
  border-color: var(--es-primary); box-shadow: var(--es-focus-ring); outline: none;
}
.swal2-input.swal2-inputerror, .swal2-select.swal2-inputerror {
  border-color: var(--es-danger); box-shadow: 0 0 0 3px rgba(192,58,47,.14);
}

/* ── validação: aparece DENTRO, o diálogo não fecha ── */
.swal2-validation-message {
  margin: 14px 24px 0; padding: 10px 13px; border-radius: 9px;
  background: rgba(192,58,47,.08); border: 1px solid rgba(192,58,47,.22);
  color: #8E2B22; font-size: 12.5px; font-weight: 600; justify-content: flex-start;
}
[data-theme="dark"] .swal2-validation-message { color: var(--es-ink); background: rgba(213,114,106,.16); border-color: rgba(213,114,106,.34) }
.swal2-validation-message::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px; margin: 0 9px 0 0; border-radius: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><path d='M12 4.2 21 19.5H3L12 4.2Z'/><path d='M12 10v3.6'/><circle cx='12' cy='16.6' r='1' fill='%23000'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'><path d='M12 4.2 21 19.5H3L12 4.2Z'/><path d='M12 10v3.6'/><circle cx='12' cy='16.6' r='1' fill='%23000'/></svg>") center/contain no-repeat;
}

/* ── ações: faixa própria, confirmar à direita ── */
.swal2-popup:not(.swal2-toast) .swal2-actions {
  margin: 22px 0 0; padding: 22px 24px; width: 100%; box-sizing: border-box;
  justify-content: flex-end; gap: 10px;
  background: var(--es-panel); border-top: 1px solid var(--es-line-soft);
  border-radius: 0 0 13px 13px;
}
[data-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-actions { background: rgba(0,0,0,.12) }
.swal2-popup:not(.swal2-toast) .swal2-styled {
  height: 40px; margin: 0; padding: 0 18px; border-radius: 9px; border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: none; transition: background .15s, border-color .15s, color .12s;
}
.swal2-popup:not(.swal2-toast) .swal2-styled:focus-visible { box-shadow: var(--es-focus-ring); outline: none }

/* confirmar = a marca. NUNCA verde: no produto verde é estado, não ação. */
.swal2-popup:not(.swal2-toast) .swal2-confirm {
  background: var(--es-btn-primary-bg); color: var(--es-btn-primary-ink); border-color: var(--es-btn-primary-bg);
  box-shadow: 0 1px 2px rgba(11,23,51,.18);
}
.swal2-popup:not(.swal2-toast) .swal2-confirm:hover { background: var(--es-btn-primary-bg-hover) }
/* destrutivo/irreversível: o popup recebe .es-dialog--danger
   ADENDO LOCAL (2026-09-07): o seletor entregue era `.es-dialog--danger .swal2-confirm`, com
   especificidade 0-2-0 — MENOR que a do botão comum logo acima
   (`.swal2-popup:not(.swal2-toast) .swal2-confirm`, 0-3-0, porque o argumento do :not conta). O
   vermelho nunca chegava a aparecer: o destrutivo saía com o azul da ação comum, que é exatamente o
   que a distinção existe para evitar. Descoberto ao migrar os destrutivos e conferir a cor no
   navegador. O popup entra no seletor para ganhar o desempate. */
.swal2-popup:not(.swal2-toast).es-dialog--danger .swal2-confirm {
  background: var(--es-danger); border-color: var(--es-danger);
}
.swal2-popup:not(.swal2-toast).es-dialog--danger .swal2-confirm:hover { filter: brightness(.92) }
/* cancelar = neutro com borda. Nunca vermelho. */
.swal2-popup:not(.swal2-toast) .swal2-cancel,
.swal2-popup:not(.swal2-toast) .swal2-deny {
  background: transparent; color: var(--es-ink-soft); border-color: var(--es-line);
}
.swal2-popup:not(.swal2-toast) .swal2-cancel:hover,
.swal2-popup:not(.swal2-toast) .swal2-deny:hover { background: var(--es-panel); border-color: var(--es-muted) }
.swal2-popup:not(.swal2-toast) .swal2-styled:disabled { opacity: .62; cursor: default }

/* nota mono à esquerda das ações (opcional) */
.es-dialog__note {
  font-family: var(--es-font-sans); font-size: 10.5px; line-height: 1.45;
  color: var(--es-muted); margin-right: auto; max-width: 250px; text-align: left;
}

/* ── loading (estado "processando") ── */
.swal2-loader { border-color: var(--es-primary) transparent var(--es-primary) transparent }

/* ── mobile: o diálogo cola no rodapé em telas estreitas ── */
@media (max-width: 520px) {
  .swal2-popup:not(.swal2-toast) { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0 }
  .swal2-container.swal2-center > .swal2-popup { align-self: flex-end }
  .swal2-popup:not(.swal2-toast) .swal2-actions { flex-direction: column-reverse; align-items: stretch }
  .swal2-popup:not(.swal2-toast) .swal2-styled { height: 48px; width: 100% }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST DO CANTO (2026-09-10)

   Contexto: até aqui os avisos de canto não eram toasts. O form-educa.js
   disparava Swal.fire({ position: 'top-end' }) sem toast: true, e o popup saía
   com as classes swal2-popup swal2-modal — um diálogo modal ancorado no canto,
   com fundo escurecido travando a página. As regras de diálogo acima, guardadas
   por :not(.swal2-toast), não o excluíam, porque ele não tinha a classe. Com o
   toast: true no helper, a guarda passou a funcionar e este bloco assume o desenho.

   Todo seletor aqui exige .swal2-toast. Nenhum alcança os diálogos centrados.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Escala do ícone. Anel (2em), borda (.25em) e barras do X (top .875em,
   width 1.375em) estão TODOS em em: mexer em width/height cresce só o anel e
   descentraliza o glífo. O font-size escala o conjunto mantendo a proporção.
   A escala vem de --es-toast-icone (tokens.css), de onde as larguras do popup e do
   container também derivam por calc() — mudar lá move as três de uma vez. */
.swal2-popup.swal2-toast .swal2-icon { font-size: calc(1em * var(--es-toast-icone)); }

.swal2-popup.swal2-toast { border-radius: 10px; }

/* ── Entrada e saída: desce de cima, sem balançar ──
   A animação de fábrica (swal2-toast-show) gira a caixa: rotateZ 2deg → -2deg → 2deg → 0,
   com um pulinho vertical junto — lida como "dançando" na tela. A biblioteca expõe as duas
   animações como variáveis, então basta redefini-las: nada de !important nem briga de
   especificidade, e o dia em que o SweetAlert for atualizado isto continua válido.

   O container tem overflow-x: hidden, mas o vertical passa — por isso o toast pode nascer
   acima da borda da tela e descer até o lugar. A curva desacelera no fim, sem passar do ponto. */
@keyframes es-toast-entra {
  0%   { transform: translateY(-130%); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes es-toast-sai {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-130%); opacity: 0; }
}
:root {
  /* .46s com easeOutCubic: a curva antiga (.16,1,.3,1) frear cedo demais e o resto do
     percurso virava rastejo. Esta desacelera de forma contínua até parar. */
  --swal2-toast-show-animation: es-toast-entra .46s cubic-bezier(.22, .61, .36, 1);
  --swal2-toast-hide-animation: es-toast-sai .28s cubic-bezier(.55, .06, .68, .19) forwards;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --swal2-toast-show-animation: none;
    --swal2-toast-hide-animation: none;
  }
}

/* O vermelho ganha o tratamento que o verde já tinha. No sucesso o anel pálido
   é um elemento à parte (.swal2-success-ring, a 30% de opacidade) e o check é
   sólido; no erro NÃO existe anel separado — o anel é a borda do próprio ícone,
   na mesma cor cheia das barras do X, e por isso saía chapado. */
.swal2-popup.swal2-toast .swal2-icon.swal2-error { border-color: rgba(242, 116, 116, .32); }

/* Glífo do X menor dentro do mesmo anel; left/right recalculados para centrar
   (1.15em de largura ⇒ (2em - 1.15em) / 2 = .425em de cada lado).
   O check do sucesso NÃO é tocado: a proporção dele já estava certa, e no modo
   toast os valores são tip .75em / long 1.375em — não os do diálogo grande. */
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] { width: 1.15em; }
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] { left: .425em; }
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] { right: .425em; }

/* Tipografia do sistema. Sem isto o toast herda o que vier e usa o cinza
   #545454 da biblioteca, que não existe na paleta do produto. */
.swal2-popup.swal2-toast .swal2-title {
  font-family: var(--es-font-sans); font-size: 1em; font-weight: 700;
  letter-spacing: -.015em; color: var(--es-ink); text-align: left;
}
.swal2-popup.swal2-toast .swal2-html-container {
  font-family: var(--es-font-sans); font-size: .95em; line-height: 1.5;
  color: var(--es-ink-soft); text-align: left;
}

/* ── Tema escuro do toast ──
   Até aqui o aviso do canto não tinha tratamento escuro: a caixa ficava branca (padrão da
   biblioteca) enquanto o título e o texto já saem de --es-ink e --es-ink-soft, que no escuro
   são claros — texto claro sobre caixa branca. A superfície passa a vir do token, como no
   diálogo, e os dois anéis sobem de opacidade: a 30% eles sumiam contra fundo escuro.
   Calibrado com --es-toast-icone em 1.6 — mexer na escala pede reconferir os anéis. */
:root[data-theme="dark"] .swal2-popup.swal2-toast {
  background: var(--es-surface);
  color: var(--es-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 30px -10px rgba(0, 0, 0, 0.70);
}
:root[data-theme="dark"] .swal2-popup.swal2-toast .swal2-icon.swal2-error {
  border-color: rgba(213, 114, 106, .48);
}
:root[data-theme="dark"] .swal2-popup.swal2-toast .swal2-success-ring {
  border-color: rgba(74, 156, 121, .45);
}
/* A barra de tempo de fábrica é cinza-claro: no escuro some contra a superfície. */
:root[data-theme="dark"] .swal2-popup.swal2-toast .swal2-timer-progress-bar {
  background: rgba(255, 255, 255, 0.20);
}
:root[data-theme="dark"] .swal2-popup.swal2-toast .swal2-close { color: var(--es-muted); }