/* Banner de validade do certificado A1 no painel (doc 03 §2.1).

   POR QUE ESTE ARQUIVO EXISTE: o painel não tem tema Tailwind próprio (sem
   `tailwind.config.js`, sem `viteTheme()` — CLAUDE.md > Panel CSS tweaks), então
   `border-warning-300`, `bg-warning-50`, `text-danger-700` e companhia NUNCA
   foram compiladas. A view pedia cores que não existem no CSS servido: os três
   degraus saíam com a MESMA caixa transparente sem borda, e a escalada visual
   que o doc 03 promete só vivia no texto.

   AS CORES VÊM DO PAINEL, não de hexadecimal fixo: o Filament imprime as
   variáveis da paleta em `:root` a cada requisição
   (`AssetManager::renderStyles()` → `--warning-500: 245, 158, 11`), como triplas
   R, G, B — daí a forma `rgba(var(--warning-500), 1)`. Trocar a cor do painel
   troca a do banner junto.

   A VIEW EXPÕE SÓ HOOKS DE CLASSE (`fi-cert-banner`, e o degrau em
   `--aviso` / `--atencao` / `--critico`); borda, fundo e cor de texto moram
   aqui. Cada degrau só redefine os cinco tokens `--fi-cert-*`. */

.fi-cert-banner {
  border: 1px solid rgba(var(--fi-cert-borda), 1);
  border-radius: 0.5rem;
  background-color: rgba(var(--fi-cert-fundo), var(--fi-cert-fundo-alfa, 1));
  padding: 1rem;
}

.fi-cert-banner__icone {
  color: rgba(var(--fi-cert-icone), 1);
}

.fi-cert-banner__titulo {
  color: rgba(var(--fi-cert-titulo), 1);
}

.fi-cert-banner__texto {
  color: rgba(var(--fi-cert-texto), 1);
}

/* 30 dias — amarelo discreto: avisa sem interromper o trabalho. */
.fi-cert-banner--aviso {
  --fi-cert-borda: var(--warning-300);
  --fi-cert-fundo: var(--warning-50);
  --fi-cert-icone: var(--warning-500);
  --fi-cert-titulo: var(--warning-800);
  --fi-cert-texto: var(--warning-700);
}

/* 15 dias — âmbar com ênfase: é o momento de COMPRAR o certificado novo, e
   precisa se distinguir do degrau anterior à distância. */
.fi-cert-banner--atencao {
  --fi-cert-borda: var(--warning-500);
  --fi-cert-fundo: var(--warning-100);
  --fi-cert-icone: var(--warning-600);
  --fi-cert-titulo: var(--warning-900);
  --fi-cert-texto: var(--warning-800);
}

/* ≤ 7 dias, vencido, ou certificado que a conferência não conseguiu abrir —
   vermelho: a emissão para (ou já parou). */
.fi-cert-banner--critico {
  --fi-cert-borda: var(--danger-300);
  --fi-cert-fundo: var(--danger-50);
  --fi-cert-icone: var(--danger-500);
  --fi-cert-titulo: var(--danger-800);
  --fi-cert-texto: var(--danger-700);
}

/* No tema escuro o fundo claro cega e o texto escuro some. Mesma escalada, com
   o tom 950 translúcido por trás e o texto nos tons claros da paleta. */
.dark .fi-cert-banner {
  --fi-cert-fundo-alfa: 0.5;
}

.dark .fi-cert-banner--aviso {
  --fi-cert-borda: var(--warning-600);
  --fi-cert-fundo: var(--warning-950);
  --fi-cert-titulo: var(--warning-200);
  --fi-cert-texto: var(--warning-300);
}

.dark .fi-cert-banner--atencao {
  --fi-cert-borda: var(--warning-500);
  --fi-cert-fundo: var(--warning-900);
  --fi-cert-titulo: var(--warning-100);
  --fi-cert-texto: var(--warning-200);
}

.dark .fi-cert-banner--critico {
  --fi-cert-borda: var(--danger-600);
  --fi-cert-fundo: var(--danger-950);
  --fi-cert-titulo: var(--danger-200);
  --fi-cert-texto: var(--danger-300);
}