Rota.

• operación de entrega propia (no marketplace)
• marca sobria en negro, grafito, gris o azul marino
• central que trabaja por ventana de entrega y SLA
• necesidad real de actuar rápido ante retrasos, incidencias y GPS sin señal

• app de consumo para el cliente final
• marca lúdica o pastel
• informe mensual para directorio (este es para operación en tiempo real)
• marca amarilla o naranja como color principal sin ajuste
• tema oscuro obligatorio

Tono

Identidade

• Fundo cinza-concreto #e8eae9; painéis brancos com fio #d5d9d7 e cantos de 3–4px; cabeçalho de tabela em #f3f4f3. Sem sombra de card: separação por fio e contraste de superfície.
• Lateral escura #15181a (texto #aab1ae, ativo em branco) de altura total. É a assinatura de composição: separa a "cabine" (navegação, turno, usuário) do trabalho.
• Texto #16191b; secundário #5c6361 (≥ 4,5:1 no branco e no concreto).
• Asfalto #1c2022 (--d-primary): feito, entregue, em rota, preenchimento de medidor e de progresso, segmento selecionado.
• Amarelo de sinalização #ffc300 (--d-accent) é o único acento e sempre vem com fio ou texto escuro (nunca texto amarelo em fundo claro). Usos: botão primário "Nova rota", marca do item ativo e contagem de ocorrências na lateral, rota selecionada no mapa, próxima parada, marcador de atraso (.rota-atraso: quadrado 8px com fio escuro), ícone de ocorrência preenchido, barra de progresso de rota atrasada, parte "fora da janela" do gráfico, filtro ativo (número). Aviso inline em creme #fdf6dc com fio #efd98a; seleção de linha em #f6f1dc.
• Fontes: Barlow para tudo (400–700; títulos de painel em caixa alta 13px/700 com tracking 0,07em, título da página 24px/700 em caixa alta). Azeret Mono (.rota-num, tnum) só em número, hora, código de pedido/rota, CEP e placa. Unidade ("min", "m") fica fora do mono quando é frase.
• Escala fixa de produto: página 24px, painel 13px caixa alta, corpo 13,5px, apoio 12–12,5px, KPI 26px mono.

Regras

• Os números fecham: paradas do turno = soma das janelas (184); entregues 121 = soma das colunas da tarde no gráfico por hora; SLA = no prazo ÷ entregues da tarde; atrasadas e ocorrências por janela batem com os KPIs e com o filtro "Com problema"; prazo da ocorrência = aberta + 30 min contra agora; tempo do turno vem de início/fim. Tudo derivado é calculado no Landing.tsx.
• Paradas no mapa são amostradas ao longo do trajeto (pontoEm), então o número de paradas da rota sempre bate com feitas/total.
• Amarelo nunca como texto em fundo claro; sempre com fio ou texto #16191b. Sem segunda cor de status (nada de verde de sucesso ou vermelho de erro).
• Tabela: cabeçalho em faixa, coluna ordenada com seta (aria-sort), número mono à direita, fio de 2px na margem da linha em hover/foco/seleção, texto longo truncado. Tabela larga fica em overflow-x-auto dentro de painel min-w-0; a página nunca rola de lado.
• Filtro da fila e seleção em lote funcionam só com CSS (rádios + :has(), contador com counter(); por isso a barra de lote vem depois da tabela no DOM e sobe com order).
• Foco de teclado: anel de 2px em #16191b (amarelo na lateral escura). Seleção de texto amarela.
• Lateral de altura total: a coluna aside estica com a página e o conteúdo fica sticky com h-screen. No celular vira barra escura + gaveta (popover nativo).
• Animação: data-sobe no título e na faixa de KPIs, data-revela nos painéis. Trajeto da rota selecionada se desenha, colunas sobem, barras de progresso enchem, anel de GPS e ponto "ao vivo" pulsam devagar. Tudo para com prefers-reduced-motion.
• Ícones lucide size-3.5/size-4, traço 1,8–2,2, cor neutra.

Adaptar à marca do cliente

• Troque --d-primary e --rota-lateral pela cor sóbria da marca (grafite, azul-marinho, verde-escuro). O amarelo de sinalização fica: é convenção de operação, não cor de marca.
• Marca amarela ou laranja: use a cor da marca só no logo e mantenha o amarelo de sistema; se brigar, troque --d-accent por um âmbar mais frio e mantenha sempre o fio escuro.
• Logo da operadora entra no lugar do monograma "M" e de "Malha".