# Síntese: o sistema, para os quatro copilotos

Uma lista calma que abre no lugar, com o desenho de cada tipo de tarefa, o tempo do balcão ao lado e um recibo com "Desfazer" depois de cada ação.

Telas de referência: `sintese-fer.html` (notebook, 1440 px; funciona em 1366×768, 1280×800, 820 e 390) e `sintese-doutora.html` (iPhone 390 e iPad em pé 820×1180). Prints em `var/prints/layouts/sintese/`.

## 1. Cor: só estes tokens

O claro é o padrão. O escuro entra por `prefers-color-scheme` e por `data-theme="dark"` no `<html>`, sempre em par.

| Token | Claro | Escuro | Uso |
|---|---|---|---|
| `--papel` | `#FFFFFF` | `#0E1524` | fundo da página |
| `--veu` | `#F6F8FB` | `#141D2F` | tarefa aberta, cartão da pilha |
| `--nevoa` | `#F3F5F9` | `#1A2438` | passar o mouse, recibo |
| `--tinta` | `#14284B` | `#E8EDF6` | títulos, nomes, botão cheio, anel de foco |
| `--texto` | `#29344D` | `#CDD5E2` | texto corrido |
| `--suave` | `#566176` | `#A3ADBF` | apoio (6,2:1 no branco; 5,7:1 no `#F3F5F9`) |
| `--linha` | `#E3E7EE` | `#253049` | divisórias de 1 px |
| `--contorno` | `#7D879A` | `#74819A` | borda de controle (3,6:1 no branco; 4,6:1 no escuro) |
| `--ouro` | `#B8975E` | `#C6A66D` | só preenchimento e detalhe: monograma, progresso, "agora" |
| `--ouro-texto` | `#86672F` | `#D8BC86` | rótulo dourado (4,8:1 no `#F3F5F9`) |
| `--urgente` | `#B42318` | `#F3A59C` | o único vermelho |
| `--atencao` | `= --ouro-texto` | `= --ouro-texto` | aguardando, atraso; sempre com ícone de relógio |
| `--ok` | `= --tinta` | `= --tinta` | feito, confirmado; sempre com ícone de check |
| `--sobre-tinta` | `#FFFFFF` | `#0E1524` | texto sobre o botão cheio |

Bloco Agora (o único marinho da página): `--agora-fundo` `#14284B`/`#1B2B4A`, `--agora-texto` `#FFFFFF`/`#E8EDF6`, `--agora-suave` `#C3CCDD`/`#AEB9CE`, `--agora-ouro` `#C9AB72`/`#D8BC86` (6,6:1), `--agora-contorno` `#8F9DB8`/`#6F7F9E` (5,3:1), `--agora-toque` `#1F3762`/`#243659`.

Regras:
- Nenhuma cor fora dos tokens. Sem verde: "ok" é marinho com check.
- Estado nunca só por cor: ícone e palavra juntos ("não chegou", "aguardando resposta").
- Anel de foco de 2 px em `--foco`, com 2 px de afastamento. Dentro do Agora, o anel é `--agora-texto`.
- Sem sombra, sem degradê, sem borda colorida à esquerda. Superfícies: papel, véu e névoa, e o marinho só no Agora.

## 2. Tipografia: sete tamanhos

Montserrat (300, 400, 500, 600) nos títulos, nomes e números; Nunito Sans (400, 600, 700) no texto.

| Token | Tamanho | Uso |
|---|---|---|
| `--t12` | 12 px (13 no celular) | rótulo em caixa alta ("Por que agora", "Agora na recepção"), legenda de número |
| `--t14` | 14 px | apoio, motivo, etiqueta, faixa, botões pequenos |
| `--t16` | 16 px | texto, nome na linha, botão da barra |
| `--t18` | 18 px | pergunta da ficha, título do cartão da doutora, nome no Agora |
| `--t24` | 24 px | nome na tarefa aberta, telefone, números da faixa (Montserrat 300) |
| `--t32` | 32 px | número de destaque na Gestão |
| `--t40` | 40 px | número grande da Gestão |

