# Crítica 3: clareza, acessibilidade e sistema

> **Aviso de quem pediu a crítica (07/10/2026).** Dois pontos abaixo ficaram velhos com as decisões do Luiz de 07/10, e não valem para o ajuste: não há mais selo de "sessões em pausa" nem alertas da Dra. Monielle (CLAUDE.md, seções 2 e 17). O resto vale.

## Como o crítico mediu
No próprio Edge, com o mesmo critério nas oito telas novas e nas duas atuais, com um medidor (`var/prints/layouts/critica/medir.js`) que o `prints.py` injeta como ação.
- A Fer foi medida em 1440×900 e a doutora em 390×844.
- "Ponto de destaque": preenchimento escuro ou colorido, texto ou ícone em cor viva, e texto de 28 px ou mais.
- O foco por script não ativa o `:focus-visible` no Edge sem janela; o foco foi simulado convertendo as regras `:focus` em classes.
- O layout atual foi medido no estado inicial (`#copiloto` e `#hoje`).

**Fer, primeira tela (1440×900):**

| Medida | Atual | Calma | Foco | Conversa | Linha |
|---|---|---|---|---|---|
| Cores distintas | 21 | 10 | 15 | 12 | 14 |
| Famílias de cor viva | 4 | 3 | 3 | 3 | 4 (entra o verde) |
| Tamanhos de fonte | 18 | 16 | 15 | 15 | 16 |
| Estilos de texto | 26 | 26 | 27 | 27 | 29 |
| Cartões e painéis | 14 | 2 | 5 | 7 | 5 |
| Selos + rótulos em caixa alta | 12 + 5 | 0 + 9 | 0 + 12 | 0 + 7 | 1 + 7 |
| Ícones | 43 | 7 | 30 | 21 | 19 |
| Sombras / degradês | 16 / 2 | 0 / 0 | 3 / 0 | 4 / 0 | 6 / 0 |
| **Pontos de destaque** | **27** | **14** | **14** | **16** | **25** |
| Palavras | 254 | 242 | 319 | 306 | 336 |
| Texto < 12 px (página) | 65 | 39 | 15 | 9 | 20 |
| Alvos < 44 px (página) | 67 de 82 | 0 | 3 | 2 | 1 |
| Contornos de controle < 3:1 | 23 | 1 | 1 | 12 | 12 |
| Tabs até "Chegou" | tarefa fechada | 15 | 24 | 20 | 15 |
| Ação urgente visível em 1366×768 | não se aplica | não | **sim** | não (fica sob o campo) | não (cortada) |
| Tema escuro | sim | **sim** | não | não | não |
| Cores fora dos tokens | 8 | **0** | 17 | 14 | 5 |
| Regras `:has()` / `:target` | 0 | 4 | 237 | 1 | 18 |
| Elementos no DOM | 876 | 537 | 2.453 | 726 | 1.718 |

**Doutora (390×844):**

| Medida | Atual | Calma | Foco | Conversa | Linha |
|---|---|---|---|---|---|
| Pontos de destaque (primeira tela) | 17 | 10 | **3** | 10 | 13 |
| Cores na página | 19 | 10 | 18 | 13 | 11 |
| Cartões na página | 33 | 10 | 10 | 14 | 13 |
| Selos na página | 16 | 2 | 0 | 0 | 1 |
| Sombras na página | 28 | 0 | 3 | 19 | 21 |
| Palavras na página | 1.314 | 1.025 | **446** | 814 | 798 |
| Altura da página (px) | — | 5.988 | **3.130** | 4.886 | 5.359 |
| Texto < 12 px | 18 | 42 | 4 | 22 | 11 |
| Contornos < 3:1 | 42 | 14 | 1 | 20 | 12 |
| Textos abaixo de 4,5:1 | 24 | 0 | 0 | 0 | 0 |

**Em comum nas quatro direções:**
- Nenhuma tem texto reprovado em contraste. O dourado `#86672F` passa raspando: 4,82:1 sobre `#F3F5F9`.
- Todos os botões só com ícone têm nome acessível; todas usam `<button>` e `<a href>` de verdade, e o foco é visível em todas.
- A tipografia não melhorou em nenhuma: são 15 a 17 tamanhos e 26 a 29 estilos de texto por tela, praticamente o que existe hoje (18 e 26).

## Calma clínica: nota 7
**Acertos**
1. É a única que já é um sistema: 13 tokens de cor, nenhuma cor fora deles, tema escuro nas duas telas e texto com 7:1 ou mais no escuro.
2. Tem a menor poluição medida na Fer: 10 cores, 2 superfícies, nenhum selo, nenhuma sombra e um vermelho só, para o urgente.
3. A tarefa aberta é uma lista rotulada ("Por que agora", "Canal", "Sua resposta") e a resposta única é uma barra segmentada. As duas peças são iguais na Fer e na doutora, e todos os alvos têm 44 px ou mais.

