# LaLum Tech — Design System e especificação de interface

> **Versão:** 1.0
> **Escopo:** Painel, Obras, Materiais, Lançamento e Auditoria
> **Fonte visual:** logo oficial LaLum Tech e as telas aprovadas desta direção criativa.
> Este documento é a fonte de verdade para design e implementação. Quando uma decisão visual não estiver representada nas telas, seguir os tokens e regras abaixo — não improvisar um segundo estilo.

---

## 1. Norte criativo

### Ideia central

**Controle que transforma material em margem visível.**

A interface deve tornar evidente o "dinheiro na rua": material consumido ou comprado em obra que ainda não foi cobrado. O produto não é um painel decorativo; é uma ferramenta operacional diária, com leitura rápida, alta confiabilidade e baixa chance de erro.

### Personalidade

- **Clara:** hierarquia explícita, linguagem direta e ausência de ruído.
- **Confiável:** dados financeiros legíveis, estados previsíveis e rastreabilidade.
- **Operacional:** poucos cliques, boa densidade de informação e excelente uso em campo.
- **Contemporânea:** acabamento sofisticado sem futurismo, neon ou excesso de efeitos.

### Princípios inegociáveis

1. O valor **Materiais a cobrar** é a informação de maior prioridade do produto.
2. Roxo é cor de marca, ação e seleção — não deve pintar a interface inteira.
3. Estados semânticos nunca dependem apenas de cor; sempre incluem texto e, quando útil, ícone ou ponto.
4. A versão mobile não é uma miniatura do desktop. Tabelas viram listas, kanban vira fluxo por etapa e formulários ganham ação fixa.
5. Informação financeira respeita permissão de acesso. Prestadores de campo não visualizam a carteira financeira global.
6. Toda tela deve prever: carregamento, vazio, erro, sem permissão e sucesso.

---

## 2. Marca

### Logo

- Usar o arquivo oficial; não reconstruir o lettering com fonte.
- Preservar sempre a proporção original.
- Área de proteção mínima: a altura do símbolo ao redor do conjunto.
- Altura recomendada:
  - Desktop no sidebar: **28 px**.
  - Mobile no app bar: **22 px**.
- Em fundo roxo, usar versão branca.
- Em fundo claro, usar versão roxa ou o conjunto dentro de uma placa roxa.
- Não aplicar sombra, contorno, deformação, rotação ou novas cores no logo.

### Elemento gráfico derivado

O símbolo sugere **avanço, direção e fluxo vertical**. Ele pode originar:

- filetes em forma de chevron;
- padrões lineares muito sutis em fundos institucionais;
- ícones de avanço e progresso;
- recortes arredondados em superfícies de marca.

O padrão nunca compete com os dados. Opacidade máxima recomendada: **4% a 7%**.

---

## 3. Cores

A cor-base foi extraída do logo: **`#5D23AB`**.

### 3.1 Escala da marca

| Token | Hex | Uso |
|---|---:|---|
| `brand-50` | `#F7F2FC` | Fundo selecionado muito suave |
| `brand-100` | `#EEE4FA` | Ícones, hover leve, focus ring |
| `brand-200` | `#DEC8F4` | Bordas selecionadas |
| `brand-300` | `#C4A0E9` | Elementos gráficos secundários |
| `brand-400` | `#9C6FD9` | Ilustração e estados auxiliares |
| `brand-500` | `#7B44C7` | Hover em superfícies claras |
| `brand-600` | `#5D23AB` | Cor oficial, CTA principal, navegação ativa |
| `brand-700` | `#4C1B8D` | Hover/pressed do CTA |
| `brand-800` | `#3B166A` | Texto de marca forte |
| `brand-900` | `#291047` | Superfície escura excepcional |

### 3.2 Neutros

| Token | Hex | Uso |
|---|---:|---|
| `canvas` | `#F8F7FB` | Fundo geral do aplicativo |
| `surface` | `#FFFFFF` | Cards, tabelas, formulários |
| `surface-subtle` | `#FCFBFE` | Faixas e agrupamentos internos |
| `border` | `#E8E4EF` | Borda padrão |
| `border-strong` | `#D8D1E2` | Divisões mais importantes |
| `text-primary` | `#171329` | Títulos e dados principais |
| `text-secondary` | `#4A445D` | Texto de suporte |
| `text-muted` | `#746E84` | Metadados e ajuda |
| `text-disabled` | `#A7A1B2` | Estado desabilitado |

