Título grande da tela
Título de seção
Subtítulo de painel
Destaque / rótulo forte
Corpo — texto padrão de leitura.
Corpo de tabela
Secundário
Nota de rodapé
Etiqueta de grupo
0001234-56.2026.8.26.0100 · R$ 12.345,67
Cartão padrão
padding="padrao" (o default)
Cartão clicável
role="button", foco visível, hover realça a borda
Padding confortável
24px — telas de destaque/resumo
Reaproveita --card/--sep/--shadow-card/--r-l — a mesma combinação que várias telas simulavam à mão com <div className="bg-card border...">.
Mesmo nome sempre cai na mesma cor (hash do nome, sem depender de nenhum dado persistido) — paleta fixa de 8 cores, independente de tema claro/escuro (é a cor da PESSOA, não um estado da tela).
Mesmo padrão de abrir/fechar de PopoverMais (clique fora + Escape) — sem drag-and-drop, só substitui o controle cru do navegador (achado real do funil do CRM).
Lembrete E.4: se mais de 30% das linhas visíveis de uma tela real ficarem em --alerta, o limiar de severidade() está errado — revisar a regra (D.3), não a cor.
Diferente de PilulaSeveridade (severidade jurídica, mapeamento fixo E.4) — este é para status de negócio comuns (pago/pendente/vencido/respondido/submetido) que hoje aparecem como texto cru em várias telas. negativo reaproveita a mesma e única cor de alarme do sistema.
Conflito de interesses pendente
Bloqueia a abertura do caso até ser resolvido.
Documento de habilitação vence
Certidão negativa expira e trava a contratação.
Cliente aguardando retorno
Última mensagem sem resposta há 3 dias.
Prazo fatal da contestação
Prazo já venceu — providência imediata necessária.
Solicitação de compra parada
Aguardando aprovação do gestor há 5 dias.
Abaixo, <PainelUrgencia itens={[]} /> — nenhum nó deveria aparecer entre esta linha e a próxima seção:
Item não crítico
Pílula em --delta-marinho (claro) / --tint (escuro).
Item crítico
Pílula em --alerta — um dos poucos usos permitidos (E.4).
A tab bar de verdade (fixa no rodapé da página) já reflete o perfil escolhido acima.
42 casos ativos · 3 prazos fatais nas próximas 48h
Role este bloco para ver o título recolhido aparecer na barra superior.
Fim do conteúdo de exemplo.
Data + hora locais, atualizando sozinho a cada segundo — usa o mesmo `formatarDataHora()` do resto do sistema, nunca um cálculo de fuso próprio. Isolado num componente próprio (o tique nunca re-renderiza o resto da tela) e sem `aria-live` de propósito (um relógio anunciado a cada segundo inutilizaria a tela pra quem usa leitor de tela).
Nenhuma solicitação registrada ainda.
Assim que uma chegar, ela aparece aqui.
| Nº do processo | Cliente | Responsável | Valor da causa |
|---|---|---|---|
| 0000-10.2026.8.26.0100 | Cliente Fictício 1 | Ana Souza | R$ 1.000 |
| 0001-11.2026.8.26.0100 | Cliente Fictício 2 | Bruno Lima | R$ 1.037 |
| 0002-12.2026.8.26.0100 | Cliente Fictício 3 | Carla Melo | R$ 1.074 |
| 0003-13.2026.8.26.0100 | Cliente Fictício 4 | Ana Souza | R$ 1.111 |
| 0004-14.2026.8.26.0100 | Cliente Fictício 5 | Bruno Lima | R$ 1.148 |
| 0005-15.2026.8.26.0100 | Cliente Fictício 6 | Carla Melo | R$ 1.185 |
| 0006-16.2026.8.26.0100 | Cliente Fictício 7 | Ana Souza | R$ 1.222 |
| 0007-17.2026.8.26.0100 | Cliente Fictício 8 | Bruno Lima | R$ 1.259 |
| 0008-18.2026.8.26.0100 | Cliente Fictício 9 | Carla Melo | R$ 1.296 |
| 0009-19.2026.8.26.0100 | Cliente Fictício 10 | Ana Souza | R$ 1.333 |