:root{
  --azul:#003c58;
  --azul-2:#0a5b82;
  --azul-noite:#12475f;
  --cereja:#e73452;
  --cereja-deep:#c23a54;
  --cinza:#e3e3e3;
  --cinza-escuro:#6a7a82;
  --branco:#ffffff;
  --texto:#1c2b33;
  --fundo-pagina:#f4f6f6;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Open Sans', sans-serif;
  background:var(--cinza);
  color:var(--texto);
  min-height:100vh;
}
h1,h2,h3{font-family:'Poppins', sans-serif; font-weight:800;}

.logo-img{width:550px; height:auto; max-width:100%; display:block; align-self:flex-start; flex-shrink:0;}
.logo-img.pequeno{width:150px; height:auto;}
.logo-img.login{width:340px; height:auto;}

/* ---- LOGIN ---- */
#tela-login{position:relative; min-height:100vh; overflow:hidden; color:#fff;}

.login-scene{
  position:fixed; inset:0; z-index:0;
  background-image:url('../img/login-bg.jpg');
  background-size:cover;
  background-position:center;
}
.login-veil{
  position:fixed; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(18,71,95,.66) 0%, rgba(18,71,95,.40) 32%, rgba(18,71,95,.08) 58%, transparent 72%);
}

.login-page{
  position:relative; z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
}

