@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* Escuro é o tema padrão (pedido do Marcio, 04/09/2026: "deixe o preto como
   preferencia"). Claro fica disponivel via [data-theme="light"] no <html>,
   alternado pelo botao de sol/lua no cabecalho (ver theme-toggle.js) e
   lembrado por pagina no localStorage de cada aparelho. Sem <script> proprio
   aqui - a troca em si (ler localStorage, aplicar o atributo ANTES do CSS
   pintar pra nao piscar) fica num script inline no <head> de cada pagina,
   ver theme-toggle.js pro trecho padrao a colar.
*/
/* Reset global de aparencia nativa de botao (pedido do usuario, 03/09/2026,
   com print real: um "fantasma" de quadrado dourado aparecia atras de icone
   customizado ao tocar no celular - causa era o realce de toque padrao do
   navegador, que nao respeita border-radius/fundo transparente do elemento.
   Aplicado uma vez aqui (theme.css carrega em TODA pagina) em vez de
   replicar classe por classe - cobre todo botao do sistema de uma vez,
   incluindo os que ainda vierem a existir. */
button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Controles de formulario nao herdam a fonte sozinhos: sem isto, botao, aba,
   input e select de varias paginas caiam em Arial (achado na verificacao
   visual de 08/10/2026) em vez da Inter do resto da tela. Regra de baixa
   especificidade - qualquer classe que defina a propria fonte continua valendo. */
:where(button, input, select, textarea) { font-family: inherit; }

:root {
  /* Escuro e o padrao (pedido do Marcio, 04/09/2026: "deixe o preto como
     preferencia... modo escuro como preferencia", depois de aprovar o
     redesign inteiro testando em escuro a sessao toda). Quem nunca mexeu
     no interruptor sol/lua ve escuro, tanto no computador quanto no
     celular - antes so o celular caia em escuro por padrao, desktop
     caia em claro; agora os dois usam o mesmo padrao. Escolher "claro"
     manualmente ainda funciona normal (bloco [data-theme="light"] abaixo). */
  /* Avisa o navegador que o padrao e escuro - sem isso, controles nativos
     (icone do calendario em input[type=date], etc) desenham na cor clara
     do sistema por cima do vidro escuro (pedido do Marcio, 05/09/2026:
     "estilizar mais em alguns que tiver... e coisas assim"). */
  color-scheme: dark;
  --bg: #101010;
  --panel: #1a1a1a;
  --panel-raised: #232323;
  --border: #3a3a3a;
  --border-soft: #2a2a2a;
  --text: #efefec;
  --muted: #adadad;
  --muted-dim: #545454;
  --accent: #cfa955; /* dourado champanhe (02/10/2026): era #e0b94a, mais amarelo; ver HANDOFF_LOG */
  --accent-dim: #a8873f;
  --accent-text: #14110c;
  --ok: #34d399;
  --ok-bg: rgba(52,211,153,0.12);
  --ok-text: #34d399; /* verde de TEXTO: o --ok do tema claro dá 3,4:1 sobre branco; este passa de 4,5:1 */
  /* Canais separados (sem "#", em "R,G,B") pra usar dentro de rgba() em CSS
     puro - variavel de cor normal nao entra direto dentro de rgba(). Cobre
     todo lugar que precisava de uma versao translucida do fundo/dourado
     (cabecalho fixo com desfoque, brilhos, halos). */
  --bg-rgb: 16,16,16;
  --accent-rgb: 207,169,85;
  /* Vermelho/ambar de alerta como token (01/10/2026) - antes era #f87171/
     #fbbf24 fixo em varios arquivos, ilegivel no tema claro (2.4:1). */
  --danger: #f87171;
  --warn: #fbbf24;
  --accent-hover: #dcbb6e;
  --row-zebra: rgba(255,255,255,0.05);
  --input-bg: #232323;
  /* Gradiente sutil pros botoes/elementos "dourado solido" pedido pelo
     usuario (03/09/2026): "dar mais uma tonalidade nessas cores" - o botao
     ficava chapado/liso demais so com --accent solido. */
  --accent-gradient: linear-gradient(180deg, var(--accent), var(--accent-dim));
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Tokens de "vidro" (glassmorphism) do redesign - cartao/avatar/pilula de
     busca/menu lateral/barra inferior usam esses em vez de --panel solido. */
  --glass: rgba(58,58,58,0.6);
  /* Borda ultra fina "glass" (30/09/2026, pedido do usuario: profundidade
     sutil nos cards, sem elevacao ruidosa) - branco bem fraco em vez de
     cinza, simula luz pegando a borda no fundo escuro. Era cinza 18%
     (140,140,140,0.18), mais visivel que o pedido. */
  --glass-border: rgba(255,255,255,0.05);
  --glass-border-strong: rgba(140,140,140,0.36);
  --chip-bg: rgba(107,107,107,0.14);
  --tile: linear-gradient(160deg, rgba(90,90,90,0.55), rgba(45,45,45,0.55));
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --bg-wash: rgba(110,110,110,0.16);
}

/* Brilho de vidro (glossy) - reutilizado em todo circulo/quadrado solido
   (avatar, icone de categoria, aba ativa) pra dar o reflexo sutil de vidro
   do redesign aprovado 04/09/2026. */
.glossy { position: relative; overflow: hidden; }
.glossy::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 35%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* Gaveta lateral DIREITA (redesign "Vidro Imersivo", 21/09/2026 - pedido
   explícito do usuário: "colocar para lado direito abertura") - antes
   abria pela esquerda; componente compartilhado por toda pagina logada.
   Abre pelo botao de menu (#menu-toggle-btn) ou clicando na logo/nome da
   agencia (.brand-trigger), fecha no X, no fundo escurecido ou em qualquer
   item nao-desabilitado. Cada pagina monta seu proprio conteudo dentro
   (#drawer) e liga os mesmos 3 eventos - ver index.html pro JS de
   referencia. */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; }
.drawer {
  /* Lado ESQUERDO (30/09/2026, pedido do usuario: maioria dos apps de
     referencia usa esquerda, nao direita). Era
     right:0/translateX(105%) antes - espelhado pra left:0/translateX(-105%),
     com os cantos arredondados e a sombra virados pro lado de dentro (agora
     a direita, ja que o lado esquerdo encosta na borda da tela). */
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw;
  background: var(--panel); border-right: 1px solid var(--glass-border);
  /* Cantos mais arredondados (30/09/2026, pedido do usuario: "jeito mais
     estilo arredondado") - era 22px, subiu pra 28px, mais premium/suave. */
  border-radius: 0 28px 28px 0;
  box-shadow: 8px 0 40px rgba(0,0,0,0.35);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(-105%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  z-index: 91;
}
/* Espacamento uniforme entre TODOS os itens da gaveta (pedido do usuario,
   29/09/2026, print real: "uns tao meio diferente de outros, ate uns cola
   em outro quando desce mais embaixo") - antes o container flex nao tinha
   "gap" nenhum, cada item so' tinha o proprio padding interno; sem
   distancia garantida entre um pilula e a proxima, dependia so' da
   diferenca de fundo (ativo vs transparente) pra nao parecer colado. */
/* Trava a rolagem da pagina de fundo enquanto a gaveta esta aberta (pedido
   do Marcio, 04/09/2026, print real do celular: "tem que ter como rolar
   aqui... dando problema") - sem isso, no toque do celular o gesto as
   vezes "vazava" pra pagina atras em vez de rolar so a lista da gaveta. */
body.drawer-locked { overflow: hidden; }
.drawer.open { transform: translateX(0); }
/* Cabecalho "Menu" + X (redesign "Vidro Imersivo", 21/09/2026, pedido
   explicito do usuario com print de referencia: "aba lateral ficar
   desse jeito... as cores e tudo") - antes mostrava a logo em PNG aqui
   em cima; virou um titulo de texto simples + botao redondo escuro de
   fechar, igual a referencia aprovada. 29/09/2026: logo real voltou,
   mas pequena e circular do lado do titulo (.drawer-brand-badge), sem
   tirar o titulo de texto - mistura os dois pedidos em vez de escolher
   entre um ou outro. */
.drawer-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 18px; border-bottom: 1px solid var(--glass-border); margin-bottom: 10px; }
.drawer-brand-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Voltou a ser sigla "WT" em texto (29/09/2026 - achado real do usuario:
   a logo de verdade tem linha fina/gradiente metalico que vira uma mancha
   borrada nesse tamanho pequeno, print confirmando o "embacado" - nao e'
   problema de recorte, e' densidade de detalhe demais pra 30px). Mesmo
   tratamento visual do avatar de iniciais (.cadastro-avatar/.drawer-user-
   avatar) - iniciais sempre ficam nitidas em qualquer tamanho, ao contrario
   de imagem. Logo de verdade continua usada larga (login.html). */
.drawer-brand-badge {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient); color: var(--accent-text);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.drawer-menu-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.drawer-logo-img { height: 40px; width: auto; flex: 1; object-fit: contain; object-position: left center; }
.drawer-close { width: 36px; height: 36px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.drawer-close svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
/* Achatado de proposito (30/09/2026, pedido do usuario: "tirar o brilho
   amarelado e deixar flat como os outros icones") - o `button{}` generico
   que cada pagina define no proprio <style> (pilula dourada com
   box-shadow) sempre se aplicava por cima, porque so' define background/
   border/color aqui, nunca box-shadow - mesmo problema e mesma solucao ja
   usada em .drawer-item acima (!important pra vencer aquela regra local,
   que em algumas paginas tem :not() empilhado com especificidade maior que
   uma classe sozinha consegue vencer sem isso).
   01/10/2026 (pedido do Marcio, 2a rodada): mesmo sem brilho, a caixa
   (fundo --chip-bg + borda forte) ainda destoava dos itens do menu logo
   abaixo, que sao so' icone solto. Agora fica transparente em repouso,
   cor --muted igual aos icones do menu, e so' ganha o fundo discreto no
   hover/toque - o contorno de foco por teclado (outline) continua intacto. */
.drawer-close,
.drawer-close:focus {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
.drawer-close:active,
.drawer-close:focus-visible {
  background: var(--chip-bg) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
@media (hover: hover) {
  .drawer-close:hover {
    background: var(--chip-bg) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--text) !important;
  }
}
.drawer-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--muted); padding: 16px 10px 6px; }
/* Item plano, sem sombra fixa (pedido do usuario, 29/09/2026: testou o
   cartao "suspenso" - fundo de vidro + sombra em repouso - e achou "cara
   de IA" numa lista longa de menu; sombra em CADA linha de um menu denso
   e' decoracao demais, SaaS serio (Linear/Notion) fica flat e so' marca
   com fundo/anel no hover e no item ativo). Ganha fundo so' no hover ou
   quando ativo - continua com "gap" no container pra nao colar um no
   outro (bug antigo, ver comentario acima). */
.drawer-item {
  /* all:unset primeiro (29/09/2026) - mesmo achado real confirmado pelo
     usuario no carrossel (item de teste sem classe nenhuma ficava limpo,
     o mesmo elemento so' com reset seletivo continuava com halo em
     alguns itens especificos, tipo "Indicação"/"Sair") - aplicado aqui
     tambem agora. Usado tanto em <button> quanto em <a>, por isso
     redeclara text-decoration/cursor pros dois casos. */
  all: unset;
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 10px; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 500; font-family: inherit;
  text-decoration: none;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Trava reforcada (29/09/2026) - itens que viram habilitados via JS
   (Hotéis, Seguro, Onibus, Trem, Reservas etc - ver o
   ".classList.remove('disabled')" espalhado no index.html) apareceram
   com peso/cor errados em prints reais, sem nenhuma causa encontrada no
   CSS depois de auditoria completa. !important aqui garante o estado de
   repouso de verdade, sem depender de nenhuma outra regra/ordem/
   especificidade - nao custa nada ter como garantia extra. */
.drawer-item:not(.active):not(.drawer-item-danger):not(:hover):not(:focus):not(:active) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.drawer-item:not(.active):not(.drawer-item-danger):not(:hover):not(:focus):not(:active) svg {
  color: var(--muted) !important;
}
.drawer-item.disabled:not(:hover):not(:focus):not(:active),
.drawer-item:disabled:not(:hover):not(:focus):not(:active) {
  opacity: 0.5 !important;
}
/* Icone/texto cinza em repouso, so' acende dourado no hover/ativo
   (29/09/2026 - branco puro em repouso ainda lia como "muito
   informacao"/contraste alto demais numa lista longa; cinza suave e'
   o pedido mais recente, mesmo espirito de antes). */
.drawer-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--muted); }
.drawer-item.disabled svg, .drawer-item:disabled svg { color: var(--muted-dim); }
/* Sem fundo/caixa em NENHUM estado (29/09/2026, confirmado ao vivo pelo
   usuario com o inspecionar do navegador: border-radius sozinho, mesmo
   sem fundo nenhum pra arredondar, ja causava um "quadrado" visivel em
   alguns navegadores/GPUs so' por existir a propriedade - so' some de
   vez tirando fundo E border-radius dos dois estados). So' o nome/icone
   acende dourado, sem nenhuma caixa por tras, em hover ou toque. */
.drawer-item:not(.disabled):not(:disabled):hover { color: var(--accent); font-weight: 700; }
.drawer-item:not(.disabled):not(:disabled):hover svg { color: var(--accent); }
/* Achado real do usuario (07/09/2026, print comparando "Voo" x
   "Financeiro" na gaveta): so os itens que sao <button> (Financeiro,
   Mensagens) as vezes mostravam um preenchimento dourado solido ao
   tocar/focar, diferente do destaque neutro de todo o resto - resquicio
   de realce nativo de toque que nao estava sendo neutralizado dentro da
   gaveta (que tem "transform" pra animar a abertura, contexto onde esse
   tipo de vazamento e conhecido). Continua forcando fundo nenhum (so'
   cor) em qualquer estado de toque/foco, pra nunca aparecer um
   preenchimento solido por acaso. */
.drawer-item:active, .drawer-item:focus, .drawer-item:focus-visible { background: none; color: var(--accent); font-weight: 700; outline: none; }
.drawer-item:active svg, .drawer-item:focus svg, .drawer-item:focus-visible svg { color: var(--accent); }
/* So' cor + negrito, sem fundo nem traco (opcao 4 do comparativo,
   29/09/2026 - o traco lateral tambem foi considerado "muita informacao"
   depois de ver ao vivo; essa e' o minimo absoluto: texto e icone do
   item ativo ficam dourados e em negrito, sem nenhum fundo/borda extra -
   mais enxuto). */
.drawer-item.active {
  color: var(--accent);
  font-weight: 700;
}
.drawer-item.active svg { color: var(--accent); }
.drawer-item.disabled, .drawer-item:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
.drawer-item.disabled:hover, .drawer-item:disabled:hover { background: none; }
/* Servico ainda nao liberado NAO aparece na gaveta (pedido do Marcio, 15/10/2026, igual ao carrossel do Inicio): quando o servico abre, o JS tira o disabled e o item aparece sozinho. */
.drawer-item.disabled, .drawer-item:disabled { display: none; }
/* "Sair" (29/09/2026, saiu do cabecalho pro menu, secao "Contas") - sempre
   vermelho, nao so' no hover/ativo como o resto da gaveta: e' acao
   destrutiva/irreversivel (pedido antigo do usuario, 24/09/2026, mantido:
   "algo que deixe claro que e' sair de verdade", nunca confundir com item
   neutro qualquer), mesmo #f87171 ja usado em .badge.cancelled/.suspended
   em todo o site. */
/* Selecionado por #id de proposito (especificidade maior que
   .drawer-item:not(.disabled):not(:disabled):hover) - garante que o
   vermelho vence em qualquer estado, nunca cai pro dourado padrao dos
   outros itens. */
#logout-btn.drawer-item-danger, #logout-btn.drawer-item-danger svg { color: var(--danger); }
#logout-btn.drawer-item-danger:hover, #logout-btn.drawer-item-danger:hover svg,
#logout-btn.drawer-item-danger:active, #logout-btn.drawer-item-danger:active svg,
#logout-btn.drawer-item-danger:focus-visible, #logout-btn.drawer-item-danger:focus-visible svg { color: #fca5a5; }
.drawer-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: linear-gradient(150deg, var(--accent), var(--accent-dim)); color: var(--accent-text);
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.drawer-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--glass-border); display: flex; align-items: center; gap: 10px; }
.drawer-user-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  color: var(--accent-text); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  /* Circular (pedido do usuario, 29/09/2026: padronizar todo avatar de
     iniciais do sistema no mesmo formato do carrossel de servicos
     escolhido). Sombra fixa removida em seguida no mesmo dia - mesmo
     raciocinio da gaveta: elevacao permanente em avatar pequeno tambem
     e' decoracao desnecessaria, fica so a forma circular. */
}
.drawer-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.drawer-user-role { font-size: 11.5px; color: var(--muted); }
@media (max-width: 480px) { .drawer { width: 86vw; } }
/* Logo/nome tambem abre a gaveta (pedido do Marcio, 04/09/2026: "assim que
   aperta na logomarca ou no nome da agencia... o menu aparece"). */
