/* Caminho: plus/estilos/layout.css

   ibexGo PLUS - layout.css
   Extraido do prototipo aprovado em 01/09/2026.
   Manual completo v2.0, capitulo 16 (design system).
   Estrutura, faixa de acesso, barra inferior e responsivo. Carregar SEMPRE por ultimo. */
/* ---------- GRADE DE DUAS COLUNAS (painel e fichas) ---------- */
/* Estava como estilo inline no JS, o que a regra de mobile nao alcancava.
   Virou classe justamente para poder empilhar no celular. */
.duas-colunas{display:grid;gap:20px;grid-template-columns:1.5fr 1fr;align-items:start}

/* Item de grade nunca pode ser mais largo que a coluna. Sem isto, um valor
   longo ou uma tabela empurra a pagina e cria rolagem horizontal. */
.grade>*,.duas-colunas>*{min-width:0}
.cx,.ind,.cm{max-width:100%}

/* ---------- FAIXA DE ACESSO ----------
   Fica entre a barra do topo e o conteudo, em largura total. Em atraso e
   ambar e pode ser fechada; suspensa e vermelha e nao fecha, porque a
   pessoa nao pode dispensar o motivo pelo qual o sistema parou de gravar. */
.faixa-acesso{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
              padding:12px 20px;background:var(--amb-cl);color:#8A4A02;
              border-bottom:1px solid rgba(247,144,9,.35);font-size:14.5px}
/* Vencida e suspensa sao vermelhas. Amarelo fica reservado para o aviso
   de vencimento proximo: usar amarelo em quem ja venceu ensina que
   vermelho e opcional. */
.faixa-acesso.erro,.faixa-acesso.grave{background:var(--verm-cl);color:#B4241A;
                                       border-bottom-color:rgba(240,68,56,.35)}
.faixa-acesso span{flex:1;min-width:200px}
.faixa-acesso .b{height:36px;padding:0 16px;flex:none}
.faixa-acesso.erro .b,.faixa-acesso.grave .b{background:var(--verm);border-color:var(--verm)}
.faixa-acesso .fechar{width:30px;height:30px;border-radius:8px;flex:none;
                      font-size:20px;line-height:1;color:inherit;opacity:.6}
.faixa-acesso .fechar:hover{opacity:1;background:rgba(0,0,0,.06)}

@media(max-width:900px){
  .faixa-acesso{padding:11px 14px;font-size:13.5px;gap:10px}
  .faixa-acesso .b{width:100%}
}

/* ---------- SEM ROLAGEM HORIZONTAL ---------- */
/* Esconder overflow-x aqui muda qual elemento de fato rola. Por isso
   scrollIntoView e scroll-behavior sao declarados junto: quem rola passa
   a ser html ou body dependendo do navegador, e as duas linhas cobrem
   os dois casos. */
html,body{max-width:100%;overflow-x:hidden;scroll-behavior:smooth}
.conteudo{max-width:100%}
.tab-env{max-width:100%}