### 3.3 Estados de cobrança

| Estado | Fundo | Texto/ponto | Regra |
|---|---:|---:|---|
| **Pendente** | `#FFF7E0` | `#9A5B00` | Dinheiro ainda não cobrado; maior prioridade operacional |
| **Cobrado** | `#EAF8EF` | `#16733A` | Valor já faturado/cobrado |
| **Não cobrável** | `#F1F3F6` | `#566173` | Estado neutro e deliberado |
| **Incompleto** | `#F3EAFE` | `#6D28D9` | Registro com dados ausentes; requer complementação |

### 3.4 Feedback do sistema

| Token | Fundo | Primeiro plano |
|---|---:|---:|
| `success` | `#EAF8EF` | `#16733A` |
| `warning` | `#FFF7E0` | `#9A5B00` |
| `danger` | `#FDEDEC` | `#B42318` |
| `info` | `#EEF4FF` | `#2457A7` |

> **Importante:** vermelho é reservado para erro, bloqueio, exclusão destrutiva ou alerta crítico. "Pendente" usa âmbar; "Incompleto" usa violeta com mensagem de atenção quando necessário.

### 3.5 Tokens CSS

```css
:root {
  --brand-50: #f7f2fc;
  --brand-100: #eee4fa;
  --brand-200: #dec8f4;
  --brand-300: #c4a0e9;
  --brand-400: #9c6fd9;
  --brand-500: #7b44c7;
  --brand-600: #5d23ab;
  --brand-700: #4c1b8d;
  --brand-800: #3b166a;
  --brand-900: #291047;

  --canvas: #f8f7fb;
  --surface: #ffffff;
  --surface-subtle: #fcfbfe;
  --border: #e8e4ef;
  --border-strong: #d8d1e2;

  --text-primary: #171329;
  --text-secondary: #4a445d;
  --text-muted: #746e84;
  --text-disabled: #a7a1b2;

  --pending-bg: #fff7e0;
  --pending-fg: #9a5b00;
  --billed-bg: #eaf8ef;
  --billed-fg: #16733a;
  --nonbillable-bg: #f1f3f6;
  --nonbillable-fg: #566173;
  --incomplete-bg: #f3eafe;
  --incomplete-fg: #6d28d9;

  --danger-bg: #fdedec;
  --danger-fg: #b42318;
  --info-bg: #eef4ff;
  --info-fg: #2457a7;
}
```

---

## 4. Tipografia

### Família

**Inter Variable**, com fallback:

```css
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI", sans-serif;
```

O logo permanece como ativo gráfico. Não usar a fonte da interface para redesenhá-lo.

### Escala

| Estilo | Desktop | Mobile | Peso | Uso |
|---|---|---|---:|---|
| `page-title` | 28/36 px | 22/30 px | 700 | Título da tela |
| `section-title` | 18/26 px | 17/24 px | 700 | Seções principais |
| `card-title` | 14/20 px | 14/20 px | 600 | Cards, painéis e itens |
| `body` | 14/20 px | 14/20 px | 400 | Texto padrão |
| `body-strong` | 14/20 px | 14/20 px | 600 | Dados e rótulos importantes |
| `label` | 12/16 px | 12/16 px | 600 | Labels, cabeçalhos compactos |
| `caption` | 12/16 px | 12/16 px | 400 | Ajuda e metadados |
| `metric` | 24/30 px | 20/26 px | 700 | Indicadores financeiros |

### Regras numéricas

- Valores financeiros usam `font-variant-numeric: tabular-nums`.
- Valores em tabelas são alinhados à direita.
- Não reduzir texto abaixo de **12 px**.
- Evitar caixa alta. Usar *sentence case* em títulos, botões e labels.

---

## 5. Espaçamento, forma e elevação

### Escala de espaçamento

Sistema de 4 px:

`4, 8, 12, 16, 20, 24, 32, 40, 48, 64`

### Raios

| Token | Valor | Uso |
|---|---:|---|
| `radius-sm` | 8 px | Chips e controles compactos |
| `radius-md` | 10 px | Inputs e botões |
| `radius-lg` | 14 px | Cards |
| `radius-xl` | 16 px | Painéis e tabelas |
| `radius-2xl` | 20 px | Superfícies de destaque |
| `radius-pill` | 999 px | Status e avatares |