.brand-trigger {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  overflow: hidden;
}
/* Selo + nome/subtitulo da marca no cabecalho, compartilhado entre
   index.html e as paginas internas (29/09/2026, pedido do usuario:
   "cabecalho seguir padronizado em todas as paginas" - cada pagina
   secundaria ainda mostrava o proprio nome, ex "Financeiro", no lugar da
   marca, e um botao de Sair solto que index.html ja tinha tirado hoje).
   Cada pagina usa o mesmo .brand-trigger-name "WST Travell" sempre, e
   troca so' o texto de .brand-trigger-role pelo contexto da propria
   pagina (aqui, index.html usa "Business Travel"). */
/* Marca do cabecalho (01/10/2026, pedido do Marcio: "logomarca mal
   posicionada... WST Travell e embaixo, menor, Business Travel... bem
   premium"). brand-badge-icon.png refeito a partir do emblema inteiro do
   logo original (globo + aviao completos, sem o texto da marca antiga),
   centralizado com folga dentro do circulo - o arquivo antigo cortava o
   bico do aviao e deixava o globo deslocado. Fundo escuro faz parte da
   propria imagem (o emblema prateado precisa dele nos dois temas); aqui
   so' o anel dourado fino. Subtitulo em dourado, caixa alta, e
   agora visivel tambem no celular (antes sumia abaixo de 480px). A folga
   a direita no nome evita o corte do ultimo "l" da Fraunces (a letra
   passa um pouco da propria caixa e o overflow:hidden cortava).
   Ajuste no mesmo dia (Marcio: "o Business Travel esta destacando mais
   que o nome"): subtitulo 8px com espacamento curto, sempre mais estreito
   que o nome logo acima (sem caixa alta - maiuscula alarga demais a
   linha); nome 16px no desktop e 15px no celular. */