/* ---------- ESTRUTURA ---------- */
#app{min-height:100%}
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);background:var(--sup);border-right:1px solid var(--borda);display:flex;flex-direction:column;z-index:60;transition:transform .22s cubic-bezier(.3,0,.2,1)}
.marca{height:var(--topo);display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--borda)}
.marca .g{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px}
.marca b{font-weight:700;letter-spacing:-.4px;font-size:19px}
.marca span{color:var(--tinta-3);font-weight:500;font-size:19px}
.menu{flex:1;overflow-y:auto;padding:10px 10px 20px}
.menu .grupo{font-size:12px;font-weight:600;color:var(--tinta-3);padding:14px 10px 5px}
.menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--tinta-2);font-weight:500;font-size:15.5px;margin-bottom:3px}
.menu a:hover{background:var(--fundo);color:var(--tinta)}
.menu a.on{background:var(--azul-cl);color:var(--azul-esc);font-weight:600}
.menu a.on svg{color:var(--azul);opacity:1}
.menu a svg{width:21px;height:21px;flex:none;opacity:.9}
.menu a .n{margin-left:auto;background:var(--verm);color:#fff;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:10px}
.rodape-lat{padding:12px 18px;border-top:1px solid var(--borda);font-size:11.5px;color:var(--tinta-3)}

.principal{margin-left:var(--lateral);min-height:100vh;display:flex;flex-direction:column}
.topo{position:sticky;top:0;height:var(--topo);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda);display:flex;align-items:center;gap:12px;padding:0 20px;z-index:40}
.topo h1{font-size:19px;font-weight:600;letter-spacing:-.3px}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:6px}
.hamb{display:none;width:34px;height:34px;border-radius:var(--r-sm);align-items:center;justify-content:center}
.busca-topo{flex:1;max-width:420px;margin-left:18px}
.icb{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--tinta-2);position:relative}
.icb:hover{background:var(--fundo)}
.icb svg{width:21px;height:21px}
.icb .p{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--verm);border:1.5px solid #fff}
.av{width:37px;height:37px;border-radius:50%;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.conteudo{flex:1;padding:26px 30px 78px;width:100%}
.veu{display:none;position:fixed;inset:0;background:rgba(16,32,47,.45);z-index:55}

/* ---------- FAIXA DE ACESSO ---------- */
.faixa{display:flex;align-items:center;gap:12px;padding:13px 26px;font-size:14.5px;font-weight:500}
.faixa.aviso{background:var(--azul-cl);color:var(--azul-esc);border-bottom:1px solid var(--azul-borda)}
.faixa.grave{background:var(--verm);color:#fff}
.faixa .bt{margin-left:auto;display:flex;gap:8px}
.faixa button{font-size:14px;font-weight:600;padding:7px 15px;border-radius:9px;background:#fff;color:var(--azul-esc)}
.faixa.grave button{background:#fff;color:var(--verm)}
.faixa .x{background:transparent;color:inherit;opacity:.7;padding:4px 6px}

/* ---------- LISTA MOBILE ---------- */
.cartoes-m{display:none}
.cm{background:var(--sup);border:1px solid var(--borda);border-radius:var(--r);padding:16px;margin-bottom:11px;box-shadow:var(--sombra)}
.cm .l1{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.cm .l1 .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm .l2{display:flex;gap:16px;font-size:14px;color:var(--tinta-3);flex-wrap:wrap}
.cm .l2 b{color:var(--tinta-2);font-weight:600}

/* Botões de ação do cabeçalho da aba. No desktop ficam à direita, como
   sempre; no celular quebram em vez de escapar pela borda - "Novo
   passageiro" saía cortado ao meio na tela de 400px. */
.pax-botoes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){
  .pax-botoes{width:100%;margin-left:0}
  .pax-botoes .b{flex:1;min-width:0;justify-content:center}
}

/* ---------- CARTÃO DE PASSAGEIRO (mobile) ----------
   O cartão genérico .cm serve para listas simples. A de passageiros não
   é: ela carrega nome, status, grupo, assento, quarto, reserva, saldo e
   três ações, tudo na largura de um celular. Achatado num único tamanho
   de fonte, vira um bloco cinza que ninguém consegue varrer com o olho -
   e é justamente o que a pessoa faz na porta do ônibus, com a lista na
   mão e gente esperando.

   A hierarquia aqui é deliberada:
     1. NOME - é o que se lê em voz alta e o que se procura
     2. status e pendência - decidem se a pessoa sobe ou não
     3. assento e quarto - onde ela vai
     4. saldo - e só quando há o que cobrar
     5. ações - por último, com área de toque de verdade */

.pax-cm{background:var(--sup);border:1px solid var(--borda);
  border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--sombra)}

.pax-topo{display:flex;gap:11px;align-items:flex-start}

/* Iniciais: numa lista de quarenta nomes parecidos, a mancha de cor é o
   que o olho encontra antes de ler. */
.pax-av{flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--azul-cl);color:var(--azul-esc);
  display:grid;place-items:center;font-size:13px;font-weight:700}

.pax-id{flex:1;min-width:0}

/* O nome QUEBRA em vez de cortar com reticências. Nome cortado obriga a
   abrir a ficha só para saber de quem é - e "Ana Cláudia Ferre..." não
   serve para chamar ninguém. */
.pax-nome{display:block;font-size:16.5px;font-weight:600;line-height:1.3;
  color:var(--tinta);word-break:break-word}

.pax-onde{margin-top:4px;font-size:13.5px;color:var(--tinta-3);
  display:flex;flex-wrap:wrap;gap:4px 10px}
.pax-onde b{color:var(--tinta-2);font-weight:600;font-variant-numeric:tabular-nums}

.pax-selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pax-selos:empty{display:none}

/* Dinheiro numa faixa própria: é a segunda coisa que se procura, e
   perdido no meio dos identificadores ninguém acha. */
.pax-grana{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid var(--borda);
  font-size:13.5px;color:var(--tinta-3)}
.pax-grana b{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pax-grana .venc{font-size:12.5px}

/* Ações com borda e altura de toque. Antes eram texto solto de 14px:
   alvo pequeno demais para o polegar, e "Cancelar" colado em "Editar" é
   convite a errar num botão que não tem desfazer. */
.pax-acoes{display:flex;gap:8px;margin-top:12px}
.pax-acoes button{flex:1;min-height:40px;border:1px solid var(--borda);
  border-radius:10px;background:var(--sup);color:var(--tinta-2);
  font-size:14px;font-weight:600;font-family:inherit;
  display:flex;align-items:center;justify-content:center;padding:0 8px}
.pax-acoes button.perigo{color:var(--verm);border-color:var(--verm-cl)}
.pax-acoes button:active{background:var(--fundo)}

/* Fora do escopo de quem olha: some o realce, mas continua legível. */
.pax-cm.nao-meu{opacity:.62}

/* ---------- BARRA INFERIOR (mobile) ---------- */
.rodape-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--borda);padding-bottom:env(safe-area-inset-bottom)}
.rodape-nav .itens{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;height:66px}
.rodape-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;color:var(--tinta-3);font-size:11.5px;font-weight:600;position:relative}
.rodape-nav a svg{width:24px;height:24px}
.rodape-nav a.on{color:var(--azul)}
.rodape-nav a .n{position:absolute;top:6px;right:calc(50% - 22px);background:var(--verm);color:#fff;font-size:10px;font-weight:700;padding:0 5px;min-width:16px;height:16px;line-height:16px;border-radius:8px;text-align:center}
.rodape-nav .centro{display:flex;align-items:center;justify-content:center}
.rodape-nav .centro button{width:58px;height:58px;border-radius:19px;background:linear-gradient(135deg,var(--azul),#2B7BD6);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,83,155,.4);margin-bottom:14px;transition:transform .12s}
.rodape-nav .centro button:active{transform:scale(.92)}
.rodape-nav .centro button svg{width:28px;height:28px}
.acao-rapida{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px;border-radius:var(--r-sm);border:1px solid var(--borda);margin-bottom:9px}
.acao-rapida .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.acao-rapida b{font-weight:600;display:block;font-size:15px}

/* ---------- AGENCIA ATIVA (Lote 3) ---------- */
.marca-in{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;width:100%}
.ag-lat{display:flex;align-items:center;gap:3px;max-width:100%;min-width:0;padding:0;margin:0;border:0;
  background:none;color:var(--tinta-3);font:inherit;text-align:left}
.ag-lat-nome{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:500;line-height:1.2}

/* ---------- MARCA DA AGENCIA NO TOPO, A NOSSA NO PE ---------- */
.marca{height:auto;min-height:var(--topo);padding-top:10px;padding-bottom:10px}
.marca-ag{flex-direction:row;align-items:center;gap:11px}
.ag-bloco{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.marca-ag .ag-lat-nome{font-size:15.5px;font-weight:700;letter-spacing:-.2px;color:var(--tinta)}
.lat-marca{width:54px;height:54px;border-radius:50%;flex:none;overflow:hidden;
  background:#fff;border:1px solid var(--borda);display:grid;place-items:center;padding:0}
/* Redonda e preenchendo: e o mesmo tratamento que a logo ja recebe no
   cartao do passageiro e no portal, entao a agencia ve a marca dela do
   mesmo jeito nos tres lugares. */
.lat-marca img{width:100%;height:100%;object-fit:cover;display:block}
/* As iniciais so aparecem quando nao ha imagem - inclusive quando ela
   falha em carregar, o que a classe sem-img resolve sem recarregar. */
.lat-marca .lat-ini{display:none;font-weight:700;font-size:16px;color:var(--tinta-2)}
.lat-marca.sem-img{background:var(--azul-cl);border-color:transparent}
.lat-marca.sem-img .lat-ini{display:block}
.lat-pe{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:12px 18px;border-top:1px solid var(--borda)}
.lat-pe:hover{background:var(--fundo)}
.lat-pe .logomarca{max-height:22px!important;width:auto}
.lat-plano{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  line-height:1;padding:4px 9px;border-radius:999px;background:var(--azul-cl);
  color:var(--azul-esc);white-space:nowrap;max-width:100%}
/* Dourado so aqui: e o unico lugar do sistema em que ele significa algo. */
.lat-plano.fundador{display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#F4C444,#E0A21B);color:#3F2B04}
.ag-lat svg{flex:none}
button.ag-lat{cursor:pointer}
button.ag-lat:hover{color:var(--azul)}
.av-logo{background:#fff;border:1px solid var(--borda);overflow:hidden;padding:0}
.av-logo img{width:100%;height:100%;object-fit:contain;display:block}
.ag-logo{width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--azul-cl);color:var(--azul-esc);font-size:12px;font-weight:700;border:1px solid var(--borda)}
.ag-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.acao-rapida .ag-logo{width:42px;height:42px;font-size:14px}
.acao-rapida[disabled]{cursor:default}
.ag-faixa{display:none}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .ag-faixa{display:flex;align-items:center;gap:6px;width:100%;padding:8px 16px;border:0;
    border-bottom:1px solid var(--azul-borda);background:var(--azul-cl);color:var(--azul-esc);
    font-size:13.5px;text-align:left;cursor:pointer;position:sticky;top:var(--topo);z-index:39}
  .ag-faixa b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral{transform:translateX(-100%)}
  body.menu-ab .lateral{transform:none}
  body.menu-ab .veu{display:block}
  .principal{margin-left:0}
  .hamb{display:flex}
  .busca-topo{display:none}
  .conteudo{padding:18px 16px 104px}
  .rodape-nav{display:block}
  .hamb{display:none}
  h2.tit{font-size:24px}
  .g4{grid-template-columns:1fr 1fr} .g3,.g2{grid-template-columns:1fr}
  .l2,.l3{grid-template-columns:1fr}
  .tab-env{display:none}
  .cartoes-m{display:block}
  .barra-sel{transform:translateX(-50%);left:50%;right:auto;width:calc(100% - 28px);max-width:440px;bottom:calc(80px + env(safe-area-inset-bottom))}
  .login{grid-template-columns:1fr}
  .login .lado{display:none}
  .toasts{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
  /* bottom sheet */
  .mv{padding:0;align-items:flex-end}
  .md,.md.larga,.md.estreita{max-width:none;border-radius:18px 18px 0 0;max-height:93vh;animation:up .24s cubic-bezier(.3,0,.2,1)}
  @keyframes up{from{transform:translateY(100%)}}
  .puxador{display:block;width:38px;height:4px;background:var(--borda-2);border-radius:2px;margin:9px auto 0}
  .md-c{padding:11px 18px 13px}
  .md-r{position:sticky;bottom:0;border-radius:0;padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  .md-r .b{flex:1}
  .emb-topo .n{font-size:38px}
  .scan{height:84px;font-size:17px}
  .demo{bottom:calc(80px + env(safe-area-inset-bottom));left:12px}
  .demo .bt{width:40px;height:40px;opacity:.9}

  /* ---------- AJUSTES DE CELULAR (adicionados depois) ----------
     Estas regras precisam ficar no fim do bloco: em CSS, entre seletores
     de mesma especificidade, quem vem depois vence. */

  .duas-colunas{grid-template-columns:1fr;gap:16px}

  /* Uma coluna no celular, duas no tablet. Valor em reais nao cabe
     em meia tela de 360px. */
  .g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .g3,.g2{grid-template-columns:1fr}

  h2.tit{font-size:22px;letter-spacing:-.6px}
  .sub{font-size:13.5px}
  h3.sec{font-size:16px}

  .ind{padding:16px}
  .ind .chip{width:38px;height:38px;border-radius:11px;margin-bottom:10px}
  .ind .chip svg{width:19px;height:19px}
  .ind .r{font-size:13.5px}
  .ind .d{font-size:13px}
  /* O numero acompanha a largura da tela em vez de estourar o cartao. */
  .ind .v{font-size:clamp(21px,6.4vw,29px);letter-spacing:-1px}

  /* Cabecalho: titulo em cima, acoes embaixo em largura total. */
  .cab{gap:12px}
  .cab .acoes{margin-left:0;width:100%;flex-wrap:wrap}
  /* Minimo de 46% obriga a quebra a cada dois botoes: quatro botoes numa
     linha so viram alvos pequenos demais para o dedo. */
  .cab .acoes .b{flex:1 1 46%;min-width:0}
  .pilhas{width:100%}
  .pilhas .pilha{flex:1;justify-content:center;padding:0 10px}

  /* Filtros empilham em vez de disputar a mesma linha. */
  .filtros{gap:10px}
  .filtros .busca{max-width:none;width:100%}
  .filtros select.ent{width:100%}

  /* Abas correm de ponta a ponta, sem margem cortando o toque. */
  .abas{margin:0 -14px 18px;padding:0 14px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- RODAPÉ DA FICHA DO PASSAGEIRO (Revisão Etapa 04) ----------
   O .md-r é flex sem quebra e, no celular, o bloco acima estica cada
   botão com flex:1. Com Excluir, Cartão de embarque, Cancelar e Salvar
   na mesma linha, o Cancelar saía cortado e o Salvar ficava fora da
   tela. O wrapper .pax-rodape (passageiro-editor.js) devolve o controle:
   no desktop fica como era; no celular, ações secundárias numa linha e
   Salvar sozinho embaixo, largura total, onde o polegar alcança. */
.pax-rodape{display:flex;flex-wrap:wrap;gap:10px;width:100%;align-items:center}
.pax-rodape .b{flex:0 0 auto}
.pax-rodape #salvar-pax{margin-left:auto}
@media(max-width:900px){
  .md-r .pax-rodape .b{flex:1 1 0;min-width:0;padding:0 8px;font-size:14px;
    white-space:normal;line-height:1.15;text-align:center}
  .md-r .pax-rodape #salvar-pax{flex:1 1 100%;order:10;margin-left:0}
  .md-r .pax-rodape .sub{flex:1 1 100%}
}

/* ---------- PASSAGEIRO CANCELADO NA LISTA (Revisão Etapa 04) ----------
   Antes a linha inteira ficava opaca, inclusive os botões, e o Reativar
   parecia desabilitado. Agora só os dados apagam; as ações ficam nítidas. */
tr.pax-cancelado td:not(:last-child){opacity:.55}
.pax-cm.pax-cancelado{border-style:dashed}
.pax-cm.pax-cancelado > :not(.pax-acoes){opacity:.55}
.pax-acoes button.reativar{color:var(--azul);border-color:var(--azul-borda)}

/* ---------- LISTA DE PASSAGEIROS: COLUNAS (Revisão Etapa 04) ----------
   Nome com largura limitada e selos na linha de baixo: a coluna deixa de
   empurrar as outras. Botões da linha com espaço entre eles. */
td.pax-col-nome{min-width:190px;max-width:260px}
.pax-selos-linha{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 3px}
.pax-selos-linha .t{margin:0}
td.pax-col-acoes{text-align:right;white-space:nowrap}
.pax-acoes-linha{display:inline-flex;gap:8px;justify-content:flex-end}

/* ---------- LISTA DE PASSAGEIROS: LARGURA DISPONÍVEL (Revisão Etapa 04) ----------
   A troca de formato é medida pelo espaço que a LISTA tem, não pela
   largura da tela. Com media query, o menu lateral e o zoom do navegador
   enganavam a conta: a tela tinha 1400px, a lista tinha 1050px e as
   ações saíam cortadas. Container query mede a caixa da lista de verdade.

   Três faixas, e nenhuma esconde informação:
     1450px ou mais   - tabela completa
     1200 a 1449px    - Tipo e Vendedor vão para baixo do nome
     abaixo de 1200px - cartões (os mesmos do celular), em grade

   Navegador antigo sem container query fica com a tabela completa e a
   rolagem horizontal da rede de segurança. */
.tab-env{overflow-x:auto}
.pax-info-compacta{display:none}
.pax-acoes button{cursor:pointer}
#lista-pax{container-type:inline-size}

@container (max-width:1449px){
  .pax-col-tipo, .pax-col-vend{display:none}
  .pax-info-compacta{display:block}
  .tab-env tbody td{padding-left:14px;padding-right:14px}
}

@container (max-width:1199px){
  .tab-env{display:none}
  .cartoes-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
    gap:12px;align-items:stretch}
  .cartoes-m .pax-cm{margin-bottom:0}
}

/* ---------- CARTÃO DO PASSAGEIRO: NOME NUNCA ESPREMIDO (Revisão Etapa 04) ----------
   As etiquetas do canto ocupam no máximo metade do topo e quebram em
   linhas. O nome fica com o resto e nunca abaixo de 110px. Filhos da grade
   com min-width:0 para nada empurrar o cartão para fora da coluna. */
.pax-marca{flex:0 1 auto;max-width:50%;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.pax-marca .t{white-space:nowrap}
.pax-id{min-width:110px}
.cartoes-m > .pax-cm{min-width:0}
.pax-acoes button{min-width:0}
.pax-grana{flex-wrap:wrap}

/* ---------- CARTÕES ALINHADOS NA GRADE (Revisão Etapa 04) ----------
   Cartões da mesma linha com a mesma altura; saldo e botões sempre no pé. */
.cartoes-m .pax-cm{display:flex;flex-direction:column}
.pax-base{margin-top:auto}
.pax-base:empty{display:none}

/* ---------- SELETOR DE STATUS NA LISTA (Revisão Etapa 04, item 05) ----------
   Mesmo desenho da etiqueta de status, com a seta de escolha. No celular
   abre o seletor nativo do sistema. Altura mínima de toque de 36px. */
.pax-status-sel{appearance:none;-webkit-appearance:none;border:1px solid transparent;
  height:34px;min-height:34px;padding:0 30px 0 11px;border-radius:8px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;max-width:100%;
  background-repeat:no-repeat;background-position:right 9px center;background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pax-status-sel:hover{border-color:var(--borda-2)}
.pax-status-sel:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.pax-status-sel:disabled{cursor:default;opacity:.7}
.pax-status-sel.st-confirmado{background-color:var(--verde-cl);color:#067A48}
.pax-status-sel.st-pendente{background-color:var(--amb-cl);color:#B25E02}
.pax-status-sel.st-reservado{background-color:var(--azul-cl);color:var(--azul-esc)}
.pax-status-sel.st-cancelado{background-color:var(--verm-cl);color:#B4241A}
.pax-status-sel option{background:#fff;color:var(--tinta)}

/* No cartão: linha própria acima do dinheiro. */
.pax-status-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--borda);
  font-size:13.5px;color:var(--tinta-3)}
.pax-status-linha .pax-status-sel{height:38px;font-size:14px}
.pax-status-linha + .pax-grana{border-top:0;padding-top:0;margin-top:8px}

/* ---------- VISÃO POR RESERVA (Revisão Etapa 04, item 04) ----------
   Um bloco por reserva: cabeçalho com código, titular, pessoas, status e
   dinheiro do grupo; embaixo os integrantes, em tabela ou em cartões
   (mesma regra de largura da lista, pela container query). */
.res-lista{display:flex;flex-direction:column;gap:14px}
.res-bloco{background:var(--sup);border:1px solid var(--borda);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden}
.res-cab{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--fundo);border-bottom:1px solid var(--borda)}
.res-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.res-cod{background:var(--azul-cl);color:var(--azul-esc);font-weight:700;font-size:13px;
  padding:4px 9px;border-radius:7px}
.res-cod.res-sem{background:#EEF2F6;color:var(--tinta-2);font-family:inherit}
.res-nome{font-size:16px;font-weight:700;color:var(--tinta);word-break:break-word}
.res-info{font-size:13.5px;color:var(--tinta-3)}
.res-valores{display:flex;flex-wrap:wrap;gap:6px 22px}
.res-valores > div{display:flex;flex-direction:column;align-items:flex-end}
.res-valores span{font-size:12px;color:var(--tinta-3);font-weight:600}
.res-valores b{font-size:15px;font-variant-numeric:tabular-nums}
.res-valores em{font-style:normal;font-size:12px;color:var(--tinta-3)}
.res-bloco .res-tab{border:0;border-radius:0;box-shadow:none}
.res-bloco .cartoes-m{padding:12px}
.res-rodape{text-align:center;margin-top:12px}
@media(max-width:640px){
  .res-cab{padding:12px 14px}
  .res-valores{width:100%;justify-content:space-between}
  .res-valores > div{align-items:flex-start}
}

/* ---------- IMPORTAR CLIENTES (Revisão Etapa 04, item 03) ----------
   No celular: sem rolagem dentro de rolagem (a lista cresce e o popup
   rola), linhas empilhadas e botões do rodapé quebrando linha. */
.imp-arquivo{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;
  border:1.5px dashed var(--borda-2);border-radius:var(--r);cursor:pointer}
.imp-arquivo input{position:absolute;width:1px;height:1px;opacity:0}
.imp-arquivo:focus-within{outline:2px solid var(--azul);outline-offset:2px}
.imp-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px}
.imp-cont{border:1px solid var(--borda);border-radius:var(--r-sm);padding:10px 12px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.imp-cont b{font-size:22px;font-variant-numeric:tabular-nums}
.imp-lista{margin-top:14px;border:1px solid var(--borda);border-radius:var(--r-sm);
  max-height:min(52vh,460px);overflow-y:auto}
.imp-linha{padding:10px 12px;border-bottom:1px solid var(--borda)}
.imp-linha:last-child{border-bottom:0}
.imp-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.imp-num{font-size:12.5px;color:var(--tinta-3)}
.imp-dados{min-width:0;word-break:break-word}
.imp-motivo{font-size:13px;color:var(--tinta-2);margin-top:3px}
.imp-aviso{font-size:12.5px;color:#B25E02;margin-top:2px}
.imp-final{display:flex;flex-direction:column;gap:10px}
.imp-final > div{display:flex;align-items:baseline;gap:10px}
.imp-final b{font-size:24px;font-variant-numeric:tabular-nums;min-width:48px}
.imp-rodape{display:flex;flex-wrap:wrap;gap:10px;width:100%;align-items:center}
.imp-rodape .b{flex:0 0 auto}
.imp-rodape .imp-direita{margin-left:auto}
@media(max-width:900px){
  .imp-lista{max-height:none;overflow:visible}
  .md-r .imp-rodape .b{flex:1 1 0;min-width:0;white-space:normal;line-height:1.15;text-align:center;padding:0 10px}
  .md-r .imp-rodape .imp-direita{margin-left:0}
}

/* ---------- COMPROVANTE DE PAGAMENTO (Revisão Etapa 04, item 08) ----------
   Rodapé do popup: quebra linha no celular, botões com largura igual. */
.cpv-botoes{display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:flex-end}
.cpv-botoes .b{flex:0 0 auto}
@media(max-width:900px){
  .md-r .cpv-botoes .b{flex:1 1 calc(50% - 4px);min-width:0;white-space:normal;line-height:1.15;padding:0 10px}
}

/* ---------- AJUSTES DO RETESTE (Revisão Etapa 04) ----------
   D12: com zoom, a etiqueta do canto do cartão ("sem documento") passava
   da borda. Ela quebra linha dentro do próprio contorno.
   I4: no celular as pilhas esticavam e quebravam o texto em duas ou três
   linhas ("Nunca / viajaram"). Agora cada pilha fica inteira e, se não
   couber, vai para a linha de baixo. */
.pax-marca .t{white-space:normal;height:auto;min-height:24px;padding:3px 9px;line-height:1.2;
  text-align:center;max-width:100%;overflow-wrap:normal;word-break:normal}
/* Quebra no meio da palavra só no nome (que pode ser enorme). Em botão e
   etiqueta ela produzia "Cancela/r" e "Embarc/ado" com zoom. */
.pax-cm .pax-nome{overflow-wrap:anywhere}
@media(max-width:900px){
  .pilhas .pilha{flex:0 1 auto;white-space:nowrap}
}

/* ---------- ABA PASSAGEIROS: PAINEL OPÇÃO A (barra única) ----------
   Uma barra (busca, Filtros, visão, Adicionar), status como abas com
   contagem e filtros ligados como etiquetas. No celular: busca inteira
   em cima; Filtros, visão curta e "+" numa linha; status rolando de lado. */
.pxb{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pxb .pxb-busca{flex:1 1 280px;max-width:none;min-width:0;margin:0}
.pxb .b{height:42px}
.pxb-cx{position:relative}
.pxb-cont{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--azul);color:#fff;
  font-size:12px;font-weight:700;display:inline-grid;place-items:center;margin-left:2px}
.pxb-cont[hidden]{display:none}
.pxb-seg{display:inline-flex;height:42px;border:1px solid var(--borda-2);border-radius:var(--r-sm);overflow:hidden;background:var(--sup)}
.pxb-seg button{border:0;background:transparent;padding:0 14px;font:inherit;font-size:14px;font-weight:600;color:var(--tinta-2);cursor:pointer}
.pxb-seg button + button{border-left:1px solid var(--borda-2)}
.pxb-seg button.on{background:var(--azul-cl);color:var(--azul-esc)}
.pxb-seg button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.pxb-curto{display:none}

.pxb-pop,.pxb-menu{position:absolute;top:calc(100% + 6px);z-index:40;background:var(--sup);border:1px solid var(--borda);
  border-radius:14px;box-shadow:0 14px 34px rgba(16,32,47,.16)}
.pxb-pop[hidden],.pxb-menu[hidden]{display:none}
.pxb-pop{left:0;width:min(380px,calc(100vw - 32px));padding:14px;max-height:min(70vh,560px);overflow-y:auto}
.pxb-menu{right:0;min-width:240px;padding:6px}
.pxb-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:9px;font:inherit;cursor:pointer}
.pxb-menu button:hover,.pxb-menu button:focus-visible{background:var(--fundo)}
.pxb-menu b{display:block;font-size:14.5px}
.pxb-menu small{color:var(--tinta-3);font-size:12.5px}
.pxb-grupo{margin-bottom:14px}
.pxb-grupo h4{margin:0 0 7px;font-size:13px;font-weight:600;color:var(--tinta-3)}
.pxb-ops{display:flex;flex-wrap:wrap;gap:6px}
.pxb-op{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--borda-2);background:var(--sup);
  font:inherit;font-size:13.5px;font-weight:500;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.pxb-op.on{background:var(--azul);border-color:var(--azul);color:#fff}
.pxb-datas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pxb-datas label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tinta-3);font-weight:600}
.pxb-pop-rodape{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--borda);padding-top:12px}

.pxb-status{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:12px 0 0;
  border-bottom:1px solid var(--borda);overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.pxb-status::-webkit-scrollbar{display:none}
.pxb-st{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:8px 12px 10px;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--tinta-2);cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.pxb-st em{font-style:normal;font-size:12.5px;min-width:22px;padding:0 7px;border-radius:10px;background:#EEF2F6;color:var(--tinta-3);text-align:center}
/* Sublinhado por sombra interna, não por borda com margem negativa: a
   margem de -1px deixava a faixa 1px mais alta que ela mesma, e como ela
   rola de lado, o navegador também deixava rolar para cima e para baixo -
   a faixa "sambava" ao tocar. */
.pxb-st.on{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--pc,var(--azul))}
.pxb-st.on em{background:var(--pc,var(--azul));color:#fff}
.pxb-st.st-confirmado{--pc:var(--verde)} .pxb-st.st-pendente{--pc:var(--amb)} .pxb-st.st-cancelado{--pc:var(--verm)}

.pxb-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.pxb-chips:empty{display:none}
.pxb-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 11px;border:0;border-radius:15px;
  background:var(--azul-cl);color:var(--azul-esc);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pxb-chip span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1}
.pxb-chip:hover span{background:rgba(20,83,155,.14)}
.pxb-limpar{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--tinta-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0 4px}
.pxb-busca .ent{height:42px;width:100%}
#lista-pax{margin-top:14px}

@media(max-width:640px){
  .pxb .pxb-busca{flex-basis:100%}
  .pxb-seg{flex:1}
  .pxb-seg button{flex:1;padding:0 6px;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pxb-cx > .b-s{padding:0 10px}
  .pxb-longo{display:none}
  .pxb-curto{display:inline}
  .pxb-add{width:42px;padding:0}
  .pxb-rot{display:none}
  .pxb-pop{position:fixed;left:12px;right:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;max-height:70vh}
}

/* ---------- TÍTULO DO TOPO (ajuste de UI) ----------
   Nome de excursão comprido quebrava em duas linhas e escapava da barra
   de altura fixa. Agora fica numa linha só, com reticências; no celular a
   letra é um pouco menor. O nome inteiro continua no cabeçalho da tela. */
.topo h1{margin:0;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){ .topo h1{font-size:16.5px} }

/* Integrações > Brevo: atalhos para o painel da Brevo. */
.bv-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bv-links .b{height:36px;font-size:13.5px;text-decoration:none}

/* ---------- PAINEL PASSAGEIROS: AJUSTES DO RETESTE ----------
   Tablet: a busca cede espaço antes de o Adicionar cair de linha.
   Celular estreito (ou com zoom): Filtros fica só com o ícone e o número.
   Com Filtros aberto no celular, o mascote da assistente sai da frente. */
@media(min-width:641px) and (max-width:1280px){ .pxb .pxb-busca{flex-basis:160px} }
@media(max-width:360px){ #pax-filtros .pxb-rot-filtros{display:none} #pax-filtros{padding:0 12px} }
@media(max-width:640px){ body.pxb-filtros-aberto .ibx-as{display:none} }
.pax-acoes button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- RODAPÉ DO ENVIAR COBRANÇA ----------
   Cancelar, Copiar texto e Abrir WhatsApp numa linha só: no celular o
   WhatsApp ficava cortado fora da tela. Secundários lado a lado e o
   WhatsApp embaixo, largura total. Mesmo desenho do .pax-rodape. */
.cob-rodape{display:flex;flex-wrap:wrap;gap:10px;width:100%;align-items:center}
.cob-rodape .b{flex:0 0 auto}
@media(max-width:900px){
  .md-r .cob-rodape .b{flex:1 1 0;min-width:0;margin-left:0!important;padding:0 8px;
    white-space:normal;line-height:1.15;text-align:center;justify-content:center}
  .md-r .cob-rodape #abrir-zap,.md-r .cob-rodape #enviar-email,
  .md-r .cob-rodape #abrir-email{flex:1 1 100%}
  .md-r .cob-rodape #abrir-zap{order:10}
}