# Ajuste final: Calma clínica e Uma coisa de cada vez

O Luiz olhou as cinco propostas e gostou de duas: a **Calma clínica** e a **Uma coisa de cada vez**. Antes de escolher uma, ele pediu duas coisas, nas palavras dele: "queria um contraste um pouco maior entre as cores, parecem cores iguais... só dar um tom diferente... e ter a opção noturna também". As duas telas (Fer e doutora) de cada direção recebem os mesmos dois ajustes, e o Luiz fecha a escolha depois de ver.

## 1. Mais contraste entre os tons

Hoje, o fundo da página, os cartões, o painel ao lado, a tarefa aberta e a faixa do topo usam tons muito próximos (branco, `#F3F5F9`, `#F6F8FB`). Na tela, eles parecem a mesma cor, e não se vê onde termina uma área e começa a outra.

- **Uma escada de tons que se distinga num relance:** fundo da página, superfície (lista e cartões), destaque (a tarefa aberta, o cartão atual da doutora, o item selecionado) e o painel ao lado ou o cabeçalho. Cada degrau precisa ser visivelmente diferente do vizinho, não só no conta-gotas.
- **A identidade não muda:** marinho `#14284B`, dourado `#B8975E`, dourado de texto `#86672F`, Montserrat e Nunito Sans. Os tons novos saem dessa família, como um cinza azulado mais firme para o fundo, um marinho bem claro para o destaque ou um creme dourado bem leve, sem cor nova chamativa.
- **Continua calmo.** O objetivo é separar as camadas, não enfeitar: nada de voltar a etiqueta colorida em toda linha, degradê, sombra pesada ou borda colorida à esquerda.
- **Texto com hierarquia clara:** títulos em marinho, texto corrido escuro e o apoio num cinza que não pareça apagado. Rótulos dourados só onde ajudam. Contraste do texto de 4,5:1 ou mais, e do texto de apoio de preferência perto de 7:1.
- **As divisórias e os contornos de controle aparecem:** contorno de controle de 3:1 ou mais, e a linha fina entre as linhas da lista visível sem pesar.

## 2. Modo noturno

- **Um botão no cabeçalho das duas telas,** com ícone de lua e de sol, `aria-label` ("Ativar o modo noturno" ou "Voltar ao modo claro") e `aria-pressed`. Ele troca o `data-theme` do `<html>` entre `light` e `dark`.
- **A tela abre no claro,** que é a decisão do Luiz. A escolha fica guardada no `localStorage`, com leitura e escrita dentro de `try/catch`; se o armazenamento falhar, a tela abre no claro e o botão continua funcionando.
- **O noturno tem a mesma escada de tons, desenhada para o escuro,** e não é só a inversão das cores:
  - fundo, superfície, destaque e painel distintos;
  - o dourado ajustado para ter contraste no escuro;
  - o vermelho do urgente legível;
  - o anel de foco visível.
- **Todos os pares passam no noturno:** texto com 4,5:1 e contorno com 3:1.

## 3. Defeitos pequenos de cor, apontados pelos críticos na segunda passada

- **Calma:**
  - em 960 px ou menos, os filtros voltaram a ter 19 px de altura no toque: no mínimo 44 px;
  - o anel de foco some no botão cheio da barra de resposta da doutora: no botão cheio, o anel fica claro;
  - no iPhone, nenhum texto abaixo de 13 px.
- **Uma coisa de cada vez:**
  - um vermelho só, `#B42318` (sai o `#A23B2A`);
  - "ok" em marinho com o ícone de check, no lugar do verde;
  - o "Pergunte" da doutora com 44 px de altura.

As críticas completas estão em `prototipos/layouts/criticas/rodada2-*.md`, para consulta. Fora os itens acima, não mude a estrutura nem o comportamento: o Luiz gostou das duas como estão.

## 4. Coluna da direita fixa (pedido do Luiz, 08/10/2026)

"Quando arrasta para baixo, o bloco recepção de hoje deveria ficar fixo, está descendo junto."

E, explicando melhor: "tem que descer se clicar em cima e arrastar para baixo apenas".

- Na tela da Fer, a coluna da direita (recepção de hoje, horários vagos e insumos) fica presa abaixo do cabeçalho enquanto a lista rola, com `position: sticky`, em qualquer altura de tela.
- E depois: "ou caber na página". Primeiro, ela tenta caber inteira na altura da tela, com linhas mais compactas e sem esconder conteúdo. A meta é 1440×1000 e, se der, 1366×768.
- Se não couber, ela tem rolagem própria (`overflow-y: auto`, até o pé da tela), com todo o conteúdo e sem cortar com "e mais N".
- Só se move quando a pessoa rola em cima dela:
  - a roda do mouse ou o trackpad com o ponteiro sobre ela;
  - o dedo arrastando, no iPad;
  - a barra de rolagem dela;
  - clicar numa área sem botão e arrastar com o mouse.
- Usa `overscroll-behavior: contain`, para que, ao chegar no fim da coluna, a página não role junto.
- Abaixo de 1024 px, onde a página vira uma coluna só, ela volta a rolar com a página.

## Entrega

1. Sobrescreva os seus dois arquivos. A versão anterior está no Git.
2. Prints em `var/prints/layouts/<slug>/rodada3/`, pelo PowerShell, como antes, no claro e no noturno:
   - **Fer:** 1440×1000 e 1366×768;
   - **Doutora:** 390×844 (página inteira), 390×664 e 820×1180;
   - o botão do modo noturno em uso, num dos prints.

   Olhe cada print. Compare o claro novo com o print da rodada 2: as camadas precisam ser distinguíveis de verdade.
3. Responda com:
   - os caminhos;
   - a tabela de tokens antes e depois (claro e noturno), com o contraste dos pares principais;
   - o que mudou em cada defeito da seção 3;
   - o que não deu, se houver.

## Limites

Os mesmos de antes:
- escreva só nos seus arquivos de `prototipos/layouts/` e em `var/prints/layouts/<slug>/`;
- não mexa em nenhum outro arquivo;
- não faça commit, não publique e não instale nada;
- trabalhe só dentro de `C:\Claude\DraSuellenApp\`.