Componentes do estilo.css

Tudo vem de tokens — nunca cores literais, porque o painel troca de tema. Classes em português, como o restante do código.

Tokens de cor

--primary --primaryDark --secondary --primaryLight --accent2 --success --danger --escuro

Regra: telas claras usam --primary como ação; telas de câmera usam --secondary (o --primary some no escuro).

Tipografia

Título — Nunito 800 (--font-display)

Corpo — Nunito 400 (--font-body), 15px/1.55.

Rótulo de seção — 10px · caixa alta · 1.5px (.rotulo-secao)

Botões

.btn + variante · raio 10px, peso 600 · em (pointer: coarse) tudo sobe para 44px de altura.

Selos de estado

Neutro Alvo compilado Qualidade baixa Rastreio perdido Gravando

Estado nunca só por cor: o ponto acompanha o texto. Em HUD use .estado-rastreio[data-estado].

Campos

Posição X

Ação ao tocar

Todo campo com <label> — sem exceção. Foco: anel 2px --secondary via :focus-visible.

Moldura do alvo e retícula

Os quatro cantos dizem “isto a câmera reconhece” sem texto — o mesmo desenho aparece na retícula de busca do visualizador (.reticula) e em volta do alvo no editor (.moldura-alvo). Um símbolo, um significado, nas duas pontas do fluxo.

Componentes de HUD (telas de câmera)

Alvo rastreado Procurando…

.hud usa rgba(0,0,0,.6) + borda clara — sem vidro fosco. Encoste tudo em env(safe-area-inset-*).

Lista de peças

VVídeo de boas-vindasfora
BBotão WhatsAppfora
IFoto de propostas

Seleção: fundo --primaryLight + borda --secondary (não só cor: a linha ganha borda e o ícone muda). O selo “fora” marca peças posicionadas além do papel.

Métricas e log

29,4FPS 1,2 sCompilação

[12:04:02] ✓ 412 pontos extraídos
[12:04:02] ! região inferior fraca

Padrões do painel

FPS médio

1ª detecção

0,8 s

Alvos ativos

AdministradorSuper admin

.cartao-metrica (acento: .cor-secundaria / .cor-ambar / .cor-info / .cor-perigo) · .abas > .aba · .lateral > .lateral-item · .chip-usuario · .cabecalho-pagina