.brand-pane{
  padding:52px 40px 52px 64px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.brand-top{display:flex; align-items:center;}

.brand-pane .claim{max-width:480px; margin-top:auto; margin-bottom:auto;}
.brand-pane .claim .eyebrow{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cereja); margin-bottom:18px;
}
.brand-pane .claim h1{
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.16; margin:0;
}
.brand-pane .claim h1 span{
  font-family:'Pacifico', cursive; font-weight:400; color:var(--cereja);
  font-size:1.14em; line-height:1; display:inline-block; padding:0 2px;
}
.brand-pane .claim p{font-size:15.5px; line-height:1.7; color:#c7d3d8; max-width:38ch; margin-top:20px;}

.brand-pane .footnote{font-size:12.5px; color:#8fa3ac; position:relative; z-index:1;}

.login-form-wrap{display:flex; align-items:center; justify-content:center; padding:48px;}
.login-card{
  width:100%; max-width:378px;
  background:#fff; color:var(--texto);
  border-radius:20px; padding:40px 36px;
  box-shadow:0 30px 70px rgba(2,27,40,.45);
}
.login-card h2{font-size:23px; color:var(--azul); margin-bottom:6px;}
.login-card p.sub{color:var(--cinza-escuro); font-size:13.5px; margin-bottom:26px;}

label{font-size:13px; font-weight:700; color:var(--azul); display:block; margin-bottom:6px;}
.input-group{margin-bottom:18px;}
input[type="text"], input[type="password"], select{
  width:100%; padding:13px 14px; border-radius:10px;
  border:1.5px solid #d7dee1; font-family:'Open Sans'; font-size:14px;
  background:#fafbfb; transition:.2s;
}
input:focus, select:focus{outline:none; border-color:var(--azul-2); box-shadow:0 0 0 3px rgba(10,91,130,.15);}

.btn-primary{
  width:100%; padding:14px; border:none; border-radius:10px;
  background:var(--cereja); color:#fff; font-family:'Open Sans'; font-weight:700;
  font-size:15px; cursor:pointer; transition:.2s; margin-top:6px;
}
.btn-primary:hover{background:#d12444;}

.login-help{font-size:12.5px; color:var(--cinza-escuro); text-align:center; margin-top:20px; line-height:1.6;}
.login-help b{color:var(--azul);}

.alerta{
  background:rgba(231,52,82,.08); border:1px solid rgba(231,52,82,.3); color:var(--cereja);
  padding:11px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px;
}
.alerta.sucesso{background:rgba(0,60,88,.06); border-color:rgba(0,60,88,.25); color:var(--azul);}

/* Toast de aviso — mensagem só informativa (ex: "Cotação criada."), não
   fica ocupando espaço fixo na tela feito o .alerta de sempre. Some
   sozinho depois de alguns segundos ou no primeiro clique fora dele. */
.toast{
  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-14px);
  z-index:2000; display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid rgba(0,60,88,.16); border-radius:12px;
  padding:13px 20px; box-shadow:0 10px 30px rgba(0,40,60,.18);
  color:var(--azul); font-size:13.5px; font-weight:700;
  opacity:0; transition:opacity .22s, transform .22s; pointer-events:none;
}
.toast.visivel{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast::before{
  content:'✓'; display:flex; align-items:center; justify-content:center; flex:none;
  width:20px; height:20px; border-radius:50%; background:var(--azul); color:#fff; font-size:11px;
}
@media (max-width:640px){
  .toast{left:16px; right:16px; transform:translateY(-14px);}
  .toast.visivel{transform:translateY(0);}
}

/* ---- PAINEL ---- */
#tela-painel{min-height:100vh; background:var(--fundo-pagina);}
/* Barra superior da área do cliente (passageiro) — cores/logo da skin
 * nova do admin (fundo branco, logo colorida), mas formato HORIZONTAL,
 * não lateral (o Rafael testou como lateral em 01/09 e não gostou: "pode
 * ficar nas mesmas cores e logos, mas o menu pode ser superior"). */
.cli-topo{background:#fff; border-bottom:1px solid #e2e8ea; padding:14px 28px;
  display:flex; align-items:center; gap:28px;}
.cli-logo img{height:40px; display:block;}
.cli-nav{display:flex; align-items:center; gap:22px; margin-right:auto;}
.cli-nav-item{font-size:13.5px; font-weight:700; text-decoration:none; color:#5c6f79;
  position:relative; padding-bottom:4px;}
.cli-nav-item:hover{color:#1c2b33;}
.cli-nav-item.ativo{color:#003c58;}
.cli-nav-item.ativo::after{content:''; position:absolute; left:0; right:0; bottom:-6px;
  height:2.5px; background:var(--cereja); border-radius:2px;}
.cli-perfil{position:relative;}
.cli-perfil .user-chip{color:#1c2b33;}
.cli-perfil .user-chip:hover{background:#f0f3f4;}
@media (max-width:760px){
  .cli-topo{padding:12px 16px; gap:16px;}
  .cli-logo img{height:32px;}
}
/* Faixa fina dizendo ONDE o agente está (dev × produção) — ver
   topbar_admin.php. Dev chama atenção (âmbar); produção é discreta mas
   presente (verde), porque é a tela do dia a dia. Teste do Rafael (31/08):
   embaixo da tela (fixa, não empurra o resto do layout) em vez de em cima
   da topbar — menos uma faixa disputando espaço lá no topo.  */
.faixa-ambiente{position:fixed; left:0; right:0; bottom:0; z-index:999;
  text-align:center; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:4px 12px; text-transform:uppercase;}
.faixa-ambiente.dev{background:#f5a623; color:#4a3000;}

/* ---- LATERAL DO ADMIN (chrome único, ver includes/topbar_admin.php) ----
 * Overlay fixo (não um wrapper flex): a lateral fica presa na tela e
 * `body.tem-lateral` empurra todo o resto com margin-left — nenhuma das
 * páginas do admin precisou mudar a própria estrutura HTML por causa
 * disso. Escondida quando a página está embutida num iframe do workspace
 * de abas (o workspace já mostra o mesmo chrome uma vez só, como casca) —
 * ver o script no topo de topbar_admin.php, que marca `html.wsp-embutido`
 * de forma síncrona, antes do resto do body ser parseado.
 *
 * A regra abaixo é o que faz a marca ter efeito NA HORA: a marcação em si
 * (`html.wsp-embutido`) sempre foi síncrona, mas até 04/09 quem de fato
 * escondia a lateral era só um `.remove()` via JS no DOMContentLoaded —
 * que só dispara depois que a página INTEIRA termina de ser parseada.
 * Numa aba pesada (achado do Rafael: painel.php com milhares de
 * passageiros na tabela) isso demorava o suficiente pra dar tempo da
 * lateral embutida aparecer inteira, sobreposta à lateral de verdade do
 * workspace por baixo — "duas barras laterais" por um instante, cada uma
 * clicável, até o remove() rodar e sumir com a de dentro. CSS não espera
 * o documento terminar de parsear pra aplicar `display:none`. */
html.wsp-embutido .lat-skin,
html.wsp-embutido .topbar,
html.wsp-embutido .topbar.topbar-admin,
html.wsp-embutido .faixa-ambiente,
html.wsp-embutido .versao-sistema{display:none;}

.lat-skin{position:fixed; top:0; left:0; bottom:0; width:160px; z-index:120;
  display:flex; flex-direction:column; transition:width .18s ease;}
body.lat-colapsada .lat-skin{width:52px;}
body.tem-lateral{margin-left:160px; transition:margin-left .18s ease;}
body.tem-lateral.lat-colapsada{margin-left:52px;}
.lat-topo{padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px;}
body.lat-colapsada .lat-topo{padding:14px 6px; justify-content:center;}
.lat-logo img{height:48px; display:block; max-width:100%;}
body.lat-colapsada .lat-logo{display:none;}
.lat-toggle{border:1px solid #e2e8ea; background:#fff; color:#5c6f79; width:24px; height:24px;
  border-radius:7px; cursor:pointer; font-size:12px; flex-shrink:0;}
.lat-toggle::before{content:'«';}
body.lat-colapsada .lat-toggle::before{content:'»';}
.lat-nav{flex:1; overflow-y:auto; padding:8px 0;}
.lat-grupo{padding:12px 14px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.4);}
body.lat-colapsada .lat-grupo{display:none;}
.lat-item{display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:12.5px;
  text-decoration:none; white-space:nowrap; border-left:3px solid transparent; cursor:pointer;}
.lat-item .icone{width:15px; text-align:center; flex-shrink:0;}
body.lat-colapsada .lat-item{padding:11px 0; justify-content:center; gap:0;}
body.lat-colapsada .lat-item .rotulo{display:none;}
body.lat-colapsada .lat-item .icone{width:auto; font-size:16px;}

/* Skin 1 — lateral branca. */
.lat-skin-1{background:#fff; border-right:1px solid #e2e8ea;}
.lat-skin-1 .lat-topo{border-bottom:1px solid #e2e8ea;}
.lat-skin-1 .lat-item{color:#1c2b33;}
.lat-skin-1 .lat-item.ativo{background:#eef6ff; border-left-color:#003c58; font-weight:700; color:#003c58;}
.lat-skin-1 .lat-grupo{color:#8a99a0;}

/* Skins 5 e 6 — lateral escura. 5: cartão branco atrás da logo colorida.
 * 6: uniforme, logo branca lisa direto no navy (sem cartão nenhum). */
.lat-skin-5, .lat-skin-6{background:#123249;}
.lat-skin-5 .lat-topo{background:#fff; border-bottom:1px solid #e2e8ea;}
.lat-skin-5 .lat-item, .lat-skin-6 .lat-item{color:rgba(255,255,255,.68);}
.lat-skin-5 .lat-item.ativo, .lat-skin-6 .lat-item.ativo{background:rgba(255,255,255,.1); border-left-color:#95c23d; font-weight:700; color:#fff;}
.lat-skin-5 .lat-grupo, .lat-skin-6 .lat-grupo{color:rgba(255,255,255,.4);}

/* Cluster flutuante (sino/perfil) — a topbar horizontal de sempre perde o
 * logo e a nav (viraram a lateral) e flutua só com o que sobra, sempre no
 * canto superior direito. O workspace de abas (atendimento.php) ajusta a
 * posição via JS pra alinhar com a fileira de abas dele; em qualquer
 * outra página o valor fixo abaixo já é a posição final.
 *
 * INCONDICIONAL (.topbar-admin, não body.tem-lateral .topbar): a versão
 * antiga só virava cluster flutuante depois que o script no topo de
 * topbar_admin.php rodava e adicionava a classe no body — na prática, um
 * flash real da topbar azul cheia (a "skin antiga") aparecia antes disso,
 * porque o navegador pinta a página com o CSS que já tem antes de rodar
 * qualquer JS. .topbar-admin marca de propósito só a topbar do admin (a
 * de topbar_empresa.php/topbar_passageiro.php, tela do cliente, continua
 * usando .topbar puro e a barra horizontal cheia, que é o design certo
 * pra elas) — assim o cluster já nasce no lugar certo, sem depender de
 * classe nenhuma adicionada depois. Achado do Rafael em 04/09. */
.topbar.topbar-admin{position:fixed; top:14px; right:18px; z-index:150;
  background:transparent; box-shadow:none; padding:0; height:auto; width:auto;
  display:flex; align-items:center; gap:10px;}
.topbar.topbar-admin .topbar-sino{color:#5c6f79;}
.topbar.topbar-admin .topbar-sino:hover{background:rgba(0,40,60,.06);}
.topbar.topbar-admin .user-chip{color:#1c2b33;}
.topbar.topbar-admin .user-chip:hover{background:rgba(0,40,60,.06);}

.topbar{background:var(--azul); color:#fff; padding:14px 32px; display:flex; align-items:center; gap:28px;}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--cereja); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:800; flex-shrink:0;}
.avatar-foto{object-fit:cover;}
.topbar a{color:#fff; opacity:.8; font-size:13px; text-decoration:none;}
.topbar a:hover{opacity:1;}

/* Itens fixos da barra (Dashboard/Empresas/Passageiros/... — varia por
   perfil, ver includes/topbar_admin.php, topbar_empresa.php,
   topbar_passageiro.php) — sempre visíveis, nunca dentro do menu flutuante. */
.topbar-links{display:flex; align-items:center; gap:22px; margin-right:auto; flex-wrap:wrap;}
.topbar-links a{font-weight:700; position:relative; padding-bottom:4px;}
/* Item da seção em que o agente/empresa/passageiro está agora — opacidade
   cheia + traço embaixo, sem mudar o tamanho da caixa (senão os vizinhos
   "pulariam" de lugar quando um item vira o ativo). */
.topbar-links a.ativo{opacity:1;}
.topbar-links a.ativo::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2.5px;
  background:var(--cereja); border-radius:2px;
}

/* Sino de notificações — fica na barra, ao lado do nome (só existe no
   admin, é o único perfil com notificações). Vai direto pra
   notificacoes.php, não abre o menu flutuante. */
.topbar-sino{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:#fff; opacity:.8; transition:.15s; flex-shrink:0;
}
.topbar-sino:hover{opacity:1; background:rgba(255,255,255,.1);}
.topbar-sino svg{width:19px; height:19px;}
.badge-notificacao.badge-sino{position:absolute; top:1px; right:1px; margin-left:0; vertical-align:baseline;}

/* ---- MENU FLUTUANTE DO USUÁRIO ---- */
.topbar-perfil{position:relative;}
.user-chip{
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  background:none; border:none; color:#fff; font-family:inherit; cursor:pointer;
  padding:5px 12px 5px 5px; border-radius:999px; transition:.15s;
}
.user-chip:hover{background:rgba(255,255,255,.1);}
.user-chip span{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.menu-flutuante{
  display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:60;
  background:#fff; color:var(--texto); border-radius:16px; min-width:292px;
  box-shadow:0 18px 46px rgba(0,20,30,.28); overflow:hidden;
}
.menu-flutuante.aberto{display:block;}

/* Todo link aqui dentro precisa "vencer" a regra genérica ".topbar a"
   (que deixa qualquer <a> da barra em branco/opacidade reduzida — certa
   pros links da barra azul, errada aqui dentro, num menu branco) — por
   isso ".menu-flutuante" na frente de cada seletor: mesma especificidade
   de classe+classe (2) bate a de classe+elemento (1+1) do ".topbar a",
   sem precisar de !important. */
.menu-flutuante a{text-decoration:none; opacity:1;}
.menu-flutuante .menu-flutuante-perfil{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  color:var(--texto); border-bottom:1px solid var(--cinza); transition:.15s;
}
.menu-flutuante .menu-flutuante-perfil:hover{background:#f7f8f9;}
.menu-flutuante-perfil .avatar{width:38px; height:38px; font-size:14px;}
.menu-flutuante-nome{flex:1; font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.menu-flutuante-seta{width:16px; height:16px; color:var(--cinza-escuro); flex-shrink:0;}

.menu-flutuante .menu-flutuante-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px; color:var(--texto); font-size:13.5px; font-weight:600;
  border-bottom:1px solid var(--cinza); transition:.15s;
}
.menu-flutuante .menu-flutuante-item:hover{background:#f7f8f9;}

/* Grade em 3 colunas (quebra em linhas conforme os itens crescem) — com 5
   atalhos numa linha só ficava espremido; em 2 linhas cada um respira. */
.menu-flutuante-grade{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:12px 14px; border-bottom:1px solid var(--cinza);}
.menu-flutuante .menu-flutuante-icone{
  display:flex; flex-direction:column; align-items:center; gap:6px; width:76px;
  padding:9px 4px; border-radius:10px; color:var(--azul); transition:.15s;
}
.menu-flutuante .menu-flutuante-icone:hover{background:rgba(0,60,88,.06);}
.menu-flutuante-icone svg{width:20px; height:20px;}
.menu-flutuante-icone span{font-size:10.5px; font-weight:700; text-align:center; line-height:1.25;}

.menu-flutuante .menu-flutuante-sair{
  display:block; padding:13px 18px; color:var(--cereja);
  font-size:13.5px; font-weight:700; text-align:right; transition:.15s;
}
.menu-flutuante .menu-flutuante-sair:hover{background:rgba(231,52,82,.06);}

.painel-inner{max-width:960px; margin:0 auto; padding:36px 24px 60px;}
/* Cotações precisa de mais respiro que as outras telas — é um quadro de
   7 colunas lado a lado, não uma lista/formulário de coluna única. */
.painel-inner-kanban{max-width:1800px;}
.painel-header{margin-bottom:28px;}
.painel-header h2{font-size:26px; color:var(--azul);}
.painel-header p{color:var(--cinza-escuro); font-size:14px; margin-top:4px;}

.viagens-secao-titulo{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cinza-escuro); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--cinza);}
.viagens-secao-titulo:first-of-type{margin-top:0;}
.viagens-anteriores{margin-top:26px;}
.viagens-anteriores summary{cursor:pointer; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cinza-escuro); padding-bottom:6px; border-bottom:1px solid var(--cinza); margin-bottom:12px; list-style:none;}
.viagens-anteriores summary::-webkit-details-marker{display:none;}
.viagens-anteriores summary::before{content:'▸ ';}
.viagens-anteriores[open] summary::before{content:'▾ ';}

.viagem-card{
  background:#fff; border-radius:var(--radius); padding:20px 22px; margin-bottom:16px;
  box-shadow:0 2px 10px rgba(0,40,60,.06); border:1.5px solid transparent; transition:.2s;
}
.viagem-card:hover{border-color:var(--azul-2);}
.viagem-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; cursor:pointer;}
.viagem-top h3{font-size:17px; color:var(--azul);}
.viagem-top .destino{font-size:13px; color:var(--cinza-escuro); margin-top:3px;}
.status-badge{font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap;}
.status-confirmada{background:rgba(0,60,88,.10); color:var(--azul);}
.status-andamento{background:rgba(231,52,82,.12); color:var(--cereja);}
.status-concluida{background:var(--cinza); color:var(--cinza-escuro);}
.status-recusado{background:rgba(150,30,30,.10); color:#961e1e;}
/* Check-in aberto: embarque em até 48h. É o único estado que pede ação
   agora, então âmbar — destaca sem gritar como o vermelho de "em viagem". */
.status-checkin{background:rgba(240,165,0,.18); color:#8a5e00;}
/* Cotações "aguardando" (chegou, ninguém pegou ainda) e "aprovada" (virou
   venda) — as duas únicas situações do funil de cotações sem uma cor já
   existente que sirva. Verde é novo na paleta, só pra sucesso/aprovação. */
.status-aguardando{background:rgba(106,122,130,.14); color:var(--cinza-escuro);}
.status-aprovado{background:rgba(31,138,76,.12); color:#1f8a4c;}

.viagem-datas{display:flex; gap:22px; margin-top:14px; font-size:13px; color:#4c5a61;}
.viagem-datas span b{color:var(--azul); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px;}

.docs{margin-top:16px; padding-top:16px; border-top:1px dashed var(--cinza); display:none; flex-wrap:wrap; gap:10px; align-items:center;}
.viagem-card.aberta .docs{display:flex;}
.doc-chip{display:flex; align-items:center; gap:8px; background:#f4f6f6; border-radius:9px; padding:7px 8px 7px 13px;
  font-size:12.5px; font-weight:600; color:var(--azul);}
.doc-chip > svg{width:15px; height:15px; flex-shrink:0;}
.doc-chip .doc-tipo{margin-right:2px;}

.doc-actions{display:flex; gap:2px; margin-left:2px; padding-left:8px; border-left:1px solid #d9dfe1;}
.doc-action-btn{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:6px; color:var(--cinza-escuro); transition:.15s;
  border:none; background:none; padding:0; cursor:pointer; font:inherit;
}
.doc-action-btn:hover{background:rgba(0,60,88,.10); color:var(--azul);}
.doc-action-btn svg{width:14px; height:14px;}

/* ---- MODAL FLUTUANTE DE DOCUMENTO ---- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,20,30,.65); z-index:1000;
  align-items:center; justify-content:center; padding:28px;
}
.modal-overlay.aberto{display:flex;}
.modal-conteudo{
  background:#fff; border-radius:14px; width:100%; max-width:920px; height:88vh;
  position:relative; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.modal-conteudo iframe{width:100%; height:100%; border:none; display:block;}
.modal-fechar{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:22px; line-height:1;
  cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center;
}
.modal-fechar:hover{background:rgba(0,0,0,.75);}
@media (max-width:760px){
  .modal-overlay{padding:0;}
  .modal-conteudo{max-width:100%; height:100%; border-radius:0;}
}

.upload-form{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.upload-form select{width:auto; padding:9px 10px; font-size:12.5px;}
.upload-form input[type="file"]{font-size:12px;}
.upload-btn{
  padding:9px 13px; border-radius:9px; border:1.5px dashed #b9c3c7; background:none;
  font-size:12.5px; font-weight:700; color:var(--cinza-escuro); cursor:pointer;
}
.upload-btn:hover{border-color:var(--cereja); color:var(--cereja);}

.vazio{color:var(--cinza-escuro); font-size:13.5px; padding:20px 0;}

/* ---- ADMIN ---- */
.painel-header-row{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px; flex-wrap:wrap;}
.busca-form{display:flex; gap:8px;}
.busca-form input{width:260px;}

.btn-secundario{
  display:inline-block; padding:12px 18px; border-radius:10px; border:1.5px solid var(--azul-2);
  background:none; color:var(--azul-2); font-family:'Open Sans'; font-weight:700;
  font-size:14px; cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;
}
.btn-secundario:hover{background:rgba(10,91,130,.08);}
.btn-secundario:disabled{opacity:.5; cursor:not-allowed;}
.btn-secundario:disabled:hover{background:none;}

.btn-perigo{
  padding:9px 13px; border-radius:9px; border:1.5px solid rgba(231,52,82,.4); background:none;
  font-size:12.5px; font-weight:700; color:var(--cereja); cursor:pointer;
}
.btn-perigo:hover{background:rgba(231,52,82,.08);}

.voltar-link{display:inline-block; font-size:13px; font-weight:700; color:var(--azul-2); text-decoration:none; margin-bottom:18px;}
.voltar-link:hover{text-decoration:underline;}

/* Toda tabela larga precisa rolar dentro de si mesma — sem isso, uma coluna
   a mais (ex: financeiro_geral.php ganhando "A pagar"/"Status") simplesmente
   fica invisível fora do .painel-inner (max-width:960px), sem barra de
   rolagem nenhuma. Isso já existia só dentro do media query mobile; agora
   vale sempre, porque o problema também acontece em telas maiores.
   ⚠️ Achado real (31/08, lista de Passageiros com 663 linhas): só
   overflow-x:auto não bastava — sem altura travada, a caixa cresce até
   caber TODAS as linhas, e a barra de rolagem horizontal (que fica embaixo
   da caixa) ia parar depois da linha 663, inalcançável sem rolar a página
   inteira primeiro. `max-height` + `overflow-y:auto` prende a rolagem
   vertical DENTRO da tabela, então a barra horizontal fica sempre a um
   scroll de distância — e o cabeçalho gruda no topo (sticky) pra nunca
   perder a referência de qual coluna é qual. */
.tabela-lista{display:block; overflow:auto; max-height:min(600px, 70vh); max-width:100%; -webkit-overflow-scrolling:touch; width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06);}
/* Container ficou largo (painel-inner-kanban) mas as colunas de conteúdo
   fixo (data, valor, status...) não crescem sozinhas — sobrava um vão em
   branco depois da última coluna. A 1ª coluna (nome/identificação) absorve
   o espaço que sobra; as demais mantêm a largura do próprio conteúdo.
   Não vale pra `.tabela-fixa` (table-layout:fixed com colgroup próprio,
   ver `.tabela-lista.tabela-fixa col:first-child` mais abaixo). */
.tabela-lista:not(.tabela-fixa) th:first-child,
.tabela-lista:not(.tabela-fixa) td:first-child{width:100%;}
/* Divisor entre os dois grupos das listas de Passageiros/Empresas (com
   viagem agendada vs sem) quando nenhum filtro está ativo — uma linha só
   com o rótulo, não uma tabela dentro da tabela. */
.tabela-lista tr.linha-divisor td{
  background:rgba(0,60,88,.045); color:var(--azul); font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  padding:9px 16px;
}
.tabela-lista th{background:var(--azul); color:#fff; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding:13px 13px; white-space:nowrap;
                 position:sticky; top:0; z-index:2;}
/* Grupo de contadores numa coluna só (ex: "Viagens" = próximas + em
   andamento + concluídas). O título e a legenda ficam dentro do próprio
   <th>, e legenda e números compartilham a mesma grade — cada número cai
   embaixo do seu rótulo, sem precisar de uma linha de cabeçalho extra
   (que sempre parecia um 2º título pra tabela inteira). Preparado pra um
   segundo grupo ao lado, tipo "Solicitações". */
.tabela-fixa{table-layout:fixed;}
.tabela-lista th.col-grupo{
  /* Mesmo azul do resto do cabeçalho — só a borda sutil marca o grupo. */
  border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14);
  text-align:center; padding-top:10px; padding-bottom:10px;
}
.tabela-lista td.col-grupo{background:rgba(0,60,88,.035); border-left:1px solid var(--cinza); border-right:1px solid var(--cinza);}
.tabela-lista tr:hover td.col-grupo{background:rgba(0,60,88,.055);}

.grupo-legenda, .grupo-cel{display:grid; gap:10px; align-items:center; justify-items:center;}
.grupo-legenda.grupo-3, .grupo-cel.grupo-3{grid-template-columns:repeat(3, minmax(76px, 1fr));}
.grupo-legenda.grupo-4, .grupo-cel.grupo-4{grid-template-columns:repeat(4, minmax(64px, 1fr));}
.grupo-legenda{
  margin-top:8px; font-size:9.5px; font-weight:600; letter-spacing:0;
  text-transform:none; opacity:.7;
}
/* Ponto em cima do rótulo, não do lado — com colunas estreitas, texto e
   ponto lado a lado de itens vizinhos colidiam ("check-in aberto" grudava
   em "em andamento"). Empilhado, cada rótulo fica preso à sua coluna. */
.grupo-legenda span{display:flex; flex-direction:column; align-items:center; gap:3px; white-space:normal; line-height:1.2;}

.ponto-status{display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.ponto-checkin{background:#f0a500;}
.ponto-proximas{background:#7ecbf0;}
.ponto-andamento{background:var(--cereja);}
.ponto-concluidas{background:#93a5ad;}
.contagem-zero{color:#c2ccd1; font-weight:700;}

/* Avatar nas listas — foto de perfil quando existe, senão as iniciais.
   Círculo pra pessoa, canto arredondado pra empresa (diferencia os dois
   tipos de linha numa olhada só). */
.lista-pessoa{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;}
a.lista-pessoa:hover .lista-nome{text-decoration:underline;}
.lista-nome{font-weight:700; color:var(--azul); text-decoration:none;}
a.lista-nome:hover{text-decoration:underline;}
.lista-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--azul); color:#fff; font-family:'Poppins', sans-serif; font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.lista-avatar-empresa{border-radius:10px; background:var(--azul-2);}
.lista-avatar-foto{object-fit:cover;}
.tabela-lista td{padding:14px 12px; font-size:13.5px; border-top:1px solid var(--cinza); vertical-align:middle;}
.tabela-lista tr:hover td{background:#f9fafa;}
.tabela-lista a{color:var(--azul); font-weight:700; text-decoration:none;}
.tabela-lista a:hover{text-decoration:underline;}
.tabela-lista .linha-sub{color:var(--cinza-escuro); font-size:12px; margin-top:2px;}

.form-card{background:#fff; border-radius:var(--radius); padding:28px; max-width:520px; box-shadow:0 2px 10px rgba(0,40,60,.06);}
.form-card.config-card{max-width:900px;}
.form-linha{display:flex; gap:14px;}
.form-linha .input-group{flex:1;}
/* Grupo de checkboxes lado a lado (ex: serviços pedidos numa cotação) —
   cada opção com o mesmo respiro visual de um chip, sem virar botão. */
.checkbox-grupo{display:flex; flex-wrap:wrap; gap:10px 18px;}
.checkbox-grupo label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--texto);}

/* Seletor de destinos: vários "chips" (um por destino em aberto) + campo
   de busca que também cadastra um destino novo na hora, se não achar. */
.destinos-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.destinos-chips:empty{margin-bottom:0;}
.destino-chip{
  display:flex; align-items:center; gap:6px; background:rgba(0,60,88,.07);
  color:var(--azul); border-radius:20px; padding:6px 8px 6px 14px;
  font-size:13.5px; font-weight:600;
}
.destino-chip.destino-chip-escolhido{background:rgba(231,52,82,.12); color:var(--cereja);}
.destino-chip-remover{
  border:none; background:rgba(0,60,88,.12); color:var(--azul); width:18px; height:18px;
  border-radius:50%; line-height:1; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.destino-chip.destino-chip-escolhido .destino-chip-remover{background:rgba(231,52,82,.18); color:var(--cereja);}
.destino-chip-marcar{
  border:1px solid rgba(0,60,88,.25); background:none; color:var(--azul); border-radius:20px;
  padding:2px 9px; font-size:11.5px; font-weight:700; cursor:pointer; margin-left:2px;
}
.destino-chip.destino-chip-escolhido .destino-chip-marcar{border-color:rgba(231,52,82,.4); color:var(--cereja);}
.destinos-busca-linha{display:flex; gap:8px;}
.destinos-busca-linha input{flex:1;}
/* Caixa de colar conversa do WhatsApp na tela de nova solicitação —
   destacada porque é atalho, não parte do formulário em si. */
.conversa-ia{
  background:#fff; border-radius:var(--radius); padding:18px 20px; margin-bottom:18px;
  box-shadow:0 2px 10px rgba(0,40,60,.06); border-left:3px solid var(--orc-primaria);
}
.conversa-ia-topo{display:flex; align-items:flex-start; gap:14px; justify-content:space-between; margin-bottom:10px;}
.conversa-ia-topo b{color:var(--azul); font-size:14.5px;}
.conversa-ia-topo .linha-sub{margin-top:2px; max-width:520px;}
.conversa-ia-topo button{flex:none; white-space:nowrap;}
.conversa-ia textarea{width:100%; resize:vertical;}
.conversa-ia .linha-erro{color:var(--cereja); font-size:12.5px; font-weight:700; min-height:16px; margin-top:4px;}
.conversa-ia.carregando{opacity:.65; pointer-events:none;}
/* Campos que a IA acabou de preencher piscam em verde, pro agente saber
   onde olhar — some sozinho, não vira estado permanente. */
@keyframes ia-preencheu{from{background:rgba(126,180,58,.28);} to{background:transparent;}}
.ia-preencheu{animation:ia-preencheu 2.2s ease-out;}

.autocomplete-caixa{position:relative;}
.autocomplete-sugestoes{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:80;
  background:#fff; border-radius:var(--radius); box-shadow:0 18px 46px rgba(0,20,30,.28);
  max-height:220px; overflow-y:auto; padding:6px;
}
.autocomplete-sugestoes[hidden]{display:none;}
.autocomplete-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:inherit;
}
.autocomplete-item:hover{background:rgba(10,91,130,.08);}

/* Chips genéricos (hoje usado pras tags de passageiro) — mesmo visual dos
   chips de destino, mas sem o conceito de "escolhido". */
.chips-wrap{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.chips-wrap:empty{margin-bottom:0;}
.chip{
  display:flex; align-items:center; gap:6px; background:rgba(0,60,88,.07);
  color:var(--azul); border-radius:20px; padding:6px 8px 6px 14px;
  font-size:13.5px; font-weight:600;
}
.chip-remover{
  border:none; background:rgba(0,60,88,.12); color:var(--azul); width:18px; height:18px;
  border-radius:50%; line-height:1; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.chip-busca-linha{display:flex; gap:8px;}
.chip-busca-linha input{flex:1;}
/* "Pedido de: pessoa física / empresa" — a escolha que define de quem é a
   cotação. Fica em cima de tudo no bloco porque muda o resto dos campos. */
.radio-linha{display:flex; gap:16px; flex-wrap:wrap;}
.radio-linha label{
  display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--texto); margin-bottom:0; cursor:pointer;
}
/* Painel do cadastro relâmpago de passageiro, que abre embaixo da busca. */
.cadastro-rapido{
  margin-top:10px; padding:14px; border-radius:11px;
  background:rgba(0,60,88,.05); border:1px dashed rgba(0,60,88,.22);
}
.cadastro-rapido[hidden]{display:none;}
.cadastro-rapido input{margin-bottom:8px;}
.cadastro-rapido .linha-erro{color:var(--cereja); font-size:12.5px; font-weight:700; min-height:16px;}
.tags-lista{display:flex; flex-wrap:wrap; gap:6px;}
.tag-badge{
  background:rgba(0,60,88,.07); color:var(--azul); border-radius:20px;
  padding:3px 11px; font-size:12px; font-weight:700;
}

/* Formulário em BLOCOS lado a lado, ocupando a largura toda da tela (hoje
   usado nas telas de cotação). O .form-card de coluna única empilhava tudo
   num quadro estreito no meio: as preferências e os serviços caíam bem
   abaixo da dobra e as laterais ficavam vazias. Aqui cada grupo de campos
   é um bloco, e o grid quebra sozinho conforme a largura (4 colunas em tela
   cheia, 1 no celular) — dá pra começar a preencher tudo já na 1ª tela. */
.painel-inner-ficha{max-width:1500px;}
.form-blocos{display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:18px; align-items:start;}
.form-bloco{background:#fff; border-radius:var(--radius); padding:22px 24px; box-shadow:0 2px 10px rgba(0,40,60,.06);}
.form-bloco-titulo{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--cereja); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid #eef2f4;
}
.form-bloco-ajuda{margin:-8px 0 16px;}
/* Sem margem sobrando no último campo — senão o bloco ganha um vão morto
   embaixo que desalinha os blocos vizinhos. */
.form-bloco > .input-group:last-child{margin-bottom:0;}
.form-bloco > .form-linha:last-child .input-group{margin-bottom:0;}
/* date/number ficaram de fora da regra global de input lá em cima (que só
   pega text, password e select), então dentro dos blocos vinham com a cara
   crua do navegador, destoando do resto do formulário. */
.form-bloco input[type="date"], .form-bloco input[type="number"]{
  width:100%; padding:13px 14px; border-radius:10px;
  border:1.5px solid #d7dee1; font-family:'Open Sans'; font-size:14px;
  background:#fafbfb; transition:.2s;
}
.form-bloco input[type="date"]:focus, .form-bloco input[type="number"]:focus{
  outline:none; border-color:var(--azul-2); box-shadow:0 0 0 3px rgba(10,91,130,.15);
}
.form-bloco .checkbox-grupo{flex-direction:column; gap:9px;}
/* Topo da ficha: voltar + dados de identificação + excluir na MESMA linha.
   Antes o "código/criada em/responsável" era uma faixa própria embaixo, e
   as duas tiras finas juntas comiam ~120px antes do formulário começar. */
.ficha-topo{align-items:center; margin-bottom:20px;}
.ficha-topo .viagem-datas{margin-top:0; flex:1; row-gap:6px; flex-wrap:wrap;}
.form-acoes{margin-top:20px; display:flex; justify-content:flex-end; gap:12px;}
/* .btn-primary é width:100% (nasceu pro card de login) — aqui vira botão
   de largura natural, no canto da barra de ações. */
.form-acoes .btn-primary{width:auto; padding:14px 34px;}

/* Kanban de cotações — 7 colunas que ENCOLHEM/ESTICAM pra caber todas
   sem rolagem (cada uma divide o espaço disponível igualmente); só
   rola de verdade quando a janela é estreita demais pra caber 200px por
   coluna (min-width). */
.kanban{display:flex; gap:12px; overflow-x:auto; padding-bottom:12px; align-items:flex-start;}
.kanban-coluna{
  background:#fff; border-radius:var(--radius); flex:1 1 0; min-width:190px;
  box-shadow:0 2px 10px rgba(0,40,60,.06); display:flex; flex-direction:column;
  max-height:calc(100vh - 260px);
}
/* Coluna sem nenhum card recua visualmente — deixa os cheios em evidência
   num quadro com muitas fases (ex: Viagens tem 8, metade costuma vazia). */
.kanban-coluna:has(.kanban-coluna-corpo:empty){opacity:.62;}
.kanban-coluna-cabecalho{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:11px 13px; font-size:11.5px; font-weight:800; letter-spacing:.3px;
  border-radius:var(--radius) var(--radius) 0 0; color:#fff;
}
/* Nome da coluna trunca com reticências em vez de empurrar a soma pra
   fora quando a coluna encolhe muito (ex: "AGUARDANDO CLIENTE (3)"). */
.kanban-coluna-cabecalho span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.kanban-coluna-soma{flex-shrink:0;}
/* Reaproveita as mesmas classes de status-badge já usadas no resto do
   sistema, só que aqui como fundo sólido (contraste maior que o badge
   suave, porque é o cabeçalho de uma coluna inteira, não uma etiqueta). */
.kanban-coluna-cabecalho.status-aguardando{background:var(--cinza-escuro);}
.kanban-coluna-cabecalho.status-checkin{background:#a06e00;}
.kanban-coluna-cabecalho.status-andamento{background:var(--cereja);}
.kanban-coluna-cabecalho.status-confirmada{background:var(--azul);}
.kanban-coluna-cabecalho.status-concluida{background:#4c5a61;}
.kanban-coluna-cabecalho.status-aprovado{background:#1f8a4c;}
.kanban-coluna-cabecalho.status-recusado{background:#961e1e;}

/* ---- Kanban de Viagens: 7 fases em 4 faixas + card com checklist ---- */
.kanban-coluna-cabecalho.fase-importada{background:#c2410c;}
.kanban-coluna-cabecalho.fase-financeiro{background:#a06e00;}
.kanban-coluna-cabecalho.fase-documentacao{background:var(--azul);}
.kanban-coluna-cabecalho.fase-pre_viagem{background:var(--cinza-escuro);}
.kanban-coluna-cabecalho.fase-em_andamento{background:var(--cereja);}
.kanban-coluna-cabecalho.fase-concluida{background:#4c5a61;}
.kanban-coluna-cabecalho.fase-feedback{background:#6a4b8a;}

/* As 3 faixas macro (Pós-venda / Viagem / Fechamento) por cima das colunas.
   O board inteiro rola na horizontal como uma peça só; cada grupo empilha
   o título e a linha de colunas dele. */
.kanban-board{display:flex; gap:20px; overflow-x:auto; padding-bottom:12px; align-items:flex-start;}
.kanban-grupo{display:flex; flex-direction:column; gap:8px;}
.kanban-grupo-titulo{
  font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--cinza-escuro);
  padding:2px 4px 6px; border-bottom:2px solid var(--cinza);
}
.kanban-grupo-colunas{display:flex; gap:12px; align-items:flex-start;}
.kanban-card-alerta{border-left:3px solid var(--cereja);}
.kanban-card-checklist{font-size:11px; font-weight:700; color:var(--cinza-escuro);}
.kanban-card-checklist.completo{color:#1f8a4c;}
.kanban-card-checklist.atrasado{color:var(--cereja);}
/* Fim do rodapé do card: agrupa contagem de opções / checklist / tempo
   na etapa numa linha só, à direita do valor — antes cada um era uma
   linha, e o card ficava alto e acumulado demais. */
.kanban-card-fim{display:flex; align-items:center; gap:7px; flex-shrink:0;}
.kanban-card-tempo{font-size:10.5px; color:var(--cinza-escuro); opacity:.65; white-space:nowrap;}

/* Linha do tempo (histórico de atividades) nas fichas de solicitação/viagem */
.timeline-item{display:flex; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--cinza);}
.timeline-item:last-child{border-bottom:none;}
.timeline-quando{flex:0 0 116px; font-size:11.5px; color:var(--cinza-escuro); font-variant-numeric:tabular-nums;}
.timeline-texto{flex:1; min-width:0;}
.timeline-quem{flex:0 0 auto; font-size:11.5px; color:var(--cinza-escuro); opacity:.75;}
.kanban-coluna-soma{font-weight:700; font-variant-numeric:tabular-nums; font-size:11px;}
.kanban-coluna-corpo{padding:10px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; min-height:70px;}
/* Rodapé da coluna quando ela tem mais viagens do que o teto de cards. */
.kanban-mais{display:block; padding:8px; text-align:center; font-size:12px; font-weight:600;
  text-decoration:none; color:var(--cinza-escuro); background:#f4f6f8; border-radius:8px;}
.kanban-mais:hover{background:#e8edf1;}

.kanban-card{
  background:#f8fafb; border:1px solid var(--cinza); border-radius:10px; padding:9px 11px;
  cursor:grab; font-size:12.5px;
}
.kanban-card:active{cursor:grabbing;}
.kanban-card.arrastando{opacity:.35;}
.kanban-card-topo{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
.kanban-card-nome{display:block; font-weight:700; color:var(--texto); margin-bottom:2px; font-size:14.5px; line-height:1.25; text-decoration:none;}
.kanban-card-nome:hover{color:var(--azul-2); text-decoration:underline;}
/* Nome do contato (quando o card já mostra um título em cima dele) e
   empresa vinculada — texto secundário, mesma hierarquia visual. */
.kanban-card-contato,.kanban-card-empresa{font-size:11.5px; color:var(--cinza-escuro); margin-bottom:2px;}
/* Linha secundária que também é link (passageiro/empresa do card): mantém a
   cor discreta do texto de apoio e só se revela como link no hover. */
.kanban-card-pessoa{display:block; color:var(--cinza-escuro); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kanban-card-pessoa:hover{color:var(--azul-2); text-decoration:underline;}
.kanban-card-destino{font-size:11.5px; color:var(--cinza-escuro); margin-bottom:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kanban-card-servicos{display:flex; gap:5px; margin-bottom:6px; font-size:13px; line-height:1;}
.kanban-card-rodape{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.kanban-card-valor{font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums; font-size:12px;}
.kanban-card-valor.aceito{color:#1f8a4c;}

/* Trilha da ficha da cotação — muda a situação clicando numa etapa, sem
   precisar voltar pro quadro kanban pra arrastar. Sete faixas que vão se
   preenchendo, em vez de bolinha numerada ligada por linha: o número não
   dizia nada (ninguém chama a etapa de "a 3", chamam de "Em Cotação") e
   aquele desenho é o de qualquer assistente de instalação. Aqui o
   destaque é o NOME da etapa atual. */
.trilha-topo{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px;}
.trilha-atual{font-family:'Poppins', sans-serif; font-weight:700; font-size:16px; color:var(--cereja);}
.trilha-contagem{font-size:11.5px; font-weight:700; color:var(--cinza-escuro); letter-spacing:.4px; flex-shrink:0;}
.trilha{display:flex; align-items:flex-start; gap:6px; margin-bottom:24px; overflow-x:auto; padding-bottom:2px;}
.trilha-etapa{
  flex:1; min-width:74px; background:none; border:0; padding:0; cursor:pointer;
  text-align:left; font-family:'Open Sans', sans-serif;
}
.trilha-barra{display:block; height:7px; border-radius:99px; background:var(--cinza); transition:background .18s, height .18s;}
.trilha-nome{
  display:block; margin-top:10px; font-size:10.5px; font-weight:700;
  color:var(--cinza-escuro); letter-spacing:.3px; transition:color .18s;
}
.trilha-etapa:hover .trilha-barra{background:#b6c5cc;}
.trilha-etapa.concluida .trilha-barra{background:var(--azul-2);}
.trilha-etapa.concluida .trilha-nome{color:var(--azul-2);}
.trilha-etapa.concluida:hover .trilha-barra{background:var(--azul);}
.trilha-etapa.atual .trilha-barra{background:var(--cereja); height:11px;}
.trilha-etapa.atual .trilha-nome{color:var(--cereja); font-size:11.5px; font-weight:800;}
.trilha-etapa.atual:hover .trilha-barra{background:var(--cereja-deep);}
.trilha-etapa:focus-visible{outline:2px solid var(--azul-2); outline-offset:4px; border-radius:5px;}

.config-secao{margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--cinza);}
.config-secao:last-of-type{border-bottom:none; padding-bottom:0; margin-bottom:0;}
.config-secao h3{color:var(--azul); font-size:16px; margin-bottom:4px;}
.config-secao .config-secao-sub{color:var(--cinza-escuro); font-size:13px; margin-bottom:18px;}

/* Seletor de skin (Ajustes → Configurações do sistema) — a miniatura
 * imita a lateral de verdade (mesmas 3 cores/composições de
 * includes/topbar_admin.php), pra reconhecer a skin sem trocar de tela
 * pra ver o resultado. */
.skin-opcoes{display:flex; gap:16px; flex-wrap:wrap;}
.skin-opcao{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; width:120px;}
.skin-opcao input{position:absolute; opacity:0; pointer-events:none;}
.skin-opcao-preview{display:flex; width:100%; height:74px; border-radius:10px; overflow:hidden;
  border:2px solid var(--cinza); box-shadow:0 2px 8px rgba(0,40,60,.06);}
.skin-opcao.selecionada .skin-opcao-preview, .skin-opcao:has(input:checked) .skin-opcao-preview{border-color:var(--azul-2);}
.skin-opcao-preview-lat{width:30%; height:100%;}
.skin-opcao-preview-corpo{flex:1; background:#eef1f3;}
.skin-opcao-1 .skin-opcao-preview-lat{background:#fff; border-right:1px solid #e2e8ea;}
.skin-opcao-5 .skin-opcao-preview-lat{background:#123249; position:relative;}
.skin-opcao-5 .skin-opcao-preview-lat::before{content:''; position:absolute; top:0; left:0; right:0; height:18px; background:#fff;}
.skin-opcao-6 .skin-opcao-preview-lat{background:#123249;}
.skin-opcao-nome{font-size:12px; font-weight:700; color:var(--cinza-escuro); text-align:center;}
.skin-opcao.selecionada .skin-opcao-nome, .skin-opcao:has(input:checked) .skin-opcao-nome{color:var(--azul);}

.logos-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.logo-config{background:#f9fafb; border:1.5px solid var(--cinza); border-radius:12px; padding:16px;}
.logo-config label{margin-bottom:8px;}
.logo-config input[type="file"]{font-size:12.5px; width:100%;}
.logo-config-preview{
  margin-top:12px; height:100px; border-radius:8px; background:#fff;
  border:1px dashed #d7dee1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px;
}
.logo-config-preview img{max-width:100%; max-height:100%; display:block;}
.logo-config-preview .vazio{color:var(--cinza-escuro); font-size:12px;}
.logo-config-slider{display:flex; align-items:center; gap:10px; margin-top:12px;}
.logo-config-slider input[type="range"]{flex:1; accent-color:var(--cereja);}
.logo-config-slider .valor-px{font-size:12.5px; font-weight:700; color:var(--azul); min-width:52px; text-align:right;}
textarea{
  width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid #d7dee1;
  font-family:'Open Sans'; font-size:14px; background:#fafbfb; resize:vertical; min-height:80px;
}
textarea:focus{outline:none; border-color:var(--azul-2); box-shadow:0 0 0 3px rgba(10,91,130,.15);}

.passageiro-info{background:#fff; border-radius:var(--radius); padding:22px 24px; margin-bottom:24px; box-shadow:0 2px 10px rgba(0,40,60,.06);}
.passageiro-info h2{color:var(--azul); font-size:22px; margin-bottom:6px;}
.passageiro-info .passageiro-meta{display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--cinza-escuro); margin-top:10px;}
.passageiro-info .passageiro-meta b{color:var(--azul); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px;}

.pg-mesclar-painel{background:#fbf9f5; border:1px solid #f0e2b8; border-radius:10px; padding:14px 16px; margin-top:14px;}
.pg-mesclar-painel p{font-size:13px; color:var(--cinza-escuro); margin:0 0 10px;}
.pg-mesclar-painel input[type=text]{width:100%; box-sizing:border-box; border:1px solid #dbe6ea; border-radius:8px; padding:9px 12px; font-size:13.5px;}
.pg-mesclar-painel input[type=text]:focus{outline:none; border-color:var(--azul);}
.pg-mesclar-item{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:none; border-bottom:1px solid #f0ece0;
  background:transparent; padding:9px 4px; cursor:pointer; font-size:13.5px;}
.pg-mesclar-item:hover{background:#f5efdc;}
.pg-mesclar-item span{font-size:11.5px; color:var(--cinza-escuro);}
.pg-mesclar-vazio{font-size:12.5px; color:var(--cinza-escuro); padding:8px 4px;}

.doc-linha{display:flex; align-items:center; justify-content:space-between; gap:10px;}

.empresa-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.empresa-badge{
  background:rgba(0,60,88,.08); color:var(--azul); font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:999px;
}

.viagem-vinculo{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; margin-top:6px;
}
.viagem-vinculo-empresa{background:rgba(0,60,88,.08); color:var(--azul);}
.viagem-vinculo-particular{background:rgba(0,0,0,.06); color:var(--cinza-escuro);}

.vinculo-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--cinza);}
.vinculo-linha:first-child{border-top:none;}
.vincular-form{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.vincular-form select{width:auto; min-width:220px;}
/* Form de adicionar responsável tem 3 campos livres em vez de um select —
   cada um cresce junto, sem um deles espremer os outros. */
.vincular-form input[type="text"]{width:auto; flex:1 1 160px; min-width:140px;}

/* ---- HOME (escolha de acesso) ---- */
.home-card{max-width:420px;}
.home-opcoes{display:flex; flex-direction:column; gap:12px; margin:24px 0 8px;}
.home-opcao{
  display:block; padding:18px 20px; border-radius:12px; border:1.5px solid #d7dee1;
  text-decoration:none; transition:.2s;
}
.home-opcao:hover{border-color:var(--azul-2); background:rgba(10,91,130,.04);}
.home-opcao-titulo{font-family:'Poppins'; font-weight:700; font-size:15.5px; color:var(--azul);}
.home-opcao-desc{font-size:12.5px; color:var(--cinza-escuro); margin-top:3px;}

.home-admin-link{
  position:fixed; right:16px; bottom:14px; font-size:11px; color:rgba(0,0,0,.22);
  text-decoration:none; letter-spacing:.3px; z-index:5;
}
.home-admin-link:hover{color:rgba(0,0,0,.5);}

/* ---- TABELA DE VIAGENS (filtros + formatação densa) ---- */
.tabela-card{background:#fff; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06); padding:22px; overflow:hidden;}
.tabela-card .vazio{padding:0;}

.tabela-filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.tabela-filtros input[type="text"]{width:240px;}
.tabela-filtros select{width:auto; min-width:170px;}

.filtros-ativos{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--cinza); font-size:12.5px; color:var(--cinza-escuro);
}

/* Navegação de páginas das listas longas (viagens). */
.paginacao{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--cinza);
  font-size:12.5px; color:var(--cinza-escuro);
}
.paginacao a{ font-weight:600; text-decoration:none; }
.paginacao a:hover{ text-decoration:underline; }
.filtro-tag{background:rgba(0,60,88,.08); color:var(--azul); font-weight:700; padding:4px 10px; border-radius:999px; font-size:12px;}
.filtro-tag-link{text-decoration:none; cursor:pointer;}
.filtro-tag-link:hover{background:rgba(0,60,88,.16);}
.filtro-limpar{color:var(--cereja); font-weight:700; text-decoration:none; margin-left:auto;}
.filtro-limpar:hover{text-decoration:underline;}

.tabela-scroll{overflow-x:auto; margin-top:18px;}
.tabela-viagens{box-shadow:none;}
.tabela-viagens th{white-space:nowrap;}
.tabela-viagens td{vertical-align:top; font-size:12.5px;}
.tabela-viagens td.prazo-urgente{color:var(--cereja); font-weight:700;}
.tabela-viagens td.prazo-urgente .linha-sub{color:var(--cereja);}

.tabela-lista thead a.th-ordenavel{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:2px;}
.tabela-lista thead a.th-ordenavel:hover{text-decoration:underline;}

.passageiro-cel{display:flex; align-items:center; gap:6px;}
.passageiro-cel a:first-child{font-size:13.5px; font-weight:700;}
.filtro-icone{display:flex; color:var(--cinza-escuro); opacity:.5; transition:.15s;}
.filtro-icone:hover{opacity:1; color:var(--azul-2);}
.filtro-icone svg{width:13px; height:13px;}

.empresa-badge-link{text-decoration:none; display:inline-block; margin:0 4px 4px 0; transition:.15s;}
.empresa-badge-link:hover{background:rgba(0,60,88,.16);}

.prazo-linha, .voo-linha{white-space:nowrap; margin-bottom:3px;}
.prazo-linha:last-child, .voo-linha:last-child{margin-bottom:0;}
.prazo-linha b, .voo-linha b{color:var(--cinza-escuro); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; margin-right:4px;}
.prazo-linha.prazo-urgente{color:var(--cereja); font-weight:700;}
.prazo-linha.prazo-urgente b{color:var(--cereja);}

.status-voo-caixa{
  margin-top:10px; padding:12px 14px; border-radius:10px; font-size:12.5px; line-height:1.7;
  background:#f4f6f6; color:var(--texto);
}
.status-voo-caixa b{color:var(--azul); margin-right:4px;}
.status-voo-caixa.status-voo-erro{background:rgba(231,52,82,.08); color:var(--cereja);}
.status-voo-caixa.status-voo-ok{background:rgba(0,60,88,.06);}

.voo-ultimo-status{font-size:11.5px; color:var(--cinza-escuro);}
.voo-ultimo-status.voo-ultimo-status-alerta{color:var(--cereja); font-weight:700;}
.voo-ultimo-status.voo-ultimo-status-vazio{color:var(--cinza-escuro); opacity:.6; font-style:italic;}
.voo-ultimo-status-quando{opacity:.7;}

/* ---- NOTIFICAÇÕES ---- */
.badge-notificacao{
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  padding:0 4px; border-radius:999px; background:var(--cereja); color:#fff;
  font-size:10px; font-weight:800; line-height:16px; margin-left:3px; vertical-align:2px;
}
.filtro-ativo-btn{background:var(--azul); color:#fff; border-color:var(--azul);}
.notificacao-linha{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 20px; border-bottom:1px solid var(--cinza);
}
.notificacao-linha:last-child{border-bottom:none;}
.notificacao-linha.notificacao-nao-lida{background:rgba(231,52,82,.04);}
.notificacao-msg{font-size:13.5px; font-weight:600; color:var(--texto);}

/* ---- LINK DE ACESSO RÁPIDO ---- */
.link-acesso-linha{display:flex; gap:8px; margin-bottom:14px;}
.link-acesso-linha input{font-family:monospace; font-size:12.5px; background:#f4f6f6; color:var(--cinza-escuro);}
.link-acesso-acoes{display:flex; gap:8px;}

.viagem-datas span.prazo-urgente{color:var(--cereja); font-weight:700;}
.viagem-datas span.prazo-urgente b{color:var(--cereja);}

/* ---- DASHBOARD ---- */
.dash-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-bottom:32px;}
.dash-kpi{
  background:#fff; border-radius:var(--radius); padding:20px; text-decoration:none;
  box-shadow:0 2px 10px rgba(0,40,60,.06); border:1.5px solid transparent; transition:.15s;
  display:flex; flex-direction:column; gap:4px;
}
.dash-kpi:hover{border-color:var(--azul-2);}
.dash-kpi-valor{font-family:'Poppins'; font-weight:800; font-size:30px; color:var(--azul);}
.dash-kpi-rotulo{font-size:12.5px; color:var(--cinza-escuro); font-weight:600;}
.dash-kpi-destaque .dash-kpi-valor{color:var(--cereja);}
.dash-kpi-alerta{background:rgba(231,52,82,.06);}
.dash-kpi-alerta .dash-kpi-valor{color:var(--cereja);}

.filtro-abas{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.filtro-aba{
  display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  background:#fff; border:1.5px solid var(--cinza); color:var(--cinza-escuro);
  font-size:13.5px; font-weight:600; text-decoration:none; transition:.15s;
}
.filtro-aba:hover{border-color:var(--azul-2); color:var(--azul);}
.filtro-aba span{
  background:var(--cinza); color:var(--cinza-escuro); border-radius:999px;
  padding:1px 8px; font-size:12px; font-weight:700;
}
.filtro-aba.ativa{background:var(--azul); border-color:var(--azul); color:#fff;}
.filtro-aba.ativa span{background:rgba(255,255,255,.22); color:#fff;}

/* ---- ABAS DE AJUSTES (admin/agencia_config.php) ---- */
.ajustes-painel{display:none;}
.ajustes-painel.ativo{display:block;}

.cadastros-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:8px;}
.cadastro-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:#f9fafb; border:1.5px solid var(--cinza); border-radius:12px;
  padding:18px 20px; text-decoration:none; transition:.15s;
}
.cadastro-item:hover{border-color:var(--azul-2); background:rgba(10,91,130,.05);}
.cadastro-icone{font-size:22px; margin-bottom:6px;}
.cadastro-label{font-family:'Poppins', sans-serif; font-weight:700; font-size:14.5px; color:var(--azul);}
.cadastro-desc{font-size:12px; color:var(--cinza-escuro);}

@media (max-width:760px){
  .login-page{grid-template-columns:1fr;}
  .brand-pane{display:none;}
  .login-veil{background:linear-gradient(180deg, rgba(18,71,95,.28), rgba(18,71,95,.62) 60%, var(--azul-noite) 100%);}
  .login-form-wrap{padding:28px;}
  .painel-inner{padding:24px 16px 50px;}
  .form-linha{flex-direction:column; gap:0;}
  .logos-grid{grid-template-columns:1fr;}
}

/* ====================== MÓDULO DE ORÇAMENTOS ====================== */
:root{ --orc-primaria: var(--cereja); --orc-secundaria: var(--azul); }

.orc-status-acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start;}
.orc-status-acoes form{display:inline;}

.quick-form.form-card{max-width:100%;}

.badges-types{display:flex; gap:10px; font-size:13px; margin:0 0 16px;}
.type-pill{padding:4px 10px; border-radius:14px; background:var(--cinza); color:var(--cinza-escuro);
           border:none; font:inherit; cursor:pointer; transition:background .15s, color .15s;}
.type-pill:hover{background:var(--azul-2); color:#fff;}
.type-pill.active{background:var(--orc-secundaria); color:#fff; cursor:default;}
.type-pill.active:hover{background:var(--orc-secundaria);}

.dropzone{border:2px dashed #bbb; border-radius:var(--radius); padding:20px; text-align:center; color:#888; margin-bottom:20px; cursor:text;}
.dropzone:focus{border-color:var(--orc-primaria); color:#333; outline:none;}

.ia-paste-zone{border:1.5px dashed #bbb; border-radius:8px; padding:8px 10px; text-align:center; color:#888; font-size:12.5px; cursor:text; margin-top:6px;}
.ia-paste-zone:focus{border-color:var(--azul-2); color:#333; outline:none;}
.ia-paste-zone.ia-paste-ok{border-color:var(--azul-2); border-style:solid; color:var(--azul); background:rgba(10,91,130,.06);}

#orcamento-canvas{background:#fff; padding:28px; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06); margin-bottom:20px;}
.orc-header{display:table; width:100%; border-bottom:1px solid var(--cinza); padding-bottom:14px; margin-bottom:18px;}
.orc-header > *{display:table-cell; vertical-align:top;}
.orc-header .logo-box{width:auto; max-width:320px;}
.orc-header .logo-box img{max-height:110px; max-width:100%; height:auto;}
.orc-header .titulo{text-align:center; color:var(--orc-primaria); font-family:'Poppins'; font-weight:800; font-size:20px; padding-top:10px; outline:none;}
.orc-header .agency-info{text-align:right; font-size:12px; line-height:1.6; color:var(--texto); width:220px;}
.orc-header .agency-info .nome{color:var(--orc-primaria); font-weight:700; font-size:14px;}

/* ====================== VOUCHER ======================
   Mesma cautela de sempre com html2canvas: nada de margem negativa
   (sangria até a borda) nem overflow:hidden pra clipar cantos — só
   caixas coloridas "internas", com border-radius próprio, dentro do
   padding que já existe no card/canvas. display:table pros layouts
   lado-a-lado (flex/gap não renderiza de forma confiável na exportação). */
#voucher-canvas{background:#fff; padding:28px; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06); margin-bottom:20px;}

/* Cabeçalho do canvas na IDENTIDADE DO PDF (pedido do usuário: o azul escuro
   de fundo estava "totalmente fora do padrão" dos documentos): fundo claro,
   filete tricolor da marca no topo (azul/cereja/verde — verde só nesse
   detalhe), textos em azul, e o contato como o "cartão" do PDF. */
.vch-header{display:table; width:100%; background:#fff; color:var(--texto,#233b47);
  border:1px solid #e2e9ed; border-radius:12px; padding:20px 22px 16px; margin-bottom:20px;
  box-sizing:border-box; position:relative; overflow:hidden;}
.vch-header::before{content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--orc-primaria,#003c58) 0 86%, #e73452 86% 93%, #95c23d 93% 100%);}
.vch-header-marca{display:table-cell; vertical-align:middle;}
.vch-header-marca .logo-box{display:inline-block; vertical-align:middle; margin-right:12px;}
.vch-header-marca .logo-box img{max-height:44px; max-width:130px; width:auto; height:auto; display:block;}
.vch-header-texto{display:inline-block; vertical-align:middle;}
.vch-header-nome{font-family:'Poppins'; font-weight:800; font-size:15px; line-height:1.35; outline:none; color:var(--orc-primaria,#003c58);}
.vch-header-tagline{font-size:10.5px; color:#7c8b93; text-transform:uppercase; letter-spacing:.5px;}
.vch-header-ajuda{display:table-cell; vertical-align:middle; text-align:left; width:210px; font-size:12px;
  background:#eef5f9; border-left:3px solid #e73452; border-radius:8px; padding:8px 14px;}
.vch-header-ajuda .rotulo{color:#5c6f79; font-size:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:700;}
.vch-header-ajuda .valor{font-weight:800; font-size:13.5px; margin-top:2px; outline:none; color:var(--orc-primaria,#003c58);}

/* Título de seção do card no padrão do PDF (uppercase azul + risco cereja),
   no lugar da tarja azul-escura antiga. Localizador como o cod-destaque. */
.vch-card-topo{display:table; width:100%; background:transparent; color:var(--orc-primaria,#003c58);
  border-bottom:2px solid #e73452; border-radius:0; padding:4px 2px 6px; margin-bottom:14px; box-sizing:border-box;}
.vch-card-topo-tipo{display:table-cell; vertical-align:middle; font-family:'Poppins'; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;}
.vch-card-topo-loc{display:table-cell; vertical-align:middle; text-align:right; white-space:nowrap;}
.vch-localizador-pill{background:#eef5f9; color:var(--orc-primaria,#003c58); border-left:3px solid #e73452;
  border-radius:6px; padding:3px 12px; font-size:11px; font-weight:800; display:inline-block;}
.vch-localizador-pill .campo-editavel{outline:none;}
.vch-localizador-pill .campo-editavel:empty:before{color:rgba(0,60,88,.4);}

.vch-estrelas{color:#f5b301; font-size:12px; letter-spacing:1px; margin-left:8px;}

.vch-passageiros-lista{white-space:pre-line; font-size:13px; line-height:2; color:var(--texto); outline:none;}

/* Tabela formal de passageiros (modo "Padrão Operadora") — só outra
   forma de exibir o mesmo campo "lista", nunca editável célula a célula;
   escondida por padrão, só aparece com #voucher-canvas.modo-operadora. */
.vch-passageiros-tabela{display:none;}
.vch-tabela{width:100%; border-collapse:collapse; font-size:12px;}
.vch-tabela th{background:var(--orc-secundaria); color:#fff; text-align:left; padding:8px 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px;}
.vch-tabela td{padding:7px 10px; border-bottom:1px solid var(--cinza); color:var(--texto);}
.vch-tabela tbody tr:nth-child(even){background:#f7f8f9;}

/* Versão resumida — some com políticas/informações gerais/observações
   longas. Padrão Operadora — troca a lista de passageiros pela tabela
   formal e deixa as faixas coloridas dos cards que não são de voo mais
   claras (pill), igual ao padrão que as operadoras usam nos vouchers
   delas — o card de voo fica como já está, só a apresentação do voo em
   tabela crua é que não rende bem visualmente. */
#voucher-canvas.modo-resumo .bloco-tipo-texto,
#voucher-canvas.modo-resumo .hotel-card-desc{display:none;}

#voucher-canvas.modo-operadora .vch-passageiros-lista{display:none;}
#voucher-canvas.modo-operadora .vch-passageiros-tabela{display:block;}
#voucher-canvas.modo-operadora .hotel-card .vch-card-topo,
#voucher-canvas.modo-operadora .transfer-card .vch-card-topo,
#voucher-canvas.modo-operadora .passeio-card .vch-card-topo{
  background:none; padding:0 0 12px; margin-bottom:10px;
}
#voucher-canvas.modo-operadora .hotel-card .vch-card-topo-tipo,
#voucher-canvas.modo-operadora .transfer-card .vch-card-topo-tipo,
#voucher-canvas.modo-operadora .passeio-card .vch-card-topo-tipo{
  background:var(--orc-secundaria); color:#fff; display:inline-block; border-radius:20px; padding:6px 16px;
}
#voucher-canvas.modo-operadora .hotel-card .vch-localizador-pill,
#voucher-canvas.modo-operadora .transfer-card .vch-localizador-pill,
#voucher-canvas.modo-operadora .passeio-card .vch-localizador-pill{
  background:#fff; border:1.5px solid var(--orc-secundaria); color:var(--orc-secundaria);
}
#voucher-canvas.modo-operadora .hotel-card .vch-localizador-pill .campo-editavel:empty:before{color:rgba(0,0,0,.35);}

/* Mensagem ao cliente no padrão claro dos documentos (como as "condições" do
   PDF: caixa clara com risco cereja), em vez da tarja azul-escura. */
.vch-mensagem{background:#f7fafb; color:var(--texto,#233b47); border:1px solid #e2e9ed;
  border-left:4px solid #e73452; border-radius:10px; padding:14px 18px; margin-top:18px;}
.vch-mensagem .rotulo{font-family:'Poppins'; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--orc-primaria,#003c58); margin-bottom:6px; font-weight:800;}
.vch-mensagem .texto{font-size:13.5px; line-height:1.6; outline:none;}
.vch-mensagem .texto.campo-editavel:empty:before{color:rgba(0,60,88,.4);}

.block{position:relative; margin-bottom:18px; border:1px dashed transparent; padding:6px; border-radius:8px;}
.block:hover{border-color:var(--cinza);}
.block img{max-width:100%; display:block; border-radius:6px;}
.block .badge{position:absolute; top:2px; left:2px; background:var(--orc-secundaria); color:#fff; font-size:11px; padding:2px 8px; border-radius:10px;}
.block-controls{position:absolute; top:2px; right:2px; display:flex; gap:4px;}
.block-controls button{background:#fff; border:1px solid var(--cinza); border-radius:4px; cursor:pointer; font-size:12px; padding:2px 6px;}
.text-block{min-height:40px; border:1px solid var(--cinza); padding:10px; border-radius:8px; outline:none; font-size:14px; text-align:justify;}

.footer-box{border-top:2px solid var(--cinza); margin-top:18px; padding-top:16px;}
.valores-aviso{color:var(--orc-primaria); font-size:12px; font-weight:700; margin:0 0 12px;}
.valores-titulo{display:block; font-weight:800; color:var(--orc-secundaria); font-size:13px; text-transform:uppercase; letter-spacing:.3px; margin:0 0 10px;}
/* Layout do rodapé sem flexbox — html2canvas não renderiza flex/gap de
   forma confiável (bug antigo e bem documentado da lib), então aqui e em
   todo o canvas exportável usamos inline-block/table, que a lib suporta
   de verdade. Clearfix é feito com ::after (não overflow:hidden) porque
   overflow:hidden em cima de altura mal calculada pelo html2canvas corta
   conteúdo real — foi a causa de blocos inteiros sumirem na exportação. */
.footer-row:after{content:""; display:table; clear:both;}
.footer-col{display:inline-block; vertical-align:top; width:60%; box-sizing:border-box;}
.valores-col{
  display:inline-block; vertical-align:top; width:36%; box-sizing:border-box;
  background:#f4f7f8; border-left:4px solid var(--orc-primaria); border-radius:8px;
  padding:14px 18px;
}
.valor-linha{display:inline-block; vertical-align:top; margin:0 24px 10px 0; font-size:13px; color:var(--texto); white-space:nowrap;}
.valor-linha span{display:block;}
.valor-linha > span:first-child{font-size:11px; color:var(--cinza-escuro); text-transform:uppercase; font-weight:700;}
.valor-linha .campo-valor{outline:none; border-radius:4px; padding:0 2px; min-width:70px; display:inline-block;}
.valor-linha .campo-valor:hover{background:rgba(0,116,168,.08);}
.valor-linha .campo-valor:focus{background:rgba(0,116,168,.14);}
/* Total é o único valor exibido agora — uma linha só, em destaque */
.valor-linha-total{white-space:nowrap; margin:0;}
.valor-linha-total span{display:inline;}
.valor-linha-total > span:first-child{font-size:15px; text-transform:none; color:var(--texto); font-weight:700; margin-right:8px;}
.valor-linha-total .campo-valor, .valor-linha-total .valor{font-weight:800; font-size:28px; color:var(--orc-primaria);}
/* Valor por pessoa: só informativo (não editável), sempre abaixo do Total,
   discreto pra não competir com o valor em destaque. */
.valor-linha-pessoa{display:block; white-space:nowrap; margin:4px 0 0;}
.valor-linha-pessoa span{display:inline;}
.valor-linha-pessoa > span:first-child{font-size:11px; text-transform:uppercase; color:var(--cinza-escuro); font-weight:700; margin-right:6px;}
.valor-linha-pessoa .valor{font-weight:700; font-size:14px; color:var(--texto);}
.cond-editable{border:1px solid var(--cinza); border-radius:8px; padding:8px; min-height:34px; font-size:13px; outline:none; margin-top:4px;}
.cond-editor{margin-top:6px; display:flex; flex-direction:column; gap:5px;}
.cond-item{display:flex; align-items:flex-start; gap:6px; font-size:13px; font-weight:400; cursor:pointer;}
.cond-item input{margin-top:3px; flex-shrink:0;}
/* Preview: exatamente o texto que sai no documento — é o que fica visível
   na exportação (o editor acima é .no-export). Vazio não escreve nada. */
.cond-preview{white-space:pre-line; font-size:13px; margin-top:6px;}

/* ---- Toolbox de blocos ---- */
.orc-toolbox{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end;}
.orc-toolbox-grupo{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.orc-toolbox-rotulo{font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--cinza-escuro); margin-right:2px;}

/* ---- Campo editável genérico (placeholder quando vazio) ---- */
.campo-editavel{outline:none; border-radius:4px; padding:0 2px;}
.campo-editavel:hover{background:rgba(0,116,168,.06);}
.campo-editavel:focus{background:rgba(0,116,168,.1);}
.campo-editavel:empty:before{content:attr(data-placeholder); color:#aab3b8;}

/* ---- Card de voo ---- */
.bloco-info{padding-top:10px;}
.voo-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}
.voo-card-topo{display:table; width:100%; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--cinza); font-size:13px;}
.voo-card-topo > *{display:table-cell; vertical-align:middle;}
.voo-trecho{font-weight:800; color:var(--orc-secundaria); font-size:13.5px; border:none; background:transparent; cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:16px; width:1%; white-space:nowrap;}
.voo-pax{text-align:right; color:var(--cinza-escuro); font-size:12.5px; white-space:nowrap;}
.voo-pax-label{margin-right:4px;}
.voo-pax-criancas{margin-left:6px;}
.voo-card-corpo{display:table; width:100%; table-layout:fixed;}
.voo-ponto{display:table-cell; vertical-align:middle; width:76px;}
.voo-hora{display:block; font-size:20px; font-weight:800; color:var(--orc-secundaria);}
.voo-dia-seguinte{font-size:11px; color:var(--orc-primaria); vertical-align:super; font-weight:700;}
.voo-aero{display:block; font-size:12px; color:var(--cinza-escuro); font-weight:700;}
.voo-aero-nome{display:block; font-size:9.5px; color:var(--cinza-escuro); font-weight:400; line-height:1.25; margin-top:1px;}
.voo-meio{display:table-cell; vertical-align:middle; text-align:center; padding:0 14px;}
.voo-paradas{display:block; font-size:11.5px; color:var(--cinza-escuro); white-space:pre-line;}
.voo-paradas-alerta{color:#c0272d; font-weight:700;}
.voo-linha{display:block; width:100%; height:2px; background:var(--cinza); border-radius:2px; margin:4px 0;}
.voo-duracao{display:block; font-size:11.5px; font-weight:700; color:var(--texto);}
/* ---- Detalhe das conexões (layouts "trilha" e "colunas") ----
   Aparece abaixo do card quando o bloco tem o detalhe por perna e a agência
   escolheu um layout diferente do resumo. Ver layoutConexaoDoCard() no PHP. */
.voo-conexoes{margin-top:12px; border-top:1px dashed var(--cinza); padding-top:11px;}

/* trilha: régua horizontal — aeroportos nos pontos, voo entre eles */
.conex-trilha{display:flex; align-items:flex-start;}
.conex-ponto{flex:none; text-align:center; width:64px;}
.conex-hora{display:block; font-size:12px; font-weight:800; color:var(--orc-secundaria); line-height:1.3;}
.conex-iata{display:block; font-size:11px; font-weight:700; color:var(--texto); line-height:1.3;}
.conex-cidade{display:block; font-size:8.5px; color:var(--cinza-escuro); line-height:1.2;}
.conex-perna{flex:1; min-width:40px; text-align:center; padding:0 3px;}
.conex-fio{position:relative; height:2px; background:var(--cinza); border-radius:2px; margin:9px 0 5px;}
.conex-fio::after{content:'✈'; position:absolute; right:-2px; top:-8px; font-size:10px; color:var(--cinza);}
.conex-voo{display:block; font-size:9.5px; color:var(--cinza-escuro); font-weight:700; line-height:1.3;}
/* Assento por perna — mesmo peso visual do voo/duração, um degrau abaixo
   pra não competir com o número do voo. */
.conex-assento{display:block; font-size:8.5px; color:var(--orc-secundaria); font-weight:800; line-height:1.3; margin-top:1px;}
.conex-espera{flex:none; width:62px; text-align:center; padding-top:6px;}
.conex-espera span{display:inline-block; background:rgba(231,52,82,.09); color:var(--orc-primaria);
  border-radius:20px; padding:2px 7px; font-size:9px; font-weight:800; white-space:nowrap;}
.conex-espera small{display:block; font-size:8px; color:var(--cinza-escuro); margin-top:1px;}

/* colunas: uma coluna por perna, espera como divisor entre elas */
.conex-colunas{display:flex; align-items:stretch;}
.conex-col{flex:1; min-width:0; font-size:11.5px; line-height:1.5;}
.conex-col-rota{display:block; font-weight:800; color:var(--orc-secundaria); font-size:12px; white-space:nowrap;}
.conex-col-horas{display:block; color:var(--texto); font-weight:700; white-space:nowrap;}
.conex-col-sub{display:block; color:var(--cinza-escuro); font-size:10.5px; white-space:nowrap;}
.conex-div{flex:none; width:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;}
.conex-div .conex-div-barra{width:1px; flex:1; background:var(--cinza);}
.conex-div .conex-div-txt{background:rgba(231,52,82,.09); color:var(--orc-primaria); border-radius:20px;
  padding:2px 7px; font-size:9px; font-weight:800; white-space:nowrap;}
/* troca de aeroporto na conexão: mesmo destaque de alerta do resumo */
.conex-espera.alerta span, .conex-div.alerta .conex-div-txt{background:rgba(192,39,45,.12); color:#c0272d;}

.voo-cia{display:table-cell; vertical-align:middle; text-align:right; width:130px; font-size:12.5px;}
.voo-cia > *{display:block;}
.voo-cia-logo{max-height:40px; object-fit:contain; margin:0 0 5px auto;}
.voo-classe{color:var(--cinza-escuro); font-size:11.5px;}
.voo-assento{color:var(--orc-secundaria); font-weight:700;}

/* Voos consecutivos (ida logo seguida de volta) ficam visualmente agrupados */
.block.bloco-tipo-aereo + .block.bloco-tipo-aereo{margin-top:-10px;}

/* ---- Card de hotel ---- */
.hotel-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}
.hotel-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}
.hotel-card-linha{font-size:12.5px; color:var(--texto); margin-bottom:6px;}
.hotel-card-linha > span{display:inline-block; margin-right:20px;}
.hotel-card-desc{font-size:12.5px; color:var(--cinza-escuro); margin-top:8px; line-height:1.5;}

/* ---- Galeria de fotos (hotel/passeio) — fotos anexadas ficam lado a lado.
   Float, não inline-block (mais robusto pra JS mexer nos blocos). O ponto
   que não é óbvio: width:calc(50% - 7px) + margin-right:14px NOS DOIS itens
   de um par estoura a linha em 14px (50%+7px por item × 2 = 100%+14px), o
   que empurra o segundo pro final da linha seguinte — tanto na tela quanto
   no PDF/imagem exportados. .foto-par-direita (aplicada via JS ao 2º item
   de cada par, em atualizarPlaceholdersFotos()) zera essa margem sobrando. */
#blocks-container:after{content:""; display:table; clear:both;}
#blocks-container > .block{display:block; width:100%; clear:both;}
#blocks-container > .block.bloco-tipo-hotel.bloco-image,
#blocks-container > .block.bloco-tipo-passeio.bloco-image{display:block; float:left; clear:none; width:calc(50% - 7px); margin-right:14px; box-sizing:border-box;}
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-par-direita,
#blocks-container > .block.bloco-tipo-passeio.bloco-image.foto-par-direita{margin-right:0;}
#blocks-container > .block.bloco-tipo-hotel.bloco-image img,
#blocks-container > .block.bloco-tipo-passeio.bloco-image img{height:180px; width:100%; object-fit:cover; display:block;}
#blocks-container > .placeholder-foto{
  display:flex; float:left; clear:none; width:calc(50% - 7px); margin-right:14px;
  height:180px; box-sizing:border-box; border:2px dashed var(--cinza); border-radius:8px;
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
  color:var(--cinza-escuro); cursor:pointer; font-size:13px; font-weight:600;
  background:rgba(0,0,0,.02); transition:.15s;
}
#blocks-container > .placeholder-foto.foto-par-direita{margin-right:0;}
#blocks-container > .placeholder-foto:hover{border-color:var(--orc-primaria); color:var(--orc-primaria); background:rgba(0,0,0,.04);}
.placeholder-foto-icone{font-size:26px; line-height:1; font-weight:400;}

/* ---- Galeria do hotel com 5 fotos: 1 grande + grade 2x2 pequena ao lado
   (estilo do site do Infotravel). Só percentuais puros aqui (sem calc()) —
   já validado isolado que essa combinação renderiza igual no html2canvas. */
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-principal{
  width:58%; margin-right:1%; height:260px;
}
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-principal img{height:260px;}
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena{
  width:20%; margin-right:1%; margin-bottom:3px; height:128.5px;
}
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena img{height:128.5px;}
#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena.foto-pequena-direita{margin-right:0;}

/* ---- Card de transfer ---- */
.transfer-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}
.transfer-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}
.transfer-linha{font-size:13px; margin-bottom:6px;}
.transfer-linha b{display:inline-block; min-width:40px; color:var(--cinza-escuro); font-size:11.5px; text-transform:uppercase; margin-right:8px;}

/* ---- Card de passeio/ingresso ---- */
.passeio-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}
.passeio-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}
.transfer-linha b{min-width:40px; color:var(--cinza-escuro); font-size:11.5px; text-transform:uppercase;}

#desc-output{width:100%; min-height:180px; font-family:monospace; font-size:13px; padding:10px; border:1px solid var(--cinza); border-radius:8px;}
.modal-bg{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:999;}
.modal-bg.active{display:flex;}
.modal{background:#fff; border-radius:var(--radius); padding:24px; max-width:600px; width:90%; max-height:90vh; overflow:auto;}

/* Overlay de carregamento — some sozinho quando a página redireciona
   depois da resposta da IA; enquanto isso, avisa que está processando
   (a chamada pode levar de 10s a mais de 1min dependendo do arquivo). */
.ia-loading-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:1000; flex-direction:column; gap:16px; text-align:center; padding:24px;}
.ia-loading-overlay.active{display:flex;}
.ia-spinner{width:48px; height:48px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:ia-girar .8s linear infinite;}
@keyframes ia-girar{to{transform:rotate(360deg);}}
.ia-loading-overlay p{color:#fff; font-size:15px; font-weight:600; max-width:360px;}
.ia-loading-overlay span{color:rgba(255,255,255,.75); font-size:13px;}

/* Ações do orçamento (emitir como, status, limpar, excluir) numa coluna
   FIXA na lateral, sempre ao alcance — o orçamento fica MUITO longo (um
   card por voo, hotel, foto...) e antes essas ações moravam só no
   cabeçalho, custando uma rolagem inteira até o topo pra qualquer uma
   delas. Cada item é o seu próprio "pill" flutuante — reaproveita o
   visual que o "Limpar tudo" já usava sozinho. `no-export` mantém tudo
   isso fora do PDF/impressão. */
.acoes-laterais{
  position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; align-items:stretch; gap:8px; width:172px;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.acoes-laterais-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; background:#fff; border:1.5px solid var(--cinza); border-radius:999px;
  padding:10px 12px; font-family:'Open Sans', sans-serif; font-size:12px; font-weight:700;
  line-height:1.25; text-align:center;
  color:var(--azul); cursor:pointer; box-shadow:0 6px 20px rgba(0,40,60,.16);
  transition:background .15s, border-color .15s, color .15s;
}
/* "Aprovar e gerar viagem" e a acao que fecha a venda: destacada porque é o
   desfecho pretendido, e nao mais um botao igual aos outros na barra. */
.acoes-laterais-btn.destaque{background:var(--azul); border-color:var(--azul); color:#fff;}
.acoes-laterais-btn.destaque:hover{background:var(--azul-2); border-color:var(--azul-2);}
.acoes-laterais-btn:hover{border-color:var(--azul-2);}
.acoes-laterais-btn:focus-visible{outline:2px solid var(--azul-2); outline-offset:3px;}
/* Seletor composto de propósito: vence o .acoes-laterais-btn acima. */
.acoes-laterais-btn.perigo{color:var(--cereja); border-color:rgba(231,52,82,.4);}
.acoes-laterais-btn.perigo:hover{background:var(--cereja); border-color:var(--cereja); color:#fff;}
.acoes-laterais-emissor{
  display:flex; flex-direction:column; gap:5px; background:#fff; border:1.5px solid var(--cinza);
  border-radius:16px; padding:10px 14px; box-shadow:0 6px 20px rgba(0,40,60,.16);
}
.acoes-laterais-emissor label{font-size:10.5px; font-weight:700; color:var(--cinza-escuro); text-transform:uppercase; letter-spacing:.3px; margin:0;}
.acoes-laterais-emissor select{padding:8px 10px; font-size:12.5px;}
.acoes-laterais-checkbox{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--cinza-escuro); text-transform:none; letter-spacing:0;
}
.acoes-laterais-checkbox input{margin:0; width:15px; height:15px; flex-shrink:0; cursor:pointer;}
/* Telas mais baixas (notebook comum): centralizar verticalmente faria a
   coluna estourar em cima E embaixo — melhor grudar no topo, abaixo da
   topbar, com scroll próprio se ainda faltar espaço (max-height acima). */
@media (max-height:760px){
  .acoes-laterais{top:96px; transform:none;}
}
/* .painel-inner tem max-width:960px centralizado — a coluna lateral
   (184px, largura + distância da borda) só cabe sem tampar o conteúdo
   quando sobra pelo menos esse tanto de cada lado, ou seja, tela com pelo
   menos ~1330px. Abaixo disso vira barra inferior antes de sobrepor —
   cobre inclusive notebooks 1366×768, resolução muito comum. */
@media (max-width:1330px){
  /* Não cabe mais do lado sem tampar o conteúdo — vira uma faixa
     horizontal colada embaixo, que é o padrão de barra de ações mobile. */
  .acoes-laterais{
    right:0; left:0; bottom:0; top:auto; transform:none; width:auto;
    flex-direction:row; flex-wrap:wrap; justify-content:center;
    max-height:none; padding:10px; background:rgba(244,246,246,.96);
    box-shadow:0 -4px 16px rgba(0,40,60,.12);
  }
  .acoes-laterais-btn{width:auto;}
  .acoes-laterais-emissor{flex-direction:row; align-items:center; padding:8px 12px;}
}

/* Aviso de upload em andamento — anexar foto é um fetch silencioso, e sem
   isso a tela ficava parada sem dizer que estava enviando. */
.upload-status{
  display:none; align-items:center; gap:9px;
  background:var(--azul); color:#fff; border-radius:999px; padding:10px 17px;
  font-size:12.5px; font-weight:700; box-shadow:0 6px 20px rgba(0,40,60,.24);
}
.upload-status.ativo{display:inline-flex;}
.upload-status-spinner{
  width:14px; height:14px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:ia-girar .8s linear infinite; flex:none;
}
/* Tira "opções deste pedido" no topo do orçamento — só aparece quando
   ele está vinculado a uma cotação. Deixa trocar entre as opções (ex: 4
   hotéis pro mesmo pedido) e criar a próxima sem passar pela ficha da
   cotação toda vez. */
.opcoes-pedido{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-14px 0 24px; padding:12px 16px; background:#fff; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,40,60,.06);
}
.opcoes-pedido-link{font-size:12.5px; font-weight:700; color:var(--azul-2); text-decoration:none; white-space:nowrap;}
.opcoes-pedido-link:hover{text-decoration:underline;}
.opcoes-pedido-lista{display:flex; gap:7px; flex-wrap:wrap; flex:1;}
.opcoes-pedido-item{
  display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px;
  background:var(--cinza); color:var(--cinza-escuro); font-size:12.5px; font-weight:700;
  text-decoration:none; border:2px solid transparent; transition:.15s;
}
.opcoes-pedido-item:hover{opacity:.85;}
/* Seletor composto de propósito: a opção ATUAL ganha contorno próprio
   por cima da cor de status (que já vem de .status-*), sem competir com
   ela — dá pra ver ao mesmo tempo "qual é essa" e "como ela está indo". */
.opcoes-pedido-item.atual{border-color:var(--azul);}
.opcoes-pedido-nova{
  border:1.5px dashed var(--azul-2); background:none; color:var(--azul-2);
  border-radius:999px; padding:6px 14px; font-family:'Open Sans', sans-serif;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.opcoes-pedido-nova:hover{background:rgba(10,91,130,.08);}
/* Nome da opção ATUAL (ex: "Fortaleza") — só rotula a que está aberta;
   as outras mostram o nome delas na própria pill em .opcoes-pedido-item. */
.opcoes-pedido-nome{
  width:200px; padding:7px 12px; font-size:12.5px; border-radius:999px;
  border:1.5px solid var(--cinza);
}

.galeria-status{
  display:flex; align-items:center; gap:9px; margin:10px 0;
  font-size:13.5px; font-weight:600; color:var(--texto);
}
.galeria-status.carregando{color:var(--azul-2); font-weight:700;}
/* O spinner nasceu pra fundo escuro (borda branca) — aqui o modal é
   claro, então a borda vira azul-2 pra continuar visível. */
.galeria-status .upload-status-spinner{border-color:rgba(10,91,130,.25); border-top-color:var(--azul-2);}

/* Grade de seleção de fotos (dentro do modal, nunca é exportada — livre
   pra usar grid mesmo, sem as restrições do html2canvas). */
.galeria-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-top:12px; max-height:420px; overflow-y:auto;}
.galeria-item{position:relative; cursor:pointer; border-radius:8px; overflow:hidden; border:3px solid transparent; box-sizing:border-box;}
.galeria-item img{width:100%; height:90px; object-fit:cover; display:block;}
.galeria-item.selecionada{border-color:var(--orc-primaria);}
.galeria-item .galeria-numero{
  position:absolute; top:4px; left:4px; background:var(--orc-primaria); color:#fff;
  font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:700px){.galeria-grid{grid-template-columns:repeat(3, 1fr);}}

@media print{
  .no-export{display:none !important;}
}

.orc-modo-cliente{display:flex; flex-direction:column; gap:8px; font-size:13.5px; font-weight:400; margin-top:4px;}
.orc-modo-cliente label{display:flex; align-items:center; gap:8px; cursor:pointer;}

/* Campo de data em texto (ver assets/js/campo-data.js) — o seletor nativo
   do navegador não deixa colar, e colar é o caminho normal aqui: o agente
   recebe a data pelo WhatsApp. Vermelho só quando há algo escrito que não
   vira data; vazio é legítimo (quase toda data no sistema é opcional). */
.campo-data-br{font-variant-numeric:tabular-nums; letter-spacing:.02em;}
.campo-data-br.data-invalida{border-color:var(--cereja); background:rgba(231,52,82,.05);}

/* Moldura do campo de data híbrido (texto colável + botão de calendário —
   ver campo-data.js). O seletor nativo fica invisível mas RENDERIZADO
   (opacity 0), porque showPicker() não funciona em display:none. */
.campo-data-moldura{position:relative; display:inline-block; width:100%;}
.campo-data-moldura .campo-data-br{width:100%; padding-right:38px; box-sizing:border-box;}
.campo-data-botao{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer; padding:4px;
  color:var(--cinza-escuro); display:flex; align-items:center; border-radius:6px;
}
.campo-data-botao:hover{color:var(--azul-2); background:rgba(10,91,130,.08);}
.campo-data-botao svg{width:17px; height:17px;}
.campo-data-seletor{
  position:absolute; right:0; bottom:0; width:1px; height:1px;
  opacity:0; pointer-events:none; border:0; padding:0;
}
/* Idade calculada, logo abaixo do campo de data de nascimento — some
   sozinha quando o campo está vazio ou inválido (ver campo-data.js). */
.campo-data-idade{font-size:11.5px; color:var(--cinza-escuro); margin-top:2px; min-height:14px;}

/* Aviso da busca instantânea (ver assets/js/busca-instantanea.js): conta o
   que sobrou na página e oferece a busca completa quando o registro
   procurado não está entre os carregados. */
.busca-instantanea-aviso{font-size:12.5px; color:var(--cinza-escuro); margin:-12px 0 16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.busca-instantanea-link{border:none; background:transparent; color:var(--azul-2); font:inherit; font-weight:700; cursor:pointer; padding:2px 4px; border-radius:5px;}
.busca-instantanea-link:hover{background:rgba(10,91,130,.08);}

/* Documentos já anexados à viagem, oferecidos na importação do voucher.
   Lista em vez de <select>: o agente precisa ver os nomes todos de uma vez
   pra reconhecer qual PDF é de qual fornecedor. */
.docs-viagem-lista{display:flex; flex-direction:column; gap:4px; max-height:140px; overflow-y:auto;
                   border:1.5px solid var(--cinza); border-radius:10px; padding:8px 10px; background:#fbfcfc;}
.docs-viagem-item{display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; padding:2px 0;}
.docs-viagem-item input{margin:0; cursor:pointer;}
.docs-viagem-item .nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.docs-viagem-item .quando{font-size:11px; color:#8b9aa3; white-space:nowrap;}

/* Escolha do motor de IA: os dois botões lado a lado deixam claro que a
   diferença é só quem lê o documento — o anexo é o mesmo. */
.ia-escolha-motor{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ia-escolha-motor .rot{font-size:11.5px; font-weight:700; letter-spacing:.06em;
                       text-transform:uppercase; color:#7c8a93;}
.ia-escolha-motor .btn-secundario{width:auto; margin:0; padding:8px 22px;}

/* Aviso de que a prévia é área de edição, e não o documento do cliente. */
.voucher-aviso-edicao{background:#fdf0d9; border-left:3px solid #d99b2a; color:#8a5200;
                      padding:9px 14px; border-radius:0 8px 8px 0; font-size:12.5px;
                      margin-bottom:10px; line-height:1.5;}
.voucher-aviso-edicao a{color:#8a5200; font-weight:700;}

/* ====================== MÓDULO FINANCEIRO ====================== */
.fin-resumo{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:22px;}
.fin-kpi{background:#fff; border:1px solid var(--cinza); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;}
.fin-kpi span{font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--cinza-escuro);}
.fin-kpi b{font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; color:var(--texto); font-variant-numeric:tabular-nums;}
.fin-kpi small{font-size:11px; color:var(--cinza-escuro);}
.fin-kpi.destaque{background:var(--azul); border-color:var(--azul);}
.fin-kpi.destaque span, .fin-kpi.destaque small{color:rgba(255,255,255,.8);}
.fin-kpi.destaque b{color:#fff;}
.fin-kpi b.verde{color:#1f8a4c;}
.fin-kpi b.cereja{color:var(--cereja);}

.fin-grupo{background:#fff; border:1px solid var(--cinza); border-radius:14px; padding:14px 16px; margin-bottom:16px; border-left:4px solid var(--cinza);}
.fin-grupo-receita{border-left-color:#1f8a4c;}
.fin-grupo-despesa{border-left-color:var(--cereja);}
.fin-grupo-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.fin-grupo-head h3{margin:0; font-size:15px; font-weight:700;}
.fin-grupo-head span{font-size:12px; color:var(--cinza-escuro);}

.fin-add summary, .fin-edit summary{list-style:none; cursor:pointer; display:inline-block;}
.fin-add summary::-webkit-details-marker, .fin-edit summary::-webkit-details-marker{display:none;}
.fin-edit summary{background:none; border:none; color:var(--cinza-escuro); font-size:15px; padding:4px 6px;}
.fin-form{background:var(--cinza-fundo,#f4f6f6); border-radius:10px; padding:12px; margin-top:8px;}
.fin-form-linha{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}
.fin-form-linha:last-child{margin-bottom:0;}
.fin-form-linha input, .fin-form-linha select{padding:7px 9px; border:1px solid var(--cinza); border-radius:8px; font-size:12.5px; flex:1; min-width:110px;}

.fin-item{display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--cinza);}
.fin-item.confirmado{opacity:.62;}
.fin-item-main{flex:1; min-width:0;}
.fin-item-desc b{font-weight:600; font-size:13.5px;}
.fin-item-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px;}
.fin-tag{font-size:10.5px; font-weight:700; background:var(--azul-suave,#e5f0f6); color:var(--azul); padding:2px 8px; border-radius:6px;}
.fin-tag.conta{background:#eef3f7; color:var(--cinza-escuro);}
.fin-vencido{color:var(--cereja); font-weight:700;}
.fin-item-confirmacao{font-size:11px; font-weight:600; color:#1f8a4c; margin-top:3px;}
.fin-item-valor{font-family:'Poppins',sans-serif; font-weight:800; font-size:15px; color:var(--texto); white-space:nowrap; font-variant-numeric:tabular-nums;}
.fin-item-acoes{display:flex; gap:6px; align-items:center; flex:none;}
.fin-toggle{border:1px solid var(--cinza); background:#fff; color:var(--cinza-escuro); border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
.fin-toggle.on{background:#1f8a4c; border-color:#1f8a4c; color:#fff;}
.fin-edit[open] summary{color:var(--azul);}

/* venda total (cabeçalho do financeiro) */
.fin-venda{background:var(--azul); color:#fff; border-radius:14px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.fin-venda-rot{display:block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.75);}
.fin-venda-valor{font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:#fff; display:block; line-height:1.15; font-variant-numeric:tabular-nums;}
.fin-venda .linha-sub{color:rgba(255,255,255,.7);}
.fin-venda .btn-secundario{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff;}
.fin-venda .fin-form{background:rgba(255,255,255,.1);}

/* ====================== DASHBOARD — FINANCEIRO/GRÁFICOS ====================== */
.dash-fin-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:16px;}
.dash-fin-kpi{background:#fff; border:1px solid var(--cinza); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;}
.dash-fin-kpi span{font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--cinza-escuro);}
.dash-fin-kpi b{font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; color:var(--texto); font-variant-numeric:tabular-nums;}
.dash-fin-kpi b.verde{color:#1f8a4c;} .dash-fin-kpi b.cereja{color:var(--cereja);}
.dash-fin-kpi.destaque{background:var(--azul); border-color:var(--azul);}
.dash-fin-kpi.destaque span{color:rgba(255,255,255,.8);} .dash-fin-kpi.destaque b{color:#fff;}

.dash-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px;}
.dash-card{background:#fff; border:1px solid var(--cinza); border-radius:14px; padding:16px 18px;}
.dash-card h3{margin:0 0 12px; font-size:15px; font-weight:700;}

/* barras receita×despesa */
.dash-barras{display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:4px;}
.dash-barra-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%;}
.dash-barra-par{flex:1; display:flex; align-items:flex-end; gap:3px; width:100%; justify-content:center;}
.dash-barra{width:44%; max-width:22px; border-radius:4px 4px 0 0; min-height:2px; transition:.2s;}
.dash-barra.receita{background:#1f8a4c;} .dash-barra.despesa{background:var(--cereja);}
.dash-barra-mes{font-size:10.5px; color:var(--cinza-escuro); white-space:nowrap;}
.dash-legenda{display:flex; gap:16px; margin-top:10px; font-size:11.5px; color:var(--cinza-escuro);}
.dash-legenda span{display:inline-flex; align-items:center; gap:6px;}
.dash-legenda .dot, .dash-funil .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}

/* funil de solicitações */
.dash-funil-linha{display:flex; align-items:center; gap:10px; margin-bottom:7px;}
.dash-funil-rot{flex:0 0 130px; font-size:12px; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-funil-barra-fundo{flex:1; background:var(--cinza-fundo,#eef3f7); border-radius:6px; height:16px; overflow:hidden;}
.dash-funil-barra{display:block; height:100%; border-radius:6px; background:var(--azul); min-width:0;}
.dash-funil-barra.status-aguardando{background:var(--cinza-escuro);}
.dash-funil-barra.status-checkin{background:#a06e00;}
.dash-funil-barra.status-andamento{background:var(--cereja);}
.dash-funil-barra.status-confirmada{background:var(--azul);}
.dash-funil-barra.status-aprovado{background:#1f8a4c;}
.dash-funil-barra.status-recusado{background:#961e1e;}
.dash-funil-num{flex:0 0 30px; text-align:right; font-family:'Poppins',sans-serif; font-weight:800; font-size:14px; color:var(--texto);}

/* rankings (empresas/passageiros que mais viajaram ou gastam) */
.dash-grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:18px;}
.dash-rank-linha{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--cinza); text-decoration:none; color:inherit;}
.dash-rank-linha:first-child{border-top:none;}
.dash-rank-linha:hover .dash-rank-nome{text-decoration:underline;}
.dash-rank-pos{flex:0 0 16px; font-size:11.5px; font-weight:800; color:var(--cinza-escuro); text-align:center;}
.dash-rank-nome{flex:1; font-weight:700; color:var(--azul); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dash-rank-valor{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--cinza-escuro); font-variant-numeric:tabular-nums; white-space:nowrap;}

@media (max-width:760px){ .dash-grid-2{grid-template-columns:1fr;} .dash-grid-3{grid-template-columns:1fr;} }
@media (min-width:761px) and (max-width:1080px){ .dash-grid-3{grid-template-columns:1fr 1fr;} }

/* ---- Remodelagem da tela de montar voucher (2026-08-30) ---- */
/* Topo em duas colunas: Dados rápidos | Extrair com IA — padrão da casa pra
   formulário largo (começar a trabalhar sem rolar). Empilha em tela estreita. */
.vch-topo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin-bottom:20px;}
.vch-topo-grid .form-card{max-width:none; margin:0; box-sizing:border-box;}
@media (max-width:1150px){ .vch-topo-grid{grid-template-columns:1fr;} }
/* Numeração que o cliente vê (id+1000), agora visível já no título da edição */
.vch-dullid-badge{display:inline-block; background:#eef5f9; color:var(--azul-2,#0a5b82);
  border-left:3px solid var(--cereja,#e73452); border-radius:6px; font-size:13px;
  font-weight:800; letter-spacing:.04em; padding:3px 9px; vertical-align:3px;}
/* Ícones SVG dos cards compartilhados com o PDF (propostaIconeSvg): o tamanho
   deles só existia em proposta.css (mm, só no PDF) — na tela de edição o SVG
   ficava SEM tamanho e explodia gigante, atropelando o texto vizinho (o
   "relógio da conexão sobrepondo o horário" reportado pelo usuário). */
.ico-prop{width:13px; height:13px; vertical-align:-2px; flex-shrink:0;}