# Padrões do E-PROC

> Gerado do guide vivo em 2026-07-15. Fonte: `7.padroes/` + os `*PatternContent.vue` + `app/data/patterns/*`. Resumo estrutural (anatomia/seções/dados); o detalhe interativo vive no guide.

## O CHASSI do ME (leia antes de montar qualquer tela)

Toda tela do ME nasce no mesmo shell (block **MeLayout**). O que define "cara de ME" é o chassi — erre aqui e a tela não parece do ME, mesmo com os tokens certos.

**App bar (#header) — a regra que mais se erra:**
- Barra **AZUL me-brand full-width** no topo. Marca **"me." branca à ESQUERDA**.
- **Navegação principal HORIZONTAL no topo** (áreas: Dashboard · Transações · Fornecedores · Catálogos · Usuários · Mais).
- À direita: transversais (**Mensagens · Genius · Carrinho**, com divisor antes deles) + **avatar**.
- ❌ **NUNCA** transforme a navegação de áreas num **rail/sidebar de ícones à esquerda**. O rail lateral (#nav-area) é OPCIONAL e é só atalho de etapa/rodada — não é o menu de áreas.
- ❌ Header **verde ou claro/neutro = me-brand NÃO aplicado (erro)**. A barra é azul me-brand.

**Slots do MeLayout (preencha só os que a tela usa):**
- **#header** — app bar azul (acima).
- **#nav-area** — rail lateral opcional (5.5rem), atalhos; NÃO é o menu de áreas.
- **#toolbar (Subheader)** — CTA primário (botão split azul) à **ESQUERDA** + até 3 ações + "Mais ações"; à direita busca (Filter Search) + toggle de gráficos + troca de visão.
- **#left-area** — sidebar de escopos/filtros da entidade (sempre visível quando ligada; recolha pelo colapso do rail, nunca escondendo o slot — senão sobra coluna vazia que espreme a tabela).
- **#analytics** — gráficos, só pelos gatilhos (toggle/coluna) e com fechar.
- **#default** — conteúdo (tabela | cards | lista).
- **#right-area** — Carrinho **XOR** Mensagens (um por vez).
- **#footer** — só tablet/mobile.
- **Modal** nunca mostra o #header; anexos abrem em drawer.

## Anatomia da Index (a mais comum), em ordem
1. **#header** (app bar azul horizontal, acima).
2. **Subheader** — CTA **"Novo X"** (cadastro de entidade) à esquerda · até 3 ações + "Mais ações" · à direita busca + toggle gráficos + troca de visão.
3. **Filter Bar** — critérios no modelo **campo · operador · valor** (MeCriterionInput, peças encostadas/removíveis) — **NÃO** Selects soltos; ao lado a Filter Search (busca livre em overlay).
4. **Área de dados** — tabela/cards/lista. **Tipo = TEXTO**; **só Status é badge** semântico. **Seleção em massa = badge "N selecionados" na Filter Bar** (toggle que filtra os selecionados e desabilita os filtros) — **NÃO** o rodapé padrão "N de M linha(s) selecionada(s)".

## Convenções do ME (toda tela)
- Voz/labeling **PT-BR**, sem UPPERCASE. "**Novo X**" = cadastrar entidade · "**Adicionar X**" = item em lista existente. Sobrescreva rótulo default em inglês (o overflow é "Mais ações", não "Options").
- **Cor primária = me-brand (AZUL)**. Header/CTA verde = me-brand não aplicado.
- **Status = badge semântico** (nunca cor sozinha): Pendente/Em análise/Aguardando=warning · Em andamento=info · Aprovado/Concluído=success · Rascunho=neutral · Recusado/Cancelado=error.
- Valor: total/financeiro "R$ 1.234,56" · unitário/de lista "BRL 38,90".
- Menu por linha no kebab vertical (⋮). Ação destrutiva por modal de confirmação.
- Feedback por toast (com desfazer quando fizer sentido); trate **vazio, carregando e erro**.
- Responsivo: no mobile o **app bar vira BRANCO** (bg-background — logo azul/primary, hambúrguer, lupa/busca sob demanda, transversais e avatar como ícones escuros; **header claro no DESKTOP = erro, no MOBILE = correto**) + **navbar inferior AZUL**; o CTA primário vira **FAB**; as ações secundárias do subheader **colapsam em "Mais ações"** (nunca rolam na horizontal nem quebram em linhas); a sidebar vira drawer pelo hambúrguer.

## PRONTO QUANDO (Definition of Done — critério de aceite em E-PROC)
- [ ] **App bar azul me-brand** com marca "me." à esquerda + **navegação HORIZONTAL** + transversais/avatar à direita (nav NÃO virou rail lateral).
- [ ] Anatomia e **ordem das zonas** do padrão respeitadas; só as zonas usadas.
- [ ] **Componentes REAIS** do EletroDS/blocks (Me*/blocks) antes de remontar; nada recriado do zero que já exista.
- [ ] **Status como badge**; Tipo como texto; seleção em massa = badge-toggle na filter bar.
- [ ] Labeling **PT-BR** + moeda no formato certo.
- [ ] Estados **vazio / carregando / erro** tratados; a view inicial já EXIBE dados.
- [ ] **Foundations aplicados**: só classe Tailwind + var(--ui-*)/token — sem HEX/valor fora de escala/inline fixo; dark mode pelos tokens. (Confirme com o **doctor** da suite me-foundations que `--primary` é me-brand — guard limpo NÃO prova marca aplicada.)
- [ ] **a11y**: heading order, foco visível, contraste AA, rótulo/nome acessível, alvo ≥ 44px.
- [ ] A tela **RENDERIZA** de fato (valide olhando, não só o build): tabela mostra linhas com rolagem interna e o corpo NÃO colapsa a zero.

## Alvo shadcn/React
O chassi é o **MESMO** — muda só a camada de componentes. Puxe os componentes do **catálogo ME `@me-shadcn` (shadcn-me.vercel.app)** e **espelhe o layout 1:1 do app `vibe-react/src/previews/`** (`_shell.tsx` = AppHeader/MobileNavbar; `IndexPreview.tsx` = index completa). `ui.shadcn.com` genérico + tokens ME só como emergência (avise). Tokens/setup shadcn = skill **me-foundations-shadcn** (rode o `shadcn-doctor.mjs` como gate de marca).

---

## Introdução

_Visão geral dos Padrões do ME — o que esperar, o que você encontra aqui, materiais para download e links relacionados._

Os Padrões documentam os pontos em que alguém altera dados ou dispara um fluxo no ME — e como cada ação e estrutura de tela deve aparecer, se comportar e ser confirmada. É a lente de comportamento e UX (macro): heurística, contexto de tela e decisão. O detalhe de cada componente (variantes, estados) vive em Componentes; os tokens, em Foundations.

**O que você encontra aqui:**

- **Ações do usuário** — adicionar, editar, excluir, copiar, filtrar, fixar, desfazer e ações em massa: posição na tela, labeling e feedback de cada uma.
- **Estrutura de Index** — o chassi das telas de listagem (zonas, modos de visualização, especificações por entidade).
- **Estrutura de documento** — o chassi das telas de documento (forehead, abas, corpo e hierarquia de ações por status).
- **Dashboard** e **Transversais** (Genius, Chat, Carrinho).

---

## Padrões

_Pontos em que alguém altera dados ou dispara um fluxo no ME — como cada tipo de ação deve aparecer, se comportar e ser confirmada._

---

## Adicionar

_Quando usar Criar vs. Adicionar, como disparar o formulário, onde posicioná-lo e qual feedback confirma a criação._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Index — Subheader** — "Novo [Entidade]" primário (botão split azul), à ESQUERDA do subheader — CTA de mais alta prioridade da tela — único, sempre visível, nunca oculto. Região esquerda = CTA · centro = ações · direita = busca/visões.
- **Index Transações** — Split button "Novo documento" — Agrupa Requisição, Cotação, Pedido, Leilão e NF sem poluir o Subheader.
- **Documento — Toolbar da tabela** — "Adicionar item" outlined, à esquerda da toolbar — Ação contextual da tabela — nunca no Subheader global do documento.
- **Catálogo — Cards** — "Adicionar ao carrinho" outlined por card — CTA secundário por card; não compete com o Subheader da página.
- **Formulários e Drawers** — "Adicionar campo" ghost ou link-button — Ação local de baixa hierarquia — não deve disputar visibilidade com ações globais.

**Labeling:**
- Novo + Fornecedor = Novo Fornecedor
- Nova + Empresa = Nova Empresa
- Novo documento + → Cotação = Novo documento → Cotação
- Novo documento + → Requisição = Novo documento → Requisição
- Adicionar + item = Adicionar item
- Adicionar + aprovador = Adicionar aprovador

**Action Catalog:**
- **Index Fornecedores**
- **Index Produtos / Catálogos**
- **Index Usuários**
- **Index Empresas**
- **Index Cargos**
- **Index Catálogos**
- **Transações — split button**
- **Transações — split button**
- **Transações — split button**
- **Transações — split button**
- **Transações — split button**
- **Tabela de documento**
- **Cotação — fornecedores**
- **Fluxo de aprovação**
- **Catálogo — cards**
- **Documento — anexos**
- **Formulário dinâmico**

**Heurísticas (primária):**
- Correspondência com o mundo real — "Novo Fornecedor", "Adicionar item" e "Novo documento → Cotação" mapeiam intenções reais do usuário
- Reconhecimento em vez de memorização — o objeto no rótulo elimina ambiguidade: o usuário sabe o que cria antes de clicar
- Controle e liberdade — o CTA primário está sempre visível no Subheader, nunca oculto em overflow ou menus
- Prevenção de erros — distinção clara entre Criar (permanente), Adicionar (contextual) e Gerar (fluxo) evita ações equivocadas

**Heurísticas (secundária):**
- Consistência e padrões — "Novo [Entidade]" para cadastros; "Adicionar [item]" para listas; "Novo documento → [Tipo]" para fluxos de procurement
- Eficiência e flexibilidade — split button concentra os 5 tipos de documento de transação num único CTA sem poluir o Subheader
- Visibilidade do status do sistema — feedback imediato (Toast) confirma o que foi criado; para fluxos, indica o próximo passo

**Tertiary Heuristics:**
- Correspondência com o mundo real — "Novo documento" deixa claro que o resultado é um documento de fluxo, não um cadastro mestre; o dropdown revela o tipo sem ambiguidade
- Prevenção de erros — concentrar Requisição, Cotação, Pedido, Leilão e NF no split button evita que o usuário escolha o tipo errado por engano

---

## Filtrar

_Como o usuário cria, aplica e gerencia filtros no ME — Filter Bar, Command Palette e filtros salvos._

**Seções:** Boas Práticas · Formas de filtrar · Filter Bar · Filter Search · Variantes · Feedback

---

## Copiar

_Copiar reutiliza informações sem modificar o original. Use "Copiar" para enviar dados à área de transferência e use "Duplicar", "Criar cópia" ou "Copiar como novo" quando a ação gerar um novo registro independente._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Linha de tabela** — Menu de mais ações ou ação direta na linha — Espaço limitado; ação contextual ao item selecionado
- **Campo de link / ID** — Ícone de cópia ao lado do campo — Feedback imediato de copy-to-clipboard sem perder foco
- **Header de card ou documento** — Botão ghost com ícone de copiar — Ação secundária visível sem sobrecarregar a hierarquia
- **Barra de ações em massa** — "Duplicar selecionados" na toolbar — Permite duplicação em lote de forma eficiente

**Labeling:**
- Copiar + Link = Copiar link
- Duplicar + Produto = Duplicar produto

**Heurísticas (primária):**
- Correspondência com o mundo real — distingue "Copiar" (clipboard) de "Duplicar" (novo registro)
- Prevenção de erros — destaca que a cópia é independente; alterações não afetam o original
- Visibilidade do status do sistema — confirma a cópia com feedback imediato (Toast)
- Consistência e padrões — mesmo ícone (i-lucide-copy), mesma posição em todas as telas

**Heurísticas (secundária):**
- Reconhecimento em vez de memorização — rótulo indica exatamente o que será copiado
- Flexibilidade e eficiência — atalhos de teclado para copy-to-clipboard quando aplicável
- Prevenção de erros — copy-to-clipboard nunca destrói nem modifica o original

---

## Editar

_Como entrar no modo de edição, quando usar inline vs. formulário, como validar campos e o que exibir após salvar ou cancelar._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Index / Menu de mais ações da linha** — Ícone de lápis ou "Editar" no menu de mais ações — Acesso rápido sem abrir o documento
- **Modal simples (Config)** — Dialog centralizado com footer [Cancelar][Salvar] — Entidades de configuração com poucos campos — Cargo, Local, Condição de Pagamento
- **Documento em modal** — Chassi completo dentro de overlay modal — Documentos de fluxo (Cotação, Pedido) abertos do Index; pode expandir para página dedicada
- **Página dedicada** — Chassi completo em URL própria — Entidades complexas como Usuário ou Empresa; mesma estrutura do chassi do modal de documento
- **Edição inline (tabela)** — Clique direto na célula editável — Campos simples — valor, quantidade, status — sem abrir modal

**Modal Rules:**
- Título do modal: "Editar [nome do registro]"
- Dados atuais sempre pré-preenchidos — nunca formulário em branco
- CTA primária: "Salvar" (nunca "Confirmar" — reservado para criação)
- CTA secundária: "Cancelar" (descarta alterações)
- Alerta ao tentar fechar com alterações não salvas

**Heurísticas (primária):**
- Consistência e padrões — "Editar" como verbo padrão; nunca "Modificar", "Alterar" ou "Update"
- Controle e liberdade do usuário — sempre possibilitar cancelar sem salvar alterações
- Prevenção de erros — validações em tempo real, não apenas ao salvar
- Visibilidade do status do sistema — CTA "Salvar" diferencia edição de criação

**Heurísticas (secundária):**
- Reconhecimento em vez de memorização — dados atuais pré-preenchidos no formulário
- Prevenção de erros — alerta ao tentar sair com alterações não salvas
- Flexibilidade e eficiência — edição inline para campos simples em tabelas

---

## Excluir

_Exclusão é irreversível — quando exigir confirmação em modal, como posicionar a ação destrutiva e qual feedback confirma a remoção._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Linha de tabela** — Menu de mais ações, sempre ao final com separador — Isolada de ações não destrutivas para evitar clique acidental
- **Documento de detalhe** — Botão destrutivo no rodapé ou na toolbar — Ação secundária, nunca a ação principal da tela
- **Modal de edição** — Botão destrutivo no rodapé esquerdo — Separado dos CTAs principais (salvar/cancelar)
- **Ação em massa** — Barra flutuante após seleção múltipla — Permite exclusão em lote com confirmação única

**Modal Rules:**
- Título do modal repete o nome do item: "Excluir [Nome do item]?"
- Mensagem de aviso descreve o impacto e a irreversibilidade
- CTA primária destrutiva: "Excluir" (estilo error/danger)
- CTA secundária: "Cancelar" (sem destruição)
- Nunca usar "Sim/Não" como CTAs — use verbos explícitos

**Heurísticas (primária):**
- Prevenção de erros — sempre exige confirmação explícita antes da exclusão
- Controle e liberdade do usuário — oferece saída clara (cancelar) no modal de confirmação
- Visibilidade do status do sistema — feedback explícito e claro após exclusão
- Consistência e padrões — "Excluir" nunca como ação primária; sempre ação destrutiva

**Heurísticas (secundária):**
- Prevenção de erros — ações em massa com exclusão sempre exigem confirmação
- Estética e design minimalista — ação destrutiva isolada das ações principais por divider
- Reconhecimento em vez de memorização — modal de confirmação mostra o nome do item

---

## Remover

_Remover desassocia; excluir deleta. Como diferenciar as duas ações no visual, no labeling e no feedback ao usuário._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Chip / tag / badge** — Ícone × dentro do chip, à direita — Padrão reconhecível; compacto no espaço limitado do chip
- **Linha de item em documento** — Ícone circle-minus ao final da linha — circle-minus diferencia "remover" de "excluir" (trash-2) — o item some do documento mas o registro permanece no sistema
- **Item de carrinho** — Ícone trash-2 ou "Remover" ao lado do item — Padrão universal de carrinho; imediato e sem confirmação
- **Lista selecionável** — "Remover selecionados" na barra de ações — Remoção em lote de associações múltiplas

**Heurísticas (primária):**
- Correspondência com o mundo real — "Remover" = tirar de uma lista, não destruir o registro
- Prevenção de erros — diferencia claramente de "Excluir"; sem modal para remoções simples
- Visibilidade do status do sistema — remoção visual imediata com feedback Toast
- Controle e liberdade — ação deve ser desfazível quando possível (Toast com "Desfazer")

**Heurísticas (secundária):**
- Consistência — ícone × em chips/tags; "Remover" com ícone trash-2 em listas maiores
- Prevenção de erros — quando a remoção tem impacto significativo, exige confirmação
- Reconhecimento — rótulo explícito quando o impacto não é óbvio pelo ícone

---

## Desfazer

_Quando oferecer Desfazer, por quanto tempo manter a janela de reversão e quais ações nunca devem permitir undo._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Exclusão de item** — Toast: "[Item] excluído. Desfazer" — Baixo risco; elimina necessidade de modal de confirmação
- **Remoção de associação** — Toast: "[Item] removido. Desfazer" — Ação reversível sem impacto sistêmico imediato
- **Arquivamento** — Toast: "[Item] arquivado. Desfazer" — Ação de soft-delete; fácil de reverter dentro da janela
- **Mover / reorganizar** — Toast: "Item movido. Desfazer" — Reorganização reversível; conforto sem risco de perda

**Heurísticas (primária):**
- Controle e liberdade do usuário — permite desfazer ações acidentais sem consequências
- Prevenção de erros — substitui modais de confirmação em ações de baixo risco
- Visibilidade do status do sistema — Toast com contador de tempo restante
- Redução de erros — oferece saída segura sem interromper o fluxo principal

**Heurísticas (secundária):**
- Eficiência — substitui fluxos de confirmação, reduzindo fricção em ações frequentes
- Consistência — sempre o mesmo padrão: Toast com botão "Desfazer" à direita
- Visibilidade — barra de progresso no Toast indica o tempo restante visualmente

**Regras de toast:**
- Duração padrão: 5 segundos com barra de progresso visual
- Botão "Desfazer" sempre à direita da mensagem, com estilo link ou ghost
- Após expirar: ação se torna permanente silenciosamente — sem notificação adicional
- Após clicar "Desfazer": Toast secundário "Ação desfeita." (sem novo botão desfazer)
- Nunca empilhar dois Toasts de desfazer simultaneamente para a mesma ação

---

## Fixar

_Quando permitir fixar itens, quantos no máximo, como sinalizar o estado fixado e como expor a opção de desfixar._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Linha de tabela** — Menu de mais ações ou ícone pin toggle na linha — Ação contextual ao item; não polui a interface em repouso
- **Hover da linha** — Ícone pin visível apenas no hover — Reduz ruído visual; disponível quando necessário
- **Painel lateral / card** — Ícone pin no canto do card ou header — Ação persistente visível sem hover em visualizações de card
- **Índex de módulos** — Toggle no menu de mais ações ou ação contextual — Personalização da ordem de módulos no menu ou dashboard

**Heurísticas (primária):**
- Controle e liberdade do usuário — personaliza a visualização sem alterar dados
- Consistência e padrões — ícone pin sempre igual; estado visual claro (fixado/não fixado)
- Eficiência de uso — acesso imediato a itens de alta frequência sem scroll ou busca
- Visibilidade do status — item fixado claramente distinguível dos demais (ícone preenchido)

**Heurísticas (secundária):**
- Reconhecimento em vez de memorização — ícone pin preenchido indica estado fixado
- Prevenção de erros — ação é reversível; "Desafixar" disponível no mesmo lugar
- Estética — itens fixados agrupados no topo com separador visual dos demais

**State Rules:**
- Ícone pin vazio (outline): item não fixado — ação disponível para fixar
- Ícone pin preenchido (filled): item fixado — ação disponível para desafixar
- Itens fixados agrupados no topo da lista com separador visual
- Limite recomendado: até 5 itens fixados por lista para manter significado
- Ordem entre fixados: por data de fixação (mais recente no topo)

---

## Mais ações

_Quando usar o menu de mais ações ⋮, como ordenar as ações — frequentes primeiro, destrutivas por último — e como nomear cada item._

**Seções:** Boas Práticas · Contextos · Estrutura · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Linha de tabela** — Ícone do menu Mais ações ao final da linha, sempre visível — Padrão reconhecível; mantém o alinhamento vertical da tabela
- **Header / toolbar** — Dropdown button ao lado das ações principais — Agrupa ações secundárias sem comprometer a hierarquia primária
- **Card** — Ícone no canto superior direito do card — Contextual ao card; não interfere com a ação principal do item
- **Toolbar de documento** — Botão "Mais ações" com ícone chevron-down — Indica overflow de ações disponíveis para o documento ativo

**Menu Structure:**
- Ações frequentes não destrutivas — primeiras posições do menu
- Ações menos frequentes não destrutivas — posições intermediárias
- Divider visual separando ações não destrutivas das destrutivas
- Ações destrutivas (Excluir, Cancelar) — sempre ao final, após o divider

**Heurísticas (primária):**
- Design minimalista — reduz ruído visual sem sacrificar o acesso às funcionalidades
- Reconhecimento em vez de memorização — cada item descreve exatamente o que será feito e sobre o quê
- Prevenção de erros — destrutivas sempre no último bloco, após divisor, nunca misturadas com as demais
- Visibilidade — o trigger do menu Mais ações é sempre acessível e reconhecível; nunca oculto por hover

**Heurísticas (secundária):**
- Consistência — mesmo tipo de trigger para o mesmo contexto em toda a plataforma
- Controle e liberdade — ESC e clique fora fecham o menu sem disparar nenhuma ação
- Eficiência de uso — ações mais frequentes no topo, destrutivas sempre no final

---

## Ações em massa

_Como ativar a barra de seleção múltipla, quais ações disponibilizar em lote e como incluir a contagem no feedback de confirmação._

**Seções:** Boas Práticas · Contextos · Hierarquia · Labeling · Exemplos · Feedback

**Contextos de uso (onde fica + porquê):**
- **Index — Subheader** — CTAs normais — sem alterações — O Subheader permanece completamente inalterado durante a seleção. Os mesmos CTAs funcionam tanto para ações individuais quanto em massa — não são adicionados nem removidos botões.
- **Index — Filter Bar** — Badge "X selecionados" (toggle) + "Salvar lista" + "Limpar seleção" — A badge aparece logo após o checkbox e funciona como toggle: ao ativar, filtra a view pelos itens marcados, desabilita os filtros aplicados (sem removê-los) e expõe "Salvar lista" e "Limpar seleção". Nenhum botão novo é adicionado à tela.
- **Header da tabela** — Checkbox "Selecionar todos" — Acesso rápido à seleção total da página; estado indeterminate quando há seleção parcial.
- **Linha da tabela** — Checkbox à esquerda em cada linha — Seleção granular por item. A seleção persiste ao navegar entre páginas da lista.
- **Documento — Toolbar da tabela** — CTAs inline acima da tabela de itens — Em tabelas de documento (ex.: itens de cotação), as ações ficam na toolbar da própria tabela: "Adicionar item", "Atualização em massa", "Excluir itens".
- **Index — CTAs do Subheader** — Sempre visíveis e ativos; agem sobre a seleção — Na index não há CTAs dedicados a massa: os próprios CTAs do Subheader passam a operar sobre os itens marcados ("Enviar 3 documentos"). Nenhum botão é adicionado, removido ou desabilitado pela seleção.
- **Documento — Toolbar (disabled/enabled)** — Disabled sem seleção / enabled com ≥ 1 item — Apenas na toolbar da tabela de documentos os botões específicos de massa ("Atualização em massa", "Excluir itens") ficam disabled sem seleção e ativam ao marcar ≥ 1 item. CTAs independentes de seleção (ex.: "Adicionar item") permanecem sempre ativos.

**Ações comuns:**
- **Exportar**
- **Enviar**
- **Aprovar**
- **Arquivar**
- **Bloquear**
- **Inativar**
- **Rejeitar**
- **Excluir**
- **Remover**

**Heurísticas (primária):**
- Eficiência e flexibilidade de uso — permite operações em lote sem repetição de ação
- Visibilidade do status do sistema — badge "X selecionados" aparece no Filter Bar somente com seleção ativa
- Prevenção de erros — ações destrutivas em massa sempre exigem modal de confirmação com contagem explícita
- Feedback claro — indica quantos itens serão afetados antes e depois da ação
- Controle e liberdade — a badge funciona como toggle: filtra a view pelos selecionados; "Salvar lista" guarda a seleção e "Limpar seleção" desfaz tudo com um clique

**Heurísticas (secundária):**
- Consistência — checkboxes no padrão de tabelas do produto; badge de contagem no Filter Bar
- Controle e liberdade — "Limpar seleção" disponível no Filter Bar a qualquer momento durante seleção ativa
- Prevenção de erros — badge descreve claramente a contagem: "2 selecionados"
- Seleção multi-página — itens selecionados persistem ao navegar entre páginas; clicar na badge filtra apenas os marcados

---

## Chassi (MeLayout)

_O shell comum a todas as telas do ME — slots do MeLayout, regras transversais e qual slot cada tipo de tela usa._

**Seções:** Anatomia · Regras · Matriz · Responsividade

**Contextos de uso (onde fica + porquê):**
- **Header (app bar)** — Topo, full-width, AZUL me-brand — Barra azul me-brand: marca "me." branca à esquerda, NAVEGAÇÃO PRINCIPAL HORIZONTAL (áreas: Dashboard, Transações, Fornecedores, Catálogos, Usuários) no topo, transversais (Mensagens, Genius, Carrinho) + avatar à direita. O menu de áreas fica AQUI, no header — NUNCA vira rail/sidebar de ícones à esquerda. Header verde/claro = me-brand não aplicado (erro).
- **Nav-area (opcional)** — Rail lateral estreito (5.5rem), abaixo do header — Atalhos por etapa/rodada (ex.: Cotação) — OPCIONAL, entra só quando a tela precisa. NÃO é o menu principal de áreas (esse é horizontal, no header).
- **Left-area / sidebar** — Coluna à esquerda, redimensionável e colapsável — Menu de seções/filtros da tela (index, config). Abaixo de lg vira slideover.
- **Toolbar / subheader** — Faixa abaixo do header, sobre o conteúdo — Ações da tela (CTA primário + ghosts + "Mais ações") e busca/filtro/view.
- **Conteúdo (default)** — Coluna central, rola — A tela em si (tabela, documento, dashboard, formulário).
- **Right-area** — Coluna à direita, redimensionável — Carrinho XOR Mensagens — nunca os dois juntos; troca conforme o contexto.
- **Footer** — Rodapé — só tablet/mobile — No desktop não há footer; no mobile traz favicon + navegação compacta.
- **Modal** — Sobreposto ao chassi — Nunca mostra o header; anexos abrem em drawer, não em modal.
- **Projeto separado (não E-PROC)** — Pode dispensar o chassi — Fora do E-PROC, mantém identidade + foundations mas a estrutura é livre.

---

## Geral

_Anatomia universal das telas de index — zonas, modos de visualização, hierarquia de CTAs e regras da filter bar._

**Seções:** Boas Práticas · Anatomia · Sidebar · Hierarquia · Ecossistema · Index · Responsividade · Feedback · Construir

**Quando usar:**
- Qualquer tela de listagem de uma entidade — Transações, Fornecedores, Catálogo, Usuários.
- Quando há volume de registros que exige busca, filtros e ações em lote.
- Quando os registros compartilham colunas/atributos comparáveis entre si.

**Quando NÃO usar:**
- Tela de detalhe ou edição de um único registro — use Estrutura de Documento.
- Dashboards e visões analíticas — use o padrão de Dashboard.
- Listas curtas e fixas de configuração, sem busca — use uma tabela simples.

**Widgets e gráficos:**
- **De onde nasce** — Da agregação de uma coluna (menu do cabeçalho → Criar gráfico / métrica) ou trazido do Dashboard.
- **Faixa "Meus widgets"** — Área colapsável no topo do conteúdo, só no modo Tabela; o botão de gráfico do subheader a abre/fecha. Cabeçalho traz a contagem de widgets + Restaurar padrão + Limpar todos.
- **Grade multi-widget** — Vários widgets numa grade auto-ajustável de ~4 por linha (minmax 200px). Cada card: título + período + remover (×).
- **Comportamento da tabela** — Ao abrir os widgets a tabela vira "hug" (só a página, sem scroll interno) e o corpo inteiro rola junto; ao fechar, volta a preencher com scroll e cabeçalho fixo.
- **Cores de série** — Paleta de séries chart-1…chart-10 (Blue / Orange / Teal / Pink / Yellow / Purple / Red / Cyan / Lime / Slate 600) — nunca as cores semânticas de status.

**Hierarquia de CTA:**
- **Ação primária** — Botão sólido à esquerda do subheader, logo após o botão de menu da sidebar. — A ação central da tela: criar um novo registro.
- **Ações de suporte** — Botões ghost, à direita da ação primária. — Tarefas auxiliares que não criam registros — exportar, importar, configurar.
- **Ações em massa** — Filter bar — badge "N selecionados" logo após o checkbox; surge ao marcar itens. — Ao marcar itens no conteúdo, a filter bar exibe uma badge com a quantidade de selecionados.
- **Ações por linha** — Última coluna da tabela — menu de mais ações ou ícones inline. — Ações contextuais de cada item, acessíveis na própria linha.

**Menu do cabeçalho da coluna:**
- **Ordenar A → Z / Z → A** — Crescente ou decrescente; o ícone de ordenação fica à esquerda do rótulo, sem chevron.
- **Fixar / Desafixar coluna** — Move a coluna para o início (reordenação), agrupada às demais fixadas.
- **Ocultar coluna** — Remove a coluna da tabela sem tirá-la do catálogo.
- **Criar gráfico** — Só em colunas agregáveis (categórica / numérica / data): gera um gráfico da coluna — 7 tipos (coluna, barra, linha, área, pizza, rosca, tag cloud).
- **Criar métrica** — Contador ou nº de valores distintos da coluna. O identificador único (Número / 1ª coluna) não é agregável — seu menu não traz widget.

**Ecossistema:**
- **Genius** — Assistente de IA que analisa os dados da index em tempo real e oferece sugestões inteligentes sem interromper o fluxo de trabalho.
- **Carrinho** — Permite adicionar produtos ao carrinho de cotação diretamente da view Cards do Catálogo, sem abrir a página de detalhe do item.
- **Mensagens** — Canal de comunicação contextual com fornecedores diretamente da index, sem sair da tela ou perder o contexto da listagem.

**Entidades Detalhe:**
- **Transações**
- **Fornecedores**
- **Catálogo**
- **Usuários**

**Gaps / drift conhecido:**
- **Filter Bar e Sidebar são custom** — Ainda não são blocks do EletroDS — compõem-se (regra EDS-first → Nuxt UI → compor) seguindo esta anatomia até virarem blocks.
- **Fixar coluna = reordenação** — Não usar o column-pinning nativo do UTable (cria coluna-fantasma / sobreposição); fixar move a coluna para o início.
- **Cores de série chart-1..10** — Definidas no lado shadcn; no Nuxt usam o fallback var(--color-*-600) até serem emitidas como tokens no app.
- **Switcher / tipo de exibição / filtros rápidos** — Entram no prompt como rótulos (cada seção da sidebar declara seu tipo de exibição — Lista/Checkbox-faceta/Seleção múltipla/única/Árvore/Card/Slider), mas o preview real desenha a sidebar a partir das variantes de index-sidebars.ts — reconstitua o conteúdo pela anatomia, não espere 1:1 desses campos.

**Mobile / tablet:**
- **App bar branco** — No mobile o header vira BRANCO (bg-default) com a logo ME AZUL: hambúrguer (abre a sidebar em drawer à esquerda) · busca (abre painel) · transversais Mensagens/Genius/Carrinho (drawer à direita) · avatar (drawer inferior). Alturas: header 64px · subheader 56px · nav bar 56px.
- **Subheader enxuto** — Sem hambúrguer, sem "Novo" e sem busca (foram pro header e pro FAB): sobram as ações em massa e os controles de gráfico / view.
- **FAB (criar)** — O CTA primário vira botão flutuante acima da nav bar (canto inferior direito); toque abre um drawer inferior "Novo documento" com os tipos empilhados. O rodapé da tabela ganha respiro à direita pra a paginação não ficar sob o FAB.
- **Nav bar inferior azul** — Barra AZUL com as funções principais do header + "Mais" (drawer inferior com busca e as seções do mega-menu).
- **Drawers** — Sidebar → drawer à esquerda (w-80). Transversais → drawer à direita. Avatar → drawer inferior (perfil + menu; submenus como Idioma / Substituição abrem em collapsible).

**Preview (master-detail):**
- **Split master-detail (desktop)** — Lista à esquerda (ListView com avatar / checkbox) + painel de detalhe à direita. Sem seleção: empty state com "Abrir documento" e "Perguntar ao Genius". Com linha ativa: código-nome + badge de status + tipo / criação / valor.
- **Documento em tela cheia (mobile)** — No mobile o Preview mostra só a lista (área cheia); tocar num registro abre o documento em TELA CHEIA (breadcrumb + expandir + fechar, ações contextuais, banner de status, hero e detalhes) — o mesmo destino do clique na linha.
- **Seleção na lista** — A linha mostra o avatar; no hover vira checkbox; selecionada fica marcada. O "selecionar todos" fica na filter bar. Requer o campo avatar na linha.

**Realce de linha (faixa azul):**
- **Faixa azul à esquerda** — Uma faixa azul na borda esquerda da linha marca registros que pedem atenção do usuário. É derivada de dados (não decorativa) e acompanha o status/badge da linha — a cor nunca aparece sozinha; some quando a pendência é resolvida. Vale em tabela, lista, card e no preview (master-detail).
- **Pendência de ação** — O registro aguarda uma ação do próprio usuário (ex.: aguardando a sua aprovação). É o principal gatilho da faixa.
- **Não lido** — Registro novo ou ainda não visto pelo usuário — some ao ser aberto.

**Tipos de item da sidebar:**
- **Link / item ativo** — Recorte simples navegável; o item ativo ganha destaque azul. Item externo leva o ícone arrow-up-right.
- **Árvore / pasta** — Recorte com filhos e contagem (folder / folder-open) — ex.: árvore de documentos por status, categorias do Marketplace.
- **Faceta (checkbox + contagem)** — Filtro por dimensão com contador — Localização (País › Estado › Cidade), Segmento, Cargo, Perfil, Fornecedores, Comprar por categoria.
- **Radio (período)** — Opção única — ex.: Último acesso (Todo período / 15 / 30 / 60 dias / Período específico + date input).
- **Slider / métrica (range)** — Faixa arrastável de dois thumbs (USlider range, 0–100) — ex.: Índice de cotações respondidas, Total de itens respondidos, Tempo médio de resposta.
- **Switcher de contexto** — Pill no topo que troca o CONTEXTO — e cada contexto tem SUA própria estrutura de sidebar (suas seções): Meus fornecedores ↔ Fornecedores ME · Meu catálogo ↔ Marketplace. Alternar substitui a sidebar inteira, não é um filtro a mais.
- **Tipo de exibição (por seção)** — Cada seção declara COMO seus itens aparecem: Lista (links) · Checkbox (faceta, com contagem) · Seleção múltipla · Seleção única (radio) · Árvore/pasta · Card/box · Slider (métrica, range). "Faceta" é um tipo de exibição — não um conceito à parte.
- **Box especial** — Cartão de conteúdo — endereço "Destino de compra" (é o 1º collapsible do Catálogo) ou banner promocional ("Oportunidades de negócio", acima da busca).
- **Favoritos** — Recortes fixados pelo usuário; marcados com estrela sólida amarela.
- **Ver mais** — Expande uma seção longa que veio truncada.

**Configuração da tabela:**
- **Densidade das linhas** — Três alturas do corpo (a fonte não muda): Compacto 40px · Regular 48px (padrão) · Espaçoso 64px. A célula do cabeçalho é SEMPRE 40px, independente da densidade.
- **Linhas por registro** — Quantas linhas de texto cada célula mostra: 1 / 2 / 3 truncam com reticências (line-clamp); "Ajustar ao texto" cresce a linha sem truncar.
- **Itens por tela** — Seletor de paginação no rodapé — 10 · 20 · 50 · 100 por página. Só na tabela; lista e card usam scroll infinito.
- **Fixar coluna** — Fixar = REORDENAÇÃO: a coluna vai para o início (logo após o checkbox), agrupada com as demais fixadas na ordem de fixação. Não é sticky-on-scroll — não gruda no scroll horizontal.
- **Ocultar coluna** — Tira a coluna da tabela sem removê-la do catálogo; volta pelo "Editar colunas".
- **Reordenar colunas** — Arrastar o cabeçalho (cursor grab) reposiciona a coluna; a ordem persiste por conta.
- **Editar colunas** — Modal com transfer-list (MeDualList): inativas à esquerda ↔ ativas à direita, busca em cada lado, mover uma a uma ou em massa (Selecionar todas / Remover todas), arrastar para ordenar as ativas; rodapé Cancelar / Aplicar + Restaurar padrão.
- **Exportar** — Exporta a listagem respeitando filtros e colunas atuais; operação longa mostra progresso.
- **Restaurar padrão** — Volta visibilidade, ordem, coluna fixada, densidade, linhas por registro e itens por tela ao conjunto inicial da entidade.
- **Rodapé (footer)** — Contagem "X–Y de Z registros" (PT-BR) à esquerda + paginação à direita, altura 56px. Listagens com menos de 10 registros não exibem rodapé.

**Modos de visualização:**
- **Tabela** — Densidade máxima: muitas colunas comparáveis lado a lado. Use quando o usuário escaneia e compara registros por vários atributos — status, datas, valores.
- **Lista** — Linha alta com thumbnail e texto empilhado: prioriza identificação visual sobre comparação. Use quando cada registro tem uma cara própria (avatar, logo) e poucos atributos importam na varredura.
- **Card** — Grid visual em que a imagem é o principal critério de decisão. Use só onde os itens são inerentemente visuais — produtos no Catálogo.
- **Preview** — Master-detail: a lista fica à esquerda e o registro aberto à direita. Use em fluxos de triagem, revisão e aprovação, sem perder o contexto da lista.

**Zonas:**
- **Subheader** — Barra de ações no topo do conteúdo — recolhe a sidebar, concentra a CTA primária e as ações da entidade, com busca e controles de visualização à direita.
- **Filter Bar** — Área de filtragem por critérios (Filter Bar). Filtros de contexto e critérios aplicados ficam numa faixa rolável à esquerda; as ações de gerenciar filtros ficam fixas à direita.
- **Área de conteúdo** — Tabela, lista ou grid de cards — o corpo principal da tela.

---

## Transações

_Index de documentos de compra — Requisições, Cotações, Pedidos e Contratos. Tabela com status semântico e ações dependentes do fluxo._

**Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback

**Quando usar:**
- Listar documentos de compra — Requisições, Cotações, Pré-Pedidos, Pedidos, Contratos, Leilões e Notas Fiscais.
- Quando Status e Tipo do documento precisam ser comparáveis numa varredura.
- Quando ações de fluxo (gerar, aprovar, cancelar) operam sobre os documentos.

---

## Fornecedores

_Gestão do cadastro de fornecedores — colunas, filtros por categoria e status, importação em massa._

**Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback

**Quando usar:**
- Gerenciar o cadastro de fornecedores — criar, editar, ativar/desativar e bloquear.
- Localizar fornecedores por categoria, status ou região antes de iniciar uma transação.
- Comparar fornecedores por atributos cadastrais (categoria, rating, último contato).

**Quando NÃO usar:**
- Adicionar um fornecedor já existente a uma cotação ou lista — use o padrão Adicionar (item em contêiner).
- Ver o detalhe ou editar um único fornecedor — use Estrutura de Documento.
- Rankings e análises de desempenho de fornecedores — use o padrão de Dashboard.

---

## Catálogo

_Catálogo de itens disponíveis para compra. View padrão em Cards com toggle para Tabela._

**Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback

**Quando usar:**
- Navegar e descobrir itens disponíveis para compra — busca livre + filtro de categoria.
- Solicitar itens (carrinho) ou cadastrar novos itens do catálogo, conforme o perfil.
- Comparar itens por preço, fornecedor, disponibilidade e prazo de entrega.

**Quando NÃO usar:**
- Adicionar um item já existente a uma requisição em outra tela — use o padrão Adicionar (item em contêiner).
- Ver o detalhe de um item do catálogo — use Estrutura de Documento.
- Análise de gastos por categoria — use o padrão de Dashboard.

---

## Usuários

_Gestão de usuários e permissões. View padrão em Lista enriquecida com avatar, perfil e status de conta._

**Seções:** Boas Práticas · Especificação · Sidebar · Contextos · Ações · Feedback

**Quando usar:**
- Gerenciar usuários e permissões da organização (acesso exclusivo de Administrador).
- Localizar usuários por perfil, status de conta ou departamento.
- Aplicar ações administrativas em lote — ativar, desativar, alterar perfil.

**Quando NÃO usar:**
- Editar o próprio perfil ou preferências — use a página de Configurações da conta.
- Ver o detalhe de um usuário — use Estrutura de Documento.
- Relatórios de acesso e auditoria — use o padrão de Dashboard.

---

## Geral

_Anatomia universal das telas de documento — forehead, abas e corpo; ações por status; CRUD e containers; responsividade e feedback._

**Seções:** Boas Práticas · Anatomia · Forehead & ações · Navegação · CRUD · Variantes · Responsividade · Feedback

**Hierarquia de ações:**
- **Ações primárias** — Ação esperada a partir da leitura — geralmente Editar ou Avançar fluxo (ex.: Enviar para aprovação).
- **Ações secundárias** — Copiar, exportar, imprimir ou abrir em outro módulo.
- **Ações destrutivas** — Cancelar documento, excluir rascunho — isoladas e com confirmação.

**Best Practices Do:**
- Pensar a leitura como parte do ciclo CRUD — conectada a Create, Update e Delete
- Manter dados em formato label + valor, escaneável verticalmente
- Posicionar ações no header do documento, no contexto correto
- Modelar modal padrão + expansão para full page
- Modelar estados de loading, erro, permissão e seção vazia desde o início

**Best Practices Dont:**
- Misturar leitura e edição sem clareza visual
- Usar labels genéricas como "Abrir" ou "Ver" sem a entidade
- Deixar tela em branco em erro ou documento indisponível
- Colocar ações destrutivas como primária no header
- Ignorar permissões ou bloqueios de status na definição das ações

**Como montar (passos):**
- **Identifique a entidade e o entry point**
- **Defina modal → expansão** — Trate ambos os estados no componente — não apenas a página ideal.
- **Monte a anatomia**
- **Posicione as ações**
- **Modele estados**
- **Use os componentes reais do EletroDS/Nuxt UI** — Hierarquia: EletroDS → Nuxt UI → Vue puro. Não recriar o que já existe.
- **Documente comportamento**

**Checklist:**
- A entidade e o entry point estão definidos?
- O container (modal, drawer ou página) faz sentido para a profundidade do conteúdo?
- Modal padrão + expansão para full page foram considerados?
- Header, corpo e áreas complementares estão estruturados?
- Leitura está claramente separada da edição?
- Estados principais foram modelados (loading, erro, vazio, sem permissão)?
- A hierarquia de ações no header está correta?
- A nomenclatura usa verbo + entidade?
- O fluxo está alinhado ao pattern CRUD e patterns relacionados?

**Princípios de consistência:**
- **Clareza da informação**
- **Separação leitura × edição**
- **Contexto preservado**
- **Complexidade proporcional** — No me., todo documento abre em modo modal por padrão e pode ser expandido para tela dedicada.
- **Feedback contínuo**

**Containers:**
- **Modal** — Leitura resumida ou primeiro contato com o documento.
- **Drawer** — Leitura complementar sem abandonar a tela anterior.
- **Página dedicada** — Leitura detalhada com múltiplas seções, tabelas internas ou histórico extenso.

**Pontos de entrada:**
- Clique em linha da tabela → abre visualização do registro
- Clique em card ou item de lista → abre detalhe
- Link contextual em notificação ou breadcrumb → navega para o documento
- Ação secundária "Visualizar" quando a linha não for clicável

**Exemplos:**
- **Requisição em leitura**
- **Documento de transação**
- **Documento bloqueado**

**Regras de feedback:**
- **Carregamento**
- **Sucesso / Preenchido**
- **Erro / Indisponível**
- **Sem permissão**

**Estados da interface:**
- Carregando
- Preenchido
- Vazio (seção)
- Sem resultado
- Erro ao carregar
- Sem permissão
- Conteúdo indisponível ou removido
- Documento bloqueado para edição

**Labeling Bad:**
- Abrir
- Ver
- Detalhes
- Visualizar

**Labeling Good:**
- Visualizar documento de transação
- Abrir detalhes do fornecedor
- Consultar contrato
- Ver requisição

**Labeling Principles:**
- Usar verbos orientados à ação com a entidade explícita
- Manter consistência entre listagem, header e ações contextuais
- Evitar termos genéricos quando o contexto não deixar claro o objeto
- Refletir a profundidade real da visualização (resumida vs. detalhada)

**Objetivos:**
- A informação seja clara e escaneável
- Ações relacionadas estejam acessíveis sem poluir a interface
- A leitura apoie decisões e próximas ações
- O usuário entenda contexto, status e dados principais sem ambiguidade
- A experiência de leitura seja consistente entre entidades semelhantes

**Overview Contexts:**
- Documentos de transação
- Requisições e cotações
- Pedidos e notas fiscais
- Cadastros de fornecedores
- Contratos
- Usuários e contatos

**Regras de permissão:**
- Esconder ações de edição quando o usuário não tiver permissão
- Desabilitar ações com tooltip explicando a restrição quando a visibilidade ajudar
- Exibir banner informativo quando o documento estiver bloqueado

**Related Patterns:**
- **CRUD**
- **Adicionar**
- **Documento Update**
- **Table**
- **Empty State**
- **Modal**
- **Page Layout**

**Práticas de estado:**
- Modelar estados já na definição do fluxo — não apenas a tela ideal
- Usar skeleton ou spinner no carregamento inicial
- Empty State por seção, com orientação clara
- Nunca deixar tela em branco quando o documento não existir ou estiver indisponível

**Blocos de estrutura:**
- **Header da página**
- **Corpo do documento**
- **Áreas complementares**

**Best Practices Do:**
- Tornar a ação primária contextual ao status atual do documento
- Isolar visualmente ações destrutivas das ações de suporte
- Manter "Documento" sempre como primeira aba e estado padrão ao abrir
- Exibir prazo ou data crítica em destaque no forehead quando relevante
- Usar seções colapsáveis para conteúdo complementar abaixo da tabela de itens

**Best Practices Dont:**
- Trocar a ação primária sem reflexo no status badge (devem estar sincronizados)
- Criar aba para seção com apenas 2-3 campos — use seção colapsável no corpo
- Misturar campos editáveis com campos de leitura sem separação visual clara
- Exibir ações destrutivas com o mesmo destaque visual das ações principais
- Omitir o histórico em documentos que passam por fluxo de aprovação

**Checklist:**
- Breadcrumb mostra o caminho correto até o documento?
- Status badge usa cor semântica correta para o estado atual?
- Ação primária é contextual ao status do documento?
- Ações destrutivas estão isoladas das ações de suporte?
- A aba "Documento" é a primeira e o padrão ao abrir?
- Toolbar da tabela de itens está posicionada acima dela?
- Campos em modo leitura estão sem borda de input?
- Seções complementares estão abaixo da tabela de itens?
- Datas ou prazos críticos estão em destaque no forehead?
- Estados de loading, vazio e erro foram mapeados?
- Fluxo de permissões (quem pode executar cada ação) foi documentado?

**Regras de abas:**
- "Documento" (ou nome equivalente) — sempre a primeira aba, padrão ao abrir o registro
- "Histórico" — sempre presente quando o documento passa por fluxo de aprovação ou edições
- "Anexos" — presente quando o usuário pode adicionar arquivos ao documento
- "Mapa" — específico para documentos de compra com mapa de aprovação configurável
- Tabs com dados dinâmicos usam badge de contagem (ex: "Histórico 5")
- Não criar abas para seções com poucos campos — prefira seções colapsáveis dentro do corpo

**Variantes:**
- **Pedido de compra**
- **Pré-pedido**
- **Requisição**
- **Cotação**
- **Contrato**
- **Leilão**
- **Nota Fiscal**

**Zonas:**
- **Breadcrumb** — Orientação de contexto — mostra de onde o documento vem e permite navegar de volta.
- **Forehead** — Identidade e status do documento — título, status badge, metadados e ações principais.
- **Abas de navegação** — Seções internas do documento — organiza conteúdo em domínios relacionados.
- **Corpo do documento** — Conteúdo principal — tabela de itens, seções de informação e campos de leitura.

---

## Produto

_Ficha do item de catálogo — forehead com galeria e preço/compra, abas de ancoragem e seções numeradas. Documento de entidade, sem o padrão de "locais"._

---

## Requisição

_View do pedido interno de compra sujeito a aprovação — itens, pedidos gerados e históricos._

---

## Cotação (RFQ)

_View do documento de cotação/negociação — modal com rail de fases, alternador Documento·Mapa·Otimização e rodadas de negociação._

---

## Leilão

_View da disputa de preços por lances — modal com lotes, lances em tempo real e resultado._

---

## Pré-pedido

_View da etapa intermediária antes do pedido firme — consolidação e aprovação._

---

## Pedido

_View do documento de compra confirmado — identificação, informações gerais, históricos e itens com aprovação por linha._

---

## Contrato

_View do acordo de fornecimento — dados, cláusulas, aditivos, saldo e vigência._

---

## Nota Fiscal

_View do documento fiscal de entrada — conferência contra o pedido e aprovação do recebimento._

---

## Fornecedor

_Ficha do fornecedor — forehead, abas de ancoragem e seções numeradas. Documento de entidade, sem o padrão de "locais"._

---

## Geral

_A visão geral do dashboard — camada de síntese sobre os dados, as duas áreas simétricas, o grid de 12 colunas, a sidebar de dados e o comportamento desktop/mobile._

**Seções:** Boas Práticas · Anatomia · Sidebar · Responsividade · Painéis

**Quando usar:**
- Sintetizar os dados de uma tela: KPIs, tendências e recortes que o usuário monta a partir da própria fonte.
- Quando a pessoa precisa montar a própria visão — criar, fixar, agrupar e reposicionar gráficos.
- Em dois contextos: embutido numa Index (explorar/guardar recortes) ou como tela dedicada de múltiplos painéis.

**Quando NÃO usar:**
- Conteúdo fixo que ninguém reorganiza — use uma grade estática de Charts.
- Um único gráfico ou KPI isolado — use o Widget direto, sem grade nem painéis.
- Operar registros um a um — isso é a Index (tabela), não o dashboard.

**Contextos de uso (onde fica + porquê):**
- **Header (app bar)** — Topo, full-width, AZUL me-brand — Chassi do ME: marca + navegação horizontal + transversais + avatar.
- **Abas de painéis + menus** — Faixa abaixo do header — Abas (ex.: Painel de compras · Aprovações e Requisições · Fornecedores · +). Menu da aba (⋮): Compartilhar/Duplicar/Renomear/Ocultar/Remover. ⋮ da página: Meus links/Filtros salvos/Painéis ocultos/Exportar (PDF ou imagem).
- **Filter Bar do painel** — Faixa abaixo das abas — Filtros persistentes do painel (ex.: Meus processos · Todo período · Processo = X ×) + cluster à direita [adicionar + · salvar visão 💾 · limpar 🗑 · ⋮]. Controlam os widgets abaixo; sinalizam estado "alterado".
- **Toolbar do painel** — Acima da grade (título/contexto à esquerda; ações à direita) — OU delegada ao subheader — Ordem fixa: Novo gráfico (abre o Chart Wizard) · Restaurar padrão (warning — reorganiza, NÃO apaga) · Limpar (error — remove). Cada ação só habilita quando há o que fazer.
- **Seção de métricas (KPIs)** — Topo do corpo — logo ABAIXO da toolbar, NUNCA acima das ações — Bloco de TILES (grade responsiva): cada tile = ícone (chip colorido) + RÓTULO + número + delta (Badge semântico ↑↓). NÃO é CardView (card de produto) nem cards full-width empilhados.
- **Grade de widgets (12 col)** — Corpo — Cards de gráfico; cada card tem menu ⋮ (Editar/Tipo/Período/Copiar/Mover para grupo/Fixar/Redimensionar/Expandir/Remover). Arrastar (pointer: sombra azul + reflow), redimensionar por alças, agrupar (card sobre card = pasta). Séries usam a paleta chart-1..10 (nunca cor de status). Blocos curados coexistem (métricas, lista de status, grade de charts, empty).
- **Chart Wizard (criação/edição de gráfico)** — Overlay/painel — abre por "Novo gráfico" ou "Editar" — Tela única: Tipo → Dados → Estilo/ajustes → Detalhes, com preview ao vivo. Editar reabre pré-preenchido. Emite a config; NÃO é onde o gráfico final aparece (isso é o Widget).
- **Sidebar de fixados (OPCIONAL)** — Coluna lateral direita — só quando o modo de fixar-por-arraste está ligado — Cópias compactas em pastas por grupo. Fixar = COPIAR (vidas apartadas). NÃO incluir por padrão se a tela não pedir.

---

## Painel

_O corpo de uma aba do dashboard — Filter Bar + grade de widgets + Chart Wizard, com toolbar de painel, arraste, grupos, fixados na sidebar e persistência._

**Seções:** Boas Práticas · Toolbar e Ações · Arrastar e Agrupar · Fixados na Sidebar · Blocos

**Quando usar:**
- Quando a pessoa monta a própria visão dentro de uma aba: cria, arrasta, redimensiona e agrupa widgets numa grade.
- Quando o layout precisa ser editável e persistido por usuário/tela — não um relatório fixo.
- Para combinar blocos curados (hero, métricas, listas de status) com widgets do usuário na mesma grade.

**Quando NÃO usar:**
- Para uma URL incorporada/iframe sem grade editável — use o modo incorporado (sem criação nem arraste).
- Para um único gráfico fixo, sem grade nem abas — use o Widget direto.
- Para operar registros um a um — isso é a Index (tabela), não o painel.

---

## Widgets e Gráficos

_No dashboard a unidade é o widget — ele envolve um gráfico, ganha contexto e ações, e vira a peça que o usuário monta na própria visão._

**Seções:** Boas Práticas · Criar · Tipos · Modos

**Quando usar:**
- Quando o gráfico precisa de contexto e ações (título, período, status, menu ⋮) — a peça que o usuário monta.
- Quando a pessoa cria/configura a visualização a partir dos dados (Chart Wizard) e depois a fixa ou copia.
- Em dashboards e painéis, onde os widgets formam a grade editável.

**Quando NÃO usar:**
- Um único gráfico fixo, sem header nem personalização — use o Chart direto.
- Só o contexto (status/período) sem configuração do usuário — use o Analytics Block.
- Exibir dados sem interação de montagem — use uma grade estática de Charts.

---

## Genius

_Assistente de IA do ME — anatomia do trigger, painel de conversa e regras de comportamento._

**Seções:** Boas Práticas · Visão geral · Anatomia · Cards de resposta · Features

**Quando usar:**
- Quando a pessoa precisa de resposta ou ação sobre os dados sem navegar entre telas — resumir uma cotação, achar um produto, ver o status de um pedido.
- Como atalho transversal acessível de qualquer tela, já com o contexto da tela atual.
- Para fluxos guiados por linguagem natural (criar cotação, adicionar ao carrinho) que de outra forma seriam vários cliques.

**Quando NÃO usar:**
- Para uma ação determinística de um clique que já existe na tela — use o controle direto.
- Como única via de uma tarefa crítica — o caminho explícito de UI deve sempre existir.
- Para configuração pesada de administração — use a tela dedicada.

**carrinho Anatomy Zones:**
- **Trigger** — Ícone de carrinho na navegação com badge de quantidade de itens.
- **Painel do carrinho** — Drawer lateral com itens adicionados, totais e CTA de checkout.
- **Item do carrinho** — Linha de produto — imagem, nome, quantidade, preço e ação de remover.
- **Seção de totais** — Subtotal, descontos e total final — fixada no rodapé do painel.

**carrinho Best Practices Do:**
- Fixar a seção de totais e o CTA no rodapé do painel
- Atualizar totais em tempo real ao alterar quantidades
- Exibir toast com opção "Desfazer" ao remover um item
- Usar badge no trigger para indicar quantidade de itens
- Mapear o Empty State do carrinho vazio (com CTA para explorar o catálogo)
- Dar estado de loading ao CTA "Finalizar pedido" durante o processamento

**carrinho Best Practices Dont:**
- Abrir modal de confirmação para alterar quantidade — use controle inline
- Ocultar o total final antes do checkout
- Rolar o painel para cima ao adicionar um novo item
- Exibir CTA de finalizar desabilitado sem explicar o motivo

**carrinho States:**
- Painel aberto sem itens — exibe Empty State com CTA para explorar catálogo
- Lista de itens + totais + CTA de finalizar
- Loading inline no item ao alterar quantidade
- Animação de saída do item + toast com "Desfazer"
- CTA com loading, campos desabilitados durante o processamento

**chat Anatomy Zones:**
- **Trigger / Entrada** — Acesso ao chat — pelo nav global Messages ou pelo ícone de chat na linha (ex.: index de Fornecedores).
- **Lista de conversas** — Painel com todas as conversas ativas — coluna esquerda na página, drawer no mobile.
- **Janela de conversa** — Thread de mensagens da conversa selecionada — idêntica na drawer e na página.

**chat Best Practices Do:**
- Exibir badge de contagem de não lidos no trigger
- Ordernar conversas por atividade mais recente
- Fazer scroll automático para a última mensagem ao abrir a conversa
- Exibir status de entrega das mensagens (enviado, entregue, lido)

**chat Best Practices Dont:**
- Omitir o badge de não lidos — o usuário não percebe novas mensagens
- Ordenar conversas alfabeticamente por padrão
- Mostrar timestamp em cada mensagem individual — agrupe por grupos de tempo

**chat Checklist:**
- Badge de não lidos está visível no trigger da navegação?
- Lista de conversas ordena por atividade mais recente?
- Mensagens próprias estão à direita, recebidas à esquerda?
- Scroll automático vai para a mensagem mais recente ao abrir?
- Status de entrega está mapeado (enviado, entregue, lido)?
- Campo de input permite enviar arquivo/anexo?
- Estado de loading ao enviar mensagem foi mapeado?

**chat Composer Actions:**
- **Anexar** — Imagem, vídeo, áudio ou arquivo.
- **Gravar áudio** — Clipe de áudio pontual — sem ativar modo voz.
- **Enviar** — Envia a mensagem; substitui o mic quando há texto digitado.
- **Mencionar / adicionar contexto** — Exclusivo do Genius — contextualiza o agente com entidades do ME.
- **Modo voz** — Exclusivo do Genius — conversa por voz com o agente.
- **Busca web** — Exclusivo do Genius — fontes externas na resposta do agente.

**chat Message States:**
- A mensagem saiu mas o servidor ainda não confirmou — relógio discreto. Some assim que o envio confirma.
- O servidor recebeu — um check cinza. Garante que não se perdeu, mesmo que o destinatário ainda não tenha visto.
- O destinatário abriu a conversa — check duplo azul. Fecha o ciclo: a pessoa sabe que foi visto.
- O envio não completou — ícone de erro com "Reenviar" à mão. Uma saída imediata, sem reescrever a mensagem.

**chat Message Types:**
- **Texto simples** — Mensagem de texto sem formatação
- **Arquivo / Anexo** — PDF, imagem, planilha — com ícone e nome do arquivo
- **Imagem inline** — Imagem exibida diretamente na thread
- **Áudio / mensagem de voz** — Clipe de áudio gravado pelo mic do composer (pontual, sem modo voz)
- **Mensagem do sistema** — Evento automático — "conversa privada", "Início da conversa · data"

**chat Surfaces:**
- **Drawer contextual** — Abre à direita, sobre a página atual (ex.: pelo ícone de chat na linha de Fornecedores). Uma conversa, sem tirar o usuário do contexto.
- **Página Messages (dedicada)** — Acessada pelo item Messages do nav global. Layout two-pane: lista de conversas à esquerda, conversa à direita.
- **Mobile** — No mobile a lista de conversas vira um drawer — a experiência é basicamente a drawer do desktop.

**genius Anatomy Zones:**
- **Cabeçalho** — Barra de controle superior — identidade do agente ativo e ações de navegação.
- **Painel de navegação** — Painel colapsável à esquerda — agentes disponíveis e histórico de conversas.
- **Área de conversa** — Área principal — identidade do agente, thread de mensagens e sugestões contextuais.
- **Área de input** — Entrada de mensagens — texto, voz, attachments e ações contextuais.

**genius Best Practices Do:**
- Manter o trigger sempre visível e acessível em qualquer tela
- Exibir sugestões contextuais baseadas na tela atual ao abrir o painel
- Preservar o histórico da sessão enquanto o painel estiver aberto
- Incluir feedback inline nas respostas (thumbs up/down)

**genius Best Practices Dont:**
- Bloquear o conteúdo principal com overlay total ao abrir o Genius
- Fechar o painel automaticamente ao navegar entre telas
- Omitir o indicador de "digitando" durante o processamento da resposta

**genius Card Types:**
- **Mensagem enviada** — Bubble de mensagem do usuário — alinhada à direita, fundo primário.
- **Mensagem interna** — Card de conversa interna entre usuários — exibe remetente, conteúdo e paginação.
- **Resposta do agente** — Card de resposta — alinhado à esquerda, fundo neutro. Exibe identidade do agente e conteúdo.
- **Corpo de texto** — Variações de apresentação de texto dentro do card de resposta.
- **Attachment** — Card de anexo — exibição adaptada por tipo de arquivo. Múltiplos arquivos empilhados.
- **Grid de itens** — Grade de itens — usada para listar produtos, opções ou resultados de busca de forma visual.
- **Carrossel de cards** — Sequência horizontal de cards interativos — navegação por swipe ou seta.
- **Cards de seleção** — Cards compactos para escolha entre opções curtas — com estado de hover e selecionado.
- **Botões de ação** — CTAs inline na resposta — acionam fluxos do sistema, navegação ou confirmações.
- **Tags / chips** — Tags de contexto para filtro ou navegação rápida dentro da resposta.
- **Card de filtro** — Card de seleção de filtros contextuais apresentados pelo agente ao usuário.
- **Gráfico** — Visualização gráfica de dados numéricos retornada pelo agente.
- **QR Code** — QR code gerado pelo agente para compartilhamento ou acesso rápido.
- **Formulário com imagem** — Card que combina campo de formulário com preview de imagem — usado em fluxos de edição.

**genius Checklist:**
- Trigger está fixo e visível em todas as telas?
- Painel abre como drawer lateral sem bloquear o conteúdo?
- Sugestões contextuais aparecem ao abrir (sem conversa prévia)?
- Indicador de "digitando" está presente durante o processamento?
- Ações de feedback (copiar, thumbs) estão nas respostas?
- Estado de erro tem mensagem e botão de tentar novamente?
- Largura do painel é fixa em desktop (400px)?

**genius Display Modes:**
- **Modo compacto** — Sidebar recolhida. Ponto de entrada padrão — não bloqueia o conteúdo da tela atual.
- **Sidebar expandida** — Painel de navegação visível à esquerda — agentes e histórico acessíveis sem sair da conversa.
- **Tela cheia** — Interface ocupa toda a janela — ideal para conversas longas ou criação de agentes.

**genius Features:**
- **Multi-agente** — ME Genius padrão, Buyer Agent e agentes customizados por empresa — troca via seletor no cabeçalho sem perder o histórico.
- **Criação de agentes** — Tab "Criar": linguagem natural, o Genius configura automaticamente. Tab "Configurar": formulário com avatar, nome, instruções e temas. Preview em tempo real.
- **Explorar GPTs** — Catálogo de agentes por categoria (Meus Genius, Agentes ME, por empresa). Acessível via painel de navegação.
- **Histórico de conversas** — Persistente e organizado por data. Grupo "Fixados" no topo. Ações por conversa: editar, desafixar, criar agente, excluir.
- **Mensagens de voz** — Gravação via botão de microfone no input. Gera card com ícone de ondas e duração. Agente responde em texto.
- **Attachments** — Imagem, vídeo, áudio, arquivo genérico e doc ME. Cada tipo tem card específico na thread. Múltiplos arquivos simultâneos.
- **Menções (@)** — Referência a pedidos, cotações ou produtos para contextualizar a pergunta. Entidade destacada visualmente na mensagem.
- **Pesquisa web** — Busca na web integrada ao input. O agente sinaliza quando usa dados externos na resposta.
- **Paginação de respostas** — Respostas longas paginadas inline com controles dentro do card — sem truncamento nem scroll infinito.
- **Busca no histórico** — Filtra agentes e histórico simultaneamente em tempo real. Estado vazio com mensagem "Não encontramos nada aqui."

**genius States:**
- Painel de navegação oculto — cabeçalho e área de conversa visíveis, layout compacto
- Painel de navegação visível à esquerda com agentes e histórico de conversas
- Interface ocupa a janela inteira via botão de expandir no cabeçalho
- Conversa iniciada — chips de sugestão visíveis na primeira mensagem do agente
- "Processando resposta" + barra de progresso animada durante geração da resposta
- Campo de busca com termo — lista de agentes e histórico filtrados em tempo real
- Nenhum resultado: "Não encontramos nada aqui." na sidebar; empty state visual no catálogo
- Tab "Criar": Genius guia a criação do agente via conversa; preview dinâmico ao lado direito
- Tab "Configurar": formulário com avatar, nome, descrição, instruções e temas de conversa

---

## Chat de mensagem

_Componente de mensagens transversal — lista de conversas, janela de chat e tipos de mensagem._

**Seções:** Boas Práticas · Anatomia · Superfícies · Composer · Mensagens · Estados · Checklist

**Quando usar:**
- Comunicação contextual com fornecedores ou colegas sobre um documento — proposta, prazo, dúvida.
- Quando a conversa precisa ficar atrelada ao registro — histórico por transação.
- Respostas rápidas sem sair do fluxo (drawer contextual), com a página dedicada para acompanhar tudo.

**Quando NÃO usar:**
- Para feedback do sistema (salvo, excluído, erro) — use Toast/Alert, não o chat.
- Para uma decisão formal que exige trilha de auditoria — registre no próprio documento.
- Para aviso unidirecional/broadcast — use notificação.

**carrinho Anatomy Zones:**
- **Trigger** — Ícone de carrinho na navegação com badge de quantidade de itens.
- **Painel do carrinho** — Drawer lateral com itens adicionados, totais e CTA de checkout.
- **Item do carrinho** — Linha de produto — imagem, nome, quantidade, preço e ação de remover.
- **Seção de totais** — Subtotal, descontos e total final — fixada no rodapé do painel.

**carrinho Best Practices Do:**
- Fixar a seção de totais e o CTA no rodapé do painel
- Atualizar totais em tempo real ao alterar quantidades
- Exibir toast com opção "Desfazer" ao remover um item
- Usar badge no trigger para indicar quantidade de itens
- Mapear o Empty State do carrinho vazio (com CTA para explorar o catálogo)
- Dar estado de loading ao CTA "Finalizar pedido" durante o processamento

**carrinho Best Practices Dont:**
- Abrir modal de confirmação para alterar quantidade — use controle inline
- Ocultar o total final antes do checkout
- Rolar o painel para cima ao adicionar um novo item
- Exibir CTA de finalizar desabilitado sem explicar o motivo

**carrinho States:**
- Painel aberto sem itens — exibe Empty State com CTA para explorar catálogo
- Lista de itens + totais + CTA de finalizar
- Loading inline no item ao alterar quantidade
- Animação de saída do item + toast com "Desfazer"
- CTA com loading, campos desabilitados durante o processamento

**chat Anatomy Zones:**
- **Trigger / Entrada** — Acesso ao chat — pelo nav global Messages ou pelo ícone de chat na linha (ex.: index de Fornecedores).
- **Lista de conversas** — Painel com todas as conversas ativas — coluna esquerda na página, drawer no mobile.
- **Janela de conversa** — Thread de mensagens da conversa selecionada — idêntica na drawer e na página.

**chat Best Practices Do:**
- Exibir badge de contagem de não lidos no trigger
- Ordernar conversas por atividade mais recente
- Fazer scroll automático para a última mensagem ao abrir a conversa
- Exibir status de entrega das mensagens (enviado, entregue, lido)

**chat Best Practices Dont:**
- Omitir o badge de não lidos — o usuário não percebe novas mensagens
- Ordenar conversas alfabeticamente por padrão
- Mostrar timestamp em cada mensagem individual — agrupe por grupos de tempo

**chat Checklist:**
- Badge de não lidos está visível no trigger da navegação?
- Lista de conversas ordena por atividade mais recente?
- Mensagens próprias estão à direita, recebidas à esquerda?
- Scroll automático vai para a mensagem mais recente ao abrir?
- Status de entrega está mapeado (enviado, entregue, lido)?
- Campo de input permite enviar arquivo/anexo?
- Estado de loading ao enviar mensagem foi mapeado?

**chat Composer Actions:**
- **Anexar** — Imagem, vídeo, áudio ou arquivo.
- **Gravar áudio** — Clipe de áudio pontual — sem ativar modo voz.
- **Enviar** — Envia a mensagem; substitui o mic quando há texto digitado.
- **Mencionar / adicionar contexto** — Exclusivo do Genius — contextualiza o agente com entidades do ME.
- **Modo voz** — Exclusivo do Genius — conversa por voz com o agente.
- **Busca web** — Exclusivo do Genius — fontes externas na resposta do agente.

**chat Message States:**
- A mensagem saiu mas o servidor ainda não confirmou — relógio discreto. Some assim que o envio confirma.
- O servidor recebeu — um check cinza. Garante que não se perdeu, mesmo que o destinatário ainda não tenha visto.
- O destinatário abriu a conversa — check duplo azul. Fecha o ciclo: a pessoa sabe que foi visto.
- O envio não completou — ícone de erro com "Reenviar" à mão. Uma saída imediata, sem reescrever a mensagem.

**chat Message Types:**
- **Texto simples** — Mensagem de texto sem formatação
- **Arquivo / Anexo** — PDF, imagem, planilha — com ícone e nome do arquivo
- **Imagem inline** — Imagem exibida diretamente na thread
- **Áudio / mensagem de voz** — Clipe de áudio gravado pelo mic do composer (pontual, sem modo voz)
- **Mensagem do sistema** — Evento automático — "conversa privada", "Início da conversa · data"

**chat Surfaces:**
- **Drawer contextual** — Abre à direita, sobre a página atual (ex.: pelo ícone de chat na linha de Fornecedores). Uma conversa, sem tirar o usuário do contexto.
- **Página Messages (dedicada)** — Acessada pelo item Messages do nav global. Layout two-pane: lista de conversas à esquerda, conversa à direita.
- **Mobile** — No mobile a lista de conversas vira um drawer — a experiência é basicamente a drawer do desktop.

**genius Anatomy Zones:**
- **Cabeçalho** — Barra de controle superior — identidade do agente ativo e ações de navegação.
- **Painel de navegação** — Painel colapsável à esquerda — agentes disponíveis e histórico de conversas.
- **Área de conversa** — Área principal — identidade do agente, thread de mensagens e sugestões contextuais.
- **Área de input** — Entrada de mensagens — texto, voz, attachments e ações contextuais.

**genius Best Practices Do:**
- Manter o trigger sempre visível e acessível em qualquer tela
- Exibir sugestões contextuais baseadas na tela atual ao abrir o painel
- Preservar o histórico da sessão enquanto o painel estiver aberto
- Incluir feedback inline nas respostas (thumbs up/down)

**genius Best Practices Dont:**
- Bloquear o conteúdo principal com overlay total ao abrir o Genius
- Fechar o painel automaticamente ao navegar entre telas
- Omitir o indicador de "digitando" durante o processamento da resposta

**genius Card Types:**
- **Mensagem enviada** — Bubble de mensagem do usuário — alinhada à direita, fundo primário.
- **Mensagem interna** — Card de conversa interna entre usuários — exibe remetente, conteúdo e paginação.
- **Resposta do agente** — Card de resposta — alinhado à esquerda, fundo neutro. Exibe identidade do agente e conteúdo.
- **Corpo de texto** — Variações de apresentação de texto dentro do card de resposta.
- **Attachment** — Card de anexo — exibição adaptada por tipo de arquivo. Múltiplos arquivos empilhados.
- **Grid de itens** — Grade de itens — usada para listar produtos, opções ou resultados de busca de forma visual.
- **Carrossel de cards** — Sequência horizontal de cards interativos — navegação por swipe ou seta.
- **Cards de seleção** — Cards compactos para escolha entre opções curtas — com estado de hover e selecionado.
- **Botões de ação** — CTAs inline na resposta — acionam fluxos do sistema, navegação ou confirmações.
- **Tags / chips** — Tags de contexto para filtro ou navegação rápida dentro da resposta.
- **Card de filtro** — Card de seleção de filtros contextuais apresentados pelo agente ao usuário.
- **Gráfico** — Visualização gráfica de dados numéricos retornada pelo agente.
- **QR Code** — QR code gerado pelo agente para compartilhamento ou acesso rápido.
- **Formulário com imagem** — Card que combina campo de formulário com preview de imagem — usado em fluxos de edição.

**genius Checklist:**
- Trigger está fixo e visível em todas as telas?
- Painel abre como drawer lateral sem bloquear o conteúdo?
- Sugestões contextuais aparecem ao abrir (sem conversa prévia)?
- Indicador de "digitando" está presente durante o processamento?
- Ações de feedback (copiar, thumbs) estão nas respostas?
- Estado de erro tem mensagem e botão de tentar novamente?
- Largura do painel é fixa em desktop (400px)?

**genius Display Modes:**
- **Modo compacto** — Sidebar recolhida. Ponto de entrada padrão — não bloqueia o conteúdo da tela atual.
- **Sidebar expandida** — Painel de navegação visível à esquerda — agentes e histórico acessíveis sem sair da conversa.
- **Tela cheia** — Interface ocupa toda a janela — ideal para conversas longas ou criação de agentes.

**genius Features:**
- **Multi-agente** — ME Genius padrão, Buyer Agent e agentes customizados por empresa — troca via seletor no cabeçalho sem perder o histórico.
- **Criação de agentes** — Tab "Criar": linguagem natural, o Genius configura automaticamente. Tab "Configurar": formulário com avatar, nome, instruções e temas. Preview em tempo real.
- **Explorar GPTs** — Catálogo de agentes por categoria (Meus Genius, Agentes ME, por empresa). Acessível via painel de navegação.
- **Histórico de conversas** — Persistente e organizado por data. Grupo "Fixados" no topo. Ações por conversa: editar, desafixar, criar agente, excluir.
- **Mensagens de voz** — Gravação via botão de microfone no input. Gera card com ícone de ondas e duração. Agente responde em texto.
- **Attachments** — Imagem, vídeo, áudio, arquivo genérico e doc ME. Cada tipo tem card específico na thread. Múltiplos arquivos simultâneos.
- **Menções (@)** — Referência a pedidos, cotações ou produtos para contextualizar a pergunta. Entidade destacada visualmente na mensagem.
- **Pesquisa web** — Busca na web integrada ao input. O agente sinaliza quando usa dados externos na resposta.
- **Paginação de respostas** — Respostas longas paginadas inline com controles dentro do card — sem truncamento nem scroll infinito.
- **Busca no histórico** — Filtra agentes e histórico simultaneamente em tempo real. Estado vazio com mensagem "Não encontramos nada aqui."

**genius States:**
- Painel de navegação oculto — cabeçalho e área de conversa visíveis, layout compacto
- Painel de navegação visível à esquerda com agentes e histórico de conversas
- Interface ocupa a janela inteira via botão de expandir no cabeçalho
- Conversa iniciada — chips de sugestão visíveis na primeira mensagem do agente
- "Processando resposta" + barra de progresso animada durante geração da resposta
- Campo de busca com termo — lista de agentes e histórico filtrados em tempo real
- Nenhum resultado: "Não encontramos nada aqui." na sidebar; empty state visual no catálogo
- Tab "Criar": Genius guia a criação do agente via conversa; preview dinâmico ao lado direito
- Tab "Configurar": formulário com avatar, nome, descrição, instruções e temas de conversa

---

## Carrinho

_Componente de carrinho de compras — painel lateral, itens, totais e fluxo de checkout._

**Seções:** Boas Práticas · Anatomia · Estados

**Quando usar:**
- Reunir itens do catálogo antes de gerar uma requisição/pedido — compra em lote.
- Ajustar quantidades e o destino de compra antes de efetivar.
- Quando a compra é multi-item e/ou multi-fornecedor.

**Quando NÃO usar:**
- Para um único item com fluxo direto — "Solicitar" na própria linha pode bastar.
- Como lista de desejos persistente — use Favoritos/Listas.
- Para item fora do catálogo — use o fluxo de item avulso no documento.

**carrinho Anatomy Zones:**
- **Trigger** — Ícone de carrinho na navegação com badge de quantidade de itens.
- **Painel do carrinho** — Drawer lateral com itens adicionados, totais e CTA de checkout.
- **Item do carrinho** — Linha de produto — imagem, nome, quantidade, preço e ação de remover.
- **Seção de totais** — Subtotal, descontos e total final — fixada no rodapé do painel.

**carrinho Best Practices Do:**
- Fixar a seção de totais e o CTA no rodapé do painel
- Atualizar totais em tempo real ao alterar quantidades
- Exibir toast com opção "Desfazer" ao remover um item
- Usar badge no trigger para indicar quantidade de itens
- Mapear o Empty State do carrinho vazio (com CTA para explorar o catálogo)
- Dar estado de loading ao CTA "Finalizar pedido" durante o processamento

**carrinho Best Practices Dont:**
- Abrir modal de confirmação para alterar quantidade — use controle inline
- Ocultar o total final antes do checkout
- Rolar o painel para cima ao adicionar um novo item
- Exibir CTA de finalizar desabilitado sem explicar o motivo

**carrinho States:**
- Painel aberto sem itens — exibe Empty State com CTA para explorar catálogo
- Lista de itens + totais + CTA de finalizar
- Loading inline no item ao alterar quantidade
- Animação de saída do item + toast com "Desfazer"
- CTA com loading, campos desabilitados durante o processamento

**chat Anatomy Zones:**
- **Trigger / Entrada** — Acesso ao chat — pelo nav global Messages ou pelo ícone de chat na linha (ex.: index de Fornecedores).
- **Lista de conversas** — Painel com todas as conversas ativas — coluna esquerda na página, drawer no mobile.
- **Janela de conversa** — Thread de mensagens da conversa selecionada — idêntica na drawer e na página.

**chat Best Practices Do:**
- Exibir badge de contagem de não lidos no trigger
- Ordernar conversas por atividade mais recente
- Fazer scroll automático para a última mensagem ao abrir a conversa
- Exibir status de entrega das mensagens (enviado, entregue, lido)

**chat Best Practices Dont:**
- Omitir o badge de não lidos — o usuário não percebe novas mensagens
- Ordenar conversas alfabeticamente por padrão
- Mostrar timestamp em cada mensagem individual — agrupe por grupos de tempo

**chat Checklist:**
- Badge de não lidos está visível no trigger da navegação?
- Lista de conversas ordena por atividade mais recente?
- Mensagens próprias estão à direita, recebidas à esquerda?
- Scroll automático vai para a mensagem mais recente ao abrir?
- Status de entrega está mapeado (enviado, entregue, lido)?
- Campo de input permite enviar arquivo/anexo?
- Estado de loading ao enviar mensagem foi mapeado?

**chat Composer Actions:**
- **Anexar** — Imagem, vídeo, áudio ou arquivo.
- **Gravar áudio** — Clipe de áudio pontual — sem ativar modo voz.
- **Enviar** — Envia a mensagem; substitui o mic quando há texto digitado.
- **Mencionar / adicionar contexto** — Exclusivo do Genius — contextualiza o agente com entidades do ME.
- **Modo voz** — Exclusivo do Genius — conversa por voz com o agente.
- **Busca web** — Exclusivo do Genius — fontes externas na resposta do agente.

**chat Message States:**
- A mensagem saiu mas o servidor ainda não confirmou — relógio discreto. Some assim que o envio confirma.
- O servidor recebeu — um check cinza. Garante que não se perdeu, mesmo que o destinatário ainda não tenha visto.
- O destinatário abriu a conversa — check duplo azul. Fecha o ciclo: a pessoa sabe que foi visto.
- O envio não completou — ícone de erro com "Reenviar" à mão. Uma saída imediata, sem reescrever a mensagem.

**chat Message Types:**
- **Texto simples** — Mensagem de texto sem formatação
- **Arquivo / Anexo** — PDF, imagem, planilha — com ícone e nome do arquivo
- **Imagem inline** — Imagem exibida diretamente na thread
- **Áudio / mensagem de voz** — Clipe de áudio gravado pelo mic do composer (pontual, sem modo voz)
- **Mensagem do sistema** — Evento automático — "conversa privada", "Início da conversa · data"

**chat Surfaces:**
- **Drawer contextual** — Abre à direita, sobre a página atual (ex.: pelo ícone de chat na linha de Fornecedores). Uma conversa, sem tirar o usuário do contexto.
- **Página Messages (dedicada)** — Acessada pelo item Messages do nav global. Layout two-pane: lista de conversas à esquerda, conversa à direita.
- **Mobile** — No mobile a lista de conversas vira um drawer — a experiência é basicamente a drawer do desktop.

**genius Anatomy Zones:**
- **Cabeçalho** — Barra de controle superior — identidade do agente ativo e ações de navegação.
- **Painel de navegação** — Painel colapsável à esquerda — agentes disponíveis e histórico de conversas.
- **Área de conversa** — Área principal — identidade do agente, thread de mensagens e sugestões contextuais.
- **Área de input** — Entrada de mensagens — texto, voz, attachments e ações contextuais.

**genius Best Practices Do:**
- Manter o trigger sempre visível e acessível em qualquer tela
- Exibir sugestões contextuais baseadas na tela atual ao abrir o painel
- Preservar o histórico da sessão enquanto o painel estiver aberto
- Incluir feedback inline nas respostas (thumbs up/down)

**genius Best Practices Dont:**
- Bloquear o conteúdo principal com overlay total ao abrir o Genius
- Fechar o painel automaticamente ao navegar entre telas
- Omitir o indicador de "digitando" durante o processamento da resposta

**genius Card Types:**
- **Mensagem enviada** — Bubble de mensagem do usuário — alinhada à direita, fundo primário.
- **Mensagem interna** — Card de conversa interna entre usuários — exibe remetente, conteúdo e paginação.
- **Resposta do agente** — Card de resposta — alinhado à esquerda, fundo neutro. Exibe identidade do agente e conteúdo.
- **Corpo de texto** — Variações de apresentação de texto dentro do card de resposta.
- **Attachment** — Card de anexo — exibição adaptada por tipo de arquivo. Múltiplos arquivos empilhados.
- **Grid de itens** — Grade de itens — usada para listar produtos, opções ou resultados de busca de forma visual.
- **Carrossel de cards** — Sequência horizontal de cards interativos — navegação por swipe ou seta.
- **Cards de seleção** — Cards compactos para escolha entre opções curtas — com estado de hover e selecionado.
- **Botões de ação** — CTAs inline na resposta — acionam fluxos do sistema, navegação ou confirmações.
- **Tags / chips** — Tags de contexto para filtro ou navegação rápida dentro da resposta.
- **Card de filtro** — Card de seleção de filtros contextuais apresentados pelo agente ao usuário.
- **Gráfico** — Visualização gráfica de dados numéricos retornada pelo agente.
- **QR Code** — QR code gerado pelo agente para compartilhamento ou acesso rápido.
- **Formulário com imagem** — Card que combina campo de formulário com preview de imagem — usado em fluxos de edição.

**genius Checklist:**
- Trigger está fixo e visível em todas as telas?
- Painel abre como drawer lateral sem bloquear o conteúdo?
- Sugestões contextuais aparecem ao abrir (sem conversa prévia)?
- Indicador de "digitando" está presente durante o processamento?
- Ações de feedback (copiar, thumbs) estão nas respostas?
- Estado de erro tem mensagem e botão de tentar novamente?
- Largura do painel é fixa em desktop (400px)?

**genius Display Modes:**
- **Modo compacto** — Sidebar recolhida. Ponto de entrada padrão — não bloqueia o conteúdo da tela atual.
- **Sidebar expandida** — Painel de navegação visível à esquerda — agentes e histórico acessíveis sem sair da conversa.
- **Tela cheia** — Interface ocupa toda a janela — ideal para conversas longas ou criação de agentes.

**genius Features:**
- **Multi-agente** — ME Genius padrão, Buyer Agent e agentes customizados por empresa — troca via seletor no cabeçalho sem perder o histórico.
- **Criação de agentes** — Tab "Criar": linguagem natural, o Genius configura automaticamente. Tab "Configurar": formulário com avatar, nome, instruções e temas. Preview em tempo real.
- **Explorar GPTs** — Catálogo de agentes por categoria (Meus Genius, Agentes ME, por empresa). Acessível via painel de navegação.
- **Histórico de conversas** — Persistente e organizado por data. Grupo "Fixados" no topo. Ações por conversa: editar, desafixar, criar agente, excluir.
- **Mensagens de voz** — Gravação via botão de microfone no input. Gera card com ícone de ondas e duração. Agente responde em texto.
- **Attachments** — Imagem, vídeo, áudio, arquivo genérico e doc ME. Cada tipo tem card específico na thread. Múltiplos arquivos simultâneos.
- **Menções (@)** — Referência a pedidos, cotações ou produtos para contextualizar a pergunta. Entidade destacada visualmente na mensagem.
- **Pesquisa web** — Busca na web integrada ao input. O agente sinaliza quando usa dados externos na resposta.
- **Paginação de respostas** — Respostas longas paginadas inline com controles dentro do card — sem truncamento nem scroll infinito.
- **Busca no histórico** — Filtra agentes e histórico simultaneamente em tempo real. Estado vazio com mensagem "Não encontramos nada aqui."

**genius States:**
- Painel de navegação oculto — cabeçalho e área de conversa visíveis, layout compacto
- Painel de navegação visível à esquerda com agentes e histórico de conversas
- Interface ocupa a janela inteira via botão de expandir no cabeçalho
- Conversa iniciada — chips de sugestão visíveis na primeira mensagem do agente
- "Processando resposta" + barra de progresso animada durante geração da resposta
- Campo de busca com termo — lista de agentes e histórico filtrados em tempo real
- Nenhum resultado: "Não encontramos nada aqui." na sidebar; empty state visual no catálogo
- Tab "Criar": Genius guia a criação do agente via conversa; preview dinâmico ao lado direito
- Tab "Configurar": formulário com avatar, nome, descrição, instruções e temas de conversa

---

## Config gerais

_Chassi das telas de configuração do ME — sidebar de seções, conteúdo por seção e edição via modal (sem submit de página)._

**Seções:** Boas práticas · Anatomia · Ações · Responsividade

**Quando usar:**
- Configurações de conta, empresa ou sistema, organizadas em seções navegáveis.
- Quando há vários grupos de ajustes acessados por uma sidebar de seções.
- Quando o usuário consulta e ajusta valores existentes (não cadastra uma entidade nova).

**Quando NÃO usar:**
- Cadastro/edição de uma entidade com envio explícito — use o padrão de Formulário.
- Leitura/edição de um registro de negócio (pedido, cotação…) — use Estrutura de Documento.
- Uma lista de registros para buscar/filtrar/agir — use Estrutura de Index.

**Contextos de uso (onde fica + porquê):**
- **Chassi MeLayout** — Header + left-area (menu de configurações) + conteúdo — Área de administração dentro do app autenticado.
- **Menu de configurações** — Left-area: grupos aninhados + busca ("Busque neste menu"); seção ativa destacada — Navegação por seções de config (Sistema e Operações, Usuários e Acessos, Processos…).
- **Conteúdo da seção** — Cabeçalho (título + descrição) + toolbar (ação primária + secundárias + busca) + tabela/formulário — Cada seção abre seu conteúdo (ex.: Automação = listagem).
- **Sem subheader de documento** — Config NÃO usa o subheader/toolbar de documento; edição via modal ou inline (sem submit global) — Não é tela transacional — evita inventar ações que não existem.
- **Mobile** — Hambúrguer no header abre o menu de configurações em drawer (esquerda) — A left-area colapsa em slideover abaixo de lg.

---

## Login e acesso

_Telas de autenticação do ME (fora do chassi) — split screen com painel de marca + formulário; login, cadastro, recuperação e ativação._

**Seções:** Boas práticas · Anatomia · Variantes · Regras

**Quando usar:**
- Telas de autenticação e onboarding de conta — login, cadastro, recuperação de senha e ativação.
- Quando o usuário ainda NÃO está autenticado (antes de entrar no app).

**Quando NÃO usar:**
- Qualquer tela dentro do app autenticado — use o chassi MeLayout.
- Ajustes de conta já logado (senha, dados) — use Config gerais.

**Contextos de uso (onde fica + porquê):**
- **Fora do chassi** — Tela cheia, split screen (sem header/nav do app) — Usuário não autenticado — a identidade ME vem do painel de marca, não do header.
- **Painel de marca** — Coluna esquerda (~2/3), azul me-brand + textura hexagonal + "me." + tagline — Identidade da tela; abaixo de lg some (vira faixa no topo).
- **Painel de formulário** — Coluna direita (~1/3), fundo claro; seletor de idioma no topo — MeLoginForm real: usuário/senha, lembrar, esqueci a senha, CTA "Entrar" full-width, links (Cadastre-se como Fornecedor, ativação).
- **Mobile** — Header branco no topo (logo azul + busca + serviços + avatar) e formulário abaixo — O split vira empilhado; só a coluna do formulário rola.

**Labeling:**
- Entrar = CTA primário full-width (ação principal)
- Cadastre-se como Fornecedor = link secundário → cadastro de fornecedor

---

## Cadastro Comprador

_Criação de conta de comprador — tela de acesso (fora do chassi), split de marca + formulário multi-step._

**Seções:** Boas práticas · Anatomia · Passos · Regras

**Quando usar:**
- Criação de conta de comprador (empresa que vai comprar pela plataforma).
- Usuário ainda NÃO autenticado, a partir do login ("Fazer login" faz o caminho inverso).

**Quando NÃO usar:**
- Cadastro de fornecedor — use o padrão Cadastro Fornecedor (fluxo e campos diferentes).
- Qualquer tela dentro do app autenticado — use o chassi MeLayout.

**Contextos de uso (onde fica + porquê):**
- **Fora do chassi** — Split screen (banner de marca + formulário multi-step) — Criação de conta de comprador; usuário não autenticado.
- **Passo 1 — Empresa/endereço** — País, Natureza (PJ/PF), CNPJ, Razão Social, CEP, Endereço, Número/Complemento, Bairro, Cidade, Estado — CTA "Avançar" — Dados cadastrais da empresa.
- **Passo 2 — Dados cadastrais** — Nome, E-mail, Login, Telefone, Celular, Senha (checklist de força), Repetir + aceite dos Termos — CTA "Concluir" — Dados do usuário + senha.
- **Validar cadastro** — Confirmação por e-mail (link de validação + reenvio) — Passo final antes de acessar.
- **Barra de progresso** — Rodapé do formulário (X/2 + "Próximo passo") — Orienta o fluxo multi-step.
- **Não é o cadastro de Fornecedor** — Fluxo e campos distintos — O de fornecedor tem 5 passos e validação de e-mail/telefone.

---

## Cadastro Fornecedor

_Criação de conta de fornecedor — tela de acesso (fora do chassi), split de marca + formulário de 5 passos._

**Seções:** Boas práticas · Anatomia · Passos · Por convite · Regras

**Quando usar:**
- Criação de conta de fornecedor, a partir do "Cadastre-se como Fornecedor" no login.
- Usuário ainda NÃO autenticado.

**Quando NÃO usar:**
- Cadastro de comprador — use o padrão Cadastro Comprador (fluxo e campos diferentes).
- Qualquer tela dentro do app autenticado — use o chassi MeLayout.

**Contextos de uso (onde fica + porquê):**
- **Fora do chassi** — Split screen (banner de marca + formulário de 5 passos) — Criação de conta de fornecedor, a partir do "Cadastre-se como Fornecedor" no login.
- **1 — Conta** — País, CNPJ, Razão Social + aceite dos Termos — CTA "Começar agora" — Abertura da conta.
- **2 — Dados cadastrais** — Nome completo, como gostaria de ser chamado, Telefone, E-mail corporativo — Identificação do fornecedor.
- **3 — Validar e-mail** — Código enviado ao e-mail (check de validade + reenvio com contador) — Verificação do e-mail.
- **4 — Validar telefone** — Código enviado ao telefone (mesmo padrão) — Verificação em dois fatores.
- **5 — Criar senha** — Senha + repetir, com checklist de força — CTA "Concluir" — Fecha o cadastro → acessa a plataforma.
- **Barra de progresso (5 passos)** — Rodapé (X/5 + "Próximo passo") — Orienta o fluxo.
- **Variante POR CONVITE** — Banner de convite à esquerda: logo + nome da empresa convidante + vantagens do ME — Muda só o banner (esquerda/topo); o formulário é o mesmo.

---

## CRUDs

_Padrão de CRUD do ME — como criar, ler, editar e excluir de forma consistente entre entidades (transações, fornecedores, produtos, usuários, contatos)._

**Seções:** Contextos · Estrutura · Princípios · Hierarquia · Estados · Labeling · Como montar · Relacionados

**crud Action Levels:**
- **Ações primárias** — Use quando a ação for central para o objetivo da tela.
- **Ações secundárias** — Use quando a ação funcionar como apoio ao fluxo principal.
- **Ações destrutivas** — Use com tratamento visual e comportamental específico. Não devem competir visualmente com primárias.

**crud Best Practices Do:**
- Pensar a entidade como um ciclo, não como uma tela isolada
- Manter consistência entre criação, leitura, edição e exclusão
- Posicionar ações no nível correto da interface
- Escolher container conforme complexidade
- Modelar estados, permissões e feedbacks desde o início

**crud Best Practices Dont:**
- Criar cada etapa de forma desconectada
- Usar labels genéricas demais
- Misturar leitura e edição sem clareza
- Tratar exclusão como uma ação comum
- Ignorar estados de erro, loading ou restrição de acesso

**crud Build Components:**
- MeButtonBar / UButton
- MeInput · UInput
- USelect · MeSelectMultiple
- UTextarea
- MeInputFile (upload)
- MeTableView / UTable
- MeEstados (empty/loading/erro)
- UBadge (status semântico)
- UModal
- slideover (drawer)
- UAlert
- useToast() (feedback)
- UModal de confirmação (destrutiva)

**crud Build Steps:**
- **Identifique a entidade** — Uma entidade pode contemplar criação + leitura + edição, mas não necessariamente exclusão para todos os perfis.
- **Mapeie o ciclo completo** — Evitar soluções desconectadas entre etapas.
- **Defina os entry points**
- **Escolha o container de cada etapa** — Decida o container antes de montar.
- **Modele estados e transições** — Não dependa só da tela ideal — trate todos os estados no componente.
- **Use os componentes reais do EletroDS/Nuxt UI** — Hierarquia: EletroDS → Nuxt UI → Vue puro. Não recriar o que já existe.
- **Documente/valide o comportamento**
- **Feche pela DoD (valide o render)**

**crud Checklist:**
- A entidade está claramente definida?
- As etapas aplicáveis do ciclo de vida foram consideradas?
- As ações estão posicionadas no contexto correto?
- O nível de complexidade está proporcional à tarefa?
- O container escolhido faz sentido?
- Os estados principais foram modelados?
- O comportamento considera permissões?
- A nomenclatura está clara e consistente?
- O fluxo está alinhado aos patterns relacionados?

**crud Consistency Principles:**
- **Clareza da ação**
- **Contexto correto** — Evite ações genéricas fora de contexto.
- **Complexidade proporcional** — Na view, todo documento abre em modo modal e pode ser expandido para tela dedicada.
- **Feedback contínuo**
- **Segurança e reversibilidade**

**crud Containers:**
- **Modal** — Use quando a ação for simples, rápida e de baixa complexidade.
- **Drawer** — Use quando o usuário precisar manter o contexto da tela anterior.
- **Página dedicada** — Use quando a entidade ou tarefa exigir maior profundidade.

**crud Feedback Rules:**
- **Criação (Create)**
- **Leitura (Read)**
- **Edição (Update)**
- **Exclusão (Delete)**

**crud Interface States:**
- Vazio
- Preenchido
- Carregando
- Erro
- Sucesso
- Sem permissão
- Sem resultado
- Conteúdo indisponível ou removido

**crud Labeling Bad:**
- Novo
- Abrir
- Atualizar
- Adicionar

**crud Labeling Good:**
- Criar fornecedor
- Adicionar documento
- Editar contrato
- Excluir certificado

**crud Labeling Principles:**
- Usar verbos orientados à ação
- Evitar termos genéricos demais
- Manter consistência entre leitura, edição e exclusão
- Refletir a complexidade real da tarefa sem exagero

**crud Lifecycle Details:**
- **Create**
- **Read**
- **Update**
- **Delete**

**crud Objectives:**
- Ações estejam no contexto correto
- Fluxos tenham complexidade proporcional
- Comportamentos sejam previsíveis
- Designers e desenvolvedores tenham uma estrutura comum de decisão
- Usuários não precisem reaprender interações semelhantes em diferentes telas

**crud Operations:**
- **Create**
- **Read**
- **Update**
- **Delete**

**crud Overview Contexts:**
- Documentos de transação
- Fornecedores
- Produtos
- Usuários
- Contatos
- Categorias
- Endereços

**crud Permission Operations:**
- Quem pode criar
- Quem pode visualizar
- Quem pode editar
- Quem pode excluir

**crud Permission Rules:**
- Esconder ações quando não fizer sentido exibi-las
- Desabilitar ações quando a visibilidade ajudar a comunicar regra de negócio
- Explicar restrições quando necessário

**crud Related Patterns:**
- **Adicionar**
- **Editar**
- **Excluir**
- **Documento (leitura)**
- **Formulário**
- **Empty State**
- **Table**
- **Toast / Feedback**
- **Modal**
- **Drawer**

**crud Stage Relationships:**
- A forma como algo é criado impacta sua futura leitura
- A forma como algo é visualizado influencia sua edição
- A exclusão depende da clareza sobre o que está sendo removido

**crud State Practices:**
- Modelar estados já na definição do fluxo
- Garantir feedback claro em ações críticas
- Evitar telas "ideais" sem contemplar falhas e exceções

---

## Index

_Template da tela de listagem — Header, Subheader, Filter bar e área de dados._

Tela de listagem de uma entidade. Parta deste template e ajuste colunas, filtros e view padrão. O detalhe de comportamento (zonas, modos de visualização, hierarquia de ações) está em Estrutura de Index.

## Modos de visualização

A mesma index assume quatro modos de visualização — o conteúdo manda. Comportamento (quando usar cada um, como alternar) em Estrutura de Index.

### Tabela

Comparar muitos registros por colunas — denso e escaneável. Padrão de Transações e Fornecedores.

### Cards

Itens visuais (catálogo/produtos) — destaque para imagem, título e poucos atributos.

### Lista

Registros com identidade forte (usuários, fornecedores) — cada linha é um Forehead com avatar/logo, dados e ações.

### Pré-visualização (master-detail)

Lista à esquerda + detalhe à direita: navega e lê sem sair da tela.

## Quando usar

- Listar e comparar muitos registros de uma mesma entidade (Transações, Fornecedores, Catálogo, Usuários).
- Quando há volume que exige busca, filtros e ações em lote.

## Componentes da tela

Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.

| Zona | Componente | Papel na tela |
|------|------------|---------------|
| Header global | Layout | Navegação principal e identidade da aplicação. |
| Subheader | Subheader | Título + CTA primário ("Novo X") + ações de suporte. |
| Filter bar | Filter bar | Visões salvas e critérios de filtro que refletem na hora (cada critério é um Criterion input). |
| Área de dados | Table | Lista comparável; colunas configuráveis. |
| Status | Badge | Status semântico, legível em qualquer linha. |
| Paginação | Pagination | Percorre o volume sem perder o contexto. |
| Ações por linha | Dropdown menu | Editar, excluir e mais ações no kebab (⋮) no fim da linha. |

Anatomia e comportamento completos (zonas, modos de visualização, hierarquia de ações): Estrutura de Index.

---

## Documento

_Template da tela de um registro — Forehead, abas e corpo, com ações por status._

Tela de visualização/edição de um registro (cotação, pedido, contrato). As ações primárias dependem do status. Anatomia completa em Estrutura de documento.

## Quando usar

- Abrir um registro para ler, editar ou agir sobre ele.
- Quando o conteúdo se divide em seções do mesmo registro (resumo, itens, histórico).

## Componentes da tela

Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.

| Zona | Componente | Papel na tela |
|------|------------|---------------|
| Cabeçalho do registro | Forehead | Identidade, status e ações do documento. |
| Status | Badge | Estado atual do registro, com cor semântica. |
| Seções do registro | Tabs | Divide o mesmo registro (informações, itens, histórico). |
| Ações por status | Button bar | Ações primárias dependem do status (Aprovar, Recusar…). |
| Preenchimento | Progress | Mostra o avanço do documento quando aplicável. |

Anatomia e comportamento completos (estados, ações por status, reversibilidade): Estrutura de documento.

---

## Dashboard

_Template da tela de síntese — filtros globais, KPIs e grid de widgets._

Tela de síntese — responde perguntas rápidas sem navegar. Filtros globais no topo controlam os widgets abaixo. Anatomia completa em Dashboard.

## Quando usar

- Dar uma leitura rápida de indicadores (KPIs, tendências) sobre muitas telas.
- **Não** use para operar registros um a um — isso é Index.

## Componentes da tela

Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.

| Zona | Componente | Papel na tela |
|------|------------|---------------|
| Header global | Layout | Navegação e moldura da aplicação. |
| Filtros globais | Criterion input | Período, empresa e categoria que controlam tudo abaixo. |
| KPIs | Card | Cada indicador é um Card (rótulo + número + delta). |
| Variação (delta) | Badge | Sinaliza alta/baixa do indicador. |
| Widgets / charts | Card | O gráfico é um slot dentro do Card — composição, não componente do DS. |

Anatomia e comportamento completos (zonas, filtros globais, grid de 12 colunas): Dashboard.

---

## Formulário

_Template da tela de cadastro/edição — campos em seções e rodapé de ações._

Tela de cadastro ou edição de um registro. Campos agrupados em seções; as ações ficam sempre no rodapé, nunca soltas no meio. Os controles vêm de Componentes › Formulários.

## Quando usar

- **Criar ou editar** um registro com vários campos.
- Quando há validação e um submit explícito (Salvar/Cancelar).

**Quando NÃO usar:** um fluxo longo dividido em etapas com validação por passo — use o **Wizard**. Só um ou dois campos rápidos — use um modal/inline, não uma tela de formulário.

## Anatomia

Três zonas, de cima para baixo:

1. **Subheader de ações** — as ações da tela ficam **fixas no subheader** (topo), nunca soltas no meio do formulário: **Cancelar** (secundário) + **Salvar** (primário); "Visualizar" quando fizer sentido. Até 3 aparentes + **"Mais ações"** (overflow).
2. **Seção "Informações gerais"** — os campos principais em **grid** (1 a 4 colunas, conforme a densidade). Cada campo é um FormField (rótulo + ajuda/erro); obrigatórios marcados com `*`.
3. **Seções com perguntas** — grupos adicionais (ex.: Administrativa, Financeira), cada um com cabeçalho (título + descrição) e suas perguntas configuráveis.

## Perguntas configuráveis

Nas seções, cada **pergunta** declara:

| Recurso | O que é |
|---------|---------|
| **Tipo de resposta** | Texto · Numérica · Múltipla escolha (um por pergunta). |
| **Obrigatório** | Marca a pergunta como obrigatória (`*`); entra na validação. |
| **Significância (peso)** | Peso da pergunta quando a resposta é pontuada/avaliada. |
| **Anexo** | Permite enviar um arquivo como complemento da resposta. |
| **Condicional** | Mostra a pergunta só quando outra condição é atendida. |

## Validação

- **Inline**, por campo (mensagem abaixo do campo, via FormField).
- Obrigatórios marcados com `*`; o submit ("Salvar") só conclui com os obrigatórios preenchidos.
- Mensagens e rótulos seguem Voz e conteúdo.

## Responsivo

- **Desktop:** grid de campos em até 4 colunas; ações inline no subheader.
- **Mobile/tablet:** o grid **empilha** (1 coluna); as ações do subheader vão para **"Mais ações"** / rodapé fixo; o conteúdo rola.

## Componentes da tela

Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.

| Zona | Componente | Papel na tela |
|------|------------|---------------|
| Wrapper do formulário | Form | Agrupa campos, validação e submit. |
| Campo (rótulo + ajuda/erro) | FormField | Moldura de cada campo, com estado de erro. |
| Texto / número | Input | Entrada de texto livre e numérica. |
| Escolha em lista | Select | Opção única a partir de uma lista. |
| Rodapé de ações | Button bar | "Cancelar" (secundário) + "Salvar" (primário), nunca soltos. |

A escrita de rótulos, mensagens e validação segue Voz e conteúdo.

---

## Config gerais

_Template da tela de configurações — menu lateral de configurações + conteúdo da seção (ex.: Automação)._

Tela de **configurações do sistema**: um menu lateral de configurações (grupos aninhados + busca) à esquerda e a área de conteúdo da seção escolhida à direita — aqui, uma listagem ("Automação"). Usa o chassi MeLayout com o **left-area** como menu de configuração.

## Quando usar

- Áreas de **configuração / administração** do app (Sistema e Operações, Usuários e Acessos, Processos…).
- Quando há um **menu de seções** à esquerda e cada seção abre o próprio conteúdo (tabela, formulário, etc.).

## Componentes da tela

Cada zona é um componente oficial — priorize o EletroDS; o Nuxt UI é o fallback.

| Zona | Componente | Papel na tela |
|------|------------|---------------|
| Chassi | Layout | Header + left-area (menu de config) + conteúdo. |
| Menu de configurações | Nav lateral (left-area) | Grupos aninhados + busca ("Busque neste menu"); a seção ativa fica destacada. |
| Cabeçalho da seção | Título + descrição | Nome da seção (ex.: "Automação") e uma linha de contexto. |
| Toolbar | Button bar | Ação primária (Nova automação) + secundárias (Importar/Exportar) + busca. |
| Conteúdo | Table view | Listagem da seção com paginação. |

A escrita de rótulos e mensagens segue Voz e conteúdo.

---

## E-mails

_Templates de e-mail transacional do ME — um template default contextualizado (confirmação, convites, redefinição de senha)._

**Seções:** Boas práticas · Anatomia · Modelos · Regras

**Quando usar:**
- Comunicações transacionais do ME — confirmação de conta, convites e redefinição de senha.
- Sempre a partir do template default: header e footer fixos, só o conteúdo muda.

**Quando NÃO usar:**
- Marketing / newsletter — fora do escopo deste template transacional.
- Conteúdo dentro do app autenticado — use os padrões de tela (chassi MeLayout).

**Contextos de uso (onde fica + porquê):**
- **Template default (shell)** — Header azul (marca "me.") + conteúdo + footer azul (Atendimento · Conheça o ME · LinkedIn/Facebook/Instagram) — Um único shell; só o miolo muda por cenário. Fonte: Roboto (fonte do produto).
- **Confirmação de cadastro** — Título + saudação + CTA "Concluir cadastro" + materiais de apoio — Validar a conta recém-criada.
- **Convite — fornecedor com cadastro ativo** — Logo do parceiro + "{Empresa} te enviou um convite" + vantagens do ME + CTA "Acessar perfil" — Já possui cadastro — só acessa.
- **Convite — fornecedor (novo cadastro)** — Logo do parceiro + vantagens + CTA "Cadastrar" + PS de expiração do link + opt-out — Iniciar o cadastro por convite.
- **Redefinir senha** — Título + instrução + CTA "Recuperar senha" — Fluxo de reset de senha.
- **Logo/nome do parceiro** — Vêm dos dados do convite — Nos previews é fictício; na comunicação real vem do parceiro.

**Labeling:**
- Concluir cadastro = CTA da confirmação de conta
- Cadastrar = CTA do convite (novo cadastro)
- Acessar perfil = CTA do convite (fornecedor ativo)
- Recuperar senha = CTA de redefinição de senha

---

## Wizard

_Template de fluxo guiado em etapas — indicador de progresso, conteúdo da etapa e rodapé Voltar/Avançar._

Fluxo guiado em **etapas**, para uma tarefa que é grande demais para uma tela só (cadastrar fornecedor, importar planilha, criar cotação). Conduz a pessoa passo a passo, **validando cada etapa antes de avançar**. Usa o chassi do ME (header + subheader); os campos de cada etapa vêm de Componentes › Formulários.

## Quando usar

- Uma tarefa **longa e sequencial** que se beneficia de ser quebrada em passos.
- Quando cada passo precisa **validar** antes do próximo, e a ordem importa.
- Onboarding / criação assistida (ex.: novo fornecedor em 5 passos).

**Quando NÃO usar:**

| Cenário | Use |
|---------|-----|
| Criar/editar um registro num único formulário | Formulário — não wizard |
| Navegar entre **fases de um documento de processo** (rodadas de Cotação/Leilão) | Phases — é rail de documento, não wizard |
| Trocar de seção dentro do **mesmo** registro (Itens, Histórico) | Tabs |

## Anatomia

Três zonas:

1. **Indicador de progresso (passos)** — um stepper que mostra as etapas e a atual ("Passo 2 de 4"). Reflete o estado: concluída · atual · futura (com sinal redundante à cor).
2. **Conteúdo da etapa atual** — só o passo ativo é exibido; o corpo troca conforme a navegação.
3. **Rodapé de ações** — **Voltar** + **Avançar**; opcionalmente "Salvar rascunho"/"Cancelar". No **último passo**, "Avançar" vira **Concluir**.

## Tipos de conteúdo por etapa

Cada etapa tem um tipo de conteúdo — combine conforme a tarefa:

| Tipo | Para |
|------|------|
| **Formulário** | Coletar campos (o mais comum). |
| **Tabela / lista** | Selecionar/revisar itens em lote. |
| **Documentos** | Anexar/enviar arquivos. |
| **Resumo / Revisão** | Mostrar o que foi preenchido antes de confirmar. |
| **Confirmação** | Estado final de sucesso + próximos passos. |

## Regras

- **Valide a etapa antes de avançar** — não deixe seguir com pendências do passo atual.
- **"Concluir" no último passo**, não "Avançar" — deixa claro que ali termina.
- O **stepper reflete a etapa ativa** e o corpo mostra o conteúdo dela (sempre em sincronia).
- Permita **voltar** sem perder o que já foi preenchido.

## Responsivo

- **Desktop:** stepper na horizontal (ou lateral); rodapé de ações inline.
- **Mobile/tablet:** o stepper compacta ("Passo X de N" textual); os campos empilham; as ações vão para um **rodapé fixo** (Voltar/Avançar acessíveis com o polegar).

## Componentes da tela

Priorize o EletroDS; Nuxt UI é fallback.

| Zona | Componente | Papel |
|------|------------|-------|
| Título + progresso + ações | Subheader | Título do fluxo + "Passo X de N" + Voltar/Avançar. |
| Indicador de passos | Stepper (Nuxt UI `UStepper`) | Mostra as etapas e a atual. |
| Ações do rodapé | Button bar | Voltar (secundário) + Avançar/Concluir (primário). |
| Campos da etapa | Componentes › Formulários | Input, Select, etc. na etapa de formulário. |

> [DESIGN?] Ainda **sem mock visual dedicado** e sem definição de detalhes finos (stepper horizontal × lateral; comportamento exato do "voltar" com estado). A referência visual atual é o preview shadcn `vibe-react/src/previews/WizardPreview.tsx` e o modelo no Compositor. Formalizar a anatomia visual (mock `context-visual`) fica pendente de design.

---

## Documentos por tipo (anatomia por documento)

> Cada tipo reaproveita o chassi de documento (Forehead + abas + corpo), variando identidade, abas, status e ações. Todo documento tem também uma versão **modal** aberta por um item da index. Fonte: `app/data/patterns/document-types.ts`.

### Documento: Pedido

_Documento de compra confirmado enviado ao fornecedor. View full-page com identificação, informações gerais, históricos e itens com aprovação por linha._

**Formato:** Full-page simples (sem rail de fases).

O Pedido é o documento de compra firmado com o fornecedor. Abre em tela cheia (não em modal) — o foco é leitura e acompanhamento do que foi pedido, com o histórico de aprovações visível por item.

**Abas:** Informações gerais · Históricos · Itens

**Abas (detalhe):**
- **Informações gerais** — Dados do pedido (requisitante, nº ME, empresa, datas, valor) + anexos do documento. É a aba padrão — abre primeiro porque responde "do que se trata este pedido".
- **Históricos** — Histórico de tarefas e o histórico de alterações (campo editado, responsável, IP, data) — o rastro de auditoria de quem mexeu em quê.
- **Itens** — Itens linha a linha com 2 expanders independentes: chevron na coluna Código do produto → "Detalhes do item" (Informações gerais + Anexos + Histórico de aprovações com tabela/paginação/timeline); chevron na coluna Status → "Histórico do item neste documento". Toolbar: split "Adicionar item" + Remover + busca + gráfico + mais-ações.

**Status (badge semântico):**
- **Rascunho** (neutral) — Pedido em montagem, ainda não submetido — só quem edita o vê.
- **Em aprovação** (warning) — Aguardando a alçada aprovar — o stepper mostra a etapa atual e quem é o aprovador da vez.
- **Aprovado** (success) — Aprovado internamente; pronto para envio ao fornecedor.
- **Confirmado** (success) — Fornecedor confirmou o pedido — a partir daqui, mudanças entram por aditivo ou cancelamento.
- **Cancelado** (error) — Pedido cancelado — exige motivo, que fica registrado para auditoria.

**Ações (zona · quando):**
- **Subheader** — Aprovar (primária) — Primária só quando o pedido está na alçada do usuário; some para quem não aprova — a primária é sempre a ação esperada naquele status.
- **Subheader** — Editar — Disponível enquanto o fornecedor não confirma; depois disso, alterações passam a ser por aditivo/cancelamento.
- **Subheader** — Criar pré-pedido / Criar pré-pedido emergencial — Gera um pré-pedido a partir deste pedido; a versão emergencial encurta a alçada para compras urgentes.
- **Mais ações** — Exportar, Encaminhar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — fica por último, isolada após um divisor, e exige motivo.

**Particularidades:**
- **Aprovação por item** — Cada item tem seu stepper (Rascunho → Enviado → Aprovado) — a aprovação não é só do documento, é linha a linha.
- **Pré-pedido emergencial** — Atalho no subheader para abrir um pré-pedido emergencial a partir do pedido, sem refazer dados.
- **Valor total** — O valor consolidado fica no canto do forehead, ao lado do status — visível sem abrir os itens.
- **Conferido por Nota Fiscal** — O recebimento é validado por uma Nota Fiscal vinculada; os itens da nota são batidos contra os do pedido.

**Quando usar:**
- Acompanhar um pedido de compra confirmado e seus itens.
- Aprovar/rejeitar dentro da alçada, com rastro de quem aprovou cada item.
- Gerar um pré-pedido (ou pré-pedido emergencial) a partir do pedido.

**Quando NÃO usar:**
- Comparar propostas de fornecedores — use o padrão Cotação (RFQ).
- Pedir aprovação de uma necessidade de compra antes do pedido — use Requisição.

**Fluxo (cadeia):** Requisição → Cotação → Pré-pedido → **Pedido** → Nota Fiscal

**Relacionados:**
- **Requisição** — Origem da necessidade — uma requisição aprovada pode virar pedido direto.
- **Pré-pedido** — Etapa de validação antes do pedido firme; também pode ser gerado a partir dele.
- **Nota Fiscal** — Entrada fiscal conferida contra os itens deste pedido.
- **Contrato** — Quando há acordo guarda-chuva, o pedido consome o saldo do contrato.

---

### Documento: Cotação (RFQ)

_Documento de cotação/negociação aberto em modal sobre a listagem, com rail de fases (RFQ/RFP/RFI), alternador Documento·Mapa·Otimização e rodadas de negociação._

**Formato:** Full-page **com rail de FASES à esquerda** (`#nav-area`) — documento de processo (ex.: rodadas/etapas).

A Cotação (RFQ) é o documento de negociação com fornecedores. Em tela cheia traz o rail de fases à esquerda (rodadas, RFP, RFI) e o alternador Documento · Mapa · Otimização — o eixo é comparar propostas e negociar. Como todo documento, também é acessível em modal a partir de um item da index.

**Abas:** Atributos da cotação · Fornecedores convidados · Históricos · Itens · Avaliação técnica · Rodadas de negociação

**Abas (detalhe):**
- **Atributos da cotação** — Informações adicionais configuráveis (atributo → valor) — define o que se está cotando.
- **Fornecedores convidados** — Quem foi convidado, origem, contrato, se respondeu e quantos itens — o mapa de participação.
- **Históricos** — Steppers de estado da cotação (criada, aprovada, recusada…) com responsável e data.
- **Itens** — Os itens em cotação, com código ME/cliente e empresa.
- **Avaliação técnica** — Tarefas de avaliação por responsável, com prazo e conclusão — separa o mérito técnico do preço.
- **Rodadas de negociação** — As rodadas (1ª, 2ª…), com datas e a cotação anterior de referência — o histórico da negociação.

**Status (badge semântico):**
- **Aprovado** (success) — Cotação aprovada para seguir.
- **Em negociação** (warning) — Aguardando respostas/rodadas dos fornecedores.
- **Recusado** (error) — Bloqueada por regra de negócio não atendida — precisa ajuste antes de seguir.
- **Vencida** (error) — Prazo de resposta expirado — alterar a data limite para reabrir e continuar.

**Ações (zona · quando):**
- **Subheader** — Finalizar negociação (primária) — Encerra a negociação quando há proposta vencedora — primária por ser o desfecho esperado.
- **Subheader** — Cancelar cotação — Ação destrutiva — exige confirmação e some quando a cotação já foi finalizada.
- **Mais ações** — Avaliação técnica, Alterar data limite, Short list, Encaminhar — Overflow das ações de negociação, recolhidas por frequência menor que finalizar.
- **Alternador** — Documento · Mapa · Otimização — Troca a visão sem sair do documento — mesma cotação, três leituras.

**Particularidades:**
- **Rail de fases** — À esquerda, as fases do processo (RFQ, RFP, RFI e as rodadas) — navega entre documentos do mesmo processo sem perder o contexto.
- **Documento · Mapa · Otimização** — Alternador de visão: o documento, o mapa comparativo de propostas e a otimização de cenários.
- **Rodadas de negociação** — A negociação acontece em rodadas; cada uma referencia a cotação anterior, preservando a evolução do preço.
- **Técnico separado do preço** — A avaliação técnica vive em aba própria — o mérito é julgado sem o viés do valor.

**Quando usar:**
- Negociar preços e condições com vários fornecedores em rodadas.
- Comparar propostas (orçamentos respondidos) e avaliar tecnicamente.
- Conduzir RFQ/RFP/RFI dentro do mesmo processo (rail de fases).

**Quando NÃO usar:**
- Registrar uma compra já fechada — use Pedido.
- Disputa por lances em tempo real — use Leilão.

**Fluxo (cadeia):** Requisição → **Cotação** → Pré-pedido → Pedido

**Relacionados:**
- **Requisição** — Origem: uma requisição aprovada pode gerar a cotação para negociar.
- **Leilão** — Alternativa quando a disputa é por lances em tempo real, não por rodadas.
- **Pedido** — Resultado: a proposta vencedora vira pedido firme.

---

### Documento: Requisição

_Pedido interno de uma necessidade de compra, sujeito a aprovação, que dá origem a pedidos. View full-page com itens e os pedidos gerados._

**Formato:** Full-page simples (sem rail de fases).

A Requisição registra uma necessidade de compra interna que passa por aprovação e, uma vez aprovada, origina um ou mais pedidos. O foco é a aprovação e o rastro até os pedidos gerados.

**Abas:** Informações gerais · Pedidos gerados · Históricos

**Abas (detalhe):**
- **Informações gerais** — Requisitante, categoria, centro de custo, datas e os itens requisitados — a necessidade descrita.
- **Pedidos gerados** — Os pedidos originados desta requisição, com o status de cada um — fecha o ciclo do que foi pedido.
- **Históricos** — Aprovações e alterações da requisição, com responsável e motivo.

**Status (badge semântico):**
- **Rascunho** (neutral) — Em preenchimento — ainda não enviada para aprovação.
- **Em aprovação** (warning) — Aguardando a alçada — nada vira pedido enquanto não aprovar.
- **Aprovado** (success) — Liberada para gerar pedido/cotação.
- **Reprovado** (error) — Negada — com o motivo registrado no histórico.

**Ações (zona · quando):**
- **Subheader** — Aprovar (primária) — Primária quando a requisição está na alçada do usuário — é o portão antes de comprar.
- **Subheader** — Gerar pedido / Gerar cotação — Após aprovada, encaminha para a compra: pedido direto ou cotação para negociar.
- **Mais ações** — Editar, Exportar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — por último, isolada após divisor.

**Particularidades:**
- **Origina pedidos** — Uma requisição aprovada gera pedidos/cotações — a aba "Pedidos gerados" mostra o rastro de tudo que nasceu dela.
- **Categoria + comprador** — Categoria e Responsible Buyer aparecem no forehead, definindo o roteamento da compra.
- **Portão de governança** — É o ponto de controle: nada avança para compra sem a alçada aprovar — o rastro fica nos Históricos.

**Quando usar:**
- Pedir aprovação de uma necessidade de compra antes de comprar.
- Acompanhar a aprovação e os pedidos/cotações gerados a partir dela.

**Quando NÃO usar:**
- Comprar diretamente sem aprovação — use o fluxo de Pedido.
- Negociar com fornecedores — use Cotação.

**Fluxo (cadeia):** **Requisição** → Cotação → Pré-pedido → Pedido

**Relacionados:**
- **Cotação** — Gerada a partir da requisição quando a compra precisa de negociação.
- **Pedido** — Destino final: a necessidade aprovada vira um ou mais pedidos.
- **Pré-pedido** — Etapa intermediária de validação antes do pedido firme.

---

### Documento: Pré-pedido

_Documento intermediário entre requisição/cotação e o pedido, sujeito a aprovação. View full-page enxuta (Informações gerais · Históricos)._

**Formato:** Full-page simples (sem rail de fases).

O Pré-pedido é a etapa intermediária antes do pedido firme — consolida o que será comprado e passa por aprovação. É uma view enxuta, focada em validar e converter em Pedido.

**Abas:** Informações gerais · Históricos

**Abas (detalhe):**
- **Informações gerais** — Fornecedor, endereço, contatos, valor e os itens do pré-pedido — tudo que será firmado.
- **Históricos** — Aprovações e alterações até a conversão em pedido.

**Status (badge semântico):**
- **Rascunho** (neutral) — Em montagem, antes de pedir aprovação.
- **Em aprovação** (warning) — Aguardando aprovação para virar pedido.
- **Aprovado** (success) — Pronto para converter em Pedido.
- **Cancelado** (error) — Cancelado com motivo registrado.

**Ações (zona · quando):**
- **Subheader** — Aprovar (primária) — Primária quando está na alçada do usuário.
- **Subheader** — Gerar pedido — Converte o pré-pedido aprovado em pedido firme, sem redigitar dados.
- **Mais ações** — Editar, Cancelar — Recolhidas por baixa frequência. Cancelar é destrutiva — por último, isolada após divisor.

**Particularidades:**
- **Etapa de conversão** — Existe para validar antes do pedido; aprovado, converte em Pedido herdando todos os dados.
- **Enxuto** — Poucas abas — o foco é aprovar/converter, não detalhar; a profundidade fica no Pedido.
- **Emergencial** — A variante emergencial encurta a aprovação para compras urgentes, sem pular o registro.

**Quando usar:**
- Validar e consolidar uma compra antes de firmar o pedido.
- Tratar compras emergenciais com aprovação rápida.

**Quando NÃO usar:**
- Documento de compra final — use Pedido.
- Necessidade ainda não aprovada — use Requisição.

**Fluxo (cadeia):** Cotação → **Pré-pedido** → Pedido

**Relacionados:**
- **Pedido** — Destino: o pré-pedido aprovado converte em pedido firme.
- **Requisição** — Origem da necessidade que chega ao pré-pedido.
- **Cotação** — Quando o pré-pedido nasce de uma negociação concluída.

---

### Documento: Leilão

_Disputa de preços por lances entre fornecedores, com janela de tempo. Abre em modal com rail, alternador de visão e as abas Lotes · Lances · Resultado._

**Formato:** Full-page **com rail de FASES à esquerda** (`#nav-area`) — documento de processo (ex.: rodadas/etapas).

O Leilão é a disputa por lances: fornecedores competem em preço dentro de uma janela de tempo. Como a Cotação, é um documento de processo com rail de fases — mas o eixo é a disputa em tempo real (lotes, lances e resultado). Como todo documento, também é acessível em modal a partir de um item da index.

**Abas:** Lotes · Lances · Resultado · Históricos

**Fases (rail à esquerda):** Leilão reverso → Disputa anterior

**Abas (detalhe):**
- **Lotes** — Os lotes em disputa, com item, quantidade e lance mínimo — a unidade da competição.
- **Lances** — Os lances recebidos em tempo real, por fornecedor e horário — reflete ao vivo durante a janela.
- **Resultado** — O vencedor por lote e a economia obtida ao fim da disputa.
- **Históricos** — Estados do leilão e alterações de prazo.

**Status (badge semântico):**
- **Agendado** (neutral) — Criado, com janela definida, ainda não iniciado.
- **Em andamento** (info) — Disputa aberta — recebendo lances dentro da janela de tempo.
- **Encerrado** (success) — Disputa concluída, com vencedor apurado por lote.
- **Cancelado** (error) — Cancelado antes ou durante a disputa, com motivo.

**Ações (zona · quando):**
- **Subheader** — Encerrar leilão (primária) — Disponível durante a disputa — fecha a janela e apura o resultado.
- **Subheader** — Prorrogar prazo — Estende a janela enquanto o leilão está aberto.
- **Mais ações** — Convidar fornecedor, Cancelar — Convidar amplia a disputa. Cancelar é destrutiva — por último, isolada após divisor.

**Particularidades:**
- **Lances em tempo real** — A disputa tem janela de tempo; os lances chegam ao vivo e a aba Lances reflete na hora.
- **Resultado por lote** — O vencedor é apurado por lote, com a economia obtida frente ao lance mínimo.
- **Prorrogação de prazo** — Enquanto aberto, o prazo pode ser estendido — a aba Lances segue recebendo até o encerramento.

**Quando usar:**
- Obter o melhor preço por disputa aberta entre fornecedores.
- Compras com muitos fornecedores aptos e item padronizado.

**Quando NÃO usar:**
- Negociação por rodadas (não em tempo real) — use Cotação.
- Compra de fornecedor único — use Pedido direto.

**Fluxo (cadeia):** Requisição → **Leilão** → Pedido → Nota Fiscal

**Relacionados:**
- **Cotação** — Alternativa quando a negociação é por rodadas, não por lances em tempo real.
- **Pedido** — Resultado: o vencedor do lote vira pedido firme.

---

### Documento: Contrato

_Acordo de fornecimento com vigência, cláusulas e saldo. View full-page com Dados · Cláusulas · Aditivos · Históricos · Anexos._

**Formato:** Full-page simples (sem rail de fases).

O Contrato formaliza o acordo de fornecimento com vigência e saldo. O foco é a leitura das cláusulas, o acompanhamento do saldo restante e os aditivos ao longo da vigência.

**Abas:** Dados · Cláusulas · Aditivos · Históricos · Anexos

**Abas (detalhe):**
- **Dados** — Partes, vigência, valor total e saldo restante — o estado de saúde do contrato num relance.
- **Cláusulas** — As cláusulas do contrato em leitura estruturada.
- **Aditivos** — Aditivos que alteram prazo/valor, com data e motivo — preservam o original e registram a mudança.
- **Históricos** — Alterações e renovações ao longo da vigência.
- **Anexos** — Documentos assinados e correlatos.

**Status (badge semântico):**
- **Em vigência** (success) — Contrato ativo, dentro do prazo — pedidos podem ser emitidos contra ele.
- **A vencer** (warning) — Próximo do fim da vigência — sinaliza a hora de renovar.
- **Encerrado** (neutral) — Vigência terminada; sem novos pedidos.
- **Cancelado** (error) — Rescindido antes do prazo, com motivo registrado.

**Ações (zona · quando):**
- **Subheader** — Criar aditivo (primária) — Para alterar prazo ou valor sem refazer o contrato — preserva o histórico.
- **Subheader** — Renovar — Aparece quando o contrato está próximo do vencimento.
- **Mais ações** — Editar, Exportar, Encerrar — Recolhidas por baixa frequência. Encerrar é destrutiva — por último, isolada após divisor.

**Particularidades:**
- **Saldo restante** — O forehead traz a barra de saldo (ex.: 75% restante) — acompanhamento do consumo do contrato sem abrir as abas.
- **Aditivos** — Alterações de prazo/valor entram como aditivos, preservando o documento original e o histórico.
- **Ampara pedidos** — Funciona como guarda-chuva: pedidos podem ser emitidos contra o contrato, consumindo o saldo.

**Quando usar:**
- Acompanhar um acordo de fornecimento, seu saldo e vigência.
- Registrar aditivos e renovações.

**Quando NÃO usar:**
- Compra pontual sem acordo de longo prazo — use Pedido.

**Fluxo (cadeia):** Cotação → **Contrato** → Pedido

**Relacionados:**
- **Pedido** — Pedidos são emitidos contra o contrato, consumindo seu saldo.
- **Cotação** — Origem comum do acordo: a negociação que define as condições do contrato.

---

### Documento: Nota Fiscal

_Documento fiscal de entrada vinculado ao pedido, sujeito a conferência e aprovação. View full-page com Informações gerais · Itens · Históricos._

**Formato:** Full-page simples (sem rail de fases).

A Nota Fiscal é o documento fiscal de entrada, conferido contra o pedido. O foco é validar emitente, itens e valores e aprovar o recebimento.

**Abas:** Informações gerais · Itens · Históricos

**Abas (detalhe):**
- **Informações gerais** — Emitente, NIF, endereço, datas e o pedido vinculado — a origem fiscal da entrada.
- **Itens** — Itens da nota conferidos contra o pedido (quantidade e valor) — onde a divergência aparece.
- **Históricos** — Conferência e aprovação do recebimento.

**Status (badge semântico):**
- **Em aprovação** (info) — Aguardando conferência/aprovação do recebimento.
- **Aprovada** (success) — Recebimento conferido e aprovado — bate com o pedido.
- **Divergente** (warning) — Diferença entre nota e pedido — trava a aprovação até a tratativa.
- **Cancelada** (error) — Nota cancelada.

**Ações (zona · quando):**
- **Subheader** — Aprovar recebimento (primária) — Primária quando a conferência bate com o pedido.
- **Subheader** — Registrar divergência — Quando há diferença de quantidade/valor com o pedido — abre a tratativa.
- **Mais ações** — Exportar, Anexar — Utilitárias, recolhidas por baixa frequência.

**Particularidades:**
- **Vínculo com o Pedido** — A nota se liga ao pedido; os itens são conferidos contra o que foi pedido.
- **Divergência** — Diferenças entre nota e pedido sobem como divergência, antes da aprovação.
- **Conferência 3-way** — Confronta nota × pedido × recebimento; enquanto não baterem, a aprovação fica travada.

**Quando usar:**
- Conferir a nota fiscal de entrada contra o pedido e aprovar o recebimento.
- Tratar divergências de quantidade/valor.

**Quando NÃO usar:**
- Emitir documento de compra — use Pedido.

**Fluxo (cadeia):** Pedido → **Nota Fiscal**

**Relacionados:**
- **Pedido** — A nota é conferida item a item contra o pedido que a originou.

---

### Documento: Fornecedor

_Ficha do fornecedor — forehead com identidade (logo, contatos, "Visível para o marketplace") + abas de ancoragem (Informações gerais, Contatos, Endereços, Financeiro, Relacionamento, Links e anexos, Funcionalidades, Catálogo) sobre seções numeradas. É uma ficha de entidade, sem o padrão de "locais"._

**Formato:** Ficha de entidade: forehead + **abas ancoradas** + seções numeradas; **sem** o padrão de "locais" (Entrega/Faturamento/Cobrança) dos transacionais.

O documento de Fornecedor é uma FICHA de entidade, não um documento transacional: usa template dedicado (forehead + abas de ancoragem + seções numeradas) e NÃO tem o bloco de "locais" (Entrega/Faturamento/Cobrança). Abre em tela cheia ou em modal a partir da index de Fornecedores.

**Abas:** Informações gerais · Contatos · Endereços · Financeiro · Relacionamento · Links e anexos · Funcionalidades · Catálogo do fornecedor · Itens com contrato

**Abas (detalhe):**
- **Informações gerais** — Dados cadastrais em grid (razão social, CNPJ, tipo, página inicial) + "Informações adicionais" (colapsável) + observação — a aba padrão.
- **Contatos** — Contato institucional (colapsável) + Outros contatos (tabela com widgets/gráfico; expandir a linha revela os meios de contato; modal de criação via UFormField).
- **Endereços** — Tabela de endereços; expandir revela e-mail/WhatsApp/telefone em uma linha (larguras iguais) + link e preview do mapa; modal de criação/edição; um único principal.
- **Financeiro** — Condições de pagamento + Condição × Unidade + Contas — cada bloco colapsável com gráfico próprio (vidas apartadas) acima da tabela.
- **Relacionamento** — Chips de relacionamento + Locais de atendimento (badge +N com popover).
- **Links e anexos** — Chips + tabela de anexos (badge "Fornecedor pode ver"; clicar no nome abre o anexo na drawer).
- **Funcionalidades** — Toggles e inputs que ligam/desligam comportamentos — DESABILITADOS no modo leitura (2 colunas).
- **Catálogo do fornecedor** — Itens ofertados em tabela + visão de cards (MeCardView SEM seletor de quantidade/carrinho, SEM select/favoritar, sem header/footer, sem badges).
- **Itens com contrato** — Tabela com checkbox, Imagem (avatar; + para inserir), Material, Contrato (file-check), Quantidade (stepper) e carrinho por linha (abre a right-area); visão de cards com select/favoritar/carrinho (no modo card: sem mais-ações e sem gráfico).

**Status (badge semântico):**
- **Ativo** (success) — Fornecedor liberado para transacionar.
- **Em homologação** (warning) — Em qualificação/aprovação cadastral antes de liberar.
- **Inativo** (neutral) — Sem operação ativa; mantido para histórico.

**Ações (zona · quando):**
- **Subheader** — Editar — Atualiza os dados cadastrais da ficha.
- **Subheader** — Enviar mensagem — Abre o painel de Mensagens com o fornecedor (transversal).
- **Mais ações** — Solicitar atualização, Exportar, Desativar — Recolhidas por baixa frequência; Desativar é destrutiva e fica isolada após o divisor.

**Particularidades:**
- **Sem "locais"** — Diferente dos documentos transacionais, a ficha não tem o bloco Entrega/Faturamento/Cobrança — endereços viram aba.
- **Abas de ancoragem** — As abas funcionam como âncoras (scroll-spy) sobre seções numeradas empilhadas no mesmo corpo.
- **Funcionalidades por toggle** — Comportamentos do fornecedor são ligados/desligados por toggles, com feedback por toast.

**Quando usar:**
- Consultar/editar a ficha completa de um fornecedor.
- Gerir contatos, endereços e dados financeiros por unidade.
- Ligar/desligar funcionalidades e ver o catálogo do fornecedor.

**Quando NÃO usar:**
- Listar/filtrar fornecedores — use a [Estrutura de Index › Fornecedores](/design-patterns/padroes/layout/estrutura-de-index/fornecedores).
- Negociar preços de uma compra — use Cotação (RFQ).

**Relacionados:**
- **Produto** — Itens do catálogo do fornecedor.
- **Cotação** — Negociações em que o fornecedor é convidado.
- **Pedido** — Pedidos firmados com o fornecedor.

---

### Documento: Produto

_Ficha do item de catálogo — forehead com galeria, etiquetas de tipo e área de preço/compra (BRL por unidade + Adicionar ao carrinho) + abas de ancoragem (Informações gerais, Unidades organizacionais, Contratos) sobre seções numeradas._

**Formato:** Ficha de entidade: forehead + **abas ancoradas** + seções numeradas; **sem** o padrão de "locais" (Entrega/Faturamento/Cobrança) dos transacionais.

O documento de Produto é uma FICHA de item do catálogo, não um documento transacional: usa template dedicado (forehead com galeria + preço/compra, abas de ancoragem e seções numeradas) e NÃO tem o bloco de "locais". Abre em tela cheia ou em modal a partir do Catálogo.

**Abas:** Especificações · Dados comerciais · Fornecimento & logística · Manuais & documentos · Unidades organizacionais · Contrato · Itens relacionados

**Abas (detalhe):**
- **Especificações** — Atributos técnicos em grid 4→3→2→1 (item genérico/crítico, tipo de material, aplicação, origem, margem, país, lote, validade/Anvisa) — a aba padrão.
- **Dados comerciais** — Campos comerciais (moeda, MRP, estocável, serviço) + seção colapsável Impostos + Exceções de ICMS e Exceção de IPI (colapsáveis XL com cards internos MD, badge Ativo/Inativo).
- **Fornecimento & logística** — Embalagem (colapsável, grid) + Fabricantes (colapsável → tabela padrão com busca/gráfico/mais-ações).
- **Manuais & documentos** — Tabela de arquivos (Nome→drawer, Usuário, Data, Tamanho, Categoria, Descrição, Revisão) com seleção múltipla, download por linha e "Baixar selecionados".
- **Unidades organizacionais** — Texto de contexto + tabela (Código, Nome, Preço orçado para a unidade) — o preço local substitui o global só naquela UO.
- **Contrato** — Contratos do item em tabela, com Visão horizontal (tabela normal) e Visão vertical (transposta: campos nas linhas, fornecedor no topo de cada coluna); coluna Quantidade com stepper + carrinho.
- **Itens relacionados** — Carrossel (UCarousel) com os mesmos cards do Card View (imagem, badges, preço, fornecedor, tags, stepper + carrinho, favoritar).

**Status (badge semântico):**
- **Normal** (success) — Item disponível para compra.
- **Especial** (info) — Item com condição/tratamento especial.
- **Bloqueado** (error) — Indisponível para compra.

**Ações (zona · quando):**
- **Subheader** — Editar — Atualiza os atributos do item.
- **Subheader** — Adicionar ao carrinho — Ação primária do catálogo — leva o item ao carrinho (preço BRL por unidade no forehead).
- **Mais ações** — Favoritar, Adicionar à lista, Histórico de preços, Exportar — Recolhidas por baixa frequência.

**Particularidades:**
- **Sem "locais"** — A ficha não tem Entrega/Faturamento/Cobrança; disponibilidade vira a aba Unidades organizacionais.
- **Forehead expandido ⇄ recolhido** — O forehead começa expandido (galeria + detalhes + painel de preços) e colapsa numa barra compacta ao rolar; a barra recolhida fica fixa junto das abas. "Ver mais" volta ao topo expandido.
- **Área de compra no forehead** — O forehead traz preço (BRL/EUR por unidade) e Adicionar ao carrinho — a ação primária do catálogo.
- **Abas de ancoragem** — Abas como âncoras (scroll-spy) sobre seções numeradas no mesmo corpo.

**Quando usar:**
- Consultar/editar a ficha de um item do catálogo.
- Ver disponibilidade por unidade organizacional e contratos vinculados.
- Adicionar o item ao carrinho a partir da ficha.

**Quando NÃO usar:**
- Listar/filtrar o catálogo — use a [Estrutura de Index › Catálogo](/design-patterns/padroes/layout/estrutura-de-index/catalogo).
- Cadastrar uma necessidade de compra — use Requisição.

**Relacionados:**
- **Fornecedor** — Quem fornece o item.
- **Contrato** — Acordos que cobrem o item.
- **Requisição** — Itens entram numa requisição de compra.

---