- Nada abaixo de 12 px (13 no celular).
- Caixa alta só em rótulo de 12 px ou mais, com espaçamento de 0,12 em.
- Etiqueta da tarefa em 14 px, sem caixa alta: risco em marinho e negrito, urgente em vermelho com ícone.
- Números em `font-variant-numeric: tabular-nums`.

## 3. Espaço, raio e alturas

- Espaçamento: 4, 8, 12, 16, 24, 32 e 48 px (`--e1` a `--e7`).
- Raio: 10 px nos controles e 14 px nos blocos (tarefa aberta, cartão, Agora).
- Alturas: cabeçalho 56 px (Fer no notebook) ou 52 px (celular e doutora); faixa fixa 52 px; controle 40 px no notebook e 44 px em tela de toque; barra de resposta 48 px; doca 60 px.
- Traços: 1 px nas divisórias, 2 px no progresso e no eixo das horas, 3 px na aba ativa.
- Alvos: 44 px no celular e no iPad (`@media (pointer: coarse)`); no notebook, nunca menos de 24 px.
- Barras fixas: `scroll-padding-top` e `scroll-padding-bottom` do tamanho delas.

## 4. Componentes

**Cabeçalho.** Monograma em SVG (o do piso comum, igual nos quatro), nome da clínica e as telas do perfil; à direita, a engrenagem. A aba ativa: negrito e barra de 3 px em `--tinta`, com `aria-current="page"`. No celular, as telas vão para a doca. Na doutora, 52 px fixos: monograma, "Pergunte" com microfone (abre a folha de baixo para ditar) e a lupa.

**Faixa fixa** (Fer). Uma linha, presa sob o cabeçalho: data e hora; o progresso calculado, "26 tarefas · 2 urgentes · 0 de 26 feitas"; "Peça ao copiloto" (campo, tecla /) e "Colar mensagem" (tecla V). A borda de baixo é o medidor: o dourado cresce com as feitas. No celular: urgentes, feitas e dois botões só com ícone, com `aria-label`.

**Fileira de contadores** (filtro por área). Botões com `aria-pressed`. O primeiro é "34 pacientes" (todas as áreas). O ativo mostra a unidade ("Confirmações 7 pacientes", "Marketing 5 itens") e ganha a barra de 3 px. Com filtro ativo, somem os títulos de grupo e fica um título só, com a contagem. No celular, a fileira rola na horizontal dentro dela mesma.

**Linha de tarefa** (uns 56 px). Nome (Montserrat 16), etiqueta (14), origem em dourado quando houver ("Da Dra. Suellen", "Agente de retenção"), o motivo em uma linha e, à direita, o canal só quando não for WhatsApp e o prazo real calculado pela regra ("venceu às 09:00", "até 16:00"). A linha inteira é um `<button>` com `aria-expanded`. Estados: normal, passar o mouse (névoa), aberta (véu, nome em 24), pulada (itálico "pulada"), recibo (depois da ação) e feita (em "Feitas hoje").

**Tarefa aberta (ficha).** A linha cresce no lugar; só a aberta existe no DOM. É uma lista rotulada (`<dl>`): "Por que agora", "Canal" (só quando justifica), e o desenho do tipo:
- presença: a linha 09:00 → 09:15 → agora e a pergunta "Ele veio?";
- mensagem: a caixa "WhatsApp da clínica · pronta para enviar · leia antes de aprovar", editável no lugar;
- ligação: o número em 24 px com "Copiar" e o roteiro numerado; primeiro "Liguei", depois os resultados;
- confirmações: uma linha por paciente, com o estado do pedido (pronto, aberto no WhatsApp, aguardando resposta, prefere ligação) e os quatro resultados; sai da lista só quando todos respondem;
- série: a régua das sessões (+20, +30, +40, +45, +45 dias) com a reavaliação em losango;
- home care: uma instrução só;
- programação: os quatro passos; missão: os nomes do lote.

