/* ==========================================================================
   TJ-Viagens · Sala — tokens

   Um lugar só para cor, espaço, raio, tipo, altura de controle e movimento.
   Nada de valor literal fora daqui: o corpo da folha (estilo.css) só usa var().

   As cinco escalas:
     espaço   4 · 8 · 12 · 16 · 24 · 32 · 48
     raio     pílula · círculo · cartão · controle · campo
     tipo     glifo · micro · mini · apoio · corpo · realce · título · número · display
     altura   chip · mini · controle · toque
     cor      neutros, e quatro famílias com significado fixo
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto:wght@400;500;700&display=swap");

:root {

  /* ---------------------------------------------------------------- cor --
     Cor tem significado fixo. Azul é ação e informação. Verde é economia e
     conclusão. Âmbar é atenção que ainda não virou problema. Vermelho é
     descumprimento. E texto colorido nunca usa a cor de preenchimento:
     --indigo preenche, --indigo-vivo escreve. */

  /* neutros */
  --carta: #ffffff;          /* superfície dos cartões */
  --ceu: #f8f9fa;            /* fundo tonal claro */
  --neutro-luz: #f1f3f4;     /* pílulas, hover, busca */
  --neutro-2: #e8eaed;       /* esqueleto de carregamento */
  --neutro-hover: #eceef0;   /* hover sobre superfície tonal */
  --neutro-press: #e2e4e6;   /* press sobre superfície tonal */
  --claro: #dadce0;          /* bordas de divisão e de cartão, nunca de controle */
  /* A borda do que se preenche (campo, seleção). WCAG 1.4.11 pede 3:1
     contra o fundo: --claro dava 1,37:1 e o campo sumia para quem tem
     baixa visão. #80868b dá 3,68:1 sobre branco e 3,4:1 sobre o tonal. */
  --borda-controle: #80868b;
  --claro-2: #c4c7cb;        /* borda e texto de item desabilitado */
  --grafite: #202124;        /* títulos */
  --texto: #3c4043;          /* corpo */
  --texto-2: #5f6368;        /* apoio — passa AA sobre branco e sobre tonal */
  --texto-3: #80868b;        /* só ícone decorativo, nunca texto */

  /* azul — ação e informação

     O AZUL DO SISTEMA É O AZUL DA MARCA (#2176AF).

     Antes era o azul de referência do Material (#1a73e8), que não é a cor
     do brasão. Trocar só o preenchimento deixaria a família inconsistente:
     o azul tem oito papéis aqui — preencher, escrever, conter, contornar,
     responder ao ponteiro, responder ao clique, marcar o foco e sobreviver
     ao fundo grafite —, e cada um deles tem uma exigência de contraste
     própria. Os oito foram derivados da marca e conferidos:

       --indigo sobre branco ............. 4,91:1  (botão primário, AA)
       --indigo-vivo sobre --indigo-luz .. 6,23:1  (texto azul em container)
       --indigo-inv sobre --grafite ...... 8,10:1  (snackbar)

     🔒 Nada aqui é escolhido "porque combina": mudar um destes valores sem
     refazer a conta quebra AA numa tela que ninguém está olhando. */
  --indigo: #2176af;         /* preenchimento e ação primária — a cor da marca */
  --indigo-vivo: #1a5c8a;    /* azul de TEXTO sobre tonal claro */
  --indigo-luz: #e7f1f8;     /* container tonal */
  --indigo-aro: #cbe0ef;     /* borda e aro */
  --indigo-veu: #f5fafd;     /* hover do botão secundário */
  --indigo-hover: #1d6899;   /* hover do botão primário */
  --indigo-press: #195a84;   /* press do botão primário */
  --indigo-inv: #7fc0e8;     /* azul legível sobre grafite (snackbar) */

  /* verde — economia e conclusão */
  --vivo: #137333;           /* verde de TEXTO */
  --vivo-cheio: #1e8e3e;     /* preenchimento e traço */
  --vivo-luz: #e6f4ea;
  --vivo-inv: #81c995;       /* sobre grafite */

  /* âmbar — atenção */
  --morno: #92400e;          /* âmbar de TEXTO, AA sobre claro */
  --morno-cheio: #f9ab00;
  --morno-luz: #fef7e0;
  --morno-aro: #fde293;

  /* vermelho — descumprimento */
  --quente: #c5221f;         /* vermelho de TEXTO */
  --quente-cheio: #d93025;
  --quente-luz: #fce8e6;
  --quente-aro: #f6aea9;
  --quente-veu: #fef8f7;     /* fundo da linha em exceção */
  --quente-veu-2: #fdeeec;   /* o mesmo, no hover */
  --quente-inv: #f28b82;     /* sobre grafite */

  /* transparências — as únicas do sistema */
  --veu: rgba(32, 33, 36, .5);        /* véu do diálogo e da gaveta */
  --tinta-08: rgba(60, 64, 67, .08);  /* hover sobre superfície colorida */
  --tinta-15: rgba(60, 64, 67, .15);
  --branco-65: rgba(255, 255, 255, .65);
  --branco-78: rgba(255, 255, 255, .78);
  --branco-16: rgba(255, 255, 255, .16);
  --branco-12: rgba(255, 255, 255, .12);

  /* ------------------------------------------------------------- espaço --
     Seis degraus. Um valor que não está aqui é um valor que ninguém decidiu. */
  --e-1: 4px;
  --e-2: 8px;    /* dentro de um grupo de controles */
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;   /* entre grupos, e respiro interno do painel */
  --e-6: 32px;
  --e-7: 48px;

  --palco-largura: 1440px;
  --colado-topo: 84px;       /* onde o trilho lateral cola ao rolar */
  /* Altura da fita de demonstração. Andaime: sai junto com ela. */
  --fita-alt: 36px; /* @kind other */

  /* --------------------------------------------------------------- raio --
     Cinco papéis. O raio diz o que a peça é, não o tamanho dela. */
  --raio-pilula: 999px;      /* botão, chip pílula, busca, cracha */
  --raio-circulo: 50%;       /* avatar, botão redondo, marco da trilha */
  --raio-cartao: 12px;       /* painel, bloco, folha, cartão-herói, gaveta */
  --raio-acao: 8px;          /* botão. Deixou de ser pílula no redesenho de 08/26 */
  --raio-controle: 8px;      /* balão, caixa de marcar, cofre, item de menu */
  --raio-campo: 6px;         /* entrada, chip, código, elo, dica */

  /* --------------------------------------------------------------- tipo --
     Nove degraus com nome. Sem meio pixel em lugar nenhum. */
  --t-glifo: 9px;            /* só os glifos de ordenação da tabela */
  --t-micro: 11px;           /* etiqueta em caixa alta, código técnico */
  --t-mini: 12px;            /* metadado, legenda, contador */
  --t-apoio: 13px;           /* célula de tabela, texto de apoio */
  --t-corpo: 14px;           /* corpo, rótulo de campo, botão */
  --t-realce: 16px;          /* título de bloco menor, campo de busca */
  --t-titulo: 20px;          /* h2 de painel e de folha */
  --t-numero: 26px;          /* número grande dentro de peça */
  --t-display: 30px;         /* h1 e o número do indicador */
  --t-heroi: 44px;           /* o número que É o argumento da tela: a economia do mês */

  --fonte: "Google Sans", "Google Sans Text", "Roboto Flex", Roboto, system-ui, -apple-system, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --peso-titulo: 500;        /* títulos são 500, nunca 700 */
  --peso-forte: 600;
  --linha: 1.5;
  --entreletra-titulo: -.01em;
  --entreletra-display: -.02em;
  --entreletra-etq: .8px;

  /* ------------------------------------------------------------- altura --
     Campo e botão na mesma linha têm a mesma altura. */
  --alt-chip: 26px;
  --alt-mini: 34px;          /* controles da barra de ferramentas */
  --alt-controle: 40px;      /* botão, entrada, seleção, número, busca */
  --alt-toque: 44px;         /* o mesmo controle abaixo de 720px */
  --alt-topo: 64px;
  --alt-linha: 54px;         /* linha da tabela */

  /* ------------------------------------------------------------- sombra --
     Elevação é resposta, não decoração. */
  /* Elevação quase nula em superfície de página: o que separa é o fio, não a
     sombra. --funda é só para o que flutua de verdade (folha, balão, gaveta). */
  --suave: 0 1px 2px rgba(16, 24, 40, .04);
  --funda: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .05);

  /* Fio: a linha de 1px que faz o trabalho que a sombra fazia. */
  --fio: #e9ecef;
  --fio-2: #f1f3f5;

  /* ---------------------------------------------------------- movimento --
     Nada anima sem motivo. */
  --mola: cubic-bezier(.2, 0, 0, 1);
  --dur-1: .12s;             /* fundo, cor, hover */
  --dur-2: .18s;             /* balão, dica */
  --dur-3: .26s;             /* folha, gaveta, barra */
  --dur-4: .42s;             /* revelação: valor que aterrissa no ranque */

  /* O tempo é o argumento do produto, então tem escala própria. O último
     minuto NÃO troca de cor — âmbar segue sendo âmbar, e o que muda é o
     ritmo. Cor é regra de negócio; pressa é ritmo. */
  --pulso-calmo: 2.6s; /* @kind other */
  --pulso-tenso: 1.1s; /* @kind other */
  --pulso-urgente: .62s; /* @kind other */
  --passo: 90ms; /* @kind other */
  /* ---------------------------------------------------------------- foco --
     Um anel só, em tudo que é interativo. */
  --foco-cor: var(--indigo);
  --foco-largura: 2px;
  --foco-folga: 2px;
  --foco-halo: 0 0 0 3px var(--indigo-luz);
}

