# Padrao Visual Timeline e Visao de Viagem

## Objetivo
`gt_timelineoverview` e `gt_visaoviagens` devem seguir o mesmo padrao visual do sistema SAG.

O objetivo e evitar tela excessivamente colorida, com cards de varias cores sem semantica e estilos que parecam modulos diferentes.

## Regra principal
Se existir duvida sobre estilo, `gt_timelineoverview` e a referencia principal.

`gt_visaoviagens` deve parecer parte do mesmo modulo:
- mesma hierarquia visual;
- mesma base de cards;
- mesma paleta;
- mesma logica de destaque.

## Diretriz obrigatoria de cor
- Azul: informacao, navegacao, destaque padrao, tabelas, chips informativos.
- Vermelho: alerta, risco, ocorrencia critica, pendencia.
- Neutro: fundo, cards, secoes, agrupamentos, comparativos e blocos internos.

## Proibicoes
- Nao usar um card de cada cor sem semantica operacional.
- Nao usar gradiente forte como estilo padrao da tela.
- Nao usar roxo, verde, laranja, teal e rosa como cores dominantes da pagina.
- Nao usar header escuro ou hero visual que pareca produto diferente do restante do sistema.

## Padrao de layout
- Fundo da tela claro e neutro.
- Cards com fundo branco ou cinza muito claro.
- Borda suave e sombra leve.
- Destaque por espacamento, titulo, subtitulo e borda lateral.
- Menos cor, mais hierarquia.

## Padrao de header
- Header claro.
- Faixa superior azul simples, sem degrade chamativo.
- Status pode manter cor semantica.
- Dados principais em blocos neutros.
- Navegacao com botoes discretos.

## Padrao de KPI
- KPI preferencialmente branco.
- Borda lateral azul como padrao.
- Icone com baixa opacidade.
- Vermelho apenas se o KPI for de alerta.
- Evitar fundo inteiro colorido.

## Padrao de secoes colapsaveis
- Fundo branco.
- Borda cinza clara.
- Titulo escuro.
- Icone azul por padrao.
- Secao de alerta pode usar borda e icone vermelhos.
- Nao usar um degrade diferente para cada secao.

## Padrao de conteudo interno
- Tabelas informativas: cabecalho azul claro.
- Tabelas de alerta: cabecalho vermelho claro.
- Blocos comparativos: neutros.
- Blocos de informacao: azul claro, de forma pontual.
- Blocos de alerta: vermelho claro, de forma pontual.

## Regra pratica para qualquer ajuste futuro
Ao alterar `gt_timelineoverview` ou `gt_visaoviagens`, seguir esta ordem:

1. Neutralizar o fundo dos cards.
2. Reduzir gradientes e remover cores decorativas.
3. Aplicar azul como cor padrao de informacao.
4. Reservar vermelho para alertas.
5. Validar se as duas telas parecem irmas visuais.

## Checklist rapido
- A tela esta majoritariamente neutra?
- Azul esta sendo usado como cor principal de informacao?
- Vermelho esta restrito a alerta e risco?
- Existe algum bloco colorido sem necessidade?
- `gt_timelineoverview` e `gt_visaoviagens` parecem o mesmo modulo?

## Instrucao curta para reutilizar
Padronize `gt_timelineoverview` e `gt_visaoviagens` com layout neutro, cards claros, azul para informacao e vermelho apenas para alertas. Remova gradientes e excesso de cores sem semantica operacional.
