A escala

Copiada do protótipo, não arredondada. Há catraca amarrando cada valor.

Hierarquia em uso

⚠️ O tamanho de um título depende de ONDE ele está, e não só da tag. h2 solto vale 21px; h2 dentro de um cartão é o TÍTULO DO CARTÃO e vale 13,5px — inclusive este que você está lendo. Comparar h2 com h3 fora do contexto de cada um dá uma inversão que não existe na tela.

Parágrafo de corpo. A linha de descrição não é enfeite: é metade do que torna a tela usável por quem não é técnico, e some primeiro quando alguém tem pressa.

1.284 · 08:00 às 17:00 · R$ 1.250,00 (.num, dígito tabular)

Título de página, no lugar dele

O h1 mora na moldura da página — é o "Texto e escala" lá em cima, posto pela casca a partir da declaração. Uma tela que escreve o próprio h1 no painel passa a ter dois, e a migalha diverge do título.

Os três pesos

Um formulário com dois botões primários não tem ação principal — tem duas, e quem lê escolhe pela cor.

⚠️ Navegação também é <button>

A pele genérica veste TODO botão. Estas classes a desfazem — e no hover já perderam para ela: button:hover:not([disabled]) vale (0,2,1) e ganhava de .trilho-item:hover, que vale (0,2,0). Passe o mouse: o fundo tem que ficar claro e o texto legível, nunca roxo escuro com texto quase preto.

Tabela

Entrou na folha no PR #1023 e passou dias sem NENHUMA tela chamando.

⚠️ A coluna Origem tem .esconde: abaixo de 560px ela sai. Estreite a janela. Uma tabela de seis colunas no celular ou rola de lado ou some inteira — quem escolhe qual coluna decide é a tela, não o kit.

Carteira

Quando a linha é "quem" à esquerda e "como está" à direita, é .summary-row.cliente — não tabela. Ela estava copiada em três folhas.

⚠️ Sem cadastro NÃO é erro — é itálico discreto (.sem-nome), não vermelho. Vermelho pede ação de quem não tem ação a tomar.

Itens

Quando a linha tem mais de um atributo por item, .item em vez de tabela.

Por que eles existem

Uma área de trabalho abre dizendo COMO ESTÁ, não só o que é. E todo valor sai da lista que a tela já carregou — número em painel que não vem do dado vira decisão errada com cara de certeza.

⚠️ tabular-nums não é detalhe: quatro números lado a lado com larguras de dígito diferentes dançam a cada recarga.

Avisos

Nada aqui ainda. Um estado vazio é uma TELA: ele diz o que aconteceu e, quando dá, o que fazer.

⚠️ Esconder

Duas formas, e as duas precisam de !important: qualquer display de autor vence a regra do agente de usuário. Isto já mordeu três vezes — [hidden] conhecido só no base.css, o hover da navegação, e #sala{display:flex} vencendo .page{display:none}.

A confirmação que interrompe

Guarde para o que não tem volta. Um diálogo por hábito ensina a clicar "confirmar" sem ler — e aí ele não protege mais nada.

⚠️ Duas armadilhas do <dialog>

showModal() e não show(): só o primeiro põe o fundo inerte e devolve o foco ao fechar. E o botão de confirmar é o segundo peso — quando o padrão é a ação destrutiva, a tecla Enter a executa.