Rótulo à esquerda (132 px) quando a ficha tem 600 px ou mais (`@container`), em cima abaixo disso. A barra de ações fica presa embaixo (`position: sticky`) enquanto a ficha passa da tela, com uma linha fina por cima. No celular, a ficha abre em tela cheia, com "Voltar".

**Barra de resposta.** Segmentada, 48 px, uma escolha, larguras iguais (`grid-auto-columns: 1fr` no celular), borda `--contorno`. Rótulo de duas linhas é permitido. No notebook, cada botão leva a tecla (`<kbd>` com `aria-hidden` e `aria-keyshortcuts` no botão). Ação única de registro é um botão cheio marinho (tecla 1); aprovar mensagem é botão cheio (tecla A). "Pular por agora" fica à direita, como texto.

**Recibo.** Uma linha em névoa: check, o que foi feito e quem ficou sabendo, e "Desfazer". Exemplo: "Registrei a chegada do Thiago. A Ana Carolina já vê na agenda dela. Desfazer". Na Fer, ocupa o lugar da tarefa e sai na ação seguinte (nunca antes de 5 s e nunca sozinho, para a lista não pular). Na doutora, entra acima do cartão seguinte e fica 5 s. A ação vai para "Feitas hoje (n)" ou "Decididas hoje (n)" com o resultado, a hora e o "Desfazer" até o fim do dia. A mesma frase vai para a região `aria-live` fixa.

**Faixa de números** (doutora). Quatro números em Montserrat 300 de 24 px com a legenda embaixo, entre duas linhas finas; é um link para a Gestão com um `aria-label` completo (período e unidade). No celular, a legenda curta ("contatos", "fecharam", "recebidos", "da agenda"); no iPad, a longa.

**Bloco Agora** (doutora). O único marinho. Cabeçalho "Agora · em atendimento desde 09:00" e a hora; o nome e o tipo; "Ao terminar, como foi?" com a barra escura (Fechou o protocolo · Vai pensar · Não fechou). "Vai pensar" troca a barra pelos quatro motivos em grade 2×2 (valor, tempo, decidir em casa, outro). Embaixo, a próxima consulta em duas linhas, com "antes e agora pronto", que abre o resumo no lugar. Depois do registro, o recibo fica dentro do bloco.

**Pilha de decisões** (doutora). Título "Esperando você" com "1 de N" e a barrinha de N traços (dourado = decidida, marinho = atual). O cartão atual em véu: quem pede e quando, o título (2 linhas), a barra de resposta, "Por quê?" (o contexto atrás de um toque) e "Deixar para depois". Embaixo, os títulos dos 2 seguintes e "e mais N", e "Ver as N de uma vez", que mostra o grupo de cada item. A ordem é código, nunca IA: 1) o que trava alguém (perguntas da Fer, textos que ela espera, insumos), 2) o que é de hoje (post das 19h, receita em jogo), 3) a semana (kit, aniversário de parceria, apostas). Um item por pessoa: o Diego da pergunta do PIX e o da lista de ligar são o mesmo objeto, com uma ponte entre os dois lugares. Arrastar para o lado vale "depois", nunca decisão. O que pede leitura fica em "Para ler com calma", com o tempo; o que trava alguém também entra na pilha, como um cartão que abre a leitura.

**Recepção no eixo das horas** (Fer, coluna da direita). A hora corrente e a seguinte, com uma linha vertical fina e a marca dourada do "agora" entre elas; quem ficou pendente de uma hora passada continua à vista. Cada pessoa em duas linhas: nome; profissional e situação com ícone. "Chegou" em um toque (tecla C). Rodapé: quem saiu e quem atende mais tarde; no cabeçalho, quantos ainda vêm. A coluna inteira (recepção, horários vagos e insumos) é fixa, sem rolagem própria, e cabe em 768 px de altura.

**Doca.** Cinco abas com ícone e rótulo de 12 px (13 no celular), barra de 3 px na ativa e `aria-current`. Fixa embaixo no celular e no iPad.

## 5. Teclado (Fer)

