Consulta.

• clínica o consultorio con turnos y más de un profesional
• recepción que hace check-in y confirmación por WhatsApp
• convenio (TISS) y particular el mismo día
• marca en verde azulado, verde petróleo o azul marino

• guardia o urgencias sin turno
• profesional independiente sin recepción ni agenda de equipo
• marca vibrante, pastel o lúdica
• quien quiere tema oscuro

Tono

Identidade

• Fundo #f4f7f6, painéis em branco #ffffff com fio #dbe5e1. Sem sombra de card: a separação vem do fio. Sombra só no hover do cartão da agenda e na opção marcada do segmentado.
• Lateral verde-petróleo fechada #0c3330 (--c-lateral), texto #d9e7e3, apoio #93b2aa. Item ativo = linha sólida um tom acima (#174c46) com texto branco, cantos de 4px. É a moldura do software; o conteúdo fica claro.
• Primária verde-azulado hospitalar #0e5c55: botão principal, confirmado, em atendimento (cartão preenchido), barra de ocupação, dentro da meta no gráfico, foco de teclado.
• Tom quente #b24f1b é só para atraso, falta e o que está fora da regra (espera ≥ 20 min, médico atrasado, glosa, lote que fecha em ≤ 3 dias com pendência, semana acima da meta de falta, mensagem não entregue) — e a linha de "agora", que é o relógio da recepção.
• "Aguardando" é cinza-azulado #56657c sobre #eef1f6: esperar não é problema, faltar é.
• Fontes: Figtree para todo texto e para os números grandes do resumo (tabular-nums); IBM Plex Mono (400/500, nunca negrito) só em horário, CRM, telefone, número de guia, dinheiro de tabela e contagem.
• Escala fixa de produto: título da página 24px, título de painel 15px, tabela 13px, apoio 12px. Cantos de 4–8px. Sem pílula, glass, gradiente, anel de %, ícone em quadradinho colorido.

Regras

• Os números fecham: resumo, ocupação, sala de espera, faltas, produção por convênio e por profissional, repasse e a semana atual do gráfico saem de agenda.compromissos; contagens da lateral saem das listas. Nada de número solto.
• LGPD: na visão geral só aparece procedimento, convênio e telefone de quem a recepção precisa ligar. Nunca queixa, CID, diagnóstico ou medicação.
• Tabelas: cabeçalho em faixa clara, coluna ordenada com seta e aria-sort, número mono à direita, tfoot com total, primeira coluna fixa (.consulta-fixa) na rolagem lateral, hover e seleção de linha. Tabela e agenda rolam dentro de overflow-x-auto com pai min-w-0; a página nunca rola de lado.
• Foco de teclado: anel de 2px na primária em todo controle (claro na lateral). Cartões e horários livres são button com aria-label completo.
• Estados: vazio que ensina (lista de espera), erro com saída (mensagem não entregue → Ligar; glosa → Abrir recurso), carregando em esqueleto com aria-busy, desabilitado (convite de retorno só acende com linha marcada).
• Animação: data-sobe no cabeçalho e no resumo; data-revela nos painéis. Barras enchem uma vez, o ponto de "em atendimento" pulsa devagar. Tudo para com prefers-reduced-motion.
• Celular: lateral vira barra no topo + gaveta (popover nativo); a agenda rola na horizontal com o trilho de horas fixo; painéis empilham.

Adaptar à marca do cliente

• Troque --d-primary pela cor da marca se for verde-azulado, verde-petróleo ou azul-marinho sóbrio; escureça --c-lateral no mesmo matiz. Marca clara ou vibrante: use só no logo.
• --d-accent (atraso/falta) não muda: é sinalização, não identidade.
• Logo da clínica entra no lugar do marcador "CA" na lateral, numa cor só.
• Mais de 3 profissionais: a grade já rola na horizontal (colunas de no mínimo 14rem).