# Síntese: a quinta proposta, juntando o melhor das quatro Quatro designers desenharam quatro direções de layout para os copilotos da clínica da Dra. Suellen Ferreira: - Calma clínica; - Uma coisa de cada vez (Foco); - Conversa com o copiloto; - Linha do tempo do dia. Três críticos atacaram as quatro e, sem combinar, chegaram à mesma conclusão: a melhor solução é uma síntese. Você vai desenhar essa síntese. Os outros três designers (Calma, Foco e Linha) estão ajustando as próprias direções ao mesmo tempo. Depois, o Luiz, dono do projeto, compara tudo e escolhe. A direção escolhida vai para os quatro copilotos inteiros: Fer, doutora, Ana Carolina e Dra. Monielle. O Luiz achou o layout atual "muito poluído" e quer "o top das galáxias": calmo, claro, bonito e rápido de usar. ## Leia antes, inteiros 1. O pedido original: `prototipos/layouts/BRIEF.md`. Ele traz a identidade visual, as funções que não podem sumir e as regras do projeto. 2. O conteúdo das duas telas: `prototipos/layouts/conteudo-fer.txt` e `conteudo-doutora.txt`. 3. As três críticas: `prototipos/layouts/criticas/doutora-iphone.md`, `fer-recepcao.md` e `clareza-sistema.md`. O topo de cada uma diz o que ficou velho com as decisões de 07/10/2026. 4. O piso comum desta rodada: a seção 1 de `prototipos/layouts/AJUSTE.md`. Vale inteiro para você, inclusive o monograma em SVG. 5. As quatro direções da primeira rodada: `prototipos/layouts/{calma,foco,conversa,linha}-{fer,doutora}.html`. Os prints estão em `var/prints/layouts//`. Abra os prints (a ferramenta Read abre PNG) e leia o HTML onde precisar de detalhe. 6. As seções 8, 16 e 17 do `C:\Claude\DraSuellenApp\CLAUDE.md`, sobre a Fer, a doutora e os outros perfis. Vale o arquivo que está no disco. ## O que levar de cada direção - **Da Calma: o sistema e o acabamento.** - Tokens de cor, com tema claro (o padrão) e escuro. - Linhas finas sem cartão, nenhuma sombra e um vermelho só. - A tarefa aberta como uma ficha rotulada: "Por que agora", "Canal", "Mensagem" ou "Roteiro" e "Sua resposta". - A barra de resposta segmentada, de 48 px. - Os números em Montserrat fina. - **Da Uma coisa de cada vez: a hierarquia e a mão.** - O desenho próprio de cada tipo de tarefa: - a linha 09:00 → 09:15 → 09:20 do Thiago; - o número grande, com Copiar e o roteiro, na ligação; - a régua das sessões da série; - a instrução única do home care; - o lote das confirmações. - O teclado completo. - Na doutora, a pilha "1 de N", com a barrinha, "Deixar para depois" e "Ver as N de uma vez". - **Da Linha do tempo: o tempo do balcão e o Agora.** - Na Fer, a recepção no eixo das horas: quem saiu, quem está em atendimento, quem não chegou e quem está para chegar, por profissional. - Na doutora, o bloco Agora: registrar a consulta que acabou e ler o resumo da próxima. - **Da Conversa: o recibo.** Depois de cada ação, uma linha diz o que foi feito e quem ficou sabendo, com "Desfazer". Os números acompanham na hora. ## Tela 1: Tarefas de hoje, da Fer Desenhe para o notebook da recepção (1440 px). Ela também precisa funcionar em 1366×768, em 1280×800 e no iPhone (390 px). A estrutura é a decidida no CLAUDE.md, seção 8: - uma lista vertical com todas as tarefas do dia, uma linha por tarefa; - primeiro "Urgente agora", depois uma seção por área; - nada abre sozinho: clicar na linha abre a tarefa no lugar; - resolver abre a seguinte. Desenhe a primeira urgente já aberta, para vermos como fica. 1. **Cabeçalho**: o monograma, o nome da clínica e a navegação das telas da Fer (Copiloto, Atribuições, Agenda, Pacientes e Feito). 2. **Faixa fixa logo abaixo, de uma linha.** - A data e a hora. - O progresso calculado: "26 tarefas · 2 urgentes · 0 de 26 feitas". - "Peça ao copiloto" (tecla /) e "Colar mensagem" (tecla V), sempre à mão. 3. **Filtros por área** como uma fileira de contadores compactos, com a unidade escrita: "Confirmações · 7 pacientes". - Com um filtro ativo, os títulos de grupo somem e a lista mostra só aquela área. - Fica uma navegação só, e não três. 4. **O resumo do dia** em uma ou duas linhas, sem números que envelheçam. Ele pode recolher depois da primeira leitura. 5. **A linha da tarefa**, com uns 56 px: - o nome; - a etiqueta, em 13 a 14 px e sem caixa alta, com mais peso quando é risco; - o motivo em uma linha; - o canal, só quando não for WhatsApp; - o prazo real, quando existir e for calculado pela regra: contato novo, "responder até 08:20"; falta, "até 11:20"; confirmações, "até as 16h". A ordem é por prioridade: não invente janela de horário. 6. **A tarefa aberta**: - a ficha da Calma, com o desenho do tipo de tarefa que veio da Uma coisa de cada vez; - o nome em 24 px; - os botões à vista em 1366×768 e em 1280×800, sem rolar; - teclado: A aprova a mensagem, E edita, P pula, 1 a 4 escolhem a opção ou o resultado, J e K andam pela lista e Esc fecha; - na ligação, primeiro "Liguei" e depois os resultados; - as confirmações com uma linha por paciente e os quatro resultados, saindo da lista só quando todos responderem. 7. **O depois**: o recibo com "Desfazer" e a linha feita com o resultado e a hora, em "Feitas hoje (n)". Contadores, áreas e recepção mudam na hora. 8. **A coluna da direita**, fixa e sem rolagem própria: - "Agora na recepção", que vem da Linha do tempo: a hora corrente e a seguinte, por profissional, com a situação de cada paciente e "Chegou" em um toque (tecla C) para quem está para chegar; - "Horários vagos", sempre visíveis, com quem chamar; - "Insumos acabando". 9. **No iPhone**: a lista numa coluna e a tarefa em tela cheia, com "voltar". A faixa vira uma linha só, e a coluna da direita vai para baixo ou para um botão. ## Tela 2: Hoje, da doutora Desenhe para o iPhone (390 px) e para o iPad em pé (820×1180), que ela também usa. 1. **Cabeçalho fixo de 52 px**: o monograma, "Pergunte" (com microfone, porque entre consultas ela dita) e a lupa. 2. **Doca embaixo**: Hoje, Marketing, Parceiras, Visitas e Gestão. A aba ativa tem uma barra de 3 px. 3. **Uma linha de abertura**, "Ter, 06/10 · Bom dia, doutora", e a faixa dos números: 8 contatos novos, 4 de 6 fecharam, R$ 10,7 mil recebidos e 64% da agenda ocupada. A faixa abre a Gestão. 4. **Agora**, o único bloco marinho da página: - a consulta em andamento ou que terminou (Camila Duarte, avaliação), com "Ao terminar: Fechou o protocolo · Vai pensar · Não fechou". "Vai pensar" abre os quatro motivos: valor, tempo, decidir em casa e outro; - a próxima consulta (10:00, Jorge Almeida, reavaliação), com "antes e agora pronto ›". 5. **Esperando você**, com a pilha da Uma coisa de cada vez e a barra de resposta da Calma. - "1 de N" e a barrinha de progresso. - O cartão atual, com "Deixar para depois". - Embaixo, os títulos dos 2 seguintes e "e mais N". - A ordem segue uma regra fixa, em código: 1. o que trava alguém: as perguntas da Fer, os textos que a Fer espera para mandar e os insumos; 2. o que é de hoje: o post das 19h e a receita em jogo; 3. a semana: o kit da Vintage 41, os 2 anos da Navalha de Ouro, as apostas e as oportunidades. - Um item por pessoa: o Diego da pergunta do PIX e o Diego da lista de ligar viram um só. 6. **Para ler com calma**, com o tempo de cada item: 5 posts com miniatura (uns 4 min), 2 textos (2 min) e 2 oportunidades. 7. **A agenda de hoje compacta**, uma linha por consulta: - a passadinha na sala como etiqueta no horário; - o "Livre das 15h às 18h" com os 3 para ligar. 8. **Crescimento da semana** e **Para você saber**, uma linha cada, que levam às outras telas. 9. **O depois**: - o recibo "Pode oferecer · a Fer já sabe · Desfazer", que fica 5 segundos enquanto o próximo cartão entra; - "Decididas hoje (n)" no fim. 10. **No iPad em pé**: duas colunas, com "Esperando você" à esquerda e o Agora e a agenda à direita. Metas: - no iPhone, a primeira decisão com os botões em 390×664 (a área que sobra no Safari); - a página inteira em 2 a 2,5 telas. ## Construção (para virar sistema) A direção escolhida vai para os quatro copilotos, que são protótipos de um arquivo só. Neles, o estado mora num objeto JavaScript e a tela é redesenhada por `innerHTML`, a partir dos dados. Por isso: - guarde o estado em JavaScript e desenhe a partir de dados, como os protótipos; - não guarde estado em `:target`, `:has()`, `
` nem no hash da página (o hash é o roteador dos protótipos); - coloque ganchos `data-teste` nos elementos principais (linha da tarefa, tarefa aberta, botões de resposta, recibo, contadores), porque os testes dos protótipos vão mirar neles; - deixe uma região `aria-live` fixa desde a abertura e devolva o foco pelo id depois de redesenhar; - deixe um tema escuro por `prefers-color-scheme`, com os tokens em par. ## Entrega 1. `prototipos/layouts/sintese-fer.html` e `prototipos/layouts/sintese-doutora.html`. 2. `prototipos/layouts/sintese-sistema.md`, um guia curto do sistema para aplicar nos quatro copilotos: - os tokens de cor, claro e escuro; - a escala de tipografia, com no máximo 7 tamanhos; - os espaçamentos; - os componentes, cada um com o nome, a anatomia e os estados: linha de tarefa, tarefa aberta (ficha), barra de resposta, recibo, faixa de números, bloco Agora, pilha de decisões, recepção no eixo das horas, cabeçalho, faixa fixa e doca; - o teclado; - o que fazer nas telas que não têm hora (Pacientes, ficha, Gestão, Parceiras e Configurações): tabela, formulário, gráfico e comparação de fotos, em poucas linhas cada. 3. Prints em `var/prints/layouts/sintese/`, pelo PowerShell (pelo Bash trava): ``` Set-Location C:\Claude\DraSuellenApp cmd /c start "" /low /b /wait .\.venv\Scripts\python.exe scripts\prints.py prototipos\layouts\sintese-fer.html var\prints\layouts\sintese\fer.json var\prints\layouts\sintese ``` O JSON é uma lista de cenários, por exemplo `[{"nome": "fer-1440", "largura": 1440, "altura": 1000, "espera": 800, "inteira": true}]`. No iPhone, use `"movel": true`. O `prints.py` aceita `acoes` (JavaScript rodado antes do print), para mostrar estados. - **Fer:** - 1440×1000 (tela e página inteira); - 1366×768 e 1280×800 (só a tela); - depois de resolver a primeira urgente (recibo e números); - o cartão das confirmações aberto; - 390 (página inteira); - escuro em 1440. - **Doutora:** - 390×844 (página inteira) e 390×664 (só a tela); - 820×1180 (tela); - depois de uma decisão (recibo); - escuro em 390. Olhe cada print e corrija o que estiver cortado, sobreposto ou apertado. Repita até ficar bom. 4. Responda com: - os caminhos dos arquivos e dos prints; - a síntese em uma frase; - o que veio de cada direção; - o que ficou de fora, e por quê; - os riscos que você vê para levar aos quatro copilotos. ## Regras e limites - Tudo em português do Brasil. Nomes completos: Ana Carolina, Dra. Suellen e Dra. Monielle. - Só os dados fictícios dos arquivos de conteúdo. - Nenhum texto promete resultado, e a IA não orienta sobre remédio. - Fora do sistema desde 07/10/2026 (não desenhe): - alerta clínico registrado e a situação dele; - selo de "sessões em pausa"; - qualquer coisa da Dra. Monielle além da agenda. - Acessibilidade: - contraste de texto de 4,5:1 e contorno de controle de 3:1; - alvos de 44 px; - `