### Bordas

- Padrão: `1px solid var(--border)`.
- Selecionado: `1px solid var(--brand-300)`.
- Foco: borda `brand-600` + anel externo `0 0 0 3px brand-100`.

### Sombras

```css
--shadow-card:
  0 1px 2px rgba(31, 20, 50, 0.04),
  0 8px 24px rgba(55, 32, 92, 0.06);

--shadow-floating:
  0 16px 40px rgba(43, 24, 73, 0.14);
```

- Cards comuns priorizam borda; sombra é sutil.
- `shadow-floating` somente em dropdowns, modais, FAB e elementos sobrepostos.
- Não usar glassmorphism, brilho ou sombra roxa intensa.

---

## 6. Iconografia e movimento

### Ícones

- Biblioteca recomendada: **Lucide**, traço de 1,75 px.
- Tamanhos usuais: 16, 18, 20 e 24 px.
- Ícone dentro de KPI: container de 40 × 40 px, fundo `brand-50`, raio 10 px.
- Ícone nunca substitui um rótulo essencial.
- Usar uma única família de ícones em todo o produto.

### Movimento

- Hover/focus: **150 ms ease-out**.
- Drawer, modal e painel: **200–240 ms ease-out**.
- Sem animações elásticas ou decorativas.
- Respeitar `prefers-reduced-motion`.
- Alterações financeiras e de status devem ter feedback imediato, mas discreto.

---

## 7. Estrutura responsiva

### Breakpoints

| Faixa | Comportamento |
|---|---|
| `≥ 1440 px` | Sidebar completa; 4 KPIs em linha; conteúdo amplo |
| `1024–1439 px` | Sidebar recolhível; grids reduzidos; kanban com rolagem horizontal |
| `768–1023 px` | Sidebar em drawer; KPIs em 2 colunas; painéis empilhados |
| `< 768 px` | App bar + navegação inferior; conteúdo em uma coluna |

### App shell desktop

- Sidebar: **232 px**, fixa.
- Topbar: **72 px**, fixa ou sticky.
- Área de conteúdo: padding **32 px**; em telas médias, **24 px**.
- Largura máxima recomendada: **1600 px**, sem centralizar excessivamente telas de tabela.
- Fundo geral `canvas`; conteúdo em superfícies brancas.

### App shell mobile

- App bar: **56–64 px** + safe area.
- Conteúdo: padding lateral **16 px**.
- Navegação inferior: **64 px** + safe area.
- Ordem recomendada: **Painel · Obras · Novo lançamento · Materiais · Auditoria**.
- O botão central de lançamento pode ser FAB, com área de toque mínima de 48 × 48 px.
- Em formulário, ações ficam em barra inferior sticky.

### Navegação do MVP

A navegação principal contém somente:

1. Painel
2. Obras
3. Materiais
4. Lançamentos
5. Auditoria

Não adicionar módulos futuros — como Cobranças, Fornecedores, Relatórios ou Cadastros — sem escopo funcional aprovado.

---

## 8. Componentes

### 8.1 Botões

#### Primário

- Altura desktop: 40 px; mobile: 44–48 px.
- Fundo `brand-600`; texto branco; raio 10 px.
- Hover `brand-700`; pressed `brand-800`.
- Usar para uma única ação principal por contexto.

#### Secundário

- Fundo branco; borda `brand-200`; texto `brand-700`.
- Hover `brand-50`.

#### Ghost

- Sem borda; texto `text-secondary`.
- Hover `brand-50` e texto `brand-700`.

#### Destrutivo

- Fundo ou texto `danger-fg`.
- Exige confirmação quando a ação não puder ser desfeita.

#### Regras gerais

- Ícone à esquerda com 16–18 px.
- Gap entre ícone e texto: 8 px.
- Área de toque mínima mobile: 44 × 44 px.
- Estado de loading preserva a largura do botão.

### 8.2 Inputs, selects e busca

- Altura: 44 px desktop; 48 px mobile.
- Label sempre visível acima do campo.
- Placeholder não substitui label.
- Helper text abaixo, em `caption` e `text-muted`.
- Focus ring obrigatório.
- Erro: borda `danger-fg`, mensagem específica e ícone opcional.
- Campos monetários aceitam máscara brasileira e mantêm valor numérico internamente.
- Selects longos devem ter busca.