**Defeitos e consertos**
1. **Defeito real em 960 px ou menos (iPad em pé, zoom de 200%):** o rótulo "Por que agora" fica por cima do texto, porque `.aberta dt/dd` continuam em `grid-column: 1` e `2` depois que a grade vira uma coluna. Print: `critica/calma/fer-720-zoom200.png`.
   - Conserto: dentro do `@media (max-width: 960px)`, `.aberta dt, .aberta dd, .acoes { grid-column: 1 }`.
2. **Hierarquia invertida:** os maiores elementos da tela são "Bom dia, Fer." (56 px) e o "0" do progresso (72 px). Em 1366×768, os botões Chegou, Avisou atraso e Não veio ficam abaixo da dobra.
   - Conserto: título de 32 px, resumo em uma linha e o progresso como uma linha fina "0 de 26" ao lado de "Tarefas de hoje". A tarefa urgente precisa começar antes de 500 px.
3. **Tipografia sem escala:** 16 tamanhos na primeira tela e 39 textos com menos de 12 px (rótulos em caixa alta de 10,5 a 11,5 px).
   - Conserto: sete tamanhos em token (12, 14, 16, 18, 22, 28 e 40 px) e nenhum rótulo abaixo de 12 px (13 px no iPhone).
4. **Contorno fraco e diferente entre as telas:** na doutora, `--borda-botao: #B9C1CE` dá 1,81:1 em 14 controles (1,96:1 no escuro). Na Fer, a barra segmentada dá 2,84:1 sobre o fundo da tarefa aberta.
   - Conserto: um token só, `#7D879A` (3,6:1 sobre o branco e 3,3:1 sobre `#F3F5F9`).
5. **As etiquetas são todas iguais, e ainda há três navegações.** "Em risco · 52 dias" pesa o mesmo que "Alta há 60 dias", e "WhatsApp" aparece 19 vezes. Continuam as abas do topo, os filtros e os títulos de grupo.
   - Conserto: estado de risco em marinho e negrito, ou com um token de atenção e ícone. O canal só aparece quando não for WhatsApp. Com filtro ativo, os títulos de grupo somem.

**Na doutora:** a página tem 5.988 px. As 9 decisões abertas vêm antes da agenda, e a próxima consulta (Jorge, com o antes e agora pronto) fica perto de 3.200 px.
- Conserto: uma linha fixa "Agora · próxima consulta" no topo, e as decisões em linhas que abrem.

**O que falta:** as teclas A, E e P aparecem na tela, mas não estão ligadas no JavaScript; só J, K e Esc funcionam. A linha fechada é um `<button>` e a aberta é um `<details>`; no sistema, precisa ser um componente só.

## Uma coisa de cada vez (Foco): nota 6
**Acertos**
1. Tem a melhor hierarquia para "o que eu faço agora?": o nome em 34 px, a pergunta e três botões grandes. É a única em que a ação urgente aparece inteira em 1366×768.
2. Explica com desenho em vez de texto: a linha 09:00 → 09:15 → 09:20 do Thiago e a série de sessões com a reavaliação da Beatriz.
3. Tem a doutora mais calma das quatro: 3 pontos de destaque, 446 palavras, "1 de 11", "Deixar para depois" e "Ver as 11 de uma vez".

**Defeitos e consertos**
1. **Contraria uma decisão registrada:** o CLAUDE.md, seção 8, diz que "uma tarefa não pode ocupar a tela; a Fer precisa da visão geral do dia". Aqui a lista virou contagem por área, e as linhas da fila não trazem o motivo.
   - Conserto: a coluna da esquerda mostra as 26 linhas compactas, agrupadas, e a folha central continua sendo a tarefa aberta.
2. **A construção não se reaproveita:** são 119 regras `:target` e 118 `:has()` geradas paciente a paciente, 2.453 elementos no DOM e o estado guardado no hash (`#t-thiago`, `#dia`). Isso colide com o roteador por hash dos protótipos (`#copiloto`, `#pacientes`).
   - Conserto: guardar o estado no JavaScript e desenhar só o cartão aberto.
3. **Só existe um ponto de quebra (1300 px):** em 390 px o topo estoura e o cartão some; em 720 px o botão "Colar" sai da tela. O protótipo da Fer tem versão de iPhone.
   - Conserto: abaixo de 1024 px, a fila numa coluna e a folha em tela cheia, com um botão de voltar.
