## Padrão de Layout das Telas de Listagem

Todas as telas de listagem (Pacientes, Colaboradores, Status, Leads, Serviços, Planos de Saúde) seguem um **padrão visual unificado** composto por 4 camadas verticais:

### 1. Cabeçalho da Página
- Título principal com `h1` em tamanho `2xl`, negrito.
- Subtítulo descritivo em `text-muted-foreground`.
- Botão de ação primária ("Novo…") alinhado à direita, com ícone `Plus`.

### 2. Cartões de Resumo Estatístico
- Grid responsivo (`grid-cols-1 sm:grid-cols-3`) com cartões `rounded-xl border bg-card`.
- Cada cartão contém: rótulo em `text-muted-foreground text-sm` e valor em `text-2xl font-bold`.
- Métricas típicas: Total, Ativos, Inativos (ou variações contextuais como "Com ícone", "Sem ícone").

### 3. Barra de Ações
- Campo de busca com ícone `Search` à esquerda (`pl-9`), placeholder contextual.
- Filtros avançados em `Collapsible`: expansível com ícone `Filter`.
- Filtros são combináveis e multi-seleção (checkboxes ou selects).
- Botões de exportação (CSV, XML, PDF) com ícone `Download`.
- Botão de importação CSV com ícone `Upload` (quando aplicável).

### 4. Tabela de Dados
- Container: `rounded-xl border bg-card`.
- Componentes: `Table, TableHeader, TableBody, TableRow, TableCell`.
- Estado vazio: ícone centralizado + texto "Nenhum(a) … encontrado(a)".
- Paginação no rodapé com seletor de itens por página (10, 25, 50, 100).
- Checkbox de seleção múltipla na primeira coluna (quando aplicável).
- Switch inline para ativar/desativar registros diretamente na linha.

### 5. Diálogo de Criação/Edição
- Utiliza componente `Dialog` (modal).
- Campos organizados em grid `grid-cols-1 sm:grid-cols-2`.
- Validação inline com `toast.error()` para campos obrigatórios.
- Feedback de sucesso via `toast.success()`.

### 6. Animação de Entrada
- Wrapper `motion.div` com `initial={{ opacity: 0, y: 16 }}` e `animate={{ opacity: 1, y: 0 }}`.
- Transição suave na montagem da página.



## Sistema de Cores Base

O sistema utiliza tokens semânticos CSS definidos globalmente via variáveis HSL:

### Tokens Semânticos Principais
- `--background` / `--foreground`: Fundo e texto principal.
- `--card` / `--card-foreground`: Fundo e texto de cartões.
- `--primary` / `--primary-foreground`: Cor de ação principal e texto sobre ela.
- `--secondary` / `--secondary-foreground`: Cor secundária.
- `--muted` / `--muted-foreground`: Elementos silenciados (labels, placeholders).
- `--accent` / `--accent-foreground`: Cor de destaque (hover, seleção).
- `--destructive`: Ações destrutivas (excluir, cancelar).
- `--border`: Bordas de containers e separadores.
- `--ring`: Anel de foco em elementos interativos.

### Personalização Completa (Full Personalization)
- Toggle nas configurações permite substituir a cor primária padrão pela cor de marca da clínica.
- Quando ativo, atualiza dinamicamente: `--primary`, `--ring`, `--sidebar-primary` e variantes relacionadas.
- A conversão é feita de HEX para HSL em tempo real via JavaScript.
- Cor do texto sobre botões (`--primary-foreground`) também é configurável.

### Identidade Fixa da Plataforma
- Telas de identificação de tenant e cadastro de empresa utilizam sempre a identidade da plataforma (Ramify), independente da personalização do tenant.
- A personalização só é aplicada após a identificação do ambiente.

### Regras de Uso nos Componentes
- **Nunca** usar classes de cor diretas (`text-white`, `bg-black`) nos componentes.
- Sempre usar tokens: `text-foreground`, `bg-card`, `border-border`, `text-muted-foreground`.
- Exceção: cores dinâmicas de entidades (status, colaboradores) usam `style` inline com valores do banco.