### 8.3 StatusBadge

- Altura: 24 px.
- Padding: 0 8 px.
- Raio pill.
- Ponto de 6 px ou ícone de 14 px + texto completo.
- Nunca abreviar "Não cobrável" ou "Incompleto" em desktop.
- Implementar por atributo semântico, não por classes avulsas:

```html
<span class="status-badge" data-status="pending">Pendente</span>
<span class="status-badge" data-status="billed">Cobrado</span>
<span class="status-badge" data-status="nonbillable">Não cobrável</span>
<span class="status-badge" data-status="incomplete">Incompleto</span>
```

### 8.4 KPI / MetricCard

Estrutura:

1. Ícone.
2. Rótulo.
3. Valor principal.
4. Contexto secundário opcional.

Regras:

- Altura mínima: 104 px.
- Não mostrar mais de uma comparação por card.
- `Materiais a cobrar` deve ser o primeiro e pode receber borda/acento de marca.
- `Incompletos` usa ícone de atenção e texto "Requer atenção", sem transformar todo o card em vermelho.
- Em mobile, os dois indicadores financeiros podem ocupar largura total; indicadores quantitativos podem dividir a linha.

### 8.5 Cards e painéis

- Fundo branco, borda padrão e raio 14–16 px.
- Padding: 16 px em cards; 20–24 px em painéis.
- Cabeçalho com título à esquerda e ação contextual à direita.
- Card clicável possui hover leve e foco visível em todo o container.
- Não aninhar mais de dois níveis de cards.

### 8.6 Tabelas

- Cabeçalho sticky quando houver rolagem vertical.
- Altura do cabeçalho: 44 px.
- Linhas: 56–64 px.
- Hover de linha: `surface-subtle`.
- Valores monetários e quantidades alinhados à direita.
- Status e menu de ações ficam nas últimas colunas.
- Ordenação é indicada por ícone e estado acessível.
- Texto longo limita a duas linhas; o conteúdo completo aparece em tooltip ou detalhe.
- Paginação e total de resultados ficam no rodapé.
- Em mobile, converter para lista de registros; não comprimir todas as colunas.

### 8.7 Barra de filtros

- Busca à esquerda; filtros contextuais em seguida; CTA principal à direita.
- Filtros ativos aparecem como chips removíveis.
- "Limpar filtros" só aparece quando há filtros aplicados.
- Em mobile, busca em linha própria e filtros dentro de drawer/bottom sheet.
- Manter os filtros ao retornar da tela de detalhe.

### 8.8 Kanban de obras

- Coluna: largura ideal de 280–320 px.
- Em telas sem espaço, usar rolagem horizontal; nunca reduzir cards a ponto de perder legibilidade.
- Cabeçalho da coluna contém etapa, quantidade e explicação curta.
- Card da obra contém, nesta ordem:
  1. número do orçamento;
  2. cliente;
  3. endereço;
  4. responsável;
  5. valor total.
- "Concluídos" inclui check verde e texto **"Encerrada e quitada"**.
- Drag-and-drop, se existir, precisa de alternativa por menu/teclado. Não depender apenas de arrastar.
- Em mobile, usar seletor de etapa + lista vertical; não mostrar seis colunas estreitas.

### 8.9 Formulário de lançamento

- Formulário dividido em blocos:
  1. contexto da obra e tipo;
  2. material, unidade e quantidade;
  3. custo e venda;
  4. logística e responsáveis;
  5. cobrança, evidência e observação.
- Tipos aparecem como controles selecionáveis com ícone:
  - Consumo
  - Compra em campo
  - Devolução
  - Realocação
  - Deslocamento
- Valor total calculado é exibido em painel suave de marca.
- Upload aceita área de arrastar/soltar no desktop e botão de câmera/arquivo no mobile.
- A ação principal é **Salvar lançamento**.
- Em mobile, o botão salvar fica sticky e permanece visível acima da navegação/safe area.
- Após salvar, apresentar confirmação e destino claro: novo lançamento, ver registro ou voltar à obra.

### 8.10 Auditoria

- Pode usar tabs: **Visão geral · Regras de negócio · Histórico de ações**.
- Regra de negócio é exibida como card com:
  - nome;
  - descrição;
  - estado;
  - severidade, quando existir.