4. **Teclado e foco:**
   - São 24 Tabs até "Chegou", porque a fila vem antes no DOM.
   - Os atalhos mudam com o tipo de tarefa: 1, 2 e 3 no Thiago, A nas outras.
   - Na doutora, o cartão avança sozinho 1,1 s depois da decisão. O "Desfazer" some e o foco cai no `body`.
   - Conserto: A é sempre a ação principal e 1 a 4 são as opções. Nada de avanço sem aviso: um aviso com "Desfazer" e o foco indo para o título do cartão seguinte.
5. **Sem tema escuro e com 17 cores fora dos tokens**, entre elas o verde `#2F6B4F`, que não está na paleta da clínica. O campo "Peça ao copiloto" tem borda de 1,37:1, e a área clicável do campo tem 25 px dentro de uma caixa de 56 px.
   - Conserto: tokens de estado com o par escuro, `<label>` envolvendo a caixa inteira e borda `#7D879A`.

**O que falta:** o motivo em uma linha na fila padrão. Na doutora, os nomes são botões com 20 a 26 px de altura.

## Conversa com o copiloto: nota 5
**Acertos**
1. Depois de cada ação aparece um recibo: o que o copiloto fez, quem fica sabendo e um "Desfazer".
2. O filtro responde em uma frase ("Só a agenda: 5 pacientes. O Marcelo está nas urgentes..."), o que resolve a dúvida do número que não bate.
3. O que não é para agora fica agrupado ("Ver os 4"), e há metade dos cartões de hoje (7 contra 14).

**Defeitos e consertos**
1. **Traz de volta o parágrafo que o Luiz chamou de poluição:** cada área abre com um texto corrido do copiloto. São 306 palavras na primeira tela e o marcador da "voz" se repete em todas as falas.
   - Conserto: no máximo uma linha de 12 palavras por área.
2. **O campo fixo embaixo cobre a ação:** em 1366×768, a pergunta "Ele veio?" e os botões ficam sob o campo, e não existe `scroll-padding-bottom`.
   - Conserto: o campo fica fixo só quando está em uso (ou sobe para o topo) e `scroll-padding-bottom` igual à altura da barra.
3. **Botões claros com contorno de 1,45:1** (`#CFD7E4`): 12 controles na Fer e 20 na doutora, que parecem desabilitados.
   - Conserto: borda `#7D879A`.
4. **Leitor de tela e teclado:**
   - Responder troca o cartão inteiro (`replaceWith`) e o foco cai no `body`.
   - O `role="status"` é criado junto com o texto, e o leitor de tela costuma não ler o aviso.
   - A, E, P, J e K aparecem na legenda, mas não existem no código.
   - O link de pular leva ao campo, não à tarefa urgente.
   - Conserto: uma região `aria-live` fixa desde a abertura da página, foco no recibo e as teclas implementadas (ou a legenda retirada).
5. **Doutora com as abas no topo,** longe do polegar e apertadas em 320 px ("MarketingParceiras" sem espaço), diferente da doca dos outros copilotos. Os nomes na lista de ligar têm 22 px de altura, abaixo do mínimo de 24.
   - Conserto: doca embaixo e linha inteira tocável.

**O que falta:** tema escuro. As duas urgentes vieram abertas, quando o pedido era só a primeira.

## Linha do tempo do dia: nota 4,5
**Acertos**
1. A recepção dentro do eixo do dia (quem saiu, quem não chegou, quem está em atendimento, por profissional) é o melhor retrato de "como está o dia" das quatro.
2. Na doutora, a consulta em andamento traz "Ao terminar, registre como foi" e a seguinte traz "Antes de entrar".
3. O teclado está completo, e depois de resolver uma tarefa o foco passa para a seguinte.

**Defeitos e consertos**
1. **Quase tão poluída quanto hoje:** 25 pontos de destaque contra 27, 4 famílias de cor, 4 números grandes, pílula e régua douradas, 9 botões de área e 3 blocos laterais.
   - Conserto: tirar a fila de números e deixar o filtro como lista simples.
2. **O passado ocupa o topo:** 06:00, 08:00 e 09:00 vêm antes do "Agora", e os botões da tarefa urgente ficam cortados em 1366×768. Na doutora, os números da semana ficam perto de 4.400 px.
   - Conserto: abrir já no "Agora", com o passado recolhido em uma linha, e os números da doutora no topo.
3. **Foco e cor:**
   - O anel de foco dos botões principais é dourado (`#B8975E`, 2,75:1 sobre o branco, abaixo de 3:1).
   - Os contornos dos botões têm de 1,47 a 1,6:1.
   - Na doca da doutora, a aba ativa só muda de cor (2,3:1 em relação às outras).
   - Conserto: anel marinho com afastamento, borda `#7D879A` e uma barra de 3 px na aba ativa.
