Três variações de alerta, cada uma pro seu contexto de fundo. Nunca misturar: o alerta de vidro (glass-panel) só existe sobre o hero escuro; os dois institucionais (.alert-umc) só sobre fundo claro.
Use para isso
- Avisar sobre um estado do sistema (fallback ativo, indisponibilidade)
- Orientar o usuário antes de uma ação (ex: formato de arquivo aceito)
Não use para isso
- Mensagens de validação de campo — use texto de erro inline no formulário
- Confirmação de sucesso passageira — prefira um toast/notificação
Informativo — .alert-umc
Sobre a busca
Os resultados combinam dados do Elasticsearch com fallback automático para o MySQL.
<div class="alert-umc">
<h5>Sobre a busca</h5>
<p>Os resultados combinam dados do Elasticsearch com fallback automático para o MySQL.</p>
</div>Aviso — .alert-umc.alert-umc-warning
Atenção
Apenas arquivos .xml do Lattes são aceitos nesta importação.
<div class="alert-umc alert-umc-warning">
<h5>Atenção</h5>
<p>Apenas arquivos <strong>.xml</strong> do Lattes são aceitos nesta importação.</p>
</div>Sobre fundo escuro — .hero-section .alert-warning.glass-panel
Elasticsearch indisponível
Exibindo resultados via MySQL (modo de contingência).
<!-- dentro de .hero-section -->
<div class="alert alert-warning glass-panel">
<strong>Elasticsearch indisponível</strong>
Exibindo resultados via MySQL (modo de contingência).
</div>Regra
Regra: nunca usar
border-left grosso em alertas novos — o padrão atual é fundo tintado + border: 1px solid uniforme (exceção mantida por compatibilidade: .alert-umc ainda usa border-left, legado do tema institucional, não replicar em componentes novos).