- Histórico mostra:
  - data/hora;
  - usuário ou sistema;
  - ação;
  - obra/material afetado;
  - detalhes;
  - resultado.
- A trilha deve parecer cronológica e rastreável, sem parecer um feed social.
- "Gerenciar regras" só aparece para quem possuir permissão real.

### 8.11 Feedback, modal e toast

- Toast de sucesso: curto, com verbo e objeto — "Lançamento salvo".
- Erros de formulário são mostrados junto ao campo e resumidos no topo quando houver múltiplos.
- Modal é reservado a confirmação, detalhe rápido ou ação destrutiva.
- Não usar modal para fluxos longos de lançamento.
- Loading de página usa skeleton; evitar spinner central por longos períodos.

---

## 9. Especificação por tela

### 9.1 Painel

#### Desktop

1. Título e seletor de período.
2. Grid com quatro indicadores:
   - Materiais a cobrar
   - Margem bruta prevista
   - Obras ativas
   - Incompletos
3. Grid inferior 8/4:
   - tabela de materiais pendentes de cobrança;
   - painel de lançamentos incompletos.

#### Mobile

- Indicadores financeiros em cards maiores.
- Obras ativas e Incompletos em cards compactos.
- Tabela vira lista resumida com obra, valor, vencimento e status.
- Link "Ver todos" leva à tela filtrada correspondente.

#### Regra de prioridade

A tela deve responder em poucos segundos:

- Quanto ainda falta cobrar?
- Qual margem está prevista?
- Onde há lançamento incompleto?
- Qual obra precisa de ação agora?

### 9.2 Obras

- Cabeçalho com busca, filtro por etapa e contagem.
- Funil/kanban com:
  **Prospecção → Orçamento → Aprovação → Pedido → Produção → Concluídos**.
- O card não inventa informações não presentes no produto.
- Não introduzir prioridade "Alta/Média/Baixa" sem regra de negócio aprovada.
- Em "Concluídos", deixar explícito que a obra está encerrada **e financeiramente quitada**.

### 9.3 Materiais

- A tabela analítica é o elemento principal.
- Colunas obrigatórias:
  - Data
  - Tipo de movimento
  - Obra
  - Material
  - Quantidade
  - Custo
  - Venda
  - Status de cobrança
- Filtros obrigatórios por busca e status.
- Tipos devem usar os nomes reais do domínio, não apenas "Entrada" e "Saída".
- Um resumo financeiro no topo é permitido para gestor/operacional, mas não substitui a tabela.
- No mobile, cada item mostra material, obra, quantidade, custo/venda e status em bloco legível.

### 9.4 Lançamento

Campos obrigatórios:

- Obra
- Tipo
- Material
- Unidade
- Quantidade
- Custo unitário
- Valor de venda unitário
- Prestador
- Origem
- Destino
- Status de cobrança
- Evidência/observação

Comportamento:

- Exibir somente combinações de campos coerentes com o tipo selecionado, sem remover acesso a dados necessários.
- Validar no momento certo; não interromper a digitação com mensagens prematuras.
- Preservar valores quando o usuário volta a uma etapa anterior.
- No mobile, favorecer teclado numérico em quantidade e valores.

### 9.5 Auditoria

- Busca e filtros por período, usuário, obra, tipo de ação e resultado.
- Regras aplicadas em seção própria.
- Histórico em ordem decrescente, com opção de expandir detalhes.
- Exportação só aparece se realmente disponível.
- Nunca afirmar "imutável" ou "à prova de alteração" se essa garantia não existir no backend.

---

## 10. Permissões e privacidade visual

### Gestor/dono

- Acesso aos KPIs financeiros globais, custo, venda, margem e carteira pendente.
- Acesso integral à auditoria conforme regra do produto.

### Operacional

- Acesso a obras, materiais e lançamentos necessários ao trabalho.
- Métricas financeiras conforme permissão configurada.

### Prestador de campo

- Experiência prioritariamente mobile.
- Visualiza apenas obras e lançamentos do próprio escopo.
- Não visualiza carteira financeira global, margem consolidada ou obras não atribuídas.
- A tela inicial pode abrir diretamente em **Novo lançamento** ou **Meus lançamentos**.

> Ocultar dados apenas na interface não é segurança. A API e as consultas também devem aplicar as permissões.

