:root{
  --ouro:#C9A227; --ouro-claro:#E8C95C;
  --fundo:#101418; --card:#181E24; --card2:#1F2730;
  --texto:#E8EAED; --texto-2:#9AA4AF; --borda:#2A333D;
  --verde:#4CAF7D; --ambar:#D9A441; --cinza:#6B7683; --verm:#C0564F;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--fundo); color:var(--texto); font-family:"Segoe UI",system-ui,sans-serif; min-height:100vh;}
a{color:var(--ouro); text-decoration:none;}

header{display:flex; align-items:baseline; gap:14px; padding:20px 32px; border-bottom:1px solid var(--borda); flex-wrap:wrap;}
header h1{font-size:20px; letter-spacing:2px; font-weight:600; text-transform:uppercase;}
header h1 a{color:var(--ouro);}
header .sub{color:var(--texto-2); font-size:13px;}
header nav{margin-left:auto; display:flex; gap:10px; align-items:center;}

.botao{display:inline-block; color:var(--ouro); border:1px solid var(--ouro); padding:7px 14px;
  border-radius:8px; font-size:13px; background:none; cursor:pointer; font-family:inherit;}
.botao:hover{background:var(--ouro); color:#14161a;}
.botao.cheio{background:var(--ouro); color:#14161a; font-weight:600;}
.botao.cheio:hover{background:var(--ouro-claro); border-color:var(--ouro-claro);}
.botao.perigo{color:var(--verm); border-color:var(--verm);}
.botao.perigo:hover{background:var(--verm); color:#fff;}
.botao.suave{color:var(--texto-2); border-color:var(--borda);}
.botao.suave:hover{background:var(--card2); color:var(--texto);}
.botao.mini{padding:4px 12px; font-size:12px; margin-left:auto;}
.pdf-botoes{margin-left:auto; display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.pdf-botoes .botao.mini{margin-left:0; white-space:nowrap;}
.botao.mini[disabled]{opacity:.45; cursor:default;}
/* Com o check-in ABERTO (ou já marcado) os passageiros e a caixinha dividem a
   MESMA linha — nomes à esquerda, caixinha à direita —, o que tira uma linha
   inteira do card. Enquanto o check-in está FECHADO a contagem regressiva ainda
   precisa de espaço, então o layout antigo é mantido: contagem em cima, nomes
   embaixo (classe .empilhado). */
.linha-meio{display:flex; align-items:center; gap:14px; margin-top:10px; flex-wrap:wrap;}
.linha-meio.empilhado{flex-direction:column; align-items:stretch; gap:10px;}
.linha-meio.empilhado .checkin{order:-1;}
.checkin{display:flex; align-items:center; gap:12px; justify-content:flex-end;}
.checkin-info{font-size:12.5px; color:var(--texto-2); order:-1; margin-right:auto;}
.checkin-info.fechado{color:var(--cinza);}
.checkin-feito{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  color:var(--texto-2); cursor:pointer; user-select:none;}
.checkin-feito input{width:auto; cursor:pointer;}

main{padding:20px 32px 60px; max-width:1060px; margin:0 auto;}

/* ---------- lista ---------- */
.barra{display:flex; gap:12px; align-items:center; padding:0 0 18px; flex-wrap:wrap;}
.barra input[type=text]{background:var(--card); border:1px solid var(--borda); color:var(--texto);
  padding:10px 14px; border-radius:8px; font-size:14px; width:300px; outline:none;}
.barra input[type=text]:focus{border-color:var(--ouro);}
.contador{color:var(--texto-2); font-size:13px;}
.chips{display:flex; gap:8px;}
.chip{font-size:12px; padding:5px 12px; border-radius:20px; border:1px solid var(--borda);
  color:var(--texto-2); cursor:pointer; background:none; font-family:inherit;}
.chip.ativo{color:var(--ouro); border-color:var(--ouro);}

.cards{display:grid; gap:16px;}
.card{background:var(--card); border:1px solid var(--borda); border-radius:12px; padding:18px 20px;}
a.card:hover{border-color:var(--ouro); }
/* reserva com alteração detectada pela companhia e ainda não confirmada:
   vermelho claro para saltar aos olhos no meio dos cards escuros */
.card.alterada{background:#2A1A1B; border-color:var(--verm);}
a.card.alterada:hover{border-color:#E07A72;}
.card.alterada .trecho{background:#33201F; border-color:#5A3230;}
/* vale para o botão do card (mini) e para o da página da reserva */
.botao.alerta{color:var(--verm); border-color:var(--verm);}
.botao.alerta:hover{background:var(--verm); color:#fff;}
.topo{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cia{font-weight:700; font-size:13px; letter-spacing:1px; padding:4px 10px; border-radius:6px;
  background:var(--card2); border:1px solid var(--borda); color:var(--texto);}
.cia.LATAM{color:#B8A1E8;} .cia.GOL{color:#F0A05A;} .cia.AZUL{color:#7FB8F0;} .cia.COPA{color:#7FD8C8;}
.cia.TAP{color:#7FD89A;} .cia.AMERICAN{color:#9AB4D8;} .cia.FINNAIR{color:#8FC4E8;} .cia.IBERIA{color:#E8737A;} .cia.DELTA{color:#9DA8D8;}
.cia.UNITED{color:#89A6E0;}
.cia-logo{background:#fff; border-radius:8px; padding:4px 12px; height:32px; display:inline-flex;
  align-items:center; justify-content:center; min-width:72px;}
.cia-logo img{max-height:20px; max-width:86px; display:block;}
.cia-logo img.GOL{max-height:26px;}
/* marcas claras o bastante para ler direto no card escuro dispensam o fundo
   branco (mesma lista do voucher: CIAS_SEM_CHIP). Mantém a altura para os
   cards continuarem alinhados entre si. */
.cia-logo.sem-chip{background:none; padding:4px 0; min-width:86px;}
.badge.tipo{color:var(--texto-2); border-color:var(--borda); background:var(--card2); text-transform:uppercase; letter-spacing:.5px;}
.rot-viagem{color:var(--ouro); font-size:11px; font-weight:700; letter-spacing:1.5px;
  align-self:center; min-width:48px;}
.loc{font-family:Consolas,monospace; font-size:16px; font-weight:700; color:var(--ouro-claro); letter-spacing:1.5px;}
.pax{color:var(--texto); font-size:14px;}
.pax-linha{color:var(--texto); font-size:14px; margin-right:auto;}
.badge{font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid;}
.badge.ok{color:var(--verde); border-color:var(--verde);}
.badge.pend{color:var(--ambar); border-color:var(--ambar);}
.badge.cancelada{color:var(--verm); border-color:var(--verm);}
.badge.concluida{color:var(--cinza); border-color:var(--cinza);}
/* selo de check-in (substituiu o botão "Fazer check-in"): clicável, abre a
   reserva no site da cia. Âmbar quando aberto, verde depois de marcado feito. */
.badge.ci-badge{cursor:pointer;}
.badge.ci-badge:hover{filter:brightness(1.25);}
.badge.ci-aberto{color:var(--ambar); border-color:var(--ambar);}
.badge.ci-feito{color:var(--verde); border-color:var(--verde);}
.trechos{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.trecho{background:var(--card2); border:1px solid var(--borda); border-radius:8px; padding:8px 13px;
  font-size:13px; display:flex; gap:9px; align-items:center;}
/* trecho já voado (só nas reservas ativas): risco contínuo de ponta a ponta.
   Usa ::after em vez de text-decoration porque o chip é flex — o line-through
   quebraria no vão entre a rota e a data, e o pedido era uma linha contínua. */
.trecho.voado{position:relative; opacity:.5;}
.trecho.voado::after{content:""; position:absolute; left:8px; right:8px; top:50%;
  border-top:1.5px solid var(--texto-2); pointer-events:none;}
.trecho b{letter-spacing:.5px;}
.trecho .dt{color:var(--texto-2);}
.vazio{color:var(--texto-2); text-align:center; padding:60px 0;}

/* ---------- detalhe ---------- */
.acoes{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px;}
.secao{margin-bottom:26px;}
.secao h2{color:var(--ouro); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid var(--borda); padding-bottom:7px; margin-bottom:14px;}
.linhas{display:grid; gap:8px; font-size:14px;}
.linhas .l{display:flex; gap:10px;}
.linhas .l b{color:var(--texto-2); font-weight:400; min-width:170px;}
.trecho-card{background:var(--card); border:1px solid var(--borda); border-radius:10px;
  padding:14px 18px; margin-bottom:10px; display:grid; grid-template-columns:90px 1fr 60px 1fr; gap:8px; align-items:center;}
.trecho-card .rot{color:var(--texto-2); font-size:11px; letter-spacing:1px;}
.trecho-card .gr{font-size:17px; font-weight:700;}
.trecho-card .cid{color:var(--texto-2); font-size:12.5px;}
.trecho-card .seta{color:var(--ouro); text-align:center; font-size:17px;}
.trecho-card .dur{color:var(--texto-2); font-size:12px; text-align:center;}
/* bloco "a companhia alterou esta reserva" no detalhe: comparação antes × agora */
.alerta-alteracao{background:#2A1A1B; border:1px solid var(--verm); border-radius:12px;
  padding:18px 20px; margin:18px 0 4px;}
.alerta-alteracao h2{color:var(--verm); font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:8px;}
table.comparacao{width:100%; border-collapse:collapse; margin-top:12px; font-size:13.5px;}
table.comparacao th{color:var(--texto-2); font-weight:600; font-size:12px; text-align:left;
  padding:6px 12px; border-bottom:1px solid #5A3230;}
table.comparacao td{padding:10px 12px; vertical-align:top; border-bottom:1px solid #3A2626;}
table.comparacao td.ord{color:var(--texto-2); font-size:12px; white-space:nowrap;}
table.comparacao td.antes{color:var(--texto-2);}
table.comparacao .cid{color:var(--texto-2); font-size:12.5px;}
/* só o que de fato mudou fica em destaque, para o olho ir direto ao ponto */
table.comparacao .mudou{color:var(--ambar); font-weight:700;}
@media (max-width:640px){
  table.comparacao td.ord{display:none;}
}
.conexao{color:var(--texto-2); font-style:italic; font-size:13px; margin:6px 4px 10px;}
/* rótulo da jornada no detalhe (IDA / VOLTA / TRECHO N) — separa visualmente
   onde termina a ida e começa a volta; a rota ao lado desfaz qualquer dúvida */
.rot-jornada{color:var(--ouro); font-size:12px; font-weight:700; letter-spacing:1.5px;
  margin:18px 2px 8px; display:flex; align-items:baseline; gap:10px;}
.rot-jornada:first-child{margin-top:4px;}
.rot-jornada span{color:var(--texto-2); font-weight:600; font-size:12.5px; letter-spacing:.3px;}
.nota{color:var(--texto-2); font-size:13px;}

/* ---------- formulário ---------- */
form.f, .f{max-width:980px;}
fieldset{border:1px solid var(--borda); border-radius:12px; padding:18px 20px; margin-bottom:20px; background:var(--card);}
legend{color:var(--ouro); font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; padding:0 8px;}
.grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.campo{display:flex; flex-direction:column; gap:5px;}
.campo label{font-size:12px; color:var(--texto-2);}
.campo input,.campo select,.campo textarea{background:var(--card2); border:1px solid var(--borda);
  color:var(--texto); padding:9px 11px; border-radius:7px; font-size:13.5px; outline:none; font-family:inherit; width:100%;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ouro);}
.campo input[type=checkbox]{width:auto;}
.check{flex-direction:row; align-items:center; gap:8px;}
.check label{font-size:13px; color:var(--texto);}
.bloco{border:1px solid var(--borda); border-radius:10px; padding:14px; margin-bottom:12px; background:var(--card2); position:relative;}
.bloco .remover{position:absolute; top:10px; right:10px; background:none; border:none; color:var(--verm);
  cursor:pointer; font-size:16px; line-height:1;}
.bloco h3{font-size:12px; color:var(--texto-2); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px;}
.add{margin-top:4px;}
.aviso{color:var(--verm); font-size:13px; margin:10px 0; min-height:1em;}
.rodape-form{display:flex; gap:12px; align-items:center; margin-top:6px;}
hr.sep{border:none; border-top:1px solid var(--borda); margin:12px 0;}

/* ---------- login ---------- */
.login-caixa{max-width:360px; margin:12vh auto; background:var(--card); border:1px solid var(--borda);
  border-radius:12px; padding:30px;}
.login-caixa h2{color:var(--ouro); font-size:16px; letter-spacing:2px; margin-bottom:18px; text-transform:uppercase;}
.login-caixa .confiar{display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; cursor:pointer;
  font-size:14px; color:var(--texto);}
.login-caixa .confiar input{margin-top:3px; accent-color:var(--ouro); width:16px; height:16px; flex:none;}
.login-caixa .confiar small{display:block; color:var(--texto-2); font-size:12px; margin-top:3px; line-height:1.4;}

@media (max-width:700px){
  main,header{padding-left:16px; padding-right:16px;}
  .trecho-card{grid-template-columns:1fr 1fr;}
  .linhas .l{flex-direction:column; gap:2px;}
}