/* PATH: htdocs/app/assets/css/60-components/alert.css
   DESC: COMPONENTE GLOBAL — AVISO INLINE (`.alert`)

   ==========================================================================
   POR QUE ESTE ARQUIVO EXISTE
   ==========================================================================
   `.alert` era usado em ~200 lugares e definido em **29 CSS de página**, cada um
   com a sua cópia. Tela que usava a classe sem ter a cópia renderizava TEXTO CRU:
   sem caixa, sem fundo, sem padding. Foi o que aconteceu na Fila de faturamento
   (21/08/2026) — o aviso de pendências e o da NF-e apareciam soltos no topo da
   página, e ninguém tinha notado porque a classe "parece global".

   É a mesma armadilha de camada que o `.modal--ui` resolveu em b59b5ef: nome que
   parece global, definição que mora em `90-pages`.

   ==========================================================================
   NÃO É OPT-IN, E ISSO É DELIBERADO — ao contrário do `.modal--ui`
   ==========================================================================
   O modal precisou de classe nova (`.modal--ui`) porque sequestrar `.modal`
   quebraria calado: em login.css `.modal` é um card comum, e um `display:none`
   global o sumiria. Aqui o risco não existe — `.alert` só é usado para aviso
   inline, e o pior caso de quem não tinha estilo é **ganhar** a caixa que já
   deveria ter.

   As 29 páginas que definem a sua cópia CONTINUAM VENCENDO: `90-pages` carrega
   depois de `60-components`, mesma especificidade, quem vem por último ganha.
   Então este arquivo não muda nada onde já havia estilo — ele só cobre o vazio.
   Ao migrar uma página, apague a cópia dela e confira; não é preciso migrar todas
   de uma vez.

   ==========================================================================
   AS CORES SÃO KNOBS DO COMPONENTE, NÃO TOKENS GLOBAIS — E ISSO É ESCOLHA
   ==========================================================================
   `00-tokens.css` não tem cor semântica de status: os `--status-*` de lá são do
   STATUS DO PEDIDO (aprovado, reprovado, expirado…), outra coisa — usá-los aqui
   seria emprestar significado que eles não têm. Então a paleta entra como
   variável do próprio componente, no mesmo padrão de knobs do `modal.css`:
   a página ajusta com uma linha em vez de recopiar o bloco.

       #minhaTela .alert{ --alert-bg: #f0f9ff; }

   Os valores são os DOMINANTES do que já existia nas 29 cópias (medido, não
   escolhido): a base de 9 ocorrências e as paletas mais repetidas de cada
   variante. O global nasce parecido com o que já está no ar.
   ========================================================================== */

.alert{
  /* --- knobs: sobrescreva na página, não recopie o bloco --- */
  --alert-bg:     var(--bg-soft);
  --alert-border: var(--border-2);
  --alert-text:   var(--text);

  padding: 10px 14px;
  margin: 10px 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  border: 1px solid var(--alert-border);
  background: var(--alert-bg);
  color: var(--alert-text);
}

/* DUAS FAMÍLIAS DE NOME, DE PROPÓSITO. A casa escreve `--ok/--warn/--err` (113
   usos) e sobrou Bootstrap em `-success/-warning/-danger/-info` (90 usos). Cobrir
   as duas evita uma migração de 200 pontos só para ligar o componente; quem for
   padronizar depois troca o nome sem mexer no CSS. */
.alert--ok,   .alert-success { --alert-bg: #ecfdf3; --alert-border: #bbf7d0; --alert-text: #166534; }
.alert--warn, .alert-warning { --alert-bg: #fffbeb; --alert-border: #fde68a; --alert-text: #92400e; }
.alert--err,  .alert-danger  { --alert-bg: #fef2f2; --alert-border: #fecaca; --alert-text: #b91c1c; }
.alert-info                  { --alert-bg: #eff6ff; --alert-border: #bfdbfe; --alert-text: #1e3a8a; }

/* `--erro` É A GRAFIA QUE ESCAPOU, e ela existe no código: `nfe_emitir.php` usa
   `alert--erro` na mensagem de erro da emissão. Não estava definida em CSS NENHUM
   — nem aqui, nem nos 29 de página —, então aquele erro saía em CINZA NEUTRO, do
   fallback da base. Erro que não parece erro é o pior caso deste componente, e a
   varredura de 21/08 só o encontrou porque cruzou TODAS as variantes do markup
   contra as definidas.
   O nome canônico é `--err`; este alias existe para a grafia não voltar a cair no
   silêncio se alguém repetir. */
.alert--erro                 { --alert-bg: #fef2f2; --alert-border: #fecaca; --alert-text: #b91c1c; }

/* Link dentro do aviso herda a cor da variante: o `--link` global é azul e some
   dentro do fundo azul do `.alert-info`, e briga com o vermelho do `--err`. O
   sublinhado é o que mantém o link reconhecível sem depender da cor. */
.alert a{ color: inherit; text-decoration: underline; }
.alert a:hover{ text-decoration: none; }

/* Aviso com lista dentro (a Fila de faturamento tem uma) não pode ganhar um vão
   morto no rodapé da caixa por causa da margem do último filho. */
.alert > :first-child{ margin-top: 0; }
.alert > :last-child { margin-bottom: 0; }