---

## 11. Formatação e linguagem

### Valores

- Moeda: `R$ 185.630,40`.
- Percentual: `33,2%`.
- Quantidade: `1.250 un`, `32,5 m`, `8 m²`.
- Data: `31/05/2026`.
- Data e hora na auditoria: `31/05/2026 09:41`.

### Texto de interface

- Tom direto, profissional e humano.
- Botões começam com verbo: "Salvar lançamento", "Adicionar obra", "Limpar filtros".
- Mensagens de erro explicam como corrigir.
- Evitar termos vagos como "Algo deu errado" quando o motivo for conhecido.
- Manter exatamente os nomes canônicos dos estados:
  **Pendente, Cobrado, Não cobrável, Incompleto**.

### Exemplos

- Vazio: "Nenhum material pendente neste período."
- Erro de validação: "Informe a quantidade para salvar o lançamento."
- Sucesso: "Lançamento salvo e vinculado à obra OBR-031."
- Sem permissão: "Você não tem acesso aos valores financeiros desta obra."

---

## 12. Acessibilidade

- Alvo mínimo: **WCAG 2.2 AA**.
- Contraste mínimo de 4,5:1 para texto comum.
- Foco sempre visível.
- Toda ação acessível por teclado.
- Área de toque mínima de 44 × 44 px.
- Status nunca comunicado apenas por cor.
- Inputs possuem `label`, descrição e mensagem de erro associadas.
- Tabelas usam cabeçalhos semânticos e nomes acessíveis para ordenação.
- Mudanças de status e salvamento são anunciadas por região `aria-live` adequada.
- Respeitar zoom de 200% sem perda de função.
- Não bloquear rotação ou aumento de fonte no mobile.

---

## 13. Arquitetura de componentes sugerida

```text
AppShell
├── SideNav
├── TopBar
├── MobileAppBar
├── MobileBottomNav
└── PageContainer

DataDisplay
├── MetricCard
├── StatusBadge
├── DataTable
├── MobileRecordList
├── EmptyState
├── Pagination
└── AuditTimeline

Controls
├── Button
├── IconButton
├── TextField
├── CurrencyField
├── QuantityField
├── SelectField
├── SearchField
├── DateRangePicker
├── FilterBar
├── Tabs
└── FileUpload

Domain
├── PendingMaterialsTable
├── IncompleteLaunchPanel
├── KanbanBoard
├── KanbanColumn
├── WorkCard
├── MaterialMovementRow
├── MovementTypeSelector
├── MovementForm
├── BusinessRuleCard
└── AuditEventRow
```

Todos os componentes devem consumir tokens. Hexadecimal, raio e sombra não devem ser repetidos diretamente dentro das páginas.

---

## 14. O que não fazer

- Não transformar todos os cards em roxo.
- Não usar gradientes em tabelas, formulários ou áreas densas de dados.
- Não criar gráficos decorativos quando uma tabela responde melhor.
- Não usar sombras pesadas em todos os elementos.
- Não reduzir texto para caber mais colunas.
- Não exibir kanban desktop espremido no celular.
- Não ocultar ações importantes dentro de menus sem necessidade.
- Não introduzir novos estados, prioridades ou módulos sem regra de negócio.
- Não mostrar dados financeiros bloqueados como borrados ou mascarados; simplesmente não os renderizar.
- Não usar placeholder como única instrução do campo.

---

## 15. Checklist de aceite

- [ ] O roxo principal é `#5D23AB`.
- [ ] O logo mantém proporção e área de proteção.
- [ ] Os quatro estados usam os tokens semânticos definidos.
- [ ] "Materiais a cobrar" tem maior prioridade no Painel.
- [ ] Tabelas financeiras alinham números à direita e usam numerais tabulares.
- [ ] O kanban mantém cards legíveis e rolagem horizontal quando necessário.
- [ ] O mobile converte tabelas em listas e kanban em fluxo por etapa.
- [ ] O formulário mobile possui ação de salvar sticky.
- [ ] Prestador de campo não recebe dados financeiros globais.
- [ ] Todos os estados de loading, vazio, erro e sem permissão foram implementados.
- [ ] Foco, teclado, contraste e áreas de toque atendem acessibilidade.
- [ ] Nenhum módulo ou dado não previsto foi inventado.