# Padrões de tela — receitas prontas

Receitas das telas típicas do LPH, com a estrutura e os padrões-chave de cada uma.
Use junto com `assets/screen-template.html` (shell), `assets/components.html`
(componentes), `assets/charts.html` (gráficos) e `assets/email-template.html`
(e-mail). Protótipos vivos de referência podem existir no projeto do usuário
(`lph-*.html` na raiz de "LPH - OS") — se existirem, copie trechos deles.

## 1 · App-shell padrão (telas de ferramenta)

`assets/screen-template.html`. Topo 54px (logo + "/" + nome da tela + créditos +
ação primária + toggle de tema + avatar) com a **régua espectral** como fio
inferior; lateral 224px com grupos `/ GRUPO` e ativo por **barra Chama de 2px**;
conteúdo com eyebrow → H1 Switzer → `.section` (título + hairline). Colapsos:
duas colunas viram uma <1120px; lateral some <860px.

## 2 · Rail estreito (direção Oráculo)

Para a home e telas de foco: em vez da lateral de 21 itens, um **rail de 60px**
só com ícones — Oráculo (raio) no topo, ~5 zonas (Conversas, Criação, Cockpit,
Contatos, Config), usuário no rodapé.

```css
.rail{width:60px;border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.rail a{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--t3)}
.rail a.on{background:var(--acsoft);color:var(--ac)}
```

## 3 · Home Oráculo (briefing → resposta)

Coluna única centrada (~680px): eyebrow `/ ORÁCULO · data` + **raio vivo** →
saudação editorial (H1 30px) + estado do dia em 1 linha com destaques em `<b>` →
**linha de consulta** (`.ask`: "/" verde-água + input grande + kbd ⌘K) +
sugestões com bullet "/" → painel **briefing** (padrão) → "Próximas ações" →
"O dia em números" (faixa de stats).

**Item de briefing** (o padrão-chave — hora + declaração + ação):
```html
<div class="bi">
  <time>14:32</time>
  <div class="bd">
    <div class="tt"><b>Larissa Souza (Alesco)</b> propôs <b>quinta às 10h</b> — está <span class="hotw">quente</span>.</div>
    <div class="sb">Linha de apoio com o contexto e o que o Oráculo já preparou.</div>
    <div class="acts"><button class="btn-primary">Ação principal</button><button class="lnk mut">Secundária</button></div>
  </div>
</div>
```
O **único `btn-primary` da tela** vai no item mais urgente do briefing.

**Alternância briefing ↔ resposta**: submeter a linha de consulta esconde
`#briefing` e mostra `#resposta` (pergunta ecoada em `.q-echo` verde-água,
resposta editorial em Switzer 20px, visual — ex.: funil — e `oracle-note` com
ação). `Esc` ou "← voltar ao briefing" reverte; `⌘K` foca o input.

## 4 · Caixa de entrada assistida (Conversas — 3 painéis)

Grid `224px | 320px | 1fr | 300px` (lateral · lista · thread · contexto).
Colapsos: contexto some <1280px; lateral some <960px.

- **Lista**: filtros por sublinhado; item com avatar, nome + hora tabular,
  empresa, prévia com glifo do canal + **ponto de temperatura** (`.tdot`);
  não lida = ponto Chama após o nome; ativa = fundo `--s1` + barra Chama.
- **Thread**: divisor de dia (`.day` com hairlines); bolhas — recebida `--s1`
  + hairline; enviada `--acsoft` + borda chama fraca, à direita; **automática**
  = borda tracejada + tag `CADÊNCIA X · PASSO N · AUTOMÁTICO` (mostra o que a
  automação fez, direto na conversa).
- **Resposta sugerida**: `oracle-note` acima do composer com "Usar resposta /
  Editar antes"; composer = canal + assinatura de envio à esquerda, input,
  `btn-primary` Enviar (o único da tela).
- **Contexto do lead**: fit grande em Switzer + temperatura; "Sinais" com
  bullets "/" (quente = Chama, frio = cold); progresso na cadência (barra
  fina); **histórico da automação** como timeline com nós (feito = ok,
  próximo = Chama); "Próximo touch" com botões de canal.