| Tecla | Faz |
|---|---|
| A | aprova a mensagem (só mensagem) |
| E | edita a mensagem no lugar; E de novo, ou Esc, salva |
| P | pula por agora e abre a seguinte |
| 1 a 4 | escolhem a opção ou o resultado: Chegou, Avisou atraso, Não veio; Confirmou, Remarcar, Cancelou, Ligar; os resultados da ligação; e a ação única de registro (Marquei no Clinicorp, Separei e passei) |
| L | Liguei (na ligação, os resultados só aparecem depois) |
| J e K | abrem a tarefa seguinte e a anterior |
| C | registra a chegada de quem está com foco na recepção; fora dela, leva o foco para o primeiro "Chegou" |
| / | vai para "Peça ao copiloto" |
| V | abre "Colar mensagem" |
| Esc | sai da edição, fecha o painel, volta da tela cheia ou fecha a tarefa |

A nunca registra resultado de ligação. As teclas não agem enquanto se digita. A legenda no fim da lista mostra só as teclas que funcionam.

## 6. Construção

- O estado mora num objeto JavaScript (`estado`) e a tela é redesenhada por `innerHTML` a partir dos dados, como nos protótipos. Nada de estado em `:target`, `:has()`, `<details name>` ou no hash (o hash é o roteador; os links das telas são interceptados).
- Números sempre do código: contagens por área (pacientes únicos), progresso (tarefas), prazos e "a chegar" saem dos dados. O texto da IA não carrega número que envelhece.
- Cada ação guarda o que precisa para se desfazer sozinha, sem desfazer as outras.
- Uma região `aria-live` fixa desde a abertura. Depois de redesenhar, o foco volta pelo id; depois de resolver, vai para a tarefa ou o cartão seguinte.
- Ganchos `data-teste`: `tarefa`, `linha`, `tarefa-aberta`, `resposta`, `pular`, `recibo`, `desfazer`, `contador`, `progresso`, `feitas`, `feita`, `confirmacao`, `recepcao`, `recepcao-paciente`, `chegou`, `vago`; na doutora, `agora`, `agora-resultado`, `motivo`, `pilha`, `decisao`, `depois`, `posicao`, `decididas`, `numeros`, `ler-com-calma`, `agenda-consulta`, `passadinha`.
- `window.sintese` expõe o estado e as ações para os testes e os prints.

## 7. Telas sem hora

- **Tabela** (Pacientes, recebimentos, parceiras): linhas finas sem zebra, cabeçalho em rótulo de 12 px, números à direita e tabulares, ordenação no cabeçalho com `aria-sort`. A linha inteira abre a ficha no lugar, como a tarefa. Filtros pela mesma fileira de contadores, com a unidade escrita; busca no topo. No celular, cada linha vira dois andares (nome e um detalhe), sem rolagem horizontal.
- **Formulário** (ficha do paciente, Configurações): a ficha rotulada, campos de 44 px com borda `--contorno`, erro com ícone e texto em `--urgente` embaixo do campo, "Salvar" na barra presa embaixo e recibo depois. O que vem do Clinicorp fica como texto, com "Já corrigi".
- **Gráfico** (Gestão): o número em Montserrat 300 de 32 ou 40 px acima do gráfico; uma série em `--tinta`, a comparação em `--contorno`, a meta em linha dourada tracejada e a faixa de previsão em `--nevoa`. Rótulos diretos, sem legenda solta, sem degradê, e os mesmos números numa tabela acessível.
- **Comparação de fotos** (antes e agora): duas imagens do mesmo enquadramento, lado a lado no iPad e no notebook e com arrastar no celular; data e área em rótulo; sem nome do paciente e sem frase que diga se melhorou.
- **Parceiras**: o ranking é uma tabela; a situação (forte, esfriando, parou) vai em palavra com ícone, nunca só em cor.

## 8. Antes de levar a uma tela

Print em 1440, 1366×768, 1280×800, 820 e 390, no claro e no escuro. Conferir: a primeira ação à vista sem rolar, nada estourando na horizontal, a coluna fixa cabendo na altura e os números mudando depois de cada ação.