4. **Cria uma regra que ninguém decidiu:** distribuir as tarefas em janelas de horário ("até as 11h") é lógica nova na fila, exige testes e funciona como uma promessa de horário.
   - Conserto: manter a ordem por prioridade.
5. **É pesada:** 1.718 elementos no DOM, 26 `<details name>` (que o `render()` por innerHTML desfaz a cada atualização) e nenhum tema escuro.

**O que falta:** a lista por área só aparece quando se filtra.

## A melhor ideia de cada uma, para levar à vencedora
- **Calma:** a ficha da tarefa com os três rótulos e a paleta em tokens, com claro e escuro.
- **Foco:** o pequeno diagrama dentro da tarefa e, na doutora, a pilha com "1 de 11", "Deixar para depois" e "Ver as 11".
- **Conversa:** o recibo com "Desfazer" depois de cada ação e a frase que explica o filtro.
- **Linha:** a recepção no eixo do dia e, na doutora, "Antes de entrar" e "Ao terminar, registre como foi" dentro do horário da consulta.

## Ordem
1. **Calma (7):** é a única pronta como sistema, com tokens, tema escuro, contraste e alvos em ordem, e tem a menor poluição medida. Os defeitos são de CSS e de hierarquia, baratos de corrigir.
2. **Foco (6):** tem a melhor hierarquia e a doutora mais limpa, mas fere a decisão da visão geral do dia, não tem escuro nem iPhone, e foi feita com CSS gerado que não se reaproveita.
3. **Conversa (5):** as ideias de retorno são boas, mas volta o parágrafo, os contornos ficam em 1,45:1, o campo cobre a ação e o foco se perde.
4. **Linha (4,5):** é a ideia mais rica para a Ana Carolina, mas é a mais poluída das quatro, reprova no anel de foco e inventa uma regra de horário.

## Riscos para aplicar nos quatro copilotos inteiros
1. **Testes presos ao HTML.** Há 702 asserções de texto (`tem` e `naoTem`) nos testes das quatro telas, e pelo menos 60 delas dependem de classe ou marcação, como `tarefa--aberta` e `0</strong><span>de 26 tarefas feitas`. Reescrever o resumo também quebra as de texto ("com 34 pacientes").
   - Plano: criar ganchos `data-teste` e migrar os testes no mesmo commit, tela por tela, rodando o `rodar.ps1` a cada passo.
2. **Estado no CSS não cabe nos protótipos.** Os protótipos guardam o estado no JavaScript (`estado.filtro`, `atual()`) e redesenham tudo por innerHTML. Filtro por rádio com `:has()`, `:target` e `<details name>` perdem o estado a cada `render()` e não são testáveis no QuickJS, que não tem CSS. Dá para levar o visual, não a mecânica.
3. **O roteador por hash é ocupado pelo Foco,** que usa o hash para a tarefa aberta e para o filtro.
4. **Tema escuro e cores de estado.** A Fer atual abre no tema escuro, e só a Calma tem o par escuro. Faltam tokens de estado (urgente, atenção e ok) com par escuro: hoje há quatro vermelhos diferentes entre as direções (`#B42318`, `#A23B2A`, `#9E2B25`, `#9E3A2C`) e um verde fora da paleta da clínica.
5. **Telas densas sem componente.** Agenda das três profissionais em três meses, Pacientes e a ficha, Gestão com gráficos, prévia do Instagram com carrossel, estação de fotos e o "Terminei: passar para a Fer" da Ana Carolina. Nenhuma direção define tabela, formulário, gráfico, selo de estado forte ou comparação de fotos.
6. **Tipografia.** Sem uma escala de 6 ou 7 tamanhos em token, as cerca de 25 telas dos quatro copilotos vão voltar a ter mais de 15 tamanhos cada.
7. **Larguras.** Cada direção foi desenhada numa largura só. O Foco quebra em 390 px, a Calma quebra em 960 px ou menos (iPad em pé), e a Conversa e a Linha estouram o topo em 390 px. Cada tela precisa de print em 1440, 1366×768, 820, 390 e no escuro.
8. **Barras fixas.** Nenhuma direção define `scroll-padding-bottom` (doca, campo fixo, teclado do iPhone). No Edge, o foco é centralizado e não ficou coberto nos testes. No Safari, falta conferir.
9. **Foco depois do `render()`.** Redesenhar por innerHTML destrói o elemento que tinha o foco. Qualquer direção vai precisar devolver o foco pelo id e de uma região `aria-live` fixa para os recibos.

Arquivos do crítico em `var/prints/layouts/critica/`: o medidor `medir.js`, os cenários `medir-*.json`, `v-*.json` e `v-coberto-*.json`, e prints em 1366×768, 390, 720 (zoom de 200%) e 320 px nas pastas `calma`, `foco`, `conversa`, `linha` e `coberto`.