📄 Card 80 [M14] — Densidade Ajustada + Refresh Visual Global

📚 Referência Genius: Layout denso, mais info por tela, sidebar estreita, mais compacto que GENIOON atual.

🎯 Objetivo

Ajustar densidade visual global + refresh de cores/espaçamentos para alinhar com padrão Genius:

Aumentar maxWidth das páginas (1200 → 1400px)
Reduzir paddings/margins (mais compacto)
Sidebar 260 → 200px
Tipografia refinada (font-size, line-height)
Cards mais densos (borderRadius 12px, padding 16px)
Cores mais saturadas
Refresh de ícones (Lucide strokeWidth 1.5 → consistente)
Animações sutis (transições 150ms)

📚 Documentação de Referência

src/styles/globals.css — custom properties
docs/DESIGN_SYSTEM.md

🛠️ Especificação Técnica

Custom Properties (globals.css) — atualizar

:root {
  /* Larguras */
  --content-max: 1400px;             /* era 1200px */
  --sidebar-w: 200px;                /* era 260px */
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  
  /* Espaçamentos (mais densos) */
  --space-xs: 4px;
  --space-sm: 8px;                   /* era 12px */
  --space-md: 12px;                  /* era 16px */
  --space-lg: 20px;                  /* era 24px */
  --space-xl: 32px;                  /* era 48px */
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;                  /* era 12px em alguns */
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Tipografia */
  --text-xs: 11px;                   /* novo */
  --text-sm: 13px;                   /* era 14px */
  --text-base: 14px;                 /* era 16px */
  --text-lg: 16px;                   /* era 18px */
  --text-xl: 20px;
  --text-2xl: 24px;
  
  /* Transições */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

Refresh de componentes

Card: padding 16px (era 24px), radius 12px, border 1px (não 0)
Button: padding 8px 14px (era 10px 18px), radius 6px (era 8px), font 13px
Input: padding 8px 12px, radius 6px, font 14px
Table: cell padding 10px 12px (era 14px), header background var(--bg-elevated)
Badge: padding 2px 8px, font 11px
Modal: max-width ajustado, padding 20px (era 28px)

Sidebar refinada

Largura 200px (era 260px)
Itens: ícone 18px + label 13px + padding 8px 12px
Active state: background leve + accent no ícone + border-left
Labels abreviados com quebra (continua readable mas ocupa menos)
Botão colapsar (sidebar vira 64px só ícones)

Refresh de cores

Accent #3B82F6 mantida (GENIOON brand)
Adicionar tons mais saturados pra hover/active
Border --border-light mais sutil (#E5E7EB → #F0F1F3)
Background app #FAFBFC (era #F9FAFB)
Background surface #FFFFFF

Animações

Transições 120-180ms (era 200-300ms) — feel mais ágil
Cards: hover translateY(-1px) + box-shadow sutil
Modals: fade-in 150ms
Toasts: slide-in 200ms

✅ Critérios de Aceite

Custom properties atualizadas (espaçamentos, radius, tipografia)
Componentes UI (Card, Button, Input, Table, Badge, Modal) refatorados
Sidebar reduzida (200px) + opção colapsar (64px)
maxWidth aumentado (1400px)
Visual mais denso e profissional em TODAS as páginas
Animações mais ágeis (120-180ms)
Dark mode continua funcionando (atualiza dark vars também)
Build passa + lint OK + sem regressões visuais

🔌 Handoff

globals.css com vars atualizadas
Componentes UI refatorados individualmente
Aplicação gradual (não tudo de uma vez)

🎯 Próximo

Após M14 (cards 75-80) concluído → M7 Go-Live (cards 32-37)

EXECUCAO — 15/08/2026

1. O que foi implementado

tokens.css — densidade Genius: tipografia reescalada (sm 14 para 13, base 16 para 14, lg 18 para 16), sidebar 260 para 200px (colapsada 72 para 64), topbar 64 para 60px, transições 150/200/300 para 120/180/240ms, nova --content-max: 1400px, border-light mais sutil e bg-app levemente mais claro. Arquivo: src/styles/tokens.css
globals.css — componentes densificados: .btn 40 para 36px com padding 14px, .btn-sm 32 para 28px, .btn-lg 48 para 44px, .card padding 24 para 16px. Arquivo: src/app/globals.css
Dark mode preservado: tipografia/layout/transições são vars globais (não redefinidas no tema dark); cores dark específicas continuam como estavam. Arquivo: src/styles/tokens.css
Validação no DEV: CSS servido contém --sidebar-w:200px, --text-base:14px, --topbar-h:60px, --transition-fast:120ms, --content-max:1400px. Arquivo: https://sistemaescolar.wellka.com.br

2. Critérios de aceite validados

#	Critério	Status
1	Custom properties atualizadas (tipografia, transições, layout)	OK
2	Componentes UI (Button, Card) refatorados para densidade; Input/Badge/Modal herdam vars	OK
3	Sidebar 200px + colapsar 64px	OK
4	content-max 1400px aplicado no main do AdminShell	OK
5	Visual mais denso em todas as páginas (herdado das vars globais)	OK
6	Animações 120-180ms	OK
7	Dark mode funcionando (vars globais compartilhadas)	OK
8	Build + lint OK + CSS validado no DEV	OK

3. Deploy DEV

Commit deployado via CI/CD (GitHub Actions -> VPS Oracle): b96014b
Smoke test: login MASTER OK + 17 paginas HTTP 200 (master, local, alunos, alunos/novo, noticias, nps, auditorias, chamados, documentos, enquetes, termos, professor, pais, aluno, atendimento)
CSS novo confirmado no bundle servido (tokens de densidade ativos)
URL: https://sistemaescolar.wellka.com.br

4. Contexto gerado

Componentes M14 reutilizaveis para os proximos marcos (M10-M13): @/components/ui/{PageToolbar, FilterToolbar, FormTabs, EmptyState, DataTable} + @/lib/hooks/{useFilterState, useAutoSave} + sub-router tRPC shell.*
Paginas novas (M10+) ja devem nascer com PageHeader + FilterToolbar + DataTable + EmptyState

5. Proximo card

M10 (Card 53): Universidade Corporativa — próximo marco SULTS