.brand-trigger-badge {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(var(--accent-rgb),0.55); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brand-trigger-badge img { width: 100%; height: 100%; object-fit: contain; }
/* Subtitulo centralizado sob o nome, do "W" ao ultimo "l" (pedido do
   Marcio, 01/10/2026: "formando tipo um cone" - nome largo em cima,
   subtitulo menor e centrado embaixo). */
.brand-trigger-text { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; overflow: hidden; }
/* Sem isto o nome (largura maxima do conteudo) estoura o bloco centralizado e o overflow corta os DOIS lados ("VST Trave" no admin, 390px) - com max-width o corte vira reticencias no fim. */
.brand-trigger-name, .brand-trigger-role { max-width: 100%; }
.brand-trigger-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: 0.01em; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-trigger-role { margin-top: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; color: var(--accent); opacity: 1; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Margem lateral do cabecalho no celular igual em todas as paginas
   (01/10/2026): Home/aereo/hoteis/passeios/translados ja trocavam pra
   10px 16px abaixo de 900px, mas carteira/financeiro/relatorios/
   vendedores/promocoes/afiliados ficavam com os 32px do desktop - 32px a
   menos de linha, e o nome da marca virava "WST Tra..." ate' 390px.
   "header .header-inner" (2 seletores) pra vencer o .header-inner {}
   sem media query que cada pagina define no proprio <style>. */
@media (max-width: 900px) { header .header-inner { padding: 10px 16px; gap: 6px; } }
/* Celular bem estreito (<375px: Android 360px, iPhone SE 320px) - compacta
   selo, botoes redondos e espacos do cabecalho pra o nome da marca caber
   inteiro mesmo com voltar + carrinho + tema + menu na mesma linha. */
@media (max-width: 374px) {
  header .header-inner { padding: 8px 10px; gap: 4px; }
  header .brand-trigger { gap: 6px; }
  header .brand-trigger-badge { width: 30px; height: 30px; }
  header .icon-btn, header .theme-toggle, header #menu-toggle-btn { width: 30px; height: 30px; }
  header .header-group { padding-left: 6px; padding-right: 6px; }
}
/* Paginas internas tem mais botao no cabecalho (voltar, carrinho...) que a
   Home - o nome fica 1px menor que no index.html em cada faixa pra caber
   sem virar "WST Tra..." (medido 320-414px). */
@media (max-width: 900px) { .brand-trigger-name { font-size: 14px; max-width: min(130px, 100%); min-width: 34px; } }
@media (max-width: 414px) { .brand-trigger-name { font-size: 13px; } .brand-trigger-badge { width: 34px; height: 34px; } .brand-trigger-role { font-size: 11px; } header .brand-trigger { gap: 8px; } }
/* Admin tem 4 botoes na direita (busca, sino, tema, menu): o nome da marca perde espaco, badge 28px + nome 12px cabem inteiros em 390px (medido: precisa de 73px). */
@media (max-width: 414px) { body[data-admin-page] header .brand-trigger { gap: 6px; } body[data-admin-page] header .brand-trigger-badge { width: 28px; height: 28px; } body[data-admin-page] .brand-trigger-name { font-size: 12px; padding: 0; } }
@media (max-width: 390px) { body[data-admin-page] header .icons-group { gap: 4px; padding-left: 6px; padding-right: 6px; } }
/* Barrinha no topo da gaveta - pedido do Marcio (04/09/2026, referencia: a
   bandeja/bottom-sheet da Decolar tem uma igual), aqui so decorativa (a
   gaveta e lateral, nao arrasta), reforca visualmente "isso fecha". */
.drawer-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--border); margin: 0 auto 14px; }

/* Claro ESCOLHIDO DE PROPOSITO (usuario tocou no sol/lua e ficou em
   claro) - repete os mesmos valores do :root acima, mas com
   [data-theme="light"] no <html> pra ter mais especificidade que o
   cinza automatico do celular la embaixo no arquivo. Sem isso, ativar
   "claro" no celular continuava caindo no cinza, porque nao tinha como
   diferenciar "nunca mexeu" de "escolheu claro" - so removia o
   atributo nos dois casos (pedido do Marcio, 03/09/2026: "quando
   ativar modo claro quero deixar tudo ja organizado... sem nada
   preto"). Ver theme-toggle.js pra logica do clique. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f0ef;
  --panel: #ffffff;
  --panel-raised: #f7f7f6;
  --border: #dcdcda;
  --border-soft: #e8e8e6;
  --text: #1c1c1c;
  --muted: #666666;
  --muted-dim: #b8b8b6;
  /* Dourado do claro escurecido em 01/10/2026 (varredura de contraste):
     #b8902e dava 2.6:1 no fundo claro - texto dourado (abas, botoes,
     menu, subtitulo da marca) ficava dificil de ler. #7a5c16 passa de
     4.5:1 (minimo WCAG pra texto) no fundo, no branco e dentro da pilula
     rgba(accent,.12). O escuro nao muda. */
  --accent: #7a5c16;
  --accent-dim: #6b5114;
  --accent-text: #fffaf0;
  --ok: #1f9d6b;
  --ok-bg: rgba(31,157,107,0.12);
  --ok-text: #0f7a50; /* verde de TEXTO: o --ok do tema claro dá 3,4:1 sobre branco; este passa de 4,5:1 */
  --bg-rgb: 240,240,239;
  --accent-rgb: 122, 92, 22;
  --danger: #c0392b;
  --warn: #b45309;
  --accent-hover: #9a7622;
  --row-zebra: rgba(28,28,28,0.035);
  --input-bg: var(--panel-raised);
  --glass: rgba(255,255,255,0.82);
  /* Mesma borda ultra fina do escuro, mas em preto (branco sumiria no
     fundo claro) - mesmo efeito "linha quase imperceptivel" nos dois temas. */
  --glass-border: rgba(0,0,0,0.05);
  --glass-border-strong: rgba(70,70,70,0.36);
  --chip-bg: rgba(90,90,90,0.07);
  /* "Preto fume" (ideia do Marcio, 05/09/2026): vidro do claro estava quase
     branco puro, quase da mesma cor do fundo da pagina - o icone cinza
     (--muted) ficava sem contraste nenhum pra "flutuar" em cima. Um pouco
     mais de cinza fumado no degrade da o contraste que faltava, sem escurecer
     a pagina toda (isso fica so no escuro, que ja esta "uma perfeicao"). */
  --tile: linear-gradient(160deg, rgba(215,214,211,0.92), rgba(180,178,174,0.85));
  --shadow: 0 16px 44px rgba(30,24,21,0.12);
  --bg-wash: rgba(90,90,90,0.08);
}