/* ==========================================================================
   UTILITÁRIAS

   Existem para que nenhum estilo inline sobre no app.jsx. São poucas de
   propósito: espaçamento entre irmãos, tamanho de coluna e as três ou quatro
   combinações de flex que se repetem. Qualquer coisa além disso vira classe
   de componente, com nome, no estilo.css.
   ========================================================================== */

.mt-1 { margin-top: var(--e-1); }
.mt-2 { margin-top: var(--e-2); }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }

.mb-1 { margin-bottom: var(--e-1); }
.mb-2 { margin-bottom: var(--e-2); }
.mb-3 { margin-bottom: var(--e-3); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }

.m-0 { margin: 0; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-2 { margin-left: var(--e-2); }
.p-0 { padding: 0; }
.sem-borda { border: 0; }
.sem-encolher { flex-shrink: 0; }
.sem-quebra { white-space: nowrap; }
.alinha-inicio { align-self: flex-start; }

.min0 { min-width: 0; }
.cresce { flex: 1; min-width: 0; }
.rel { position: relative; }
.em-bloco { display: block; }
.em-linha { display: inline-flex; }

.col { display: flex; flex-direction: column; }
.lin { display: flex; align-items: center; }
.lin-base { display: flex; align-items: baseline; }
.g-1 { gap: var(--e-1); }
.g-2 { gap: var(--e-2); }
.g-3 { gap: var(--e-3); }
.g-4 { gap: var(--e-4); }

.t-micro { font-size: var(--t-micro); }
.t-mini { font-size: var(--t-mini); }
.t-apoio { font-size: var(--t-apoio); }
.t-corpo { font-size: var(--t-corpo); }
.t-realce { font-size: var(--t-realce); }
.peso-forte { font-weight: var(--peso-forte); }
.peso-titulo { font-weight: var(--peso-titulo); }

.cor-forte { color: var(--grafite); }
.cor-apoio { color: var(--texto-2); }
.cor-fraca { color: var(--texto-3); }
.cor-corpo { color: var(--texto); }
.cor-acao { color: var(--indigo-vivo); }
.cor-boa { color: var(--vivo); }
.cor-ma { color: var(--quente); }

/* Larguras de coluna e de campo estreito, usadas pelos <colgroup> e por
   controles de medida fixa. Largura é estrutura, não estilo de conteúdo:
   por isso mora aqui, e não num style inline. */
.w-56 { width: 56px; }
.w-84 { width: 84px; }
.w-96 { width: 96px; }
.w-108 { width: 108px; }
.w-120 { width: 120px; }
.w-132 { width: 132px; }
.w-138 { width: 138px; }
.w-140 { width: 140px; }
.w-148 { width: 148px; }
.w-150 { width: 150px; }
.w-152 { width: 152px; }
.w-158 { width: 158px; }
.w-160 { width: 160px; }
.w-168 { width: 168px; }
.w-186 { width: 186px; }
.w-190 { width: 190px; }
.w-198 { width: 198px; }
.w-176 { width: 176px; }
.w-160 { width: 160px; }
.w-200 { width: 200px; }
.w-244 { width: 244px; }
.w-250 { width: 250px; }
.w-284 { width: 284px; }
.largo { width: 100%; }