## 5 · Builder de cadência

Duas colunas: **stepper vertical** (400px) + editor do passo.

- Stepper: trilho `border-left` + nós redondos posicionados; cada passo tem
  `D+N · HORA` (tabular), glifo do canal, título e métricas na linha de baixo;
  ativo = nó Chama + wash `--acsoft`; "+ Adicionar passo" com borda tracejada.
- Editor: cabeçalho "Passo N — canal · D+N"; **abas A/B** (sublinhado);
  mensagem com **variáveis** `{{primeiro_nome}}` como chips mono
  (`.var`: fundo `--coolsoft`, texto `--cool2`); assinatura de envio e condição
  de saída como selects; `oracle-note` com insight do passo.
- Rodapé da coluna 1: funil da própria cadência (`.fbar`).

## 6 · Painel de dados

Filtros de período (sublinhado) → faixa de stats → grid `1.5fr 1fr` com gráfico
principal (linha/área) e secundários (barras por canal, empilhada) → heatmap →
tabela com sparklines. **Todo gráfico termina numa leitura do Oráculo** com
ação. Padrões e regras de cor em `assets/charts.html`.

## 7 · Landing / manifesto (capa da marca)

Página de scroll comprometida com o escuro: topo mínimo, **régua espectral como
barra de progresso de leitura**, hero com uma **variante viva do raio**
(`assets/logos/bolt-3d.html`, `bolt-pointcloud.html` ou `bolt-crystal.html`),
contador vivo ("N leads / hora"), manifesto em Switzer 800 revelado no scroll,
CTA magnético. Malha de pontos sutil ao fundo (radial-gradient 1px em máscara).
Sempre `prefers-reduced-motion`.

## 8 · Telas-padrão (auth + sistema) — sempre iguais

Ficam prontas em `assets/auth.html` e **não se reinventam**: **Login** (`#login`),
**Criar conta** (`#signup`), **Recuperar senha** (`#reset`), **Verificação/OTP**
(`#otp`), **Erro/404** (`#erro`) e **Carregando/splash** (`#load`). Copie o bloco
`.scr` da tela desejada.

- **Shell do auth**: split `grid-template-columns:1.02fr .98fr` — painel de marca
  (Azul Noite `#12181c`, malha de pontos + glow, raio d'água, logo em cima,
  manifesto no meio, régua espectral embaixo) + `.form-side` com o `.card` (~384px).
- **Formulário**: `.fld` (label caixa-alta + `.inp` com ícone à esquerda), senha com
  botão mostrar/ocultar (`[data-eye]`), `.rowbetween` (checkbox + link), **um**
  `.btn-primary` full-width, `.divider` "ou", `.sso` (Google/Microsoft), `.altfoot`.
- **OTP**: 6 inputs (`[data-otp]`) com auto-avanço/backspace em JS.
- **Erro/Carregando**: `.scr.solo` (centrado); 404 usa número em gradiente Chama;
  splash usa o raio com `@keyframes pulse` (respeita `prefers-reduced-motion`).
- Dark por padrão, claro via `data-theme`; abaixo de 920px o painel de marca some.

## Gotchas de engenharia (aprendidos em produção)

- **`<use>` deve referenciar o `<path>` direto, nunca `<symbol>`** — symbol
  cria viewport novo e remapeia para 0,0; o path oficial do raio começa em
  (500,480) e some do viewBox.
- **IntersectionObserver falha em webviews/painéis embutidos** — para gatear
  animação de canvas, teste visibilidade por frame
  (`getBoundingClientRect().bottom>0 && top<innerHeight`); IO só como
  progressive enhancement (reveals).
- **Redimensionar `<canvas>` limpa o desenho** — redesenhe após `resize`.
- **`scroll-behavior:smooth` atrasa capturas/medidas** — para scroll
  programático confiável use `behavior:'instant'`.
- **Desenhe o primeiro frame imediatamente** (antes de qualquer gate de
  visibilidade) — evita canvas vazio na carga.
