Aplicar o Design System Propek v4.2 em todas as telas do CRM v2 (tipografia, cores, espacamento, componentes), implementar suporte a dark mode e garantir responsividade basica para os atendentes usarem em desktop e tablet.
ACCEPTANCE CRITERIA (0/20)
☐ AC1: Leitura do DS v4.2 completa antes de iniciar — extrair tokens de cor, tipografia, espacamento e componentes do arquivo `/design-system/propek-design-system-v4.2.html`
☐ AC2: Tipografia aplicada conforme DS v4.2: Poppins (headings e labels), Open Sans (corpo de texto), JetBrains Mono (numeros/dados tecnicos como IDs, valores, codigos de tracking)
☐ AC3: Paleta de cores do DS v4.2 aplicada — cor primaria Propek (azul/verde conforme DS), cores de status semantico (success, warning, error, info) alinhadas com os tokens do DS
☐ AC4: Componentes `badge.tsx`, `metric-card.tsx`, `deal-card.tsx`, `queue-card.tsx` e `follow-up-card.tsx` revisados para usar tokens do DS v4.2
☐ AC5: Sidebar e Topbar revisados com o estilo visual do DS v4.2 (espacamento, fontes, cores de hover e ativo)
☐ AC6: Estados de SLA (green/yellow/red) usam as cores de status do DS v4.2 (nao amarelo/vermelho hardcoded do Tailwind)
☐ AC7: Dark mode implementado via Tailwind CSS `dark:` classes — toggle no topbar (icone sol/lua)
☐ AC8: Preferencia de dark/light persistida em localStorage
☐ AC9: Todas as telas funcionam em dark mode: Minha Fila, Pipeline, Ficha 360, Conversas, Dashboard
☐ AC10: Cores do DS v4.2 para dark mode aplicadas (verificar se o DS define variantes dark — se nao, usar escala de cinzas adequada)
☐ AC11: Layout funciona em desktop (1280px+) — breakpoint primario
☐ AC12: Layout funciona em tablet (768px-1279px) — sidebar colapsavel com hamburguer menu
☐ AC13: Tela Minha Fila funcional em 768px: secoes empilhadas verticalmente, sem scroll horizontal
☐ AC14: Pipeline Kanban em 768px: scroll horizontal nas colunas (nao colapsar — drag-and-drop precisa de visibilidade)
☐ AC15: Ficha 360 em 768px: cabecalho compacto, secoes em accordion expandivel
☐ AC16: Componente `sla-indicator.tsx` criado — exibe indicador visual de SLA (ponto colorido + label) usando cores do DS
☐ AC17: Componente `search-input.tsx` criado — input de busca com debounce de 300ms e icone de lupa (Lucide `Search`)
☐ AC18: Todos os estados vazios (`empty-state.tsx`) com ilustracao ou icone relevante e mensagem amigavel
☐ AC19: Verificar visualmente todas as 6 rotas apos polish: `/`, `/pipeline`, `/clientes`, `/clientes/:id`, `/conversations`, `/dashboard`
☐ AC20: Nenhuma fonte, cor ou espacamento que contradiga o DS v4.2 permanece nas telas