# ACP Proxima Estrutura Visual (V1)

## Objetivo
Definir a estrutura visual alvo para a nova fase do ACP, mantendo regras de negocio e permissoes atuais, mas modernizando navegacao, hierarquia de informacao e consistencia de componentes.

## Principios de UX/UI
- Clareza primeiro: foco em legibilidade e contraste.
- Menos friccao: reduzir cliques e duplicidade de acoes.
- Consistencia: componentes unicos para estados similares.
- Escalabilidade: sistema preparado para novas rotas sem inline CSS.
- Paridade: experiencia equivalente em desktop e mobile.

## Arquitetura Visual Global
- Shell unico com:
  - Sidebar principal (desktop).
  - Topbar compacta (mobile/tablet).
  - Area de conteudo com largura controlada por container responsivo.
  - Barra de status do servidor com prioridade visual discreta.
- Contexto de area:
  - Player: foco em acoes e saldo/beneficios.
  - Admin: foco em operacao, configuracao e auditoria.

## Navegacao Alvo
- Sidebar por grupos:
  - Dashboard
  - Conta (perfil, seguranca, historicos)
  - Economia (donate, pix, historico, saldo)
  - Engajamento (referral, vote, rewards)
  - Sistemas especiais (lottery, NFT)
- Admin com secao dedicada:
  - Operacao diaria (payments, accounts, characters)
  - Configuracoes (settings, vote, security)
  - Campanhas/sistemas (lottery, referral, donate-items)
- Estados de menu:
  - `default`, `hover`, `active`, `disabled`, `has-notification`.

## Biblioteca de Componentes (Base)
- Estruturais: `page-header`, `section-card`, `stats-grid`, `content-panel`.
- Dados: `table-modern`, `data-list`, `timeline`, `badge-modern`.
- Entrada: `form-control`, `input-group`, `select`, `checkbox`, `switch`.
- Acoes: `btn-primary`, `btn-secondary`, `btn-danger`, `btn-ghost`.
- Feedback: `alert-*`, `toast`, `empty-state`, `progress-bar`.
- Overlay: `modal-*`, `dropdown-*`, `tooltip`.

## Tokens e Temas
- Tokens obrigatorios:
  - Cor (`--primary`, `--foreground`, `--text-secondary`, `--success`, `--warning`, `--danger`)
  - Espacamento (escala 4/8/12/16/24/32)
  - Radius (8/12/16)
  - Sombra (sm/md/lg)
  - Tipografia (`Cinzel` para titulo, `Lato` para leitura)
- Tema inicial:
  - Base escura premium (mantida), com contraste reforcado em formularios e tabelas.

## Padroes por Tipo de Tela
- Dashboard: cards de KPI + atalhos + eventos recentes.
- Listagens: filtros no topo, tabela padronizada, acoes por linha.
- Formularios: agrupamento por secoes, ajuda contextual, validacao visual.
- Fluxos financeiros: destaque de valor, status e trilha de aprovacao.
- Modais: cabecalho semantico, corpo com campos consistentes, CTA claro.

## Comportamento Responsivo
- Breakpoints:
  - `>=1200`: layout completo
  - `992-1199`: compacto
  - `768-991`: navegacao colapsada
  - `<768`: foco em fluxo vertical
- Prioridades mobile:
  - Acoes principais no topo.
  - Tabelas com scroll horizontal controlado.
  - Cards com informacao essencial primeiro.

## Acessibilidade Minima
- Foco visivel em todos controles.
- Contraste AA para textos principais.
- Labels explicitos em campos e icones com texto de apoio.
- Estados `disabled/loading/error/success` padronizados.

## Plano de Implementacao Visual
1. Consolidar componentes base no `rebuild/components.css`.
2. Aplicar novo shell global (sidebar/topbar/headers).
3. Migrar telas player de maior uso (dashboard, donate, referral, lottery).
4. Migrar telas admin por grupo funcional.
5. Rodada final de polimento visual + QA de regressao.

## Criterios de Pronto para Entrar em Implementacao
- Sem blocos `<style>` nas views priorizadas.
- Inline `style=""` apenas quando dinamico e inevitavel.
- Componentes comuns sem duplicacao entre rotas.
- Checklist de regressao executado em player e admin.
