feat: comprehensive design system overhaul

Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
2026-06-23 16:58:12 +00:00
parent cf720c37a1
commit 12d419de7c
113 changed files with 52423 additions and 951 deletions
@@ -0,0 +1,252 @@
+---
+name: Chatc2
+description: Plataforma de atendimento omnichannel — ágil, moderna, centrada no operador.
+colors:
+  indigo-funcional: "#667eea"
+  indigo-profundo: "#5a67d8"
+  violeta-apoio: "#764ba2"
+  meia-noite-inicio: "#1e1b4b"
+  meia-noite-fim: "#312e81"
+  papel-limpo: "#ffffff"
+  papel-suave: "#f9fafb"
+  papel-frio: "#f3f4f6"
+  grafite: "#111827"
+  grafite-medio: "#374151"
+  grafite-suave: "#6b7280"
+  cinza-nevoa: "#9ca3af"
+  borda-padrao: "#e5e7eb"
+  verde-confirma: "#059669"
+  verde-confirma-bg: "#d1fae5"
+  verde-confirma-texto: "#065f46"
+  vermelho-alerta: "#ef4444"
+  vermelho-alerta-bg: "#fef2f2"
+  vermelho-alerta-texto: "#991b1b"
+  ambar-aviso: "#f59e0b"
+  ambar-aviso-bg: "#fef3c7"
+  ambar-aviso-texto: "#92400e"
+  verde-whatsapp: "#25d366"
+  verde-whatsapp-hover: "#22c55e"
+  bolha-agente: "#dcf8c6"
+  bolha-privada-bg: "#fef9c3"
+  bolha-privada-borda: "#fde047"
+  bolha-privada-texto: "#854d0e"
+  chat-wallpaper: "#e5ddd5"
+  violeta-tab: "#a78bfa"
+  violeta-suave-bg: "#ede9fe"
+  violeta-suave-texto: "#5b21b6"
+  vermelho-hover: "#dc2626"
+  cinza-borda-hover: "#d1d5db"
+typography:
+  body:
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
+    fontSize: "14px"
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: "normal"
+  display:
+    fontFamily: "inherit"
+    fontSize: "24px"
+    fontWeight: 800
+    lineHeight: 1.2
+    letterSpacing: "-0.5px"
+  title:
+    fontFamily: "inherit"
+    fontSize: "17px"
+    fontWeight: 700
+    lineHeight: 1.3
+    letterSpacing: "-0.2px"
+  label:
+    fontFamily: "inherit"
+    fontSize: "11px"
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: "0.06em"
+rounded:
+  xs: "4px"
+  sm: "6px"
+  md: "8px"
+  lg: "12px"
+  xl: "16px"
+  pill: "9999px"
+spacing:
+  xs: "4px"
+  sm: "8px"
+  md: "12px"
+  lg: "16px"
+  xl: "24px"
+components:
+  button-primary:
+    backgroundColor: "{colors.indigo-funcional}"
+    textColor: "{colors.papel-limpo}"
+    rounded: "{rounded.md}"
+    padding: "9px 18px"
+  button-primary-hover:
+    backgroundColor: "{colors.indigo-profundo}"
+    textColor: "{colors.papel-limpo}"
+    rounded: "{rounded.md}"
+  button-secondary:
+    backgroundColor: "{colors.papel-limpo}"
+    textColor: "{colors.grafite-medio}"
+    rounded: "{rounded.md}"
+    padding: "9px 18px"
+  card:
+    backgroundColor: "{colors.papel-limpo}"
+    rounded: "{rounded.lg}"
+    padding: "24px"
+  input-text:
+    backgroundColor: "{colors.papel-suave}"
+    textColor: "{colors.grafite}"
+    rounded: "{rounded.md}"
+    padding: "10px 14px"
+---
+
+# Design System: Chatc2
+
+## 1. Overview
+
+**Creative North Star: "O Terminal Humanizado"**
+
+O Chatc2 é um terminal funcional — preciso, confiável, sem firulas — mas que não esquece que do outro lado da tela há uma pessoa. A interface respira. Curvas suaves (`6px`–`16px`) substituem cantos duros de terminal. O espaço entre elementos é generoso o suficiente para não cansar, mas econômico o bastante para manter densidade de informação. Toques de índigo funcional guiam o olhar sem gritar. O sidebar noturno (`#1e1b4b` → `#312e81`) ancora a experiência com profundidade, como um painel de comando que nunca apaga.
+
+O sistema rejeita explicitamente a poluição visual e a ambiguidade. Cada estado tem feedback imediato. Cada cor tem um porquê. Cada pixel de sombra existe para hierarquia, não por decoração.
+
+**Key Characteristics:**
+- Paleta enxuta: um acento índigo + violeta de apoio + neutros limpos. Sem cores decorativas.
+- Dark mode como cidadão de primeira classe, não adaptação tardia.
+- Sombras leves — o suficiente para destacar superfícies, nunca para pesar.
+- Tipografia de sistema: rápida, nativa, zero latência de carregamento.
+- Componentes táteis que respondem ao toque e ao hover com confiança.
+
+## 2. Colors
+
+A paleta do Chatc2 é funcional e direta. Um índigo funcional (`#667eea`) carrega a identidade — aparece em botões primários, links, foco de inputs e ações principais. Um violeta de apoio (`#764ba2`) complementa em gradientes e momentos de destaque visual. Tudo o mais são neutros limpos e semânticos de estado.
+
+### Primary
+- **Índigo funcional** (`#667eea`): Ação primária. Botões principais, links, borda de foco em inputs, elementos de navegação ativos. O acento que diz "aqui se faz".
+- **Índigo profundo** (`#5a67d8`): Estado hover/ativo do primário. Nunca usado sozinho; sempre como resposta ao toque.
+
+### Secondary
+- **Violeta de apoio** (`#764ba2`): Gradientes decorativos (login, sidebar em mobile), complemento do primário. Uso estritamente em contextos de identidade visual, nunca em elementos interativos isolados.
+- **Meia-noite início** (`#1e1b4b`) / **Meia-noite fim** (`#312e81`): Degradê do sidebar esquerdo. Âncora visual escura que contrasta com o canvas claro. Não usar essas cores fora do sidebar.
+
+### Neutral
+- **Papel limpo** (`#ffffff`): Fundo de cards e superfícies elevadas.
+- **Papel suave** (`#f9fafb`): Fundo de inputs e áreas secundárias.
+- **Papel frio** (`#f3f4f6`): Fundo do corpo da página. O canvas base.
+- **Borda padrão** (`#e5e7eb`): Bordas de inputs, separadores de tabela, delimitação de cards.
+- **Grafite** (`#111827`): Texto primário. Máximo contraste para leitura.
+- **Grafite médio** (`#374151`): Texto secundário e rótulos.
+- **Grafite suave** (`#6b7280`): Texto terciário, placeholders, metadados.
+- **Cinza névoa** (`#9ca3af`): Texto desabilitado, ícones inativos, estados vazios.
+
+### Semantic
+- **Verde confirma** (`#059669`): Sucesso, status online, ações concluídas. Fundo `verde-confirma-bg` (`#d1fae5`), texto `verde-confirma-texto` (`#065f46`).
+- **Vermelho alerta** (`#ef4444`): Erro, perigo, exclusão. Fundo `vermelho-alerta-bg` (`#fef2f2`), texto `vermelho-alerta-texto` (`#991b1b`). Hover `vermelho-hover` (`#dc2626`).
+- **Âmbar aviso** (`#f59e0b`): Atenção, pendência. Fundo `ambar-aviso-bg` (`#fef3c7`), texto `ambar-aviso-texto` (`#92400e`).
+
+### Chat
+- **Verde WhatsApp** (`#25d366`): Botão de envio do chat. Referência direta ao mensageiro. Hover `verde-whatsapp-hover` (`#22c55e`).
+- **Bolha agente** (`#dcf8c6`): Fundo da bolha de mensagem do atendente. Contraste com o branco do cliente para identificação instantânea.
+- **Bolha privada fundo** (`#fef9c3`) / **borda** (`#fde047`) / **texto** (`#854d0e`): Trio semântico para mensagens privadas entre atendentes.
+- **Chat wallpaper** (`#e5ddd5`): Fundo texturizado da área de mensagens. Padrão sutil que evoca familiaridade sem poluir.
+- **Violeta tab** (`#a78bfa`): Indicador de tab ativa na sidebar esquerda. Única cor saturada no painel noturno.
+- **Violeta suave bg** (`#ede9fe`) / **texto** (`#5b21b6`): Tags de empresa e badges de categoria.
+- **Cinza borda hover** (`#d1d5db`): Escurecimento sutil de bordas ao hover em botões secundários.
+
+### Named Rules
+**The One Voice Rule.** O índigo funcional ocupa ≤10% de qualquer tela. Sua raridade é o ponto. Se tudo é índigo, nada é importante.
+
+**The Semantic Triplet Rule.** Estados (sucesso, erro, aviso) sempre usam o trio completo: cor de destaque + fundo claro + texto escuro. Nunca usar a cor de destaque como fundo de texto corrido.
+
+## 3. Typography
+
+**Font:** Sistema nativo (`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif`). Mono: `'SF Mono', 'Cascadia Code', Monaco, monospace` (tokens, código, dados técnicos).
+
+**Character:** Limpa, nativa, invisível. A tipografia não compete com o conteúdo. O sistema entrega o que o OS oferece de melhor, sem dependências externas, com renderização instantânea e zero FOIT.
+
+### Hierarchy
+- **Display** (800, `24px`, 1.2): Título da página de login. Único momento de grandeza tipográfica. Nunca em telas internas.
+- **Title** (700, `17px`, 1.3, `-0.2px`): Título da topbar. Cabeçalho de seção principal.
+- **Body** (400, `14px`, 1.5): Texto corrido, labels de formulário, conteúdo de mensagens, células de tabela. Largura máxima de linha: ~75 caracteres quando aplicável.
+- **Label** (600, `11px`, 1.4, `0.06em`, uppercase): Rótulos de navegação (`nav-label`), cabeçalhos de tabela (`th`), metadados. Sempre em caixa alta com tracking expandido.
+
+### Named Rules
+**The Native-First Rule.** Nunca importar webfonts. O sistema operacional já tem tipografia excelente. Menos uma dependência, menos um ponto de falha, carregamento instantâneo.
+
+**The Weight Discipline Rule.** Apenas três pesos convivem: 400 (corpo), 600 (labels, semibold), 700–800 (títulos). Nunca usar 300, 500 ou 900.
+
+## 4. Elevation
+
+O Chatc2 usa elevação sutil — o suficiente para separar superfícies, nunca para dramatizar. Cards flutuam levemente sobre o fundo; modais se destacam com sobreposição escura e blur. O sidebar noturno é plano (sem sombra) por design: ele é uma âncora fixa, não uma camada flutuante.
+
+### Shadow Vocabulary
+- **Ambient** (`0 1px 3px rgba(0,0,0,0.08)`): Cards estáticos, topbar. A sombra padrão. Mal se nota; está lá só para evitar que a superfície se dissolva no fundo.
+- **Floating** (`0 4px 16px rgba(0,0,0,0.10)`): Elementos que precisam de destaque moderado (ex: previews, dropdowns).
+- **Modal** (`0 20px 60px rgba(0,0,0,0.18)`): Exclusivo para overlays de modal. Sombra pronunciada + `backdrop-filter: blur(4px)` no overlay. A combinação diz "isto está acima de tudo".
+
+### Named Rules
+**The Flat-by-Default Rule.** A superfície base (`papel-frio`) é plana. Sombras aparecem apenas quando um elemento precisa de separação hierárquica — nunca por decoração. Se um card não tem motivo para flutuar, ele não flutua.
+
+**The Radius Discipline Rule.** O sistema usa 6 raios: `xs` (4px, cantos internos e badges), `sm` (6px, logos e elementos compactos), `md` (8px, botões, inputs, labels — o raio de trabalho padrão), `lg` (12px, cards, bolhas de chat), `xl` (16px, modais e containers principais), `pill` (9999px, elementos totalmente arredondados como botão enviar e avatares). Nenhum outro valor é permitido sem atualizar o DESIGN.md.
+
+**The Dark Mode Elevation Rule.** No dark mode, sombras são abolidas. A diferenciação entre superfícies é 100% tonal (variação de cor de fundo). `box-shadow` em fundo escuro produz halos fantasma; use `background-color` mais claro em vez disso.
+
+## 5. Components
+
+Cada componente do Chatc2 segue a filosofia tátil-e-confiante: bordas visíveis, feedback imediato ao hover/foco, transições rápidas (`150ms ease`). Nada é estático. Tudo responde.
+
+### Buttons
+- **Shape:** Bordas arredondadas (`8px` radius, token `md`). Botão de envio do chat usa `pill` (totalmente redondo, 40px).
+- **Primary:** Fundo `índigo-funcional` (`#667eea`), texto branco. Padding `9px 18px`. Fonte 14px, peso 600. `transition: all 0.15s ease`.
+- **Primary Hover:** Fundo `índigo-profundo` (`#5a67d8`). A transição de cor é o feedback.
+- **Primary Active:** `transform: scale(0.98)`. Resposta tátil imediata.
+- **Send (Chat):** Botão circular `pill`, 40×40px, fundo `verde-whatsapp` (`#25d366`). Hover `verde-whatsapp-hover` (`#22c55e`) + `scale(1.06)`. Referência direta ao mensageiro.
+- **Secondary:** Fundo `papel-limpo` (`#ffffff`), texto `grafite-médio` (`#374151`), borda `1px solid` `borda-padrão` (`#e5e7eb`). Hover escurece o fundo para `papel-suave` (`#f9fafb`), borda `cinza-borda-hover` (`#d1d5db`).
+- **Danger:** Fundo `vermelho-alerta` (`#ef4444`), texto branco. Hover `vermelho-hover` (`#dc2626`). Uso exclusivo em ações destrutivas (excluir, finalizar).
+- **Icon (Chat Input):** Botões circulares `pill`, 36×36px, fundo transparente, cor `grafite-suave` (`#6b7280`). Hover: fundo `papel-frio` (`#f3f4f6`), cor `grafite-médio` (`#374151`). Devem ter `aria-label` descritivo e tooltip.
+- **Disabled:** Opacidade 0.5–0.6, `cursor: not-allowed`. Nunca usar cores apagadas como substituto.
+
+### Inputs / Fields
+- **Style:** Fundo `papel-suave` (`#f9fafb`), borda `2px solid` `borda-padrão` (`#e5e7eb`), radius `md` (`8px`), padding `10px 14px`. Fonte 14px.
+- **Focus:** Borda `índigo-funcional` (`#667eea`), fundo `papel-limpo` (`#ffffff`), `box-shadow: 0 0 0 3px rgba(102,126,234,0.12)`. O ring externo de 3px é a assinatura de foco do Chatc2 — visível, mas nunca agressivo.
+- **Chat textarea:** Exceção visual — radius `pill` para formato de pílula. Fundo branco. Foco borda `índigo-funcional`. Placeholder `cinza-névoa` (`#9ca3af`).
+- **Error:** Borda `vermelho-alerta` (`#ef4444`), fundo `vermelho-alerta-bg` (`#fef2f2`).
+- **Placeholder:** Cor `grafite-suave` (`#6b7280`). Nunca usar cor de placeholder como label substituto.
+
+### Cards
+- **Style:** Fundo `papel-limpo` (`#ffffff`), radius `lg` (`12px`), padding `24px`. Borda `1px solid` `papel-frio` (`#f3f4f6`). Sombra `ambient`.
+- **Card sem borda:** Para layouts internos onde o card já é distinguível por contraste de fundo, a borda pode ser omitida.
+- **Card do Dashboard:** Stats cards têm `border-left: 4px solid` com cor semântica (verde para positivos, vermelho para alertas, índigo para neutros). A faixa lateral é o único ornamento permitido em cards.
+
+### Chat Bubbles
+- **Cliente:** Alinhado à esquerda, fundo branco, borda `1px solid` `papel-frio`. Radius `lg` (`12px`), canto inferior esquerdo `xs` (`4px`). Sombra `ambient`.
+- **Atendente:** Alinhado à direita, fundo `bolha-agente` (`#dcf8c6`). Mesmo radius assimétrico. Sombra `ambient`.
+- **Sistema:** Centralizado, fundo `rgba(255,255,255,0.75)`, texto `grafite-suave` (`#6b7280`), radius `md` (`8px`), itálico.
+- **Privada:** Fundo `bolha-privada-bg` (`#fef9c3`), texto `bolha-privada-texto` (`#854d0e`), borda `1px solid` `bolha-privada-borda` (`#fde047`).
+- **Erro (envio falhou):** Fundo `vermelho-alerta-bg` (`#fef2f2`), borda `1px solid` `vermelho-alerta` (`#ef4444`), ícone ⚠️ + botão "Reenviar". Nunca deixar mensagem desaparecer silenciosamente.
+- **Enviando:** Opacidade 0.6 + spinner pequeno no canto da bolha. Transição para opacidade 1 quando confirmada.
+
+## 6. Do's and Don'ts
+
+### Do:
+- **Do** usar o índigo funcional (`#667eea`) em ≤10% da superfície visível. Ele é um acento, não uma cor de fundo.
+- **Do** garantir que todo estado interativo tenha feedback em ≤150ms (`transition: all 0.15s ease`).
+- **Do** comunicar estado com ícone + cor. Nunca apenas cor. (Ex: badge de status com ícone E cor verde/vermelha.)
+- **Do** usar o trio semântico completo (cor + fundo-claro + texto-escuro) para qualquer indicador de estado.
+- **Do** manter o dark mode com diferenciação tonal (variação de `background-color`), nunca com sombras.
+- **Do** usar `border-left: 4px solid` com cor semântica para destacar stat cards no dashboard. É o único ornamento estrutural permitido.
+- **Do** usar padding mínimo de `24px` em cards, `14px 24px` na topbar. Espaço é funcional — reduz fadiga visual.
+- **Do** preservar a barra lateral noturna (`#1e1b4b` → `#312e81`) em todas as páginas. É a âncora de navegação consistente.
+
+### Don't:
+- **Don't** criar interfaces abarrotadas onde o atendente precise adivinhar onde as coisas estão. Toda ação frequente deve estar a ≤2 cliques de distância.
+- **Don't** usar mais de 3 pesos tipográficos na mesma tela. A disciplina de peso (`400`, `600`, `700–800`) é lei.
+- **Don't** importar webfonts externas. A regra é nativa. Sempre.
+- **Don't** usar sombras em dark mode. Elas viram ruído fantasma em fundos escuros.
+- **Don't** usar cores semânticas como cor de fundo para texto corrido. Vermelho e verde existem para badges e bordas, nunca para pintar parágrafos.
+- **Don't** criar modais sem overlay escuro + blur. O backdrop-filter é parte da hierarquia visual.
+- **Don't** usar border-radius fora da escala documentada (`xs`, `sm`, `md`, `lg`, `xl`, `pill`). Se um novo raio é necessário, ele deve ser adicionado ao DESIGN.md primeiro.
+- **Don't** omitir o ring de foco de 3px em inputs. É a assinatura de acessibilidade do Chatc2. Se o input está em foco, o ring aparece.
+- **Don't** deixar mensagem de chat falhar silenciosamente. Toda bolha que não foi entregue deve mostrar estado de erro com opção "Reenviar".
+- **Don't** usar ícones sem `aria-label` ou texto visível. Botões de ação no chat (📎, 🎤, 🔓) precisam de nomes acessíveis.
+- **Don't** colocar mais de 3 ações visíveis na barra de input do chat. Agrupe ações secundárias atrás de um menu "+".