# v2.0 — Redesign visual completo

## O que há de novo

Todo o visual do sistema foi reprojetado usando o skill `impeccable`, partindo de um mockup
(artifact) aprovado pelo usuário sobre a tela de Retenção. A direção foi levada para o projeto
real inteiro: as 4 áreas (Comercial/Suporte/Financeiro/Retenção), Modo TV, modo Individual,
Análise de Intenção, login e a tela de avaliação detalhada.

### Decisão de arquitetura
- **Tailwind CDN e Chart.js continuam** — nada foi arrancado. Por cima, um novo arquivo
  `public/css/design-tokens.css` define um sistema de **tokens CSS (custom properties)**: cores
  em OKLCH (com equivalentes hex pros lugares que Canvas exige, ver abaixo), tipografia (sans do
  sistema pra UI + monoespaçada pra números/dados), raio de borda e sombra padronizados, e um
  conjunto de classes de componente (`.card`, `.kpi`, `.btn`, `.segmented`, `.rank-card`,
  `.dist-bar`, `.note-chip`, `.data-table`, `.rail-card`, `.intro-card`, `.word-chip` etc.).
- **Modo TV deixou de ser `!important` por nome de classe Tailwind** (`body.modo-tv .bg-white {…
  !important }`, ~50 linhas frágeis, amarradas a classes específicas) e virou **reatribuição de
  tokens** em `body.modo-tv { --bg: …; --surface: …; }`. Qualquer componente novo estilizado com
  `var(--token)` já funciona nos dois modos automaticamente — não precisa de override extra.
- **Canvas (Chart.js) não lê `var()`/`oklch()`** — para os 4 gráficos e as animações de barra, o
  JS resolve as cores via `getComputedStyle(document.body)` (função `cssVar()`), lendo tokens
  hex dedicados (`--accent-hex`, `--success-hex`, `--ink-muted-hex` etc., com equivalentes no
  Modo TV). `document.body` foi escolhido de propósito (não `document.documentElement`), porque
  é onde a classe `modo-tv` fica.
- **Ranking (`dashboard.php`)**: os antigos "5 caixinhas" de nota por atendente viraram uma
  **barra de distribuição proporcional única** (`.dist-bar`/`.dist-legend`). Isso exigiu ajustar
  `ordenarRanking()` (o seletor do badge de posição mudou de `.w-8.h-8` pra `.place`) —
  `recalcularCriticos()` e `toggleNotaCritica()` continuam intactos (mesmos nomes de
  `data-*`/classes, só trocou o CSS por trás).
- **Nota em chip de 5 níveis** (`.note-1`…`.note-5`) substituiu o esquema de 3 faixas
  (verde/amarelo/vermelho) que existia na tabela — mesma lógica usada em toda parte agora
  (Banco de Atendimentos, Alertas Críticos).

### Arquivos alterados
- `public/css/design-tokens.css` — **novo**. Fonte única dos tokens e componentes.
- `public/dashboard.php` — navbar, filtros, KPIs, ranking, Diagnóstico de IA, grade de gráficos
  (chrome + Chart.js), heatmap, Banco de Atendimentos, painel de Alertas Críticos. `mostrarToast()`
  também foi migrada (achada na revisão final, tinha ficado pra trás na primeira leva).
- `public/api/atualizar-banco-atendimentos.php` — mesmo `data-table`/`note-chip`/paginação do
  dashboard, pra não haver "flash" de estilo antigo ao clicar Atualizar/ordenar/paginar.
- `public/keywords.php` — navbar, cards de introdução, filtros, bloco de resultados (barras por
  categoria + chips de palavra — preservada a técnica `cor + '1a'` de alpha-hex), gestão de
  categorias/palavras (HTML estático **e** os templates JS `render()`/`renderCategorias()`).
- `public/index.php` — tela de login redesenhada (mesma paleta, sem gradientes).
- `public/avaliacao-detalhada.php` — página inteira é montada em runtime via JS a partir do
  `sessionStorage` (`data-field`/`data-section`/`data-summary`); o shell PHP **e** todos os
  templates JS (`basicInfoHtml`, `partsHtml`, `detailsHtml`, `criteriosHtml`, bolhas de chat em
  `renderizarConversa()`) foram migrados juntos, mantendo os atributos `data-*` intactos.

### Deliberadamente fora de escopo
- **Modal/accordion legado** em `dashboard.php` (`openModal()`, `.accordion-*`, `showDetail()`) —
  indícios fortes de que é código morto (as linhas da tabela navegam via `irParaDetalhes()` pra
  `avaliacao-detalhada.php`, não abrem esse modal). Não restilizado pra não gastar esforço em
  código possivelmente não usado.
- **`atendimento-detail.php`** — usa `Atendimento::getById()`, o Model MySQL órfão já documentado
  em §7 (tabela não alimentada em produção). Não mostra dado real; não vale restilizar.
- **`diag-ia.php`** — ferramenta de debug temporária, o próprio arquivo diz "APAGUE após usar".
- **`public/api/insights.php`** (conteúdo do Diagnóstico de IA) — usa só classes neutras
  (`text-gray-700` etc.), sem cards/backgrounds coloridos que colidissem; e só aparece no Modo
  Monitor (claro), nunca no Modo TV — sem risco de ilegibilidade, não precisou de mudança.

### Verificação
Sem PHP local — verificação foi: (1) contagem de tags balanceada (`<div>`, `<table>`, `<tr>`,
`<td>/<th>`, `<span>`) em todos os arquivos editados, (2) grep por classes antigas remanescentes
(`bg-white`, `shadow-sm`, `text-gray-*`, `border-l-4` etc.) — limpo em todos exceto os pontos
fora de escopo acima, (3) leitura completa de cada arquivo antes de editar pra mapear os pontos
onde JS depende de seletor estrutural/classe (não `id`), evitando quebrar `ordenarRanking`,
`recalcularCriticos`, `toggleNotaCritica`, o CRUD de `keywords.php` e a leitura de
`sessionStorage` em `avaliacao-detalhada.php`.

**Ainda falta testar ao vivo** (upload via FileZilla): todas as telas, os dois temas (claro/Modo
TV), CRUD de categorias/palavras, abrir uma avaliação detalhada com conversa real.

## Histórico de versões
- v1.7 — Análise de Intenção por Palavras-Chave (Fase 1) + tela de gestão
- v1.8 — Análise de Intenção em página dedicada + filtros próprios, cobertura, chips coloridos e gestão de categorias
- v1.9 — Novo contexto Retenção (4ª área) com planilha própria
- v2.0 — Redesign visual completo (tokens, Modo TV via tokens, 5 páginas migradas)

## Data
2026-07-27