, 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;
}
/* "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;
/* A altura vem de uma variavel unica, e nao de um numero solto repetido:
o cabecalho encolheu em 08/09 (quatro blocos viraram dois) e o antigo
`calc(100vh - 260px)` continuava reservando espaco para uma barra que nao
existe mais — o quadro terminava bem antes do fim da tela. */
max-height:calc(100dvh - var(--kanban-topo));
}
/* 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-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;}
/* flex-wrap + nowrap nos filhos (07/09/2026): antes desta linha o topo era
nowrap implícito, e um item a mais na linha (o selo de acervo) não empurrava
nada pra baixo — ESPREMIA os vizinhos. No card estreito das Solicitações o
código "CTDL264" e a data "03/09" viravam duas linhas cada, dentro da
própria pílula. Agora cada item fica inteiro e, se não couberem, o último
desce — que é feio uma vez em vez de ilegível sempre. */
.kanban-card-topo{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; flex-wrap:wrap; gap:4px;}
.kanban-card-topo > *{white-space:nowrap;}
.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, minmax(0,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{
/* 120px: a prévia mostra o logo no tamanho real e reduz por escala quando
não cabe (ver agencia_config.php); um pouco mais de altura significa
menos redução no uso comum. */
position:relative; margin-top:12px; height:120px; border-radius:8px; background:#fff;
border:1px dashed #d7dee1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px;
}
/* A prévia sai do FLUXO: com o logo no tamanho real (até 600px), uma imagem
em fluxo normal empurrava a moldura e desmanchava a grade de três colunas.
Absoluta e centrada, ela pode ter o tamanho de verdade sem mexer no layout
— quem cuida de caber é a escala aplicada pelo JS. */
.logo-config-preview img{position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); transform-origin:center; 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);}
/* Excluir passageiro (07/09/2026). Mora ao lado de Ativo e de Mesclar, no
cabeçalho da ficha, porque as três respondem à mesma pergunta por ângulos
diferentes: este cadastro vale, é duplicata, ou não deveria existir?
⚠️ O [hidden] explícito não é redundância: a armadilha registrada no
CLAUDE.md é que `display:flex`/`block` numa classe vence o atributo hidden,
e o painel nasceria aberto parecendo bug de JS. .pg-mesclar-painel usa
display padrão de bloco, mas a regra fica aqui porque o painel de exclusão
é sempre alternado por JS. */
.pg-cabecalho-acoes{display:flex; gap:8px; align-items:center; margin-left:auto;}
.pg-excluir-form{margin:0;}
.pg-excluir-painel{background:#fdf6f6; border-color:#f0cccc;}
/* O botão que apaga fica no FIM do painel, depois do que se perde e das duas
saídas recomendadas — nunca o caminho de menor esforço. */
.pg-excluir-mesmo-assim{margin-top:4px;}
.pg-excluir-painel[hidden]{display:none;}
.pg-vinculos{margin:0 0 10px; padding-left:20px; font-size:13px; color:var(--cinza-escuro);}
.pg-vinculos li{margin-bottom:2px;}
.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;}
/* Painel "Unificar" da ficha da viagem (viagem.php + viagem-unificar.js):
reaproveita a caixa do mesclar de passageiro; só o que é próprio entra aqui. */
.vg-unificar-painel[hidden]{display:none;}
.vg-unificar-painel{margin:12px 0 0;}
.vg-unificar-escolhidas{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0;}
.vg-unificar-chip{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #f0e2b8; border-radius:999px; padding:4px 6px 4px 12px; font-size:12.5px;}
.vg-unificar-chip button{border:none; background:transparent; cursor:pointer; font-size:14px; line-height:1; color:var(--cinza-escuro); padding:0 4px;}
.vg-unificar-linha{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px;}
.vg-unificar-linha input[type=text]{flex:1; min-width:220px; width:auto;}
.vg-unificar-linha .btn-primary,.vg-unificar-linha .btn-perigo{width:auto; flex:none; padding-left:16px; padding-right:16px;}
.vg-unificar-aviso{font-size:12.5px; color:var(--cinza-escuro); margin-top:8px;}
.vg-unificar-aviso[hidden],.vg-unificar-relatorio[hidden],#vg-unificar-aplicar[hidden]{display:none;}
.vg-unificar-relatorio{margin:10px 0 0; background:#fff; border:1px solid #e3e8ee; border-radius:8px; padding:10px 12px; font-size:11.5px; line-height:1.45; max-height:360px; overflow:auto; white-space:pre-wrap;}
.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;}
/* A terceira porta só existe na demonstração (o PHP do index.php a esconde nos
demais ambientes). Verde e não azul de propósito: é a mesma cor do convite
de demonstração das telas de login, e serve pra dizer "isto é da vitrine",
não "isto é mais uma área do sistema". */
.home-opcao-demo{border-color:#cfe4b8; background:linear-gradient(180deg,#f4faee 0%,#eaf5df 100%);}
.home-opcao-demo:hover{border-color:#95c23d; background:#e3f2d4;}
.home-opcao-demo .home-opcao-titulo{color:#3f6135;}
.home-opcao-demo .home-opcao-desc{color:#5f7f52;}
/*
* "acesso interno" — o link da EQUIPE nas telas de entrada do CLIENTE.
*
* ⚠️ A baixíssima opacidade é INTENCIONAL. Não aumente o contraste, não
* acrescente fundo, borda ou pastilha: o Rafael quer que ele seja um ícone
* oculto, que só quem usa sabe onde está. Já tentei "melhorar" isso com uma
* pastilha translúcida em 06/09/2026 e foi desfeito no mesmo dia.
*
* O `bottom` é o que de fato estava errado, e NÃO é arbitrário: a barra de
* versão é fixa em `bottom:0` com 24px de altura e `z-index:40`, e este link
* ficava em `bottom:14px` com `z-index:5` — atrás dela, impossível de clicar
* na maior parte da sua altura. Os 32px são os 24 da barra mais 8 de folga.
* Se a altura da barra mudar em `rodape_sistema.php`, este valor muda junto.
*
* Discreto é para ser achado por quem procura; inalcançável não é discrição,
* é defeito.
*/
.entrada-atalho{
position:fixed; right:16px; bottom:32px; z-index:45;
font-size:11px; letter-spacing:.3px; text-decoration:none;
color:rgba(0,0,0,.22);
}
.entrada-atalho:hover{color:rgba(0,0,0,.5);}
/* A logo da agência leva ao início em toda tela de entrada — era o caminho
de volta que faltava para quem escolhia uma das opções de login. */
.brand-logo-link{display:inline-block; line-height:0;}
/* ---- 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);}
.voo-linha{white-space:nowrap; margin-bottom:3px;}
.voo-linha:last-child{margin-bottom:0;}
.voo-linha b{color:var(--cinza-escuro); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; margin-right:4px;}
.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 ---- */
.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