Comanda.

• restaurante que opera salón y delivery a la vez
• cocina dividida en estaciones (plancha, freidora, armado, bar)
• operación con horas pico y pedidos programados
• sistema que integra iFood, Rappi y pedidos propios
• marca que ya usa negro, ámbar o rojo

• negocio sin cocina ni operación en tiempo real
• marca clara o pastel que no acepta tema oscuro
• panel de dueño centrado en facturación e informes
• quien quiere un panel colorido y lúdico

Tono

Identidade

• Fundo preto-acastanhado #16110d (nunca preto puro). surface #211810 para ticket, painel e topo; surface-2 #2b2015 para item ativo e hover; lateral um degrau abaixo, #1b140f (--c-lateral). Fio #3c2d1f; fio forte #564231 (botão secundário, barra neutra do gráfico).
• Texto creme quente #f2e8da; secundário #a3907c; terciário #8a7763 (--c-sutil: código de estação, eixo); modificador #d8c4a8 (--c-mods). Nada de cinza frio.
• Três cores de status, e só para status: verde-erva #8aa85e (--c-ok, no prazo), âmbar #e2a33d (--d-primary, atenção a partir de 75% da meta; também foco e item ativo) e vermelho-tomate #e2472f (--d-accent, atrasado, erro de integração).
• Alergia não usa cor de status: bloco invertido, creme sobre escuro, com ícone de alerta. É o elemento de maior contraste da tela e não se confunde com atraso.
• Fontes: Big Shoulders (--font-big-shoulders, classe .comanda-numero com tabular-nums) em número de pedido, cronômetro, contagem, hora e títulos de seção em caixa-alta. Atkinson Hyperlegible (--font-atkinson) em todo o texto: foi desenhada para leitura difícil, que é o caso. Base de 15px; nome do item 16px negrito; cronômetro 36px; relógio do topo 36px.
• Cantos: 4px nos controles, 6px nos painéis e 0 no ticket (papel de comanda; o filete de status de 4px fecha reto). Zero sombra, zero gradiente, zero brilho.

Regras

• Hierarquia: alerta que para a operação > resumo > fila de tickets > apoio (estação, falta, agendados) > prontos e retirada.
• Tudo que dá para derivar é calculado no `Landing.tsx`: tempo decorrido (agora − entrou), status (≥ 75% da meta = atenção, ≥ 100% = atrasado), ordem da fila, atrasados, mais antigo, pedidos e itens por estação, hora em que o lote agendado entra na fila, tempo parado na retirada.
• Coerência que precisa fechar: item em falta não aparece em pedido que entrou depois da pausa; pedido do iFood só até a hora da desconexão; contagem das abas = pedidos com item pendente.
• Cor de status só em filete, cronômetro, palavra de status e cabeçalho tingido. Nunca pinta o ticket inteiro. Nada de badge redondo, pílula tingida, ícone em quadradinho colorido, avatar com aro.
• Item ativo da lateral: fundo surface-2 + fio curto de 3px (::before) na borda, ícone âmbar.
• Alvos de toque: aba de estação 44px, item ≥ 44px, Pronto 52px, botões 36–40px.
• Foco de teclado: anel âmbar de 2px em todo controle (inclusive nos labels de checkbox/rádio).
• Tabela larga em overflow-x-auto dentro de painel min-w-0; a página nunca rola de lado.
• Animação: data-sobe no título e na faixa de resumo; data-revela nos painéis de apoio e na tabela de prontos. A fila não anima (produto carrega direto na tarefa). Pisca e esqueleto param com prefers-reduced-motion.

Adaptar à marca do cliente

• Troque a marca do topo da lateral (Marca(), 36px, fundo quadrado neutro) e o nome.
• As três cores de status e o bloco invertido de alergia não mudam com a marca: são o sistema de alerta da cozinha. Fundo e superfícies também ficam; se o cliente exige tema claro, este não é o design certo (ver evitar_para no meta.json).