/* ------------------------------------------------------------------ *
 * TOAST — a pele das mensagens do produto.
 *
 * O markup vem de `custom_ajax_messages.js` e é o mesmo em TODA página,
 * logada ou não. A pele é esta folha, e ela é carregada no
 * `global-styling-header` justamente para valer nas duas pontas.
 *
 * POR QUE EXISTE UM ARQUIVO SÓ PARA ISTO — e por que ele NÃO pode
 * voltar para o `custom_ajax_messages` nem ficar no `style.css`:
 *
 * Até 13/08/2026 esta pele morava no `style.css`, que só entra pela
 * library `paper-library` — anexada em `page--sistema` e nas telas de
 * usuário. A LANDING não a pede, então mostrava o toast com o `.alert`
 * cru do Paper Dashboard: preenchimento saturado com texto BRANCO, o
 * desenho que já havia sido reprovado em 08/08. Medido em 13/08/2026 na
 * `/main`: sucesso 1,74:1, info 2,00:1, aviso 1,47:1, erro 2,31:1 —
 * os quatro abaixo do mínimo 4,5:1 da WCAG AA.
 *
 * A ORDEM DAS FOLHAS ESTÁ INVERTIDA ENTRE AS DUAS PÁGINAS, e isso é o
 * que torna "mover o arquivo" uma solução falsa:
 *
 *   /main     paper-dashboard -> custom_ajax_messages -> pfkt-tokens
 *   /inicio   custom_ajax_messages -> pfkt-tokens -> paper-dashboard -> style
 *
 * Como quase toda a disputa com o PD é EMPATE de especificidade, quem
 * decide é a ordem — e cada página ganhava um pedaço. Era por isso que a
 * landing tinha a cor errada e o espaçamento certo, e o sistema a cor
 * certa e o espaçamento errado (o texto passava por baixo do botão de
 * fechar: medido, o conteúdo terminava em 1389px e o `×` começava em
 * 1388px).
 *
 * A saída não é ordem, é ESPECIFICIDADE. Todo seletor daqui vence o
 * equivalente do Paper Dashboard e do Bootstrap por conta própria,
 * carregue esta folha antes ou depois:
 *
 *   .alert.custom-ajax-message-toast              (0,2,0)  > .alert           (0,1,0)
 *   .alert.custom-ajax-message-toast.alert-*      (0,3,0)  > .alert.alert-*   (0,2,0)
 *   .alert.custom-ajax-message-toast .close       (0,3,0)  > .alert button.close (0,2,1)
 *   .alert.custom-ajax-message-toast .…-content   (0,3,0)  > .alert .close ~ span (0,2,0)
 *
 * Aquele último é o mais fácil de não enxergar: o PD mira os irmãos do
 * botão de fechar, e no nosso markup ISSO PEGA o ícone e o texto.
 *
 * TINTA ESCURA SOBRE TINTA SUAVE, que é o padrão de todo selo do
 * sistema. Escurecer só a tinta mantendo os fundos saturados NÃO
 * resolveria: sobre aquele verde a tinta de estado chega a 3,72:1 e
 * ainda reprova. É o par que resolve, não a tinta sozinha.
 *
 * A DIVISÃO DE PAPÉIS dentro da caixa não é decorativa:
 *   BARRA  de 4px à esquerda leva a cor cheia do estado. Existe porque a
 *          tinta suave aproximou demais os quatro fundos — a luminância
 *          deles vive entre 0,846 e 0,869, uma faixa de 0,023 contra
 *          0,26 do desenho antigo. Sem ela, LER ficou ótimo e
 *          RECONHECER SEM LER ficou pior; a barra devolve o "de longe"
 *          sem custar contraste nenhum ao texto, e não inventa cor —
 *          usa a mesma que o ícone já usava;
 *   ÍCONE  leva a cor do estado — é ele que diz de perto se deu certo;
 *   TEXTO  leva a tinta de leitura, porque toast é FRASE e não rótulo.
 *          A tinta de estado é boa para a palavra "atenção" e pesada
 *          para a oração que vem depois — a razão de `--pfkt-warn-ink`;
 *   FECHAR recua para a tinta secundária: é o que menos importa ali.
 *
 * O corpo é 15px/500 e não 14px/400: o toast some sozinho em 4 a 15
 * segundos, e não pode ser o texto mais discreto da tela. Era esse o
 * tamanho que a landing já usava.
 *
 * O que NÃO mora aqui, e continua no `custom_ajax_messages`: a pilha
 * fixa, a animação de saída e o `is-closing` — nada disso o Paper
 * Dashboard disputa.
 * ------------------------------------------------------------------ */