:root[data-theme="dark"] {
  --bg: #101010;
  --panel: #1a1a1a;
  --panel-raised: #232323;
  --border: #3a3a3a;
  --border-soft: #2a2a2a;
  --text: #efefec;
  --muted: #adadad;
  --muted-dim: #545454;
  --accent: #cfa955;
  --accent-dim: #a8873f;
  --accent-text: #14110c;
  --ok: #34d399;
  --ok-bg: rgba(52,211,153,0.12);
  --ok-text: #34d399; /* verde de TEXTO: o --ok do tema claro dá 3,4:1 sobre branco; este passa de 4,5:1 */
  --bg-rgb: 16,16,16;
  --accent-rgb: 207,169,85;
  --accent-hover: #dcbb6e;
  --row-zebra: rgba(255,255,255,0.05);
  --input-bg: #232323;
  --glass: rgba(58,58,58,0.6);
  /* Borda ultra fina "glass" (30/09/2026, pedido do usuario: profundidade
     sutil nos cards, sem elevacao ruidosa) - branco bem fraco em vez de
     cinza, simula luz pegando a borda no fundo escuro. Era cinza 18%
     (140,140,140,0.18), mais visivel que o pedido. */
  --glass-border: rgba(255,255,255,0.05);
  --glass-border-strong: rgba(140,140,140,0.36);
  --chip-bg: rgba(107,107,107,0.14);
  --tile: linear-gradient(160deg, rgba(90,90,90,0.55), rgba(45,45,45,0.55));
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --bg-wash: rgba(110,110,110,0.16);
}

body { background: var(--bg); color: var(--text); transition: background 0.15s ease, color 0.15s ease; }

/* Linha de aviso padrao pro SaaS inteiro (pedido do usuario, 17/09/2026:
   "avisos delicados e discretos sem tomar muito espaco, deixando sempre ao
   menos uma linha padrao") - uma linha so, sem quebra, sem icone chamativo,
   cor discreta. Centralizada aqui (theme.css, compartilhado por toda
   pagina) - usar em vez de inventar estilo inline novo toda vez que
   precisar de um aviso pequeno. */
.hint-line {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* max-width:100% + display:block: sem isso, um .hint-line dentro de um
     item de flex sem min-width:0 nunca fica menor que o proprio texto (o
     overflow:hidden acima so' age DEPOIS que a caixa ja foi limitada por
     algo) - bug real reportado pelo usuario (17/09/2026, print do celular
     no card de charter) onde o aviso vazava pra fora do card. Reforco aqui
     pra qualquer uso futuro, mesmo quando o pai esquecer de travar a
     largura (ver tambem .offer .airline-row > div em index.html). */
  max-width: 100%;
  display: block;
}

/* Barra de rolagem fina em toda a pagina (pedido do usuario, 04/09/2026:
   a barra padrao do Windows, quadrada com setinhas, destoava do resto do
   visual moderno) - mesmo tratamento fino que ja existia so pras listas
   internas (.scroll-list), agora tambem na pagina toda. */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* Trava rolagem horizontal da pagina toda (pedido do Marcio, 04/09/2026,
   print real do celular: "fica correndo pro lado") - nenhuma tela desse
   app tem conteudo horizontal de proposito, entao isso so acontecia por
   causa do toque na gaveta vazando pro body de tras. */
html, body { overflow-x: hidden; max-width: 100%; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Campo de upload de arquivo (pedido do usuario, 04/09/2026: "estilizar as
   entradas de upload") - o botao nativo "Escolher arquivo" do navegador
   destoava (cinza solido, canto reto) do resto do visual. ::file-selector-
   button tem suporte amplo hoje (Chrome/Edge/Firefox/Safari) - sem precisar
   esconder o input e reconstruir com label+JS em cada tela que faz upload. */
input[type="file"] { color: var(--muted); font-family: inherit; font-size: 13px; }
input[type="file"]::file-selector-button {
  -webkit-appearance: none; appearance: none;
  margin-right: 12px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: var(--tile);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-dim); color: var(--accent-text); }

/* Setinhas nativas de input[type=number] (cinza/claras do sistema
   operacional, destoando do vidro escuro - pedido do Marcio, 05/09/2026,
   "estilizar deixando tudo padronizado") - removidas; o campo fica igual
   aos outros campos de texto, sem controle nativo por cima. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Radio/checkbox travados em tamanho e cor fixos - depois de ligar
   color-scheme:dark (pra corrigir o icone do calendario), alguns
   Android/Chrome passaram a desenhar o input[type=radio] com o widget
   nativo "grande" do Material, que dentro de um flex estreito (.pay-option)
   fica parecendo uma barra de slider em vez de bolinha (bug relatado pelo
   Marcio, 05/09/2026, direto do celular real). accent-color + tamanho
   fixo tira essa variacao do sistema operacional. */
input[type="radio"], input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--accent);
}

/* Botao de sol/lua do cabecalho (redesign "Vidro Imersivo", 21/09/2026,
   pedido explicito do usuario: "em vez do que ta... fica uma bolinha com
   sol quando esta claro e lua escuro") - virou um botao redondo simples,
   igual aos outros icon-btn do cabecalho (cart/menu/sair), mostrando SO'
   o icone do tema ATIVO (nao os dois ao mesmo tempo com bolinha
   deslizante como antes). Mesmo elemento/HTML em toda pagina - so' mudou
   o CSS, entao nenhum JS/markup precisou mudar. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 13px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent-dim); }
.theme-toggle svg { width: 18px; height: 18px; position: relative; z-index: 1; flex-shrink: 0; }
/* Padrao e' escuro (ver :root no topo do arquivo) - lua aparece por
   padrao, sol so' quando o tema claro foi escolhido de proposito. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; color: var(--accent); }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; color: var(--accent); }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.theme-toggle-knob { display: none; }

body {
  font-family: var(--font-body);
  /* Digitos com largura fixa em todo o site (29/09/2026, pedido do
     usuario: "numeros alinhados... hoje eles podem dancar de largura") -
     sem isso, precos/contadores mudavam de largura a cada atualizacao
     (ex: R$ 1.111,11 mais estreito que R$ 8.888,88 com fonte proporcional),
     fazendo o valor "pular" visualmente do lado de um rotulo fixo. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .brand-font {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skeleton-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  gap: 16px;
}
.skeleton-block {
  background: linear-gradient(90deg, var(--panel-raised) 25%, rgba(var(--accent-rgb),0.14) 50%, var(--panel-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
}

.hero-photo {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 34px 28px 84px;
  margin-bottom: -56px;
  /* Gradiente neutro (redesign 04/09/2026) - construido só com tokens de
     tema (--panel-raised/--bg/--accent-rgb), entao se adapta sozinho a
     claro/escuro sem precisar de um bloco de cor hardcoded por tema (os 3
     blocos duplicados - claro, escuro, mobile - que existiam aqui viraram
     essa unica regra). */
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(var(--accent-rgb),0.16), transparent 60%),
    linear-gradient(165deg, var(--panel-raised) 0%, var(--bg) 100%);
  border: 1px solid var(--border-soft);
  /* "position: relative" (só pra conter os pseudo-elementos ::before/::after
     de textura abaixo) sem querer faz esse bloco ser pintado por CIMA do
     ".search-card" que vem depois dele no HTML, mesmo sendo visualmente mais
     escuro/atrás — regra de empilhamento do CSS: elemento "position"
     (mesmo sem z-index) sempre pinta depois de conteúdo normal do fluxo,
     nao importa a ordem no HTML. Como a margem negativa abaixo faz o
     search-card subir e ocupar essa mesma área da tela, isso bloqueava
     silenciosamente o clique nos botões de ida/volta/multitrechos no topo
     do card (bug real reportado pelo usuário no celular). Sem nenhum
     elemento clicável aqui dentro (só texto decorativo), pointer-events:none
     resolve sem efeito colateral.
  */
  pointer-events: none;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.05) 0, transparent 3%),
    radial-gradient(circle at 78% 15%, rgba(255,255,255,0.04) 0, transparent 4%),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,0.03) 0, transparent 2.5%);
  pointer-events: none;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb),0.4) 45%, transparent 75%);
  pointer-events: none;
}
.hero-photo .hero-content { position: relative; z-index: 1; text-align: center; }
.hero-photo h2 { margin: 0 0 6px; font-size: 28px; color: var(--text); }
.hero-photo p { margin: 0; font-size: 13.5px; color: var(--muted); }

.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-chart .bar {
  width: 100%;
  max-width: 34px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  transition: opacity 0.15s ease;
  min-height: 3px;
}
.bar-chart .bar-col:hover .bar { opacity: 0.82; }
.bar-chart .bar-label { font-size: 10.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 640px) {
  .hero-photo { padding: 20px 18px 64px; margin-bottom: -40px; }
  .hero-photo h2 { font-size: 18px; }
  /* Pedido do usuario (21/09/2026, print do celular): o subtitulo
     ("Tarifas com sua comissao ja embutida...") nao agrega no celular e so'
     deixa o cabecalho mais alto - some so' abaixo de 640px, continua
     aparecendo normal no desktop onde ha espaco de sobra. */
  .hero-photo p { display: none; }
}

/* Aviso flutuante (toast) - pedido do usuario (03/09/2026): "toast/aviso
   flutuante em vez de alerta nativo do navegador". Ver assets/toast.js
   pra funcao que cria/gerencia os avisos - aqui so a aparencia. */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  animation: toast-in 0.2s ease;
}
.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--ok); }
.toast-text { flex: 1; white-space: pre-line; }
.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.toast-close:hover { color: var(--text); }
.toast-out { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
@media (max-width: 480px) {
  #toast-container { left: 12px; right: 12px; top: 12px; max-width: none; }
}

/* Calendario proprio (grade de dias arredondados) - pedido do usuario
   (03/09/2026), virou modelo padrao pro sistema todo. Ver
   assets/datepicker.js pra logica (attachDatePicker). */
/* Calendario sempre centralizado na tela (pedido do usuario, 03/09/2026,
   com print mostrando o calendario cortado na lateral no mobile ao abrir
   pelo campo "Até") - em vez de "pendurado" embaixo do campo, agora abre
   como um modal no meio da tela, igual o Ctrl+K (.cp-overlay), fácil de
   mexer com o polegar em qualquer aparelho. */
.dp-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* Menu suspenso proprio pra <select> (ver custom-select.js) - o item ja
   selecionado na lista NATIVA do navegador sempre mostra o azul do
   Windows/Chrome, sem jeito de mudar via CSS puro (confirmado ate numa
   janela anonima, sem extensao nenhuma) - esse componente substitui a
   interacao inteira, mesma decisao ja tomada com o calendario nativo. */
.cs-native-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.cs-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cs-trigger-arrow { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
.cs-trigger.cs-disabled { opacity: 0.6; cursor: not-allowed; }
/* Achado real (20/09/2026): campo de formulario com opcao de texto longo
   (ex: "Internacional (exceto Estados Unidos e Canada)" no seguro)
   estourava pra fora da caixa - grid item tem min-width:auto por padrao,
   entao a coluna crescia pra caber o texto inteiro em vez de deixar o
   .cs-trigger-label cortar com "...". Mesma causa em qualquer campo de
   formulario num grid de 2 colunas do site (o padrao ja usado em quase
   toda tela), corrigida uma vez so aqui em vez de remendar cada campo. */
[style*="grid-template-columns"] > div { min-width: 0; }
.cs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  padding: 6px;
}
/* Sempre numa linha só (pedido do usuario, 21/09/2026, print de
   referencia: opcao longa tipo "Internacional (exceto Estados Unidos &
   Canada)" quebrava em 2-3 linhas) - em vez de cortar com "..." (perderia
   parte do texto sem jeito de ler o resto), a linha rola de lado sozinha
   se nao couber, sem barra de rolagem aparecendo - mesmo espirito "tipo
   nuvem" ja usado nas categorias do index.html. Vale pra QUALQUER select
   do sistema, ja que todos passam por custom-select.js. */
.cs-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-option::-webkit-scrollbar { display: none; }
/* Lista alargada ate' a largura do cartao (custom-select.js, widenIfNarrow): fonte um pouco menor para a opcao mais longa caber inteira numa linha. */
/* Mesmo visual da lista de origem/destino do Aereo (pedido do Marcio, 13/10/2026): caixa arredondada e cada opcao num cartao escuro; a selecionada ganha so o anel dourado fino. */
.cs-panel-wide { background: var(--panel-raised); border-color: var(--border-soft); border-radius: 18px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.cs-panel-wide .cs-option { font-weight: 400; font-size: 14px; padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; background: var(--panel); white-space: normal; overflow-x: visible; }
.cs-panel-wide .cs-option:last-child { margin-bottom: 0; }
.cs-panel-wide .cs-option:hover { background: var(--panel); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25); }
.cs-panel-wide .cs-option.cs-selected { background: var(--panel); border-color: transparent; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.25); }
.cs-option:hover { background: var(--panel-raised); }
/* Opção selecionada num menu (parcelas, título, gênero, país etc.) - so a
   BORDA dourada, mesmo fundo escuro das outras opções (pedido do usuario,
   20/09/2026: preenchimento solido "pesava" demais, mesmo raciocinio já
   aplicado no card-featured do admin em 07/09/2026). Border na base (acima)
   evita pulo de 1px quando essa classe entra/sai. */