/* A CAIXA.
   `border-left-width` vem depois do atalho `border` de propósito: o
   atalho zera os quatro lados, e a barra do estado é o quinto valor. */
.alert.custom-ajax-message-toast {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 52px 15px 16px;
  border: 1px solid var(--pfkt-line);
  border-left-width: 4px;
  border-radius: var(--pfkt-radius-control);
  background-color: var(--pfkt-surface);
  color: var(--pfkt-ink);
  font-size: var(--pfkt-txt-15);
  font-weight: 500;
  line-height: 1.4;
}

/* A folga de 52px à direita é o que reserva o lugar do botão de fechar.
   Ela estava escrita no módulo desde sempre e PERDIA no app logado, onde
   sobrava o `padding` do PD somado ao do Bootstrap (0,9rem em cima e em
   baixo, 1,25rem dos lados) — 20px à direita para um botão de 24px. */

.alert.custom-ajax-message-toast.alert-success {
  background-color: var(--pfkt-ok-soft);
  border-color: var(--pfkt-ok-line);
  border-left-color: var(--pfkt-ok);
}
.alert.custom-ajax-message-toast.alert-warning {
  background-color: var(--pfkt-warn-soft);
  border-color: var(--pfkt-warn-line);
  border-left-color: var(--pfkt-warn);
}
.alert.custom-ajax-message-toast.alert-danger {
  background-color: var(--pfkt-stop-soft);
  border-color: var(--pfkt-stop-line);
  border-left-color: var(--pfkt-stop-deep);
}
.alert.custom-ajax-message-toast.alert-info {
  background-color: var(--pfkt-info-soft);
  border-color: var(--pfkt-info-line);
  border-left-color: var(--pfkt-info);
}

/* O TEXTO.
   `max-width` explícito porque o `.alert .close ~ span` do PD prende
   todo irmão do botão de fechar em 89% — e no nosso markup os irmãos
   são justamente o ícone e o texto.

   Sem `!important`: a cor vem por herança da caixa acima, que já ganha
   do `.alert { color: #FFFFFF }` do PD por especificidade. O módulo
   tinha aqui um `color: inherit !important` que obrigava esta folha a
   responder com outro `!important` — os dois saíram juntos. */
.alert.custom-ajax-message-toast .custom-ajax-message-content {
  display: block;
  flex: 1 1 auto;
  max-width: none;
}

.alert.custom-ajax-message-toast .custom-ajax-message-content p:last-child {
  margin-bottom: 0;
}

/* O ÍCONE. Mesmo caso do texto quanto ao `max-width`. */
.alert.custom-ajax-message-toast .alert-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  max-width: none;
  margin-right: 12px;
  font-size: var(--pfkt-txt-22);
}

.alert.custom-ajax-message-toast.alert-success .alert-icon {
  color: var(--pfkt-ok);
}
.alert.custom-ajax-message-toast.alert-warning .alert-icon {
  color: var(--pfkt-warn);
}
.alert.custom-ajax-message-toast.alert-danger .alert-icon {
  color: var(--pfkt-stop-deep);
}
.alert.custom-ajax-message-toast.alert-info .alert-icon {
  color: var(--pfkt-info);
}

/* O FECHAR.
   Precisa vencer o `.alert button.close` do PD (0,2,1), que o posiciona
   com `margin-top: -13px` em vez de translate — daí o `margin: 0`. */
.alert.custom-ajax-message-toast .close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  margin: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
}

.alert.custom-ajax-message-toast .close,
.alert.custom-ajax-message-toast .close i {
  color: var(--pfkt-ink-2);
}

.alert.custom-ajax-message-toast .close:hover,
.alert.custom-ajax-message-toast .close:hover i,
.alert.custom-ajax-message-toast .close:focus,
.alert.custom-ajax-message-toast .close:focus i {
  color: var(--pfkt-ink);
  opacity: 1;
}