.cs-option.cs-selected { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* Selo de status - base + cor, compartilhado (pedido do usuario,
   03/09/2026: "badge com icone alem de cor"). Antes só existia no
   admin.html - "Minhas reservas" (busca de voos) usava a mesma classe
   sem NENHUM estilo, ficava sem cor nenhuma. Cada grupo de status ganha
   tambem um icone antes do texto, pra nao depender so da cor (ajuda quem
   tem dificuldade de distinguir cor e fica legivel numa tela preto-e-
   branco/impressa tambem). */
.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.badge.pending, .badge.pending_issuance, .badge.awaiting_payment, .badge.processing { background: rgba(251,191,36,0.15); color: var(--warn); }
.badge.approved, .badge.issued, .badge.issued_externally, .badge.confirmed, .badge.ok { background: rgba(52,211,153,0.15); color: var(--ok); }
.badge.suspended, .badge.cancelled, .badge.suspended_inactive, .badge.failed { background: rgba(248,113,113,0.15); color: var(--danger); }
.badge.rejected { background: rgba(148,148,148,0.15); color: var(--muted); }
.badge.pending-note { background: rgba(251,191,36,0.15); color: var(--warn); }
.badge.pending::before, .badge.pending_issuance::before, .badge.awaiting_payment::before, .badge.processing::before { content: '⏳ '; }
.badge.approved::before, .badge.issued::before, .badge.issued_externally::before, .badge.confirmed::before, .badge.ok::before { content: '✓ '; }
.badge.suspended::before, .badge.cancelled::before, .badge.suspended_inactive::before, .badge.failed::before { content: '✕ '; }
.badge.rejected::before { content: '✕ '; }
/* Identificador de fornecedor (so' admin ve, nunca agencia - ver aereo.html
   07/10/2026) - sem icone, nao e' status, so' um rotulo neutro. */
.badge.admin-tag { background: rgba(148,148,148,0.15); border: 1px solid var(--border); color: var(--muted); }
.hidden { display: none; }
/* Alternador tipo pilula (2-4 opcoes, so uma ativa por vez) - usado na
   busca (Somente ida/Ida e volta/Multitrechos) e no cadastro (tipo de
   conta), compartilhado (03/09/2026) pra ter a MESMA cara em qualquer
   lugar do sistema que precisar desse padrao. */
/* Sem fundo/capsula por fora (29/09/2026, pedido do usuario: o container
   com var(--panel-raised) parecia um "cilindro" com as pilulas encaixadas
   dentro - os botoes ficam flutuando direto, so' o ativo se destaca
   (border-color dourado, ver .segmented-btn.active abaixo). */
.segmented {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.segmented-btn {
  /* width:auto: paginas com regra global de button em 100% (cadastro) empilhavam as 3 opcoes */
  width: auto;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.segmented-btn:hover { color: var(--text); }
/* Abas Voos/Hoteis/Seguros/Transporte do admin: com 18px de folga "Transporte" caia sozinha na 2a linha no celular. */
@media (max-width: 480px) { body[data-admin-page^="reservas"] .segmented { gap: 2px; } body[data-admin-page^="reservas"] .segmented-btn { padding: 8px 12px; } }
/* Mesmo raciocinio do .cs-option.cs-selected acima: so borda, sem
   preenchimento solido (pedido do usuario, 20/09/2026). */
.segmented-btn.active { color: var(--accent); background: transparent; border-color: var(--accent); font-weight: 600; }
/* Estado vazio padronizado (pedido do usuario, 03/09/2026: "modernizacao
   visual... empty states") - hoje cada pagina tinha o proprio texto solto,
   com padding/tamanho diferente e sem nenhum estilo em pelo menos uma
   tela (index.html). Vira um cartao discreto (borda tracejada), mesma
   cara em toda tela do sistema (agencia e admin). Paginas publicas
   voltadas pro cliente final (orcamento, envio de contrato) mantem o
   proprio estilo - contexto visual diferente, de proposito. */
/* Cartao arredondado padrao (achado real do usuario, 03/09/2026: um
   bloco de icones/filtros "solto" na pagina, so com linha embaixo,
   destoava dos outros blocos que ja eram cartao) - mesmo raio/borda
   usado no hero e no formulario de busca do index.html, promovido pra
   componente compartilhado pra reusar em qualquer pagina.
   01/10/2026: borda trocada de --border-soft pra --glass-border - os
   outros cartoes das paginas (record-card, search-card, *-stat-card) ja
   usavam --glass-border cada um no proprio <style>; so' quem dependia
   desta regra base (hoteis/relatorios) ficava com a borda mais marcada. */
.panel-card {
  background: var(--panel);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  background: var(--panel-raised);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
/* Icone fino (traco de 1.4) no topo de todo estado vazio, em dourado suave -
   mesmo traco dos icones do menu (03/10/2026, padrao premium). */
.empty::before {
  content: '';
  width: 26px; height: 26px;
  background: rgba(var(--accent-rgb),0.75);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8'/%3E%3Cpath d='M3 13v6h18v-6h-5l-1.5 2h-5L8 13H3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8'/%3E%3Cpath d='M3 13v6h18v-6h-5l-1.5 2h-5L8 13H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* .empty vem depois de .hidden com o mesmo peso, entao o display:flex dela
   vencia - a caixa "Selecione uma reserva..." do mini-CRM (aereo/hoteis/
   seguros) nunca sumia ao abrir o detalhe (achado em 02/10/2026). */
.empty.hidden { display: none; }
.dp-popover {
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  padding: 14px;
  font-family: var(--font-body);
}
.dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* Virou <button> (pedido do usuario, 21/09/2026: "data de nascimento...
   poder escolher o ano") - clicar aqui abre a grade de anos em vez de ter
   que clicar em "mes anterior" repetidas vezes. Reset do fundo/borda
   nativo de botao, mesma aparencia visual de antes (era so' um <span>). */
.dp-month-label { font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--font-display); background: none; border: none; padding: 4px 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.dp-month-label:hover { background: var(--panel-raised); color: var(--accent); }
.dp-year-back { cursor: default; }
.dp-year-back:hover { background: none; color: var(--text); }
/* Grade de anos - mesmo raciocinio visual da grade de dias (.dp-cell),
   só em coluna (lista rolável) em vez de grade de 7 colunas, já que
   cobre até 100+ anos pra trás (data de nascimento). */
.dp-year-grid { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.dp-year-cell {
  padding: 10px 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
@media (hover: hover) {
  .dp-year-cell:hover { background: var(--panel-raised); }
}
.dp-year-cell:active { background: var(--accent-dim); }
.dp-year-cell.dp-today { font-weight: 700; color: var(--accent); }
.dp-year-cell.dp-selected { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 700; }
.dp-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--panel-raised);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dp-nav:hover { border-color: var(--accent-dim); color: var(--accent); }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-weekdays span { text-align: center; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dp-cell {
  aspect-ratio: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Só destaca no hover em quem TEM hover de verdade (mouse). No celular o
   navegador "gruda" o hover na célula onde o dedo levanta - que pode ser
   a vizinha da que você tocou -, dando a impressão de que marcou o dia
   errado, mesmo o valor gravado estando certo (achado do Marcio,
   10/09/2026: "aperto 24 e aparece 25 destacado, mas grava 24"). */
@media (hover: hover) {
  .dp-cell:hover:not(:disabled) { background: var(--panel-raised); }
}
/* Feedback de toque imediato e sem ambiguidade: a célula que o dedo
   pressiona (essa, não a vizinha) acende na hora. */
.dp-cell:active:not(:disabled) { background: var(--accent-dim); }
.dp-cell:disabled { color: var(--border); cursor: not-allowed; }
.dp-cell.dp-today { font-weight: 700; color: var(--accent); }
/* So borda no dia selecionado, mesmo raciocinio do .cs-option.cs-selected
   acima (pedido do usuario, 20/09/2026). */
.dp-cell.dp-selected { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 700; }
.dp-cell.dp-selected.dp-today { color: var(--accent); }
.dp-empty { visibility: hidden; }

/* Busca/comando rapido - Ctrl+K ou Cmd+K, pedido do usuario (03/09/2026).
   Ver assets/command-palette.js pra logica. */
.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cp-box {
  width: min(560px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.cp-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 18px 20px;
  font-size: 16px;
  background: transparent;
  color: var(--text);
}
.cp-input:focus { outline: none; box-shadow: none; }
.cp-list { max-height: 320px; overflow-y: auto; padding: 8px; }
.cp-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.cp-item-icon { width: 20px; text-align: center; color: var(--accent); flex-shrink: 0; }
.cp-item-label { flex: 1; }
.cp-item-hint { color: var(--muted); font-size: 11.5px; }
.cp-item:hover, .cp-item.cp-active { background: var(--panel-raised); }
.cp-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.cp-footer { padding: 10px 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 11px; }
@media (max-width: 600px) {
  .cp-overlay { padding-top: 8vh; }
}

/* Micro-animacoes (pedido do usuario, 03/09/2026: "hoje tudo aparece
   seco... apps de ponta deixam tudo deslizar/suavizar") - entrada suave
   de cartao/linha, um "respiro" na entrada em vez de aparecer chapado.
   CSS puro, so estetico - nunca atrasa nem muda a ordem de nenhum dado
   real, so anima DEPOIS que o conteudo ja existe no DOM. Respeita quem
   pediu menos movimento no sistema (prefers-reduced-motion). */
@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-slide-in 0.28s ease both; }
/* Cada item da lista entra com um leve atraso em cascata (ate o 12o item -
   depois disso, junto, pra nao demorar rolando uma lista grande). Usa
   nth-child em vez de JS pra nao ter que calcular indice em cada
   render. */
.fade-in-stagger > * { animation: fade-slide-in 0.28s ease both; }
.fade-in-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.05s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.08s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.11s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.14s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.17s; }
.fade-in-stagger > *:nth-child(7) { animation-delay: 0.2s; }
.fade-in-stagger > *:nth-child(8) { animation-delay: 0.23s; }
.fade-in-stagger > *:nth-child(9) { animation-delay: 0.26s; }
.fade-in-stagger > *:nth-child(10) { animation-delay: 0.29s; }
.fade-in-stagger > *:nth-child(n+11) { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-stagger > * { animation: none; }
}

/* Botao "Reservar" padrao de todos os servicos (02/10/2026, pedido do
   Marcio): a mesma bolinha do carrinho (34px), preenchida de amarelo e com
   o "$" dentro - redondo, elegante e alinhado com o carrinho, igual em
   voos, hoteis, seguros e transporte. */
.offer-reserve-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid transparent; background: var(--accent-gradient); color: var(--accent-text);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.offer-reserve-btn svg { width: 16px; height: 16px; }
.offer-reserve-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.offer-reserve-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* "Minhas cotacoes" + aviso do Emitir (02/10/2026) - compartilhado pelas
   paginas de servico (ver assets/quotes-reissue.js). */
.reissue-banner { border: 1px solid var(--accent-dim); border-radius: 14px; padding: 12px 14px; margin: 10px 0; font-size: 13px; line-height: 1.5; }
.reissue-banner .reissue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reissue-banner .reissue-up { color: var(--danger); }
.reissue-banner .reissue-down { color: var(--ok); }
/* Acoes do card de cotacao: "Baixar" e "Emitir" lado a lado, mesma
   capsula do sistema (mesma altura/largura), sempre alinhadas (pedido do
   Marcio, 02/10/2026). Sao <a> de proposito: a regra geral de hover de
   <button> de cada pagina nao apaga o dourado do "Emitir". */
.quote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.quote-pill {
  display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--accent-dim); background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}
.quote-pill:hover { transform: translateY(-1px); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.18); }
.quote-pill-primary { background: var(--accent-gradient); border-color: transparent; color: var(--accent-text); }
.quote-pill-primary:hover { background: var(--accent-gradient); filter: brightness(1.06); }
/* Mesma capsula, fora da grade de 2 colunas (botao-link solto ao lado de outros botoes). */
.quote-pill-inline { display: inline-flex; width: auto; }

/* Formulario em linha que quebra bem no celular (02/10/2026, print do Marcio
   na Promocao do dia: o campo "Preco de custo" saia da caixa). Os campos
   nunca passam da largura do painel: cada bloco pode encolher (min-width:0)
   e o input ocupa 100% do bloco. No celular cada bloco ocupa a linha toda e o
   botao de enviar vira largura total. Reutilizavel em qualquer formulario. */
.form-stack { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form-stack > * { min-width: 0; }
.form-stack input:not([type="checkbox"]):not([type="radio"]),
.form-stack select,
.form-stack textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
  .form-stack > div { flex: 1 1 100% !important; min-width: 0 !important; }
  .form-stack > button[type="submit"] { width: 100%; }
}

/* Rede de seguranca visual (02/10/2026, "o sistema nao pode ter campo saindo
   da caixa"): no celular nenhum campo de formulario passa da largura do
   proprio container, em qualquer pagina. So' limita excesso - campo que ja
   cabe nao muda. */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { max-width: 100%; box-sizing: border-box; }
}

/* Marca no topo das paginas publicas (02/10/2026): mesmo selo + nome do
   cabecalho do sistema e do login, para status, termos e privacidade
   ficarem na mesma identidade. */
.brand-lockup { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; text-decoration: none; color: var(--text); }
.brand-lockup .brand-trigger-badge { width: 46px; height: 46px; }
.brand-lockup .brand-trigger-name { font-size: 20px; }
.brand-lockup .brand-trigger-role { font-size: 11px; }

/* Listas de Cotacoes/Reservas dos servicos (03/10/2026, "tudo padronizado"):
   mesma rolagem interna e mesma grade lista+detalhe em Voos, Hoteis, Seguros,
   Transporte, Passeios, Traslados e Executivo. Antes cada pagina repetia essas
   regras com um prefixo proprio. */
.scroll-list { max-height: 620px; overflow-y: auto; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-track { background: transparent; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.scroll-list::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
.crm-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.crm-detail-panel { min-height: 160px; }
@media (max-width: 768px) { .crm-grid { grid-template-columns: 1fr; } }

/* No celular o painel de detalhes da reserva, ainda vazio ("Selecione uma
   reserva..."), parecia um segundo quadrado de Reservas duplicado
   (03/10/2026). Fica escondido ate a pessoa tocar numa reserva; ai o JS da
   pagina tira o aviso e o painel aparece com os detalhes. */
@media (max-width: 768px) {
  #booking-detail-panel:has(#booking-detail-empty:not(.hidden)) { display: none; }
}

/* Carregando de lista (03/10/2026): dois cartoes-esqueleto com brilho
   dourado no lugar do texto "Carregando...". O JS da pagina troca o conteudo
   quando os dados chegam. */
.skel-list { display: grid; gap: 10px; }
.skel-card {
  height: 62px; border-radius: 14px; border: 1px solid var(--border-soft);
  background: linear-gradient(90deg, var(--panel-raised) 25%, rgba(var(--accent-rgb),0.14) 50%, var(--panel-raised) 75%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skel-card + .skel-card { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .skel-card { animation: none; } }

/* Dialogo de confirmacao (wstConfirm, assets/toast.js): vidro escuro com
   borda dourada fina, no lugar do confirm() cinza do navegador. */
.wst-dialog-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8,8,8,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.18s ease;
}
.wst-dialog-overlay.wst-dialog-in { opacity: 1; }
.wst-dialog {
  width: 100%; max-width: 380px; padding: 24px 22px 20px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(58,58,58,0.92), rgba(30,30,30,0.96));
  border: 1px solid rgba(var(--accent-rgb),0.55);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transform: translateY(8px) scale(0.98); transition: transform 0.18s ease;
}
.wst-dialog-in .wst-dialog { transform: none; }
.wst-dialog-title { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; color: var(--text); }
.wst-dialog-text { font-size: 14px; line-height: 1.55; color: var(--muted); white-space: pre-line; }
.wst-dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.wst-dialog-actions button { flex: 1; width: auto; margin: 0; }
.wst-dialog-danger { border-color: var(--danger) !important; color: var(--danger) !important; }
@media (prefers-reduced-motion: reduce) {
  .wst-dialog-overlay, .wst-dialog { transition: none; }
}

/* Encaixe da marca no cabecalho (03/10/2026, achado do Marcio no Hoteis): o
   botao da marca herdava border-radius 999px e overflow:hidden, entao a
   curva da pilula cortava o aro dourado do selo (esquerda) e o fim de
   "WST Travell" (direita). Sem raio no botao; a pilula de fora (.brand-group)
   segue arredondada e ganha respiro a direita. */
header .brand-trigger { border-radius: 0; padding-right: 4px; }
@media (min-width: 375px) { header .brand-group { padding-right: 12px; } }

/* Comissao por fornecedor (admin): secoes por servico, etiqueta de estado e
   cartao travado (03/10/2026). */
.supplier-group { margin-bottom: 12px; }
.supplier-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 16px; margin-bottom: 8px; border-radius: 14px;
  background: var(--panel-raised); border: 1px solid var(--border-soft);
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
}
.supplier-group-head::-webkit-details-marker { display: none; }
.supplier-group-head::after { content: '+'; color: var(--accent); font-family: var(--font-body); font-weight: 400; font-size: 18px; }
.supplier-group[open] > .supplier-group-head::after { content: '\2212'; }
.supplier-group-count { margin-left: auto; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--muted); }
.supplier-tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; }
.supplier-tag-live { background: rgba(74,222,128,0.14); color: var(--ok); }
.supplier-tag-off { background: rgba(var(--accent-rgb),0.14); color: var(--ink-accent); }
.supplier-locked { opacity: 0.72; }
.supplier-locked .supplier-commission-input { cursor: not-allowed; }

/* Acabamento premium (03/10/2026): detalhes que so' aparecem no uso e dao a
   sensacao de produto caro. Tudo aditivo e respeitando "reduzir movimento". */
::selection { background: rgba(var(--accent-rgb), 0.32); color: var(--text); }
/* Anel dourado fino so' na navegacao por teclado (nao aparece no toque/clique). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.85);
  outline-offset: 2px;
}
/* Resposta imediata ao toque: o botao "afunda" um pouco. */
button:not(:disabled), .quote-pill, .svc-tab, .drawer-item {
  transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
button:not(:disabled):active, .quote-pill:active, .svc-tab:not([disabled]):active {
  transform: scale(0.98);
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in 0.32s ease both; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  button:not(:disabled):active, .quote-pill:active, .svc-tab:not([disabled]):active { transform: none; }
}

/* Item "Busca rapida" do menu lateral (agency-palette.js): lupa fina dourada e
   a dica do atalho so' onde ha teclado. */
.drawer-quick-search svg { color: var(--accent); }
.drawer-kbd { margin-left: auto; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); }
@media (hover: none) { .drawer-kbd { display: none; } }

/* Tipografia premium (03/10/2026): suavizacao e quebra de linha mais bonita.
   text-wrap: balance/pretty so' afeta onde o navegador suporta, sem risco. */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { text-wrap: balance; }
/* Titulo de terceiro nivel no degrau 18px da escala (11/10/2026): sem isso o navegador usava 18,72px (virava 19). */
h3 { font-size: 18px; }
p, .hint-line, .modal-sub, .empty { text-wrap: pretty; }

/* Cartao clicavel de reserva/cotacao: no computador a borda ganha um
   dourado discreto ao passar o mouse (so' onde ha mouse). */
@media (hover: hover) and (pointer: fine) {
  .record-card[class*="-booking-card"], .record-card[data-idx] { cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
  .record-card[class*="-booking-card"]:hover, .record-card[data-idx]:hover { border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
}

/* Placeholder mais suave: o texto de exemplo nao compete com o valor digitado. */
::placeholder { color: var(--muted); opacity: 0.55; }

/* Aro dourado fino nos botoes redondos do cabecalho (busca, carrinho, tema,
   menu) - mesmo desenho do selo da marca (03/10/2026, ideia do Marcio). Bem
   discreto em repouso (38% de opacidade) para nao competir com o selo; mais
   vivo ao passar o mouse/tocar. Vale em todos os cabecalhos (agencia e admin). */
header .icon-btn, header .theme-toggle, header #menu-toggle-btn {
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.18s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
@media (hover: hover) and (pointer: fine) {
  header .icon-btn:hover, header .theme-toggle:hover, header #menu-toggle-btn:hover { border-color: rgba(var(--accent-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); }
}
header .icon-btn:active, header .theme-toggle:active, header #menu-toggle-btn:active { border-color: rgba(var(--accent-rgb), 0.85); }

/* Extras do voo (bagagem e assento) - 03/10/2026, pedido do Marcio: escolha de
   passageiro e botao de adicionar no mesmo estilo elegante dos calendarios do
   sistema (fichas redondas, vidro, seletor redondo com aro dourado fino). */
.extras-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.extras-chip {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; color: var(--muted); border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.extras-chip small { margin-left: 5px; opacity: .85; }
.extras-chip.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); font-weight: 600; }
.extras-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.extras-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px;
  padding: 14px 16px; border-radius: 18px; border: 1px solid var(--glass-border);
  background: linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 45%), var(--glass);
}
.extras-card.has-qty { border-color: rgba(var(--accent-rgb), 0.5); }
.extras-title { font-size: 14px; font-weight: 600; }
.extras-sub { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.extras-weight { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }
.extras-stepper { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.extras-stepper button {
  all: unset; box-sizing: border-box; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.06);
  transition: background .12s, transform .12s, opacity .12s;
}
.extras-stepper button:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.2); }
.extras-stepper button:active:not(:disabled) { transform: scale(0.94); }
.extras-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.extras-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.extras-qty { min-width: 18px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .extras-chip, .extras-stepper button { transition: none; } }
.extras-chip.compact { padding: 7px 12px; min-width: 38px; text-align: center; }

/* Texto de apoio abaixo de um titulo (08/10/2026): as paginas avulsas ja definiam p.sub
   por conta propria, mas as telas do admin (montadas por admin-shared.js) usavam a
   classe sem estilo e o texto saia grande e branco. Definido uma vez aqui; as paginas
   que tem a propria regra continuam mandando nela. */
p.sub { color: var(--muted); font-size: 13px; line-height: 1.5; }
/* Nota curta (.hint) - mesma historia do p.sub: as paginas avulsas definem a sua, as telas do
   admin usavam a classe sem estilo (texto grande e branco). Quem tem regra propria continua
   mandando nela. */
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Formularios dentro de cartao no painel admin (08/10/2026): os rotulos saiam em 16px branco,
   enquanto no resto do sistema (Vendedores, Relatorios) sao pequenos, em caixa alta e cinza.
   Escopo so' no admin (body[data-admin-page]) e so' dentro de .panel; rotulo que envolve
   caixa de marcar fica em linha, tamanho de texto normal. */
body[data-admin-page] .panel label:not(:has(input)) { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
body[data-admin-page] .panel label:has(input[type="checkbox"]) { font-size: 13px; }

/* Campos de data e hora com a mesma fonte dos demais campos (o navegador desenha esses dois em
   fonte monoespacada por padrao - aparecia assim no Executivo e em Relatorios). */
input[type="date"], input[type="time"], input[type="datetime-local"] { font-family: inherit; }

/* Valores longos sem espaco (localizador, ID de rastreio, e-mail, nome de hotel) quebram dentro do cartao em vez de vazar pra fora dele
   (achado do Marcio, 11/10/2026, e conferido em 360/393/768/1280px). Vale pras linhas "rotulo / valor" de todas as paginas. */
.record-card-row .rc-label { min-width: 0; overflow-wrap: break-word; }
/* Valor em reais NUNCA quebra no meio (print do Marcio, 11/10/2026: "R$ / 1.817,3 / 5" em tres linhas): a coluna do valor ocupa a largura do
   proprio texto (ate' 64% do cartao) e quem encolhe e' o rotulo. So' texto longo sem espaco (e-mail, localizador) ainda quebra, e so' se passar disso. */
.record-card .record-card-row .rc-value { flex: 0 1 auto; min-width: 0; max-width: 64%; overflow-wrap: break-word; word-break: normal; text-align: right; font-variant-numeric: tabular-nums; }
.record-card .record-card-row .rc-label { flex: 1 1 0; }
/* Numeros grandes dos cartoes de metrica (Relatorios, Carteira, Financeiro, admin): valor em reais fica numa linha so'; em tela estreita
   desce um degrau da escala (24 -> 20, 32 -> 24) em vez de quebrar "R$ 98.629,40" no meio. */
.card .value, .compare-card .value { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .card .value, .compare-card .value { font-size: 20px; } .card-featured .value { font-size: 24px; } }
/* Cartoes de RESULTADO de busca (Aereo, Hoteis, Passeios, Traslados, Transporte, Seguros, Executivo): preco sempre numa linha, alinhado a
   direita e com algarismos de largura fixa, na mesma coluna de um cartao pro outro (pedido do Marcio, 11/10/2026: "valores alinhados e
   tudo limpo em todos os servicos"). Cada pagina tinha a propria regra, algumas sem "nao quebrar". */
.offer .price, .offer-price-col { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.offer .price { min-width: 88px; }
.offer .price, .offer-price-col .pix, .offer-price-col .discount, .offer-stacked-footer .pix { white-space: nowrap; }
.record-card, .panel-card, .offer { min-width: 0; }

/* Celular (11/10/2026, pedido do Marcio: "a melhor forma no celular"): campos de formulario com 16px. Abaixo disso o Safari do
   iPhone da zoom na tela sozinho ao tocar no campo e o layout "pula". Vale pra todo texto digitavel; caixas de marcar e arquivo ficam fora. */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px !important; }
}

/* Texto sobre cartao com degrade/translucido (conferencia por amostragem de pixels, 11/10/2026): selos de status, botoes dourados vazados e
   rotulos de cartao ficavam entre 2.9:1 e 4.4:1. "Tinta" mais firme em cada tema, so' pra esses textos (a cor da marca nao muda). */
:root { --ink-ok: #6ee7b7; --ink-warn: #fcd34d; --ink-danger: #fca5a5; --ink-muted: #c4c4c4; --ink-accent: #e2c479; }
:root[data-theme="light"] { --ink-ok: #11694a; --ink-warn: #8a3b07; --ink-danger: #a52a1e; --ink-muted: #565656; --ink-accent: #62480f; }
.badge.pending, .badge.pending_issuance, .badge.awaiting_payment, .badge.processing, .badge.pending-note { color: var(--ink-warn); }
.badge.approved, .badge.issued, .badge.issued_externally, .badge.confirmed, .badge.ok { color: var(--ink-ok); }
.badge.suspended, .badge.cancelled, .badge.suspended_inactive, .badge.failed { color: var(--ink-danger); }
.badge.rejected { color: var(--ink-muted); }
.quote-pill:not(.quote-pill-primary) { color: var(--ink-accent); }
.record-card .record-card-row .rc-label { color: var(--ink-muted); }

/* Filtro de periodo padrao das listas (table-search.js) e do painel admin (12/10/2026, pedido do Marcio): botao em pilula, painel com
   De/Ate + atalhos e chip com X, igual em todas as telas. Tudo por variavel, vale nos dois temas. */
.list-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.period-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; min-height: 0; background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 600; font-size: 13px; cursor: pointer; }
.period-pill:hover, .period-pill.active, .period-pill[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.period-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 1px solid var(--accent-dim, var(--border)); border-radius: 999px; font-size: 13px; color: var(--text); }
.period-chip[hidden] { display: none; }
.period-chip button { padding: 2px 9px; min-width: 0; line-height: 1.2; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.period-panel { margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.period-panel[hidden] { display: none; }
.period-fields { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.period-fields > div { flex: 1 1 130px; min-width: 0; }
.period-fields label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.period-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Cartoes de RESULTADO iguais em todos os servicos (Marcio, 15/10/2026: "o seguro nao vem com o arco dourado como voo e hotel"): moldura dourada
   fina + brilho interno, os mesmos do cartao de voo (.offer-compact-flight no aereo.html). Cobre os tipos de cartao que as paginas usam. */
.offer.offer-compact, .offer.offer-stacked {
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.07);
}