:root{

  --azul:#003c58;

  --azul-2:#0a5b82;

  --azul-noite:#12475f;

  --cereja:#e73452;

  --cereja-deep:#c23a54;

  --cinza:#e3e3e3;

  --cinza-escuro:#6a7a82;

  --branco:#ffffff;

  --texto:#1c2b33;

  --fundo-pagina:#f4f6f6;

  --radius:14px;

}

*{box-sizing:border-box; margin:0; padding:0;}

body{

  font-family:'Open Sans', sans-serif;

  background:var(--cinza);

  color:var(--texto);

  min-height:100vh;

}

h1,h2,h3{font-family:'Poppins', sans-serif; font-weight:800;}



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

.logo-img.pequeno{width:150px; height:auto;}

.logo-img.login{width:340px; height:auto;}



/* ---- LOGIN ---- */

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



.login-scene{

  position:fixed; inset:0; z-index:0;

  background-image:url('../img/login-bg.jpg');

  background-size:cover;

  background-position:center;

}

.login-veil{

  position:fixed; inset:0; z-index:1;

  background:linear-gradient(100deg, rgba(18,71,95,.66) 0%, rgba(18,71,95,.40) 32%, rgba(18,71,95,.08) 58%, transparent 72%);

}



.login-page{

  position:relative; z-index:2;

  min-height:100vh;

  display:grid;

  grid-template-columns:1.15fr 1fr;

  align-items:stretch;

}



.brand-pane{

  padding:52px 40px 52px 64px;

  display:flex; flex-direction:column; justify-content:space-between;

}

.brand-top{display:flex; align-items:center;}



.brand-pane .claim{max-width:480px; margin-top:auto; margin-bottom:auto;}

.brand-pane .claim .eyebrow{

  font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.14em;

  text-transform:uppercase; color:var(--cereja); margin-bottom:18px;

}

.brand-pane .claim h1{

  font-size:clamp(28px,3.6vw,44px);

  line-height:1.16; margin:0;

}

.brand-pane .claim h1 span{

  font-family:'Pacifico', cursive; font-weight:400; color:var(--cereja);

  font-size:1.14em; line-height:1; display:inline-block; padding:0 2px;

}

.brand-pane .claim p{font-size:15.5px; line-height:1.7; color:#c7d3d8; max-width:38ch; margin-top:20px;}



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



.login-form-wrap{display:flex; align-items:center; justify-content:center; padding:48px;}

.login-card{

  width:100%; max-width:378px;

  background:#fff; color:var(--texto);

  border-radius:20px; padding:40px 36px;

  box-shadow:0 30px 70px rgba(2,27,40,.45);

}

.login-card h2{font-size:23px; color:var(--azul); margin-bottom:6px;}

.login-card p.sub{color:var(--cinza-escuro); font-size:13.5px; margin-bottom:26px;}



label{font-size:13px; font-weight:700; color:var(--azul); display:block; margin-bottom:6px;}

.input-group{margin-bottom:18px;}

input[type="text"], input[type="password"], select{

  width:100%; padding:13px 14px; border-radius:10px;

  border:1.5px solid #d7dee1; font-family:'Open Sans'; font-size:14px;

  background:#fafbfb; transition:.2s;

}

input:focus, select:focus{outline:none; border-color:var(--azul-2); box-shadow:0 0 0 3px rgba(10,91,130,.15);}



.btn-primary{

  width:100%; padding:14px; border:none; border-radius:10px;

  background:var(--cereja); color:#fff; font-family:'Open Sans'; font-weight:700;

  font-size:15px; cursor:pointer; transition:.2s; margin-top:6px;

}

.btn-primary:hover{background:#d12444;}



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

.login-help b{color:var(--azul);}



.alerta{

  background:rgba(231,52,82,.08); border:1px solid rgba(231,52,82,.3); color:var(--cereja);

  padding:11px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px;

}

.alerta.sucesso{background:rgba(0,60,88,.06); border-color:rgba(0,60,88,.25); color:var(--azul);}



/* Toast de aviso — mensagem só informativa (ex: "Cotação criada."), não

   fica ocupando espaço fixo na tela feito o .alerta de sempre. Some

   sozinho depois de alguns segundos ou no primeiro clique fora dele. */

.toast{

  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-14px);

  z-index:2000; display:flex; align-items:center; gap:10px;

  background:#fff; border:1.5px solid rgba(0,60,88,.16); border-radius:12px;

  padding:13px 20px; box-shadow:0 10px 30px rgba(0,40,60,.18);

  color:var(--azul); font-size:13.5px; font-weight:700;

  opacity:0; transition:opacity .22s, transform .22s; pointer-events:none;

}

.toast.visivel{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}

.toast::before{

  content:'✓'; display:flex; align-items:center; justify-content:center; flex:none;

  width:20px; height:20px; border-radius:50%; background:var(--azul); color:#fff; font-size:11px;

}

@media (max-width:640px){

  .toast{left:16px; right:16px; transform:translateY(-14px);}

  .toast.visivel{transform:translateY(0);}

}



/* ---- PAINEL ---- */

#tela-painel{min-height:100vh; background:var(--fundo-pagina);}

/* Barra superior da área do cliente (passageiro) — cores/logo da skin

 * nova do admin (fundo branco, logo colorida), mas formato HORIZONTAL,

 * não lateral (o Rafael testou como lateral em 01/09 e não gostou: "pode

 * ficar nas mesmas cores e logos, mas o menu pode ser superior"). */

.cli-topo{background:#fff; border-bottom:1px solid #e2e8ea; padding:14px 28px;

  display:flex; align-items:center; gap:28px;}

.cli-nav{display:flex; align-items:center; gap:22px; margin-right:auto;}

.cli-nav-item{font-size:13.5px; font-weight:700; text-decoration:none; color:#5c6f79;

  position:relative; padding-bottom:4px;}

.cli-nav-item:hover{color:#1c2b33;}

.cli-nav-item.ativo{color:#003c58;}

.cli-nav-item.ativo::after{content:''; position:absolute; left:0; right:0; bottom:-6px;

  height:2.5px; background:var(--cereja); border-radius:2px;}

.cli-perfil{position:relative;}

.cli-perfil .user-chip{color:#1c2b33;}

.cli-perfil .user-chip:hover{background:#f0f3f4;}

@media (max-width:760px){

  .cli-topo{padding:12px 16px; gap:16px;}

  /* max-height, não height: a regra geral usa altura automática para

     preservar a proporção, e uma altura fixa aqui reintroduziria o

     esmagamento em tela estreita. */

  .topo-logo img, .cli-logo img{max-height:32px;}

}

/* Faixa fina dizendo ONDE o agente está (dev × produção) — ver

   topbar_admin.php. Dev chama atenção (âmbar); produção é discreta mas

   presente (verde), porque é a tela do dia a dia. Teste do Rafael (31/08):

   embaixo da tela (fixa, não empurra o resto do layout) em vez de em cima

   da topbar — menos uma faixa disputando espaço lá no topo.  */

.faixa-ambiente{position:fixed; left:0; right:0; bottom:0; z-index:999;

  text-align:center; font-size:11px; font-weight:700; letter-spacing:.06em;

  padding:4px 12px; text-transform:uppercase;}

.faixa-ambiente.dev{background:#f5a623; color:#4a3000;}



/* ---- LATERAL DO ADMIN (chrome único, ver includes/topbar_admin.php) ----

 * Overlay fixo (não um wrapper flex): a lateral fica presa na tela e

 * `body.tem-lateral` empurra todo o resto com margin-left — nenhuma das

 * páginas do admin precisou mudar a própria estrutura HTML por causa

 * disso. Escondida quando a página está embutida num iframe do workspace

 * de abas (o workspace já mostra o mesmo chrome uma vez só, como casca) —

 * ver o script no topo de topbar_admin.php, que marca `html.wsp-embutido`

 * de forma síncrona, antes do resto do body ser parseado.

 *

 * A regra abaixo é o que faz a marca ter efeito NA HORA: a marcação em si

 * (`html.wsp-embutido`) sempre foi síncrona, mas até 04/09 quem de fato

 * escondia a lateral era só um `.remove()` via JS no DOMContentLoaded —

 * que só dispara depois que a página INTEIRA termina de ser parseada.

 * Numa aba pesada (achado do Rafael: painel.php com milhares de

 * passageiros na tabela) isso demorava o suficiente pra dar tempo da

 * lateral embutida aparecer inteira, sobreposta à lateral de verdade do

 * workspace por baixo — "duas barras laterais" por um instante, cada uma

 * clicável, até o remove() rodar e sumir com a de dentro. CSS não espera

 * o documento terminar de parsear pra aplicar `display:none`. */

html.wsp-embutido .lat-skin,

html.wsp-embutido .topbar,

html.wsp-embutido .topbar.topbar-admin,

html.wsp-embutido .faixa-ambiente,

html.wsp-embutido .versao-sistema{display:none;}



.lat-skin{position:fixed; top:0; left:0; bottom:0; width:160px; z-index:120;

  display:flex; flex-direction:column; transition:width .18s ease;}

body.lat-colapsada .lat-skin{width:52px;}

body.tem-lateral{margin-left:160px; transition:margin-left .18s ease;}

body.tem-lateral.lat-colapsada{margin-left:52px;}

.lat-topo{padding:14px; display:flex; align-items:center; justify-content:space-between; gap:8px;}

body.lat-colapsada .lat-topo{padding:14px 6px; justify-content:center;}

/* Proporção preservada, sempre. `height:48px` junto de `max-width:100%`

   ESPREME o logo: quando ele é mais largo que o espaço disponível (aqui 99px,

   o que sobra dos 160px da barra depois do padding e do botão de recolher), a

   largura é cortada e a altura fica travada. O logo do IT4TRAVEL, de 800x273,

   chegava distorcido de 2,93 para 2,06 de proporção — o Rafael viu em

   06/09/2026. Com max-height + max-width e as duas dimensões automáticas, o

   navegador escolhe a maior escala que cabe nos dois limites, e a proporção

   se mantém para qualquer logo que a agência suba. */

body.lat-colapsada .lat-logo{display:none;}

.lat-toggle{border:1px solid #e2e8ea; background:#fff; color:#5c6f79; width:24px; height:24px;

  border-radius:7px; cursor:pointer; font-size:12px; flex-shrink:0;}

.lat-toggle::before{content:'«';}

body.lat-colapsada .lat-toggle::before{content:'»';}

.lat-nav{flex:1; overflow-y:auto; padding:8px 0;}

.lat-grupo{padding:12px 14px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.4);}

body.lat-colapsada .lat-grupo{display:none;}

.lat-item{display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:12.5px;

  text-decoration:none; white-space:nowrap; border-left:3px solid transparent; cursor:pointer;}

.lat-item .icone{width:15px; text-align:center; flex-shrink:0;}

body.lat-colapsada .lat-item{padding:11px 0; justify-content:center; gap:0;}

body.lat-colapsada .lat-item .rotulo{display:none;}

body.lat-colapsada .lat-item .icone{width:auto; font-size:16px;}



/* Skin 1 — lateral branca. */

.lat-skin-1{background:#fff; border-right:1px solid #e2e8ea;}

.lat-skin-1 .lat-topo{border-bottom:1px solid #e2e8ea;}

.lat-skin-1 .lat-item{color:#1c2b33;}

.lat-skin-1 .lat-item.ativo{background:#eef6ff; border-left-color:#003c58; font-weight:700; color:#003c58;}

.lat-skin-1 .lat-grupo{color:#8a99a0;}



/* Skins 5 e 6 — lateral escura. 5: cartão branco atrás da logo colorida.

 * 6: uniforme, logo branca lisa direto no navy (sem cartão nenhum). */

.lat-skin-5, .lat-skin-6{background:#123249;}

.lat-skin-5 .lat-topo{background:#fff; border-bottom:1px solid #e2e8ea;}

.lat-skin-5 .lat-item, .lat-skin-6 .lat-item{color:rgba(255,255,255,.68);}

.lat-skin-5 .lat-item.ativo, .lat-skin-6 .lat-item.ativo{background:rgba(255,255,255,.1); border-left-color:#95c23d; font-weight:700; color:#fff;}

.lat-skin-5 .lat-grupo, .lat-skin-6 .lat-grupo{color:rgba(255,255,255,.4);}



/* Cluster flutuante (sino/perfil) — a topbar horizontal de sempre perde o

 * logo e a nav (viraram a lateral) e flutua só com o que sobra, sempre no

 * canto superior direito. O workspace de abas (atendimento.php) ajusta a

 * posição via JS pra alinhar com a fileira de abas dele; em qualquer

 * outra página o valor fixo abaixo já é a posição final.

 *

 * INCONDICIONAL (.topbar-admin, não body.tem-lateral .topbar): a versão

 * antiga só virava cluster flutuante depois que o script no topo de

 * topbar_admin.php rodava e adicionava a classe no body — na prática, um

 * flash real da topbar azul cheia (a "skin antiga") aparecia antes disso,

 * porque o navegador pinta a página com o CSS que já tem antes de rodar

 * qualquer JS. .topbar-admin marca de propósito só a topbar do admin (a

 * de topbar_empresa.php/topbar_passageiro.php, tela do cliente, continua

 * usando .topbar puro e a barra horizontal cheia, que é o design certo

 * pra elas) — assim o cluster já nasce no lugar certo, sem depender de

 * classe nenhuma adicionada depois. Achado do Rafael em 04/09. */

.topbar.topbar-admin{position:fixed; top:14px; right:18px; z-index:150;

  background:transparent; box-shadow:none; padding:0; height:auto; width:auto;

  display:flex; align-items:center; gap:10px;}

.topbar.topbar-admin .topbar-sino{color:#5c6f79;}

.topbar.topbar-admin .topbar-sino:hover{background:rgba(0,40,60,.06);}

.topbar.topbar-admin .user-chip{color:#1c2b33;}

.topbar.topbar-admin .user-chip:hover{background:rgba(0,40,60,.06);}



.topbar{background:var(--azul); color:#fff; padding:14px 32px; display:flex; align-items:center; gap:28px;}



/* ---- PADRONIZAÇÃO DAS TRÊS ÁREAS (admin, empresa, passageiro) ----

 *

 * Pedido do Rafael em 06/09/2026: *"precisa uma padronização nas áreas de

 * admin, passageiros e empresas... as três áreas têm que buscar sempre o mesmo

 * logo e a mesma skin salva. E o limite de tamanho desse logo pode ser os 48px

 * fixo já."*

 *

 * Antes: a lateral do admin respeitava a skin; a barra da empresa era azul

 * fixa; a do passageiro, branca fixa. Cada uma dimensionava o logo à sua

 * maneira (48px de altura, largura configurável de 150px, 40px de altura), e

 * cada uma lia o logo de um campo diferente. Três áreas do mesmo produto

 * pareciam três produtos.

 *

 * Agora as barras horizontais leem a MESMA skin da lateral:

 *

 *   skin 1  barra clara, logo colorida

 *   skin 5  barra escura, logo colorida sobre um CARTÃO branco (é o que o nome

 *           da skin promete: "logo com cartão branco")

 *   skin 6  barra escura, logo branca direto sobre ela

 *

 * O tamanho é o mesmo dos três: 48px de altura no máximo, largura automática.

 * A largura configurável saiu — numa barra quem manda é a altura, e o ajuste

 * de largura só valia na área da empresa, de qualquer forma.

 */

.topo-logo img,

.cli-logo img,

.lat-logo img{

  max-height:48px; max-width:100%; width:auto; height:auto; display:block;

}

.topo-logo{display:inline-block; line-height:0;}



/* Barra clara (skin 1) — o padrão. */

.topbar.topo-skin-1{background:#fff; color:var(--texto); border-bottom:1px solid #e2e8ea;}

.topbar.topo-skin-1 .topbar-links a{color:#5c6f79;}

.topbar.topo-skin-1 .topbar-links a:hover,

.topbar.topo-skin-1 .topbar-links a.ativo{color:var(--azul);}

.cli-topo.topo-skin-1{background:#fff; border-bottom:1px solid #e2e8ea;}

/* O nome de quem está logado, na barra CLARA.

   `.user-chip` nasce com `color:#fff` porque foi escrito para a barra azul

   escura que a empresa tinha. O admin e o passageiro já tinham exceção; a

   empresa não, porque a barra dela nunca havia sido clara — e ao seguir a

   skin 1 o nome ficou branco sobre branco. Achado pelo Rafael em

   06/09/2026, minutos depois da padronização. */

.topbar.topo-skin-1 .user-chip{color:var(--texto);}

.topbar.topo-skin-1 .user-chip:hover{background:rgba(0,40,60,.06);}

.topbar.topo-skin-1 .topbar-sino{color:#5c6f79;}

.topbar.topo-skin-1 .topbar-sino:hover{color:var(--azul);}

/* Nas escuras vale o contrário — e explicitamente, para não depender do

   valor herdado da base. */

.topbar.topo-skin-5 .user-chip, .topbar.topo-skin-6 .user-chip{color:#fff;}

.topbar.topo-skin-5 .topbar-sino, .topbar.topo-skin-6 .topbar-sino{color:rgba(255,255,255,.8);}



/* Barras escuras (skins 5 e 6) — mesmo tom da lateral escura, para as duas

   metades da tela combinarem quando o agente tem a lateral e a barra à vista. */

.topbar.topo-skin-5, .topbar.topo-skin-6{background:#123249; color:#fff; border-bottom:none;}

.topbar.topo-skin-5 .topbar-links a, .topbar.topo-skin-6 .topbar-links a{color:rgba(255,255,255,.72);}

.topbar.topo-skin-5 .topbar-links a:hover, .topbar.topo-skin-6 .topbar-links a:hover,

.topbar.topo-skin-5 .topbar-links a.ativo, .topbar.topo-skin-6 .topbar-links a.ativo{color:#fff;}

.cli-topo.topo-skin-5, .cli-topo.topo-skin-6{background:#123249; border-bottom:none;}

.cli-topo.topo-skin-5 .cli-nav-item, .cli-topo.topo-skin-6 .cli-nav-item{color:rgba(255,255,255,.72);}

.cli-topo.topo-skin-5 .cli-nav-item:hover, .cli-topo.topo-skin-6 .cli-nav-item:hover,

.cli-topo.topo-skin-5 .cli-nav-item.ativo, .cli-topo.topo-skin-6 .cli-nav-item.ativo{color:#fff;}

.cli-topo.topo-skin-5 .cli-perfil .user-chip, .cli-topo.topo-skin-6 .cli-perfil .user-chip{color:#fff;}

.cli-topo.topo-skin-5 .cli-perfil .user-chip:hover,

.cli-topo.topo-skin-6 .cli-perfil .user-chip:hover{background:rgba(255,255,255,.12);}



/* O CARTÃO branco da skin 5: a logo colorida precisa de fundo claro para ser

   lida sobre a barra escura. É o mesmo recurso que a lateral já usa no

   `.lat-skin-5 .lat-topo`, só que aqui apertado ao redor da logo. */

.topo-skin-5 .topo-logo, .topo-skin-5 .cli-logo{

  background:#fff; border-radius:9px; padding:5px 10px;

}

.avatar{width:34px; height:34px; border-radius:50%; background:var(--cereja); color:#fff;

  display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:800; flex-shrink:0;}

.avatar-foto{object-fit:cover;}

.topbar a{color:#fff; opacity:.8; font-size:13px; text-decoration:none;}

.topbar a:hover{opacity:1;}



/* Itens fixos da barra (Dashboard/Empresas/Passageiros/... — varia por

   perfil, ver includes/topbar_admin.php, topbar_empresa.php,

   topbar_passageiro.php) — sempre visíveis, nunca dentro do menu flutuante. */

.topbar-links{display:flex; align-items:center; gap:22px; margin-right:auto; flex-wrap:wrap;}

.topbar-links a{font-weight:700; position:relative; padding-bottom:4px;}

/* Item da seção em que o agente/empresa/passageiro está agora — opacidade

   cheia + traço embaixo, sem mudar o tamanho da caixa (senão os vizinhos

   "pulariam" de lugar quando um item vira o ativo). */

.topbar-links a.ativo{opacity:1;}

.topbar-links a.ativo::after{

  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2.5px;

  background:var(--cereja); border-radius:2px;

}



/* Sino de notificações — fica na barra, ao lado do nome (só existe no

   admin, é o único perfil com notificações). Vai direto pra

   notificacoes.php, não abre o menu flutuante. */

.topbar-sino{

  position:relative; display:flex; align-items:center; justify-content:center;

  width:36px; height:36px; border-radius:50%; color:#fff; opacity:.8; transition:.15s; flex-shrink:0;

}

.topbar-sino:hover{opacity:1; background:rgba(255,255,255,.1);}

.topbar-sino svg{width:19px; height:19px;}

.badge-notificacao.badge-sino{position:absolute; top:1px; right:1px; margin-left:0; vertical-align:baseline;}



/* ---- MENU FLUTUANTE DO USUÁRIO ---- */

.topbar-perfil{position:relative;}

.user-chip{

  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700;

  background:none; border:none; color:#fff; font-family:inherit; cursor:pointer;

  padding:5px 12px 5px 5px; border-radius:999px; transition:.15s;

}

.user-chip:hover{background:rgba(255,255,255,.1);}

.user-chip span{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}



.menu-flutuante{

  display:none; position:absolute; top:calc(100% + 12px); right:0; z-index:60;

  background:#fff; color:var(--texto); border-radius:16px; min-width:292px;

  box-shadow:0 18px 46px rgba(0,20,30,.28); overflow:hidden;

}

.menu-flutuante.aberto{display:block;}



/* Todo link aqui dentro precisa "vencer" a regra genérica ".topbar a"

   (que deixa qualquer <a> da barra em branco/opacidade reduzida — certa

   pros links da barra azul, errada aqui dentro, num menu branco) — por

   isso ".menu-flutuante" na frente de cada seletor: mesma especificidade

   de classe+classe (2) bate a de classe+elemento (1+1) do ".topbar a",

   sem precisar de !important. */

.menu-flutuante a{text-decoration:none; opacity:1;}

.menu-flutuante .menu-flutuante-perfil{

  display:flex; align-items:center; gap:12px; padding:16px 18px;

  color:var(--texto); border-bottom:1px solid var(--cinza); transition:.15s;

}

.menu-flutuante .menu-flutuante-perfil:hover{background:#f7f8f9;}

.menu-flutuante-perfil .avatar{width:38px; height:38px; font-size:14px;}

.menu-flutuante-nome{flex:1; font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.menu-flutuante-seta{width:16px; height:16px; color:var(--cinza-escuro); flex-shrink:0;}





/* Grade em 3 colunas (quebra em linhas conforme os itens crescem) — com 5

   atalhos numa linha só ficava espremido; em 2 linhas cada um respira. */

.menu-flutuante-grade{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:12px 14px; border-bottom:1px solid var(--cinza);}

.menu-flutuante .menu-flutuante-icone{

  display:flex; flex-direction:column; align-items:center; gap:6px; width:76px;

  padding:9px 4px; border-radius:10px; color:var(--azul); transition:.15s;

}

.menu-flutuante .menu-flutuante-icone:hover{background:rgba(0,60,88,.06);}

.menu-flutuante-icone svg{width:20px; height:20px;}

.menu-flutuante-icone span{font-size:10.5px; font-weight:700; text-align:center; line-height:1.25;}



.menu-flutuante .menu-flutuante-sair{

  display:block; padding:13px 18px; color:var(--cereja);

  font-size:13.5px; font-weight:700; text-align:right; transition:.15s;

}

.menu-flutuante .menu-flutuante-sair:hover{background:rgba(231,52,82,.06);}



.painel-inner{max-width:960px; margin:0 auto; padding:36px 24px 60px;}

/* Cotações precisa de mais respiro que as outras telas — é um quadro de

   7 colunas lado a lado, não uma lista/formulário de coluna única. */

.painel-inner-kanban{max-width:1800px;}

.painel-header{margin-bottom:28px;}

.painel-header h2{font-size:26px; color:var(--azul);}

.painel-header p{color:var(--cinza-escuro); font-size:14px; margin-top:4px;}



.viagens-secao-titulo{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cinza-escuro); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--cinza);}

.viagens-secao-titulo:first-of-type{margin-top:0;}

.viagens-anteriores{margin-top:26px;}

.viagens-anteriores summary{cursor:pointer; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cinza-escuro); padding-bottom:6px; border-bottom:1px solid var(--cinza); margin-bottom:12px; list-style:none;}

.viagens-anteriores summary::-webkit-details-marker{display:none;}

.viagens-anteriores summary::before{content:'▸ ';}

.viagens-anteriores[open] summary::before{content:'▾ ';}



.viagem-card{

  background:#fff; border-radius:var(--radius); padding:20px 22px; margin-bottom:16px;

  box-shadow:0 2px 10px rgba(0,40,60,.06); border:1.5px solid transparent; transition:.2s;

}

.viagem-card:hover{border-color:var(--azul-2);}

.viagem-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; cursor:pointer;}

.viagem-top h3{font-size:17px; color:var(--azul);}

.viagem-top .destino{font-size:13px; color:var(--cinza-escuro); margin-top:3px;}

.status-badge{font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap;}

.status-confirmada{background:rgba(0,60,88,.10); color:var(--azul);}

.status-andamento{background:rgba(231,52,82,.12); color:var(--cereja);}

.status-concluida{background:var(--cinza); color:var(--cinza-escuro);}

.status-recusado{background:rgba(150,30,30,.10); color:#961e1e;}

/* Check-in aberto: embarque em até 48h. É o único estado que pede ação

   agora, então âmbar — destaca sem gritar como o vermelho de "em viagem". */

.status-checkin{background:rgba(240,165,0,.18); color:#8a5e00;}

/* Cotações "aguardando" (chegou, ninguém pegou ainda) e "aprovada" (virou

   venda) — as duas únicas situações do funil de cotações sem uma cor já

   existente que sirva. Verde é novo na paleta, só pra sucesso/aprovação. */

.status-aguardando{background:rgba(106,122,130,.14); color:var(--cinza-escuro);}

.status-aprovado{background:rgba(31,138,76,.12); color:#1f8a4c;}



.viagem-datas{display:flex; gap:22px; margin-top:14px; font-size:13px; color:#4c5a61;}

.viagem-datas span b{color:var(--azul); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px;}



.docs{margin-top:16px; padding-top:16px; border-top:1px dashed var(--cinza); display:none; flex-wrap:wrap; gap:10px; align-items:center;}

.viagem-card.aberta .docs{display:flex;}

.doc-chip{display:flex; align-items:center; gap:8px; background:#f4f6f6; border-radius:9px; padding:7px 8px 7px 13px;

  font-size:12.5px; font-weight:600; color:var(--azul);}

.doc-chip > svg{width:15px; height:15px; flex-shrink:0;}

.doc-chip .doc-tipo{margin-right:2px;}



.doc-actions{display:flex; gap:2px; margin-left:2px; padding-left:8px; border-left:1px solid #d9dfe1;}

.doc-action-btn{

  display:flex; align-items:center; justify-content:center; width:24px; height:24px;

  border-radius:6px; color:var(--cinza-escuro); transition:.15s;

  border:none; background:none; padding:0; cursor:pointer; font:inherit;

}

.doc-action-btn:hover{background:rgba(0,60,88,.10); color:var(--azul);}

.doc-action-btn svg{width:14px; height:14px;}



/* ---- MODAL FLUTUANTE DE DOCUMENTO ---- */

.modal-overlay{

  display:none; position:fixed; inset:0; background:rgba(0,20,30,.65); z-index:1000;

  align-items:center; justify-content:center; padding:28px;

}

.modal-overlay.aberto{display:flex;}

.modal-conteudo{

  background:#fff; border-radius:14px; width:100%; max-width:920px; height:88vh;

  position:relative; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35);

}

.modal-conteudo iframe{width:100%; height:100%; border:none; display:block;}

/* ⚠️ `display:block` numa REGRA vence o atributo `hidden`, que é só estilo do

   navegador. Sem esta linha o iframe escondido continuava ocupando os 100%

   de altura e empurrava a imagem para fora da moldura — ela existia, com o

   tamanho certo, 48px abaixo do que se vê, cortada pelo overflow.

   É a mesma pegadinha já anotada no `.cvx-pend-form[hidden]`: nesta base ela

   já mordeu os painéis de emoji, de anexo e de áudio. */

.modal-conteudo iframe[hidden]{display:none;}

/* ---- VISUALIZADOR DE IMAGEM: ajuste, zoom e arrastar ----

 *

 * A imagem começa AJUSTADA à janela (é o 100% do controle) e daí se afasta ou

 * se aproxima. Pedido do Rafael em 06/09/2026: "melhorou, agora a imagem tem

 * um tamanho máximo, mas tem como ter a opção de diminuir mais e de aumentar

 * a área da imagem com controle".

 *

 * Tratar "ajustado" como 100% — em vez do tamanho original do arquivo — é

 * deliberado: a foto que chega pelo WhatsApp tem 4000px de largura, e um

 * controle que começasse em "tamanho real" abriria sempre numa parede, que é

 * exatamente o defeito que acabou de ser corrigido.

 */

.modal-img-area{

  position:absolute; inset:0; overflow:hidden; background:#0e1a22;

  display:flex; align-items:center; justify-content:center;

}

.modal-img-area[hidden]{display:none;}

.modal-img-area img{

  max-width:100%; max-height:100%; object-fit:contain; display:block;

  transform-origin:center center; cursor:grab; user-select:none; -webkit-user-drag:none;

}

.modal-img-area.arrastando img{cursor:grabbing;}

/* SEM transição, de propósito.



   Medido em 06/09/2026: com `transition:transform` declarada, o valor ficava

   preso no início — o rótulo ia para 125% e a imagem não se mexia. Sem ela,

   o mesmo transform aplica na hora (matrix(2,...), 1600px de largura).



   Não vale investigar mais fundo: zoom instantâneo é bom, e zoom que às

   vezes não acontece é um controle quebrado. Animação é enfeite; responder

   ao clique é a função. */



.modal-zoom{

  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);

  display:flex; align-items:center; gap:4px; padding:5px 6px;

  background:rgba(0,0,0,.58); border-radius:999px; color:#fff;

  font:12px/1 'Open Sans',system-ui,sans-serif;

  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);

}

.modal-zoom button{

  border:none; background:transparent; color:#fff; cursor:pointer;

  font:inherit; font-size:15px; line-height:1; padding:5px 10px; border-radius:999px;

}

.modal-zoom button[data-zoom="ajustar"]{font-size:12px; font-weight:700;}

.modal-zoom button:hover{background:rgba(255,255,255,.16);}

.modal-zoom button:disabled{opacity:.35; cursor:default; background:transparent;}

#modal-zoom-valor{min-width:46px; text-align:center; font-variant-numeric:tabular-nums;}

.modal-fechar{

  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;

  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:22px; line-height:1;

  cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center;

}

.modal-fechar:hover{background:rgba(0,0,0,.75);}

@media (max-width:760px){

  .modal-overlay{padding:0;}

  .modal-conteudo{max-width:100%; height:100%; border-radius:0;}

}



.upload-form{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.upload-form select{width:auto; padding:9px 10px; font-size:12.5px;}

.upload-form input[type="file"]{font-size:12px;}

.upload-btn{

  padding:9px 13px; border-radius:9px; border:1.5px dashed #b9c3c7; background:none;

  font-size:12.5px; font-weight:700; color:var(--cinza-escuro); cursor:pointer;

}

.upload-btn:hover{border-color:var(--cereja); color:var(--cereja);}



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



/* ---- ADMIN ---- */

.painel-header-row{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px; flex-wrap:wrap;}

.busca-form{display:flex; gap:8px;}

.busca-form input{width:260px;}



.btn-secundario{

  display:inline-block; padding:12px 18px; border-radius:10px; border:1.5px solid var(--azul-2);

  background:none; color:var(--azul-2); font-family:'Open Sans'; font-weight:700;

  font-size:14px; cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;

}

.btn-secundario:hover{background:rgba(10,91,130,.08);}

.btn-secundario:disabled{opacity:.5; cursor:not-allowed;}

.btn-secundario:disabled:hover{background:none;}



.btn-perigo{

  padding:9px 13px; border-radius:9px; border:1.5px solid rgba(231,52,82,.4); background:none;

  font-size:12.5px; font-weight:700; color:var(--cereja); cursor:pointer;

}

.btn-perigo:hover{background:rgba(231,52,82,.08);}



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

.voltar-link:hover{text-decoration:underline;}



/* Toda tabela larga precisa rolar dentro de si mesma — sem isso, uma coluna

   a mais (ex: financeiro_geral.php ganhando "A pagar"/"Status") simplesmente

   fica invisível fora do .painel-inner (max-width:960px), sem barra de

   rolagem nenhuma. Isso já existia só dentro do media query mobile; agora

   vale sempre, porque o problema também acontece em telas maiores.

   ⚠️ Achado real (31/08, lista de Passageiros com 663 linhas): só

   overflow-x:auto não bastava — sem altura travada, a caixa cresce até

   caber TODAS as linhas, e a barra de rolagem horizontal (que fica embaixo

   da caixa) ia parar depois da linha 663, inalcançável sem rolar a página

   inteira primeiro. `max-height` + `overflow-y:auto` prende a rolagem

   vertical DENTRO da tabela, então a barra horizontal fica sempre a um

   scroll de distância — e o cabeçalho gruda no topo (sticky) pra nunca

   perder a referência de qual coluna é qual. */

.tabela-lista{display:block; overflow:auto; max-height:min(600px, 70vh); max-width:100%; -webkit-overflow-scrolling:touch; width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06);}

/* Teste da rolagem sem barra em tabela (fila #58, lote 3, 21/09/2026) —
   ver public/assets/js/tabela-rolagem.js. Some a barra; a rolagem por roda
   do mouse/touchpad continua funcionando igual, só a barra visível some. */
.tabela-sem-barra{scrollbar-width:none;}
.tabela-sem-barra::-webkit-scrollbar{display:none;}

/* Container ficou largo (painel-inner-kanban) mas as colunas de conteúdo

   fixo (data, valor, status...) não crescem sozinhas — sobrava um vão em

   branco depois da última coluna. A 1ª coluna (nome/identificação) absorve

   o espaço que sobra; as demais mantêm a largura do próprio conteúdo.

   Não vale pra `.tabela-fixa`, que declara as larguras num colgroup próprio

   (empresas.php e o bloco de orçamentos da ficha da solicitação). Ali a

   primeira coluna não é o nome, e esta regra faria o oposto do que promete. */

.tabela-lista:not(.tabela-fixa) th:first-child,

.tabela-lista:not(.tabela-fixa) td:first-child{width:100%;}

/* Divisor entre os dois grupos das listas de Passageiros/Empresas (com

   viagem agendada vs sem) quando nenhum filtro está ativo — uma linha só

   com o rótulo, não uma tabela dentro da tabela. */

.tabela-lista tr.linha-divisor td{

  background:rgba(0,60,88,.045); color:var(--azul); font-weight:700;

  font-size:11px; text-transform:uppercase; letter-spacing:.5px;

  padding:9px 16px;

}

.tabela-lista th{background:var(--azul); color:#fff; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding:13px 13px; white-space:nowrap;

                 position:sticky; top:0; z-index:2;}

/* Grupo de contadores numa coluna só (ex: "Viagens" = próximas + em

   andamento + concluídas). O título e a legenda ficam dentro do próprio

   <th>, e legenda e números compartilham a mesma grade — cada número cai

   embaixo do seu rótulo, sem precisar de uma linha de cabeçalho extra

   (que sempre parecia um 2º título pra tabela inteira). Preparado pra um

   segundo grupo ao lado, tipo "Solicitações". */

.tabela-fixa{table-layout:fixed;}

.tabela-lista th.col-grupo{

  /* Mesmo azul do resto do cabeçalho — só a borda sutil marca o grupo. */

  border-left:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14);

  text-align:center; padding-top:10px; padding-bottom:10px;

}

.tabela-lista td.col-grupo{background:rgba(0,60,88,.035); border-left:1px solid var(--cinza); border-right:1px solid var(--cinza);}

.tabela-lista tr:hover td.col-grupo{background:rgba(0,60,88,.055);}



.grupo-legenda, .grupo-cel{display:grid; gap:10px; align-items:center; justify-items:center;}

.grupo-legenda.grupo-3, .grupo-cel.grupo-3{grid-template-columns:repeat(3, minmax(76px, 1fr));}

.grupo-legenda.grupo-4, .grupo-cel.grupo-4{grid-template-columns:repeat(4, minmax(64px, 1fr));}

.grupo-legenda{

  margin-top:8px; font-size:9.5px; font-weight:600; letter-spacing:0;

  text-transform:none; opacity:.7;

}

/* Ponto em cima do rótulo, não do lado — com colunas estreitas, texto e

   ponto lado a lado de itens vizinhos colidiam ("check-in aberto" grudava

   em "em andamento"). Empilhado, cada rótulo fica preso à sua coluna. */

.grupo-legenda span{display:flex; flex-direction:column; align-items:center; gap:3px; white-space:normal; line-height:1.2;}



.ponto-status{display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0;}

.ponto-checkin{background:#f0a500;}

.ponto-proximas{background:#7ecbf0;}

.ponto-andamento{background:var(--cereja);}

.ponto-concluidas{background:#93a5ad;}

.contagem-zero{color:#c2ccd1; font-weight:700;}



/* Avatar nas listas — foto de perfil quando existe, senão as iniciais.

   Círculo pra pessoa, canto arredondado pra empresa (diferencia os dois

   tipos de linha numa olhada só). */

.lista-pessoa{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;}

a.lista-pessoa:hover .lista-nome{text-decoration:underline;}

.lista-nome{font-weight:700; color:var(--azul); text-decoration:none;}

a.lista-nome:hover{text-decoration:underline;}

.lista-avatar{

  width:36px; height:36px; border-radius:50%; flex-shrink:0;

  background:var(--azul); color:#fff; font-family:'Poppins', sans-serif; font-weight:700; font-size:12.5px;

  display:flex; align-items:center; justify-content:center;

}

.lista-avatar-empresa{border-radius:10px; background:var(--azul-2);}

.lista-avatar-foto{object-fit:cover;}

.tabela-lista td{padding:14px 12px; font-size:13.5px; border-top:1px solid var(--cinza); vertical-align:middle;}

.tabela-lista tr:hover td{background:#f9fafa;}

.tabela-lista a{color:var(--azul); font-weight:700; text-decoration:none;}

.tabela-lista a:hover{text-decoration:underline;}

.tabela-lista .linha-sub{color:var(--cinza-escuro); font-size:12px; margin-top:2px;}



.form-card{background:#fff; border-radius:var(--radius); padding:28px; max-width:520px; box-shadow:0 2px 10px rgba(0,40,60,.06);}

.form-card.config-card{max-width:900px;}

.form-linha{display:flex; gap:14px;}

.form-linha .input-group{flex:1;}

/* Grupo de checkboxes lado a lado (ex: serviços pedidos numa cotação) —

   cada opção com o mesmo respiro visual de um chip, sem virar botão. */

.checkbox-grupo{display:flex; flex-wrap:wrap; gap:10px 18px;}

.checkbox-grupo label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--texto);}



/* Seletor de destinos: vários "chips" (um por destino em aberto) + campo

   de busca que também cadastra um destino novo na hora, se não achar. */

.destinos-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}

.destinos-chips:empty{margin-bottom:0;}

.destino-chip{

  display:flex; align-items:center; gap:6px; background:rgba(0,60,88,.07);

  color:var(--azul); border-radius:20px; padding:6px 8px 6px 14px;

  font-size:13.5px; font-weight:600;

}

.destino-chip.destino-chip-escolhido{background:rgba(231,52,82,.12); color:var(--cereja);}

.destino-chip-remover{

  border:none; background:rgba(0,60,88,.12); color:var(--azul); width:18px; height:18px;

  border-radius:50%; line-height:1; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;

}

.destino-chip.destino-chip-escolhido .destino-chip-remover{background:rgba(231,52,82,.18); color:var(--cereja);}

.destino-chip-marcar{

  border:1px solid rgba(0,60,88,.25); background:none; color:var(--azul); border-radius:20px;

  padding:2px 9px; font-size:11.5px; font-weight:700; cursor:pointer; margin-left:2px;

}

.destino-chip.destino-chip-escolhido .destino-chip-marcar{border-color:rgba(231,52,82,.4); color:var(--cereja);}

.destinos-busca-linha{display:flex; gap:8px;}

.destinos-busca-linha input{flex:1;}

/* Caixa de colar conversa do WhatsApp na tela de nova solicitação —

   destacada porque é atalho, não parte do formulário em si. */

.conversa-ia{

  background:#fff; border-radius:var(--radius); padding:18px 20px; margin-bottom:18px;

  box-shadow:0 2px 10px rgba(0,40,60,.06); border-left:3px solid var(--orc-primaria);

}

.conversa-ia-topo{display:flex; align-items:flex-start; gap:14px; justify-content:space-between; margin-bottom:10px;}

.conversa-ia-topo b{color:var(--azul); font-size:14.5px;}

.conversa-ia-topo .linha-sub{margin-top:2px; max-width:520px;}

.conversa-ia-topo button{flex:none; white-space:nowrap;}

.conversa-ia textarea{width:100%; resize:vertical;}

.conversa-ia .linha-erro{color:var(--cereja); font-size:12.5px; font-weight:700; min-height:16px; margin-top:4px;}

.conversa-ia.carregando{opacity:.65; pointer-events:none;}

/* Campos que a IA acabou de preencher piscam em verde, pro agente saber

   onde olhar — some sozinho, não vira estado permanente. */

@keyframes ia-preencheu{from{background:rgba(126,180,58,.28);} to{background:transparent;}}

.ia-preencheu{animation:ia-preencheu 2.2s ease-out;}



.autocomplete-caixa{position:relative;}

.autocomplete-sugestoes{

  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:80;

  background:#fff; border-radius:var(--radius); box-shadow:0 18px 46px rgba(0,20,30,.28);

  max-height:220px; overflow-y:auto; padding:6px;

}

.autocomplete-sugestoes[hidden]{display:none;}

.autocomplete-item{

  display:block; width:100%; text-align:left; background:none; border:none;

  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:inherit;

}

.autocomplete-item:hover{background:rgba(10,91,130,.08);}



/* Chips genéricos (hoje usado pras tags de passageiro) — mesmo visual dos

   chips de destino, mas sem o conceito de "escolhido". */

.chips-wrap{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}

.chips-wrap:empty{margin-bottom:0;}

.chip{

  display:flex; align-items:center; gap:6px; background:rgba(0,60,88,.07);

  color:var(--azul); border-radius:20px; padding:6px 8px 6px 14px;

  font-size:13.5px; font-weight:600;

}

.chip-remover{

  border:none; background:rgba(0,60,88,.12); color:var(--azul); width:18px; height:18px;

  border-radius:50%; line-height:1; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;

}





/* "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;}
/* Quantas anotações citam a viagem (fila do uso #36). */
.kanban-card-anot{font-size:10.5px; font-weight:700; color:#0a5b82; background:#eaf2f7; border-radius:999px; padding:0 7px; text-decoration:none; flex:none;}
.kanban-card-anot:hover{background:#dfeaf1;}

.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;}
/* No editor do voucher o texto de ajuda do campo vazio ("Assento", "Classe")
   fica INVISÍVEL até o mouse passar pelo cartão ou o campo ganhar foco — o
   Rafael via "ASSENTO" num voucher sem assento e leu como dado (fila do uso
   #28, 17/09/2026). O espaço continua lá, clicável; só a palavra some. */
#voucher-canvas .campo-editavel:empty:before{color:transparent;}
#voucher-canvas .voo-card:hover .campo-editavel:empty:before,
#voucher-canvas .hotel-card:hover .campo-editavel:empty:before,
#voucher-canvas .campo-editavel:empty:hover:before,
#voucher-canvas .campo-editavel:empty:focus:before{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;}
/* Editor/impressão pelo agente: o rótulo só aparece com valor no campo (fila do uso #29). */
.conex-assento[data-rotulo]:has(.campo-editavel:not(:empty))::before{content:attr(data-rotulo) " ";}

/* Largura pelo conteúdo, com mínimo: com 62px fixos, "⏱ 10h 45min" avançava
   por cima do ponto seguinte (fila do uso #29a, 18/09/2026). */
.conex-espera{flex:none; width:auto; min-width:62px; text-align:center; padding:6px 4px 0;}

.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;}
/* Com conexão, o número combinado do voo fica fora da vista (o de cada perna
   está na linha de baixo) — fila do uso #29. Continua no HTML para o salvar. */
.voo-oculto-conexao{display:none !important;}

.voo-cia-logo{max-height:40px; object-fit:contain; margin:0 0 5px auto;}

.voo-classe{color:var(--cinza-escuro); font-size:11.5px;}

.voo-assento{color:var(--orc-secundaria); font-weight:700;}



/* Voos consecutivos (ida logo seguida de volta) ficam visualmente agrupados */

.block.bloco-tipo-aereo + .block.bloco-tipo-aereo{margin-top:-10px;}



/* ---- Card de hotel ---- */

.hotel-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}

.hotel-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}

.hotel-card-linha{font-size:12.5px; color:var(--texto); margin-bottom:6px;}

.hotel-card-linha > span{display:inline-block; margin-right:20px;}

.hotel-card-desc{font-size:12.5px; color:var(--cinza-escuro); margin-top:8px; line-height:1.5;}



/* ---- Galeria de fotos (hotel/passeio) — fotos anexadas ficam lado a lado.

   Float, não inline-block (mais robusto pra JS mexer nos blocos). O ponto

   que não é óbvio: width:calc(50% - 7px) + margin-right:14px NOS DOIS itens

   de um par estoura a linha em 14px (50%+7px por item × 2 = 100%+14px), o

   que empurra o segundo pro final da linha seguinte — tanto na tela quanto

   no PDF/imagem exportados. .foto-par-direita (aplicada via JS ao 2º item

   de cada par, em atualizarPlaceholdersFotos()) zera essa margem sobrando. */

#blocks-container:after{content:""; display:table; clear:both;}

#blocks-container > .block{display:block; width:100%; clear:both;}

#blocks-container > .block.bloco-tipo-hotel.bloco-image,

#blocks-container > .block.bloco-tipo-passeio.bloco-image{display:block; float:left; clear:none; width:calc(50% - 7px); margin-right:14px; box-sizing:border-box;}

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-par-direita,

#blocks-container > .block.bloco-tipo-passeio.bloco-image.foto-par-direita{margin-right:0;}

#blocks-container > .block.bloco-tipo-hotel.bloco-image img,

#blocks-container > .block.bloco-tipo-passeio.bloco-image img{height:180px; width:100%; object-fit:cover; display:block;}

#blocks-container > .placeholder-foto{

  display:flex; float:left; clear:none; width:calc(50% - 7px); margin-right:14px;

  height:180px; box-sizing:border-box; border:2px dashed var(--cinza); border-radius:8px;

  align-items:center; justify-content:center; flex-direction:column; gap:6px;

  color:var(--cinza-escuro); cursor:pointer; font-size:13px; font-weight:600;

  background:rgba(0,0,0,.02); transition:.15s;

}

#blocks-container > .placeholder-foto.foto-par-direita{margin-right:0;}

#blocks-container > .placeholder-foto:hover{border-color:var(--orc-primaria); color:var(--orc-primaria); background:rgba(0,0,0,.04);}

.placeholder-foto-icone{font-size:26px; line-height:1; font-weight:400;}



/* ---- Galeria do hotel com 5 fotos: 1 grande + grade 2x2 pequena ao lado

   (estilo do site do Infotravel). Só percentuais puros aqui (sem calc()) —

   já validado isolado que essa combinação renderiza igual no html2canvas. */

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-principal{

  width:58%; margin-right:1%; height:260px;

}

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-principal img{height:260px;}

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena{

  width:20%; margin-right:1%; margin-bottom:3px; height:128.5px;

}

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena img{height:128.5px;}

#blocks-container > .block.bloco-tipo-hotel.bloco-image.foto-pequena.foto-pequena-direita{margin-right:0;}



/* ---- Card de transfer ---- */

.transfer-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}

.transfer-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}

.transfer-linha{font-size:13px; margin-bottom:6px;}

.transfer-linha b{display:inline-block; min-width:40px; color:var(--cinza-escuro); font-size:11.5px; text-transform:uppercase; margin-right:8px;}



/* ---- Card de passeio/ingresso ---- */

.passeio-card{border:1.5px solid var(--cinza); border-radius:10px; padding:16px; background:#fff;}

.passeio-card-topo{font-weight:800; color:var(--orc-secundaria); font-size:15px; margin-bottom:10px;}

.transfer-linha b{min-width:40px; color:var(--cinza-escuro); font-size:11.5px; text-transform:uppercase;}



#desc-output{width:100%; min-height:180px; font-family:monospace; font-size:13px; padding:10px; border:1px solid var(--cinza); border-radius:8px;}

.modal-bg{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:999;}

.modal-bg.active{display:flex;}

.modal{background:#fff; border-radius:var(--radius); padding:24px; max-width:600px; width:90%; max-height:90vh; overflow:auto;}



/* Overlay de carregamento — some sozinho quando a página redireciona

   depois da resposta da IA; enquanto isso, avisa que está processando

   (a chamada pode levar de 10s a mais de 1min dependendo do arquivo). */

.ia-loading-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:1000; flex-direction:column; gap:16px; text-align:center; padding:24px;}

.ia-loading-overlay.active{display:flex;}

.ia-spinner{width:48px; height:48px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:ia-girar .8s linear infinite;}

@keyframes ia-girar{to{transform:rotate(360deg);}}

.ia-loading-overlay p{color:#fff; font-size:15px; font-weight:600; max-width:360px;}

.ia-loading-overlay span{color:rgba(255,255,255,.75); font-size:13px;}



/* Ações do orçamento (emitir como, status, limpar, excluir) numa coluna

   FIXA na lateral, sempre ao alcance — o orçamento fica MUITO longo (um

   card por voo, hotel, foto...) e antes essas ações moravam só no

   cabeçalho, custando uma rolagem inteira até o topo pra qualquer uma

   delas. Cada item é o seu próprio "pill" flutuante — reaproveita o

   visual que o "Limpar tudo" já usava sozinho. `no-export` mantém tudo

   isso fora do PDF/impressão. */

.acoes-laterais{

  position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:40;

  display:flex; flex-direction:column; align-items:stretch; gap:8px; width:172px;

  max-height:calc(100vh - 40px); overflow-y:auto;

}

.acoes-laterais-btn{

  display:inline-flex; align-items:center; justify-content:center; gap:6px;

  width:100%; background:#fff; border:1.5px solid var(--cinza); border-radius:999px;

  padding:10px 12px; font-family:'Open Sans', sans-serif; font-size:12px; font-weight:700;

  line-height:1.25; text-align:center;

  color:var(--azul); cursor:pointer; box-shadow:0 6px 20px rgba(0,40,60,.16);

  transition:background .15s, border-color .15s, color .15s;

}

/* "Aprovar e gerar viagem" e a acao que fecha a venda: destacada porque é o

   desfecho pretendido, e nao mais um botao igual aos outros na barra. */

.acoes-laterais-btn.destaque{background:var(--azul); border-color:var(--azul); color:#fff;}

.acoes-laterais-btn.destaque:hover{background:var(--azul-2); border-color:var(--azul-2);}

.acoes-laterais-btn:hover{border-color:var(--azul-2);}

.acoes-laterais-btn:focus-visible{outline:2px solid var(--azul-2); outline-offset:3px;}

/* Seletor composto de propósito: vence o .acoes-laterais-btn acima. */

.acoes-laterais-btn.perigo{color:var(--cereja); border-color:rgba(231,52,82,.4);}

.acoes-laterais-btn.perigo:hover{background:var(--cereja); border-color:var(--cereja); color:#fff;}

.acoes-laterais-emissor{

  display:flex; flex-direction:column; gap:5px; background:#fff; border:1.5px solid var(--cinza);

  border-radius:16px; padding:10px 14px; box-shadow:0 6px 20px rgba(0,40,60,.16);

}

.acoes-laterais-emissor label{font-size:10.5px; font-weight:700; color:var(--cinza-escuro); text-transform:uppercase; letter-spacing:.3px; margin:0;}

.acoes-laterais-emissor select{padding:8px 10px; font-size:12.5px;}

.acoes-laterais-checkbox{

  display:flex; align-items:center; gap:8px; cursor:pointer;

  font-size:11.5px; font-weight:700; color:var(--cinza-escuro); text-transform:none; letter-spacing:0;

}

.acoes-laterais-checkbox input{margin:0; width:15px; height:15px; flex-shrink:0; cursor:pointer;}

/* Telas mais baixas (notebook comum): centralizar verticalmente faria a

   coluna estourar em cima E embaixo — melhor grudar no topo, abaixo da

   topbar, com scroll próprio se ainda faltar espaço (max-height acima). */

@media (max-height:760px){

  .acoes-laterais{top:96px; transform:none;}

}

/* .painel-inner tem max-width:960px centralizado — a coluna lateral

   (184px, largura + distância da borda) só cabe sem tampar o conteúdo

   quando sobra pelo menos esse tanto de cada lado, ou seja, tela com pelo

   menos ~1330px. Abaixo disso vira barra inferior antes de sobrepor —

   cobre inclusive notebooks 1366×768, resolução muito comum. */

@media (max-width:1330px){

  /* Não cabe mais do lado sem tampar o conteúdo — vira uma faixa

     horizontal colada embaixo, que é o padrão de barra de ações mobile. */

  .acoes-laterais{

    right:0; left:0; bottom:0; top:auto; transform:none; width:auto;

    flex-direction:row; flex-wrap:wrap; justify-content:center;

    max-height:none; padding:10px; background:rgba(244,246,246,.96);

    box-shadow:0 -4px 16px rgba(0,40,60,.12);

  }

  .acoes-laterais-btn{width:auto;}

  .acoes-laterais-emissor{flex-direction:row; align-items:center; padding:8px 12px;}

}



/* Aviso de upload em andamento — anexar foto é um fetch silencioso, e sem

   isso a tela ficava parada sem dizer que estava enviando. */

.upload-status{

  display:none; align-items:center; gap:9px;

  background:var(--azul); color:#fff; border-radius:999px; padding:10px 17px;

  font-size:12.5px; font-weight:700; box-shadow:0 6px 20px rgba(0,40,60,.24);

}

.upload-status.ativo{display:inline-flex;}

.upload-status-spinner{

  width:14px; height:14px; border:2px solid rgba(255,255,255,.35);

  border-top-color:#fff; border-radius:50%; animation:ia-girar .8s linear infinite; flex:none;

}

/* Tira "opções deste pedido" no topo do orçamento — só aparece quando

   ele está vinculado a uma cotação. Deixa trocar entre as opções (ex: 4

   hotéis pro mesmo pedido) e criar a próxima sem passar pela ficha da

   cotação toda vez. */

.opcoes-pedido{

  display:flex; align-items:center; gap:10px; flex-wrap:wrap;

  margin:-14px 0 24px; padding:12px 16px; background:#fff; border-radius:12px;

  box-shadow:0 2px 10px rgba(0,40,60,.06);

}

.opcoes-pedido-link{font-size:12.5px; font-weight:700; color:var(--azul-2); text-decoration:none; white-space:nowrap;}

.opcoes-pedido-link:hover{text-decoration:underline;}

.opcoes-pedido-lista{display:flex; gap:7px; flex-wrap:wrap; flex:1;}

.opcoes-pedido-item{

  display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px;

  background:var(--cinza); color:var(--cinza-escuro); font-size:12.5px; font-weight:700;

  text-decoration:none; border:2px solid transparent; transition:.15s;

}

.opcoes-pedido-item:hover{opacity:.85;}

/* Seletor composto de propósito: a opção ATUAL ganha contorno próprio

   por cima da cor de status (que já vem de .status-*), sem competir com

   ela — dá pra ver ao mesmo tempo "qual é essa" e "como ela está indo". */

.opcoes-pedido-item.atual{border-color:var(--azul);}

.opcoes-pedido-nova{

  border:1.5px dashed var(--azul-2); background:none; color:var(--azul-2);

  border-radius:999px; padding:6px 14px; font-family:'Open Sans', sans-serif;

  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;

}

.opcoes-pedido-nova:hover{background:rgba(10,91,130,.08);}

/* Nome da opção ATUAL (ex: "Fortaleza") — só rotula a que está aberta;

   as outras mostram o nome delas na própria pill em .opcoes-pedido-item. */

.opcoes-pedido-nome{

  width:200px; padding:7px 12px; font-size:12.5px; border-radius:999px;

  border:1.5px solid var(--cinza);

}



.galeria-status{

  display:flex; align-items:center; gap:9px; margin:10px 0;

  font-size:13.5px; font-weight:600; color:var(--texto);

}

.galeria-status.carregando{color:var(--azul-2); font-weight:700;}

/* O spinner nasceu pra fundo escuro (borda branca) — aqui o modal é

   claro, então a borda vira azul-2 pra continuar visível. */

.galeria-status .upload-status-spinner{border-color:rgba(10,91,130,.25); border-top-color:var(--azul-2);}



/* Grade de seleção de fotos (dentro do modal, nunca é exportada — livre

   pra usar grid mesmo, sem as restrições do html2canvas). */

.galeria-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-top:12px; max-height:420px; overflow-y:auto;}

.galeria-item{position:relative; cursor:pointer; border-radius:8px; overflow:hidden; border:3px solid transparent; box-sizing:border-box;}

.galeria-item img{width:100%; height:90px; object-fit:cover; display:block;}

.galeria-item.selecionada{border-color:var(--orc-primaria);}

.galeria-item .galeria-numero{

  position:absolute; top:4px; left:4px; background:var(--orc-primaria); color:#fff;

  font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%;

  display:flex; align-items:center; justify-content:center;

}

@media (max-width:700px){.galeria-grid{grid-template-columns:repeat(3, 1fr);}}



@media print{

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

}



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

.orc-modo-cliente label{display:flex; align-items:center; gap:8px; cursor:pointer;}



/* Campo de data em texto (ver assets/js/campo-data.js) — o seletor nativo

   do navegador não deixa colar, e colar é o caminho normal aqui: o agente

   recebe a data pelo WhatsApp. Vermelho só quando há algo escrito que não

   vira data; vazio é legítimo (quase toda data no sistema é opcional). */

.campo-data-br{font-variant-numeric:tabular-nums; letter-spacing:.02em;}

.campo-data-br.data-invalida{border-color:var(--cereja); background:rgba(231,52,82,.05);}



/* Moldura do campo de data híbrido (texto colável + botão de calendário —

   ver campo-data.js). O seletor nativo fica invisível mas RENDERIZADO

   (opacity 0), porque showPicker() não funciona em display:none. */

.campo-data-moldura{position:relative; display:inline-block; width:100%;}

.campo-data-moldura .campo-data-br{width:100%; padding-right:38px; box-sizing:border-box;}

.campo-data-botao{

  position:absolute; right:6px; top:50%; transform:translateY(-50%);

  border:none; background:transparent; cursor:pointer; padding:4px;

  color:var(--cinza-escuro); display:flex; align-items:center; border-radius:6px;

}

.campo-data-botao:hover{color:var(--azul-2); background:rgba(10,91,130,.08);}

.campo-data-botao svg{width:17px; height:17px;}

.campo-data-seletor{

  position:absolute; right:0; bottom:0; width:1px; height:1px;

  opacity:0; pointer-events:none; border:0; padding:0;

}

/* Idade calculada, logo abaixo do campo de data de nascimento — some

   sozinha quando o campo está vazio ou inválido (ver campo-data.js). */

.campo-data-idade{font-size:11.5px; color:var(--cinza-escuro); margin-top:2px; min-height:14px;}



/* Aviso da busca instantânea (ver assets/js/busca-instantanea.js): conta o

   que sobrou na página e oferece a busca completa quando o registro

   procurado não está entre os carregados. */

.busca-instantanea-aviso{font-size:12.5px; color:var(--cinza-escuro); margin:-12px 0 16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}

.busca-instantanea-link{border:none; background:transparent; color:var(--azul-2); font:inherit; font-weight:700; cursor:pointer; padding:2px 4px; border-radius:5px;}

.busca-instantanea-link:hover{background:rgba(10,91,130,.08);}



/* Documentos já anexados à viagem, oferecidos na importação do voucher.

   Lista em vez de <select>: o agente precisa ver os nomes todos de uma vez

   pra reconhecer qual PDF é de qual fornecedor. */

.docs-viagem-lista{display:flex; flex-direction:column; gap:4px; max-height:140px; overflow-y:auto;

                   border:1.5px solid var(--cinza); border-radius:10px; padding:8px 10px; background:#fbfcfc;}

.docs-viagem-item{display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; padding:2px 0;}

.docs-viagem-item input{margin:0; cursor:pointer;}

.docs-viagem-item .nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.docs-viagem-item .quando{font-size:11px; color:#8b9aa3; white-space:nowrap;}



/* Escolha do motor de IA: os dois botões lado a lado deixam claro que a

   diferença é só quem lê o documento — o anexo é o mesmo. */

.ia-escolha-motor{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.ia-escolha-motor .rot{font-size:11.5px; font-weight:700; letter-spacing:.06em;

                       text-transform:uppercase; color:#7c8a93;}

.ia-escolha-motor .btn-secundario{width:auto; margin:0; padding:8px 22px;}



/* Aviso de que a prévia é área de edição, e não o documento do cliente. */

.voucher-aviso-edicao{background:#fdf0d9; border-left:3px solid #d99b2a; color:#8a5200;

                      padding:9px 14px; border-radius:0 8px 8px 0; font-size:12.5px;

                      margin-bottom:10px; line-height:1.5;}

.voucher-aviso-edicao a{color:#8a5200; font-weight:700;}



/* ====================== MÓDULO FINANCEIRO ====================== */

.fin-resumo{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:22px;}

.fin-kpi{background:#fff; border:1px solid var(--cinza); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;}

.fin-kpi span{font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--cinza-escuro);}

.fin-kpi b{font-family:'Poppins',sans-serif; font-weight:800; font-size:17px; color:var(--texto); font-variant-numeric:tabular-nums;}

.fin-kpi small{font-size:11px; color:var(--cinza-escuro);}

.fin-kpi.destaque{background:var(--azul); border-color:var(--azul);}

.fin-kpi.destaque span, .fin-kpi.destaque small{color:rgba(255,255,255,.8);}

.fin-kpi.destaque b{color:#fff;}

.fin-kpi b.verde{color:#1f8a4c;}

.fin-kpi b.cereja{color:var(--cereja);}



.fin-grupo{background:#fff; border:1px solid var(--cinza); border-radius:14px; padding:14px 16px; margin-bottom:16px; border-left:4px solid var(--cinza);}

.fin-grupo-receita{border-left-color:#1f8a4c;}

.fin-grupo-despesa{border-left-color:var(--cereja);}

.fin-grupo-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap;}

.fin-grupo-head h3{margin:0; font-size:15px; font-weight:700;}

.fin-grupo-head span{font-size:12px; color:var(--cinza-escuro);}



.fin-add summary, .fin-edit summary{list-style:none; cursor:pointer; display:inline-block;}

.fin-add summary::-webkit-details-marker, .fin-edit summary::-webkit-details-marker{display:none;}

.fin-edit summary{background:none; border:none; color:var(--cinza-escuro); font-size:15px; padding:4px 6px;}

.fin-form{background:var(--cinza-fundo,#f4f6f6); border-radius:10px; padding:12px; margin-top:8px;}

.fin-form-linha{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px;}

.fin-form-linha:last-child{margin-bottom:0;}

.fin-form-linha input, .fin-form-linha select{padding:7px 9px; border:1px solid var(--cinza); border-radius:8px; font-size:12.5px; flex:1; min-width:110px;}



.fin-item{display:flex; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--cinza);}

.fin-item.confirmado{opacity:.62;}

.fin-item-main{flex:1; min-width:0;}

.fin-item-desc b{font-weight:600; font-size:13.5px;}

.fin-item-meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px;}

.fin-tag{font-size:10.5px; font-weight:700; background:var(--azul-suave,#e5f0f6); color:var(--azul); padding:2px 8px; border-radius:6px;}

.fin-tag.conta{background:#eef3f7; color:var(--cinza-escuro);}

.fin-vencido{color:var(--cereja); font-weight:700;}

.fin-item-confirmacao{font-size:11px; font-weight:600; color:#1f8a4c; margin-top:3px;}

.fin-item-valor{font-family:'Poppins',sans-serif; font-weight:800; font-size:15px; color:var(--texto); white-space:nowrap; font-variant-numeric:tabular-nums;}

.fin-item-acoes{display:flex; gap:6px; align-items:center; flex:none;}

.fin-toggle{border:1px solid var(--cinza); background:#fff; color:var(--cinza-escuro); border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;}

.fin-toggle.on{background:#1f8a4c; border-color:#1f8a4c; color:#fff;}

.fin-edit[open] summary{color:var(--azul);}



/* venda total (cabeçalho do financeiro) */

.fin-venda{background:var(--azul); color:#fff; border-radius:14px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}

.fin-venda-rot{display:block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.75);}

.fin-venda-valor{font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:#fff; display:block; line-height:1.15; font-variant-numeric:tabular-nums;}

.fin-venda .linha-sub{color:rgba(255,255,255,.7);}

.fin-venda .btn-secundario{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff;}

.fin-venda .fin-form{background:rgba(255,255,255,.1);}



/* ====================== DASHBOARD — FINANCEIRO/GRÁFICOS ====================== */

.dash-fin-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:16px;}

.dash-fin-kpi{background:#fff; border:1px solid var(--cinza); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;}

.dash-fin-kpi span{font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--cinza-escuro);}

.dash-fin-kpi b{font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; color:var(--texto); font-variant-numeric:tabular-nums;}

.dash-fin-kpi b.verde{color:#1f8a4c;} .dash-fin-kpi b.cereja{color:var(--cereja);}

.dash-fin-kpi.destaque{background:var(--azul); border-color:var(--azul);}

.dash-fin-kpi.destaque span{color:rgba(255,255,255,.8);} .dash-fin-kpi.destaque b{color:#fff;}



/* ⚠️ `minmax(0,1fr)` e não `1fr`: uma trilha `1fr` tem mínimo AUTOMÁTICO
   igual ao conteúdo, então um nome comprido que não quebra (razão social de
   empresa) estica a coluna inteira e desmonta a grade — o corte com
   reticências dentro do cartão nem chega a valer. Mesma família da armadilha
   do `min-width:0` em item flex. (Achado no Dashboard, 10/09/2026.) */
.dash-grid-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:18px;}

.dash-card{background:#fff; border:1px solid var(--cinza); border-radius:14px; padding:16px 18px; min-width:0;}

.dash-card h3{margin:0 0 12px; font-size:15px; font-weight:700;}



/* barras receita×despesa */

.dash-barras{display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:4px;}

.dash-barra-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%;}

.dash-barra-par{flex:1; display:flex; align-items:flex-end; gap:3px; width:100%; justify-content:center;}

.dash-barra{width:44%; max-width:22px; border-radius:4px 4px 0 0; min-height:2px; transition:.2s;}

.dash-barra.receita{background:#1f8a4c;} .dash-barra.despesa{background:var(--cereja);}

.dash-barra-mes{font-size:10.5px; color:var(--cinza-escuro); white-space:nowrap;}

.dash-legenda{display:flex; gap:16px; margin-top:10px; font-size:11.5px; color:var(--cinza-escuro);}

.dash-legenda span{display:inline-flex; align-items:center; gap:6px;}

.dash-legenda .dot, .dash-funil .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}



/* funil de solicitações */

.dash-funil-linha{display:flex; align-items:center; gap:10px; margin-bottom:7px;}

.dash-funil-rot{flex:0 0 130px; font-size:12px; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.dash-funil-barra-fundo{flex:1; background:var(--cinza-fundo,#eef3f7); border-radius:6px; height:16px; overflow:hidden;}

.dash-funil-barra{display:block; height:100%; border-radius:6px; background:var(--azul); min-width:0;}

.dash-funil-barra.status-aguardando{background:var(--cinza-escuro);}

.dash-funil-barra.status-checkin{background:#a06e00;}

.dash-funil-barra.status-andamento{background:var(--cereja);}

.dash-funil-barra.status-confirmada{background:var(--azul);}

.dash-funil-barra.status-aprovado{background:#1f8a4c;}

.dash-funil-barra.status-recusado{background:#961e1e;}

.dash-funil-num{flex:0 0 30px; text-align:right; font-family:'Poppins',sans-serif; font-weight:800; font-size:14px; color:var(--texto);}



/* rankings (empresas/passageiros que mais viajaram ou gastam) */

.dash-grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:18px;}

.dash-rank-linha{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--cinza); text-decoration:none; color:inherit;}

.dash-rank-linha:first-child{border-top:none;}

.dash-rank-linha:hover .dash-rank-nome{text-decoration:underline;}

.dash-rank-pos{flex:0 0 16px; font-size:11.5px; font-weight:800; color:var(--cinza-escuro); text-align:center;}

/* `min-width:0` é o que faz o corte com reticências valer num item flex —
   sem ele o nome comprido empurra o "1 viagem" pra fora do cartão. */
.dash-rank-nome{flex:1; min-width:0; font-weight:700; color:var(--azul); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.dash-rank-valor{flex:0 0 auto; font-size:12px; font-weight:700; color:var(--cinza-escuro); font-variant-numeric:tabular-nums; white-space:nowrap;}



@media (max-width:760px){ .dash-grid-2{grid-template-columns:minmax(0,1fr);} .dash-grid-3{grid-template-columns:minmax(0,1fr);} }

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



/* ---- Remodelagem da tela de montar voucher (2026-08-30) ---- */

/* Topo em duas colunas: Dados rápidos | Extrair com IA — padrão da casa pra

   formulário largo (começar a trabalhar sem rolar). Empilha em tela estreita. */

.vch-topo-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin-bottom:20px;}

.vch-topo-grid .form-card{max-width:none; margin:0; box-sizing:border-box;}

@media (max-width:1150px){ .vch-topo-grid{grid-template-columns:1fr;} }

/* Numeração que o cliente vê (id+1000), agora visível já no título da edição */

.vch-dullid-badge{display:inline-block; background:#eef5f9; color:var(--azul-2,#0a5b82);

  border-left:3px solid var(--cereja,#e73452); border-radius:6px; font-size:13px;

  font-weight:800; letter-spacing:.04em; padding:3px 9px; vertical-align:3px;}

/* Ícones SVG dos cards compartilhados com o PDF (propostaIconeSvg): o tamanho

   deles só existia em proposta.css (mm, só no PDF) — na tela de edição o SVG

   ficava SEM tamanho e explodia gigante, atropelando o texto vizinho (o

   "relógio da conexão sobrepondo o horário" reportado pelo usuário). */

.ico-prop{width:13px; height:13px; vertical-align:-2px; flex-shrink:0;}




/* Candidatas a unificar (viagens_candidatas.php) — duas ações por linha,
   lado a lado, sem empurrar a tabela para o lado. */
.vc-acoes{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.vc-acoes form{margin:0;}
.vc-acoes .btn-secundario{font-size:12px; padding:6px 10px; white-space:nowrap;}



/* Tarefa aberta por `agenda.php?tarefa=<id>` — vinda do "ver →" da Central.

   O realce existe porque a agenda de um mês pode ter dezenas de linhas: sem

   ele, chegar na tela certa ainda deixaria a pessoa procurando. */

.ag-lista-item.destacada{

  background:#fffbeb; border-left:3px solid #d99b2a; border-radius:8px;

  box-shadow:0 0 0 3px rgba(217,155,42,.15);

}





/* Atalhos de filtro das solicitações — a barra que torna a triagem de 185

   cartões possível (06/09/2026). Mesma linguagem das abas da Central: pílula

   clara, a ativa em azul cheio. */

.sol-atalhos{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}

.sol-atalho{

  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:99px;

  background:#eef2f4; color:#5c6f79; font-size:12.5px; font-weight:700; text-decoration:none;

  border:1px solid transparent; transition:background .15s;

}

.sol-atalho:hover{background:#e2e9ec; color:var(--texto);}

.sol-atalho b{font-variant-numeric:tabular-nums; opacity:.75;}

.sol-atalho.ativo{background:var(--azul); color:#fff;}

.sol-atalho.ativo b{opacity:.85;}



/* A pergunta "é a mesma viagem?" na tela de aprovar solicitação (06/09/2026).

   Herda `.alerta` de propósito — é a mesma faixa de atenção que o sistema já

   usa — e só acrescenta o que a lista de viagens candidatas precisa. */

.alerta-pergunta{max-width:760px;}

.pergunta-explica{margin:8px 0 12px; font-size:13px;}

.pergunta-viagem{

  display:flex; align-items:center; gap:12px; flex-wrap:wrap;

  padding:10px 0; border-top:1px solid rgba(0,0,0,.08);

}

.pergunta-viagem-dados{flex:1; min-width:220px;}

.pergunta-viagem-dados a{font-weight:700;}

.pergunta-viagem-dados .linha-sub{font-size:12px; margin-top:2px;}

.pergunta-acoes{display:flex; gap:8px; margin:0;}

.pergunta-acoes button{padding:7px 14px; font-size:12.5px;}

.pergunta-rodape{

  margin:12px 0 0; padding-top:10px; font-size:12.5px;

  border-top:1px solid rgba(0,0,0,.08);

}



/* Janela de tempo das solicitações (06/09/2026). Mesma pílula dos atalhos de

   situação — é a mesma família de controle, só responde a outra pergunta —

   com o rótulo e o intervalo livre na mesma linha. */

.sol-periodos{align-items:center;}

.sol-periodo-rotulo{font-size:12.5px; font-weight:700; color:var(--cinza-escuro); margin-right:2px;}

.sol-intervalo{display:flex; align-items:center; gap:6px; margin:0 0 0 6px;}

.sol-intervalo label{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--cinza-escuro);}

.sol-intervalo input[type="date"]{padding:5px 8px; font-size:12.5px; width:auto;}

.sol-intervalo button{padding:6px 12px; font-size:12.5px;}

.sol-fora-janela{margin:-6px 0 14px; font-size:12.5px; color:var(--cinza-escuro);}





/* A janela resolvida, dita por extenso ("de 01/01/2026 em diante"), no fim da

   linha de origem. Existe porque o atalho sozinho mente pela metade: "90 dias"

   ao lado de uma viagem de 2027 parece defeito até se saber que a janela não

   tem teto. Discreta de propósito — é legenda, não controle. */

.filtro-janela{font-size:12px; color:var(--cinza-escuro); opacity:.8; margin-left:8px; font-style:italic;}

.filtro-janela-solta{margin:-6px 0 14px 0;}
/* Filtro de recorte COMPACTO (09/09/2026) — uma linha só, discreta, no canto
   superior esquerdo. Usado pelo Dashboard dentro do workspace; o desenho
   normal continua nas outras telas. */
.sol-periodos.compacto{gap:4px; margin-bottom:10px; flex-wrap:nowrap; overflow-x:auto; align-items:center;}
.sol-periodos.compacto .sol-periodo-rotulo{font-size:11px; margin-right:4px; text-transform:uppercase; letter-spacing:.04em; opacity:.8;}
.sol-periodos.compacto .sol-atalho{padding:3px 9px; font-size:11.5px; border-radius:14px;}
.sol-periodos.compacto .sol-intervalo{gap:4px; margin-left:8px;}
.sol-periodos.compacto .sol-intervalo label{font-size:11px;}
.sol-periodos.compacto .sol-intervalo input[type="date"]{padding:2px 6px; font-size:11.5px; height:24px;}
.sol-periodos.compacto .sol-intervalo button{padding:3px 9px; font-size:11.5px; height:24px;}
.sol-periodos.compacto .filtro-janela{margin-left:10px; white-space:nowrap;}





/* ==========================================================================

   Cadastros duplicados (passageiros_duplicados.php)

   Dois cards lado a lado por par; arrastar um sobre o outro mescla.

   ========================================================================== */





/* O estado "salvando" do cartao. Estava escrito `.dup-par.dup-ocupado` e nunca

   pegava: `contato_solicitacao.js` poe a classe no `.dup-card`, e `.dup-par` era

   da tela de duplicados, que nao existe mais. Descoberto em 08/09/2026 na

   faxina de CSS orfao — o seletor errado nao da erro, so nao faz nada. */

.dup-card.dup-ocupado { opacity:.55; pointer-events:none; }

.dup-card { position:relative; border:1px solid #dfe5ec; border-radius:9px; padding:12px 13px 10px;

  background:#fbfcfd; cursor:grab; transition:border-color .15s, box-shadow .15s, background .15s; }

.dup-card:active { cursor:grabbing; }





.dup-card h3 { margin:0; font-size:14.5px; font-weight:700; color:#1f2d3a; line-height:1.25; }

.dup-id { font-size:11px; color:#8595a8; margin-top:2px; }



.dup-campos { margin:9px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; }

.dup-campos > div { min-width:0; }

.dup-campos dt { font-size:9.5px; letter-spacing:.3px; text-transform:uppercase; color:#8595a8; font-weight:700; }

.dup-campos dd { margin:0; font-size:12px; color:#39485a; overflow-wrap:anywhere; }

.dup-vazio { color:#adb8c4; }



.dup-peso { margin-top:9px; padding-top:8px; border-top:1px solid #eef1f5;

  display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:#5a6672; }

.dup-peso b { color:#1f2d3a; font-weight:700; }



.dup-acoes { margin-top:10px; display:flex; align-items:center; gap:10px; }

.dup-abrir { font-size:11.5px; color:#5a6672; text-decoration:none; }

.dup-abrir:hover { color:#003c58; text-decoration:underline; }





@media (max-width:700px) {



  /* Sem arrastar em telefone: o botão é o caminho, e a dica não pode mentir. */



  .dup-card { cursor:default; }

}



/* Botões do cabeçalho da lista de passageiros lado a lado. */

.painel-header-acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }



/* Rodapé do par: dica à esquerda, "são pessoas diferentes" à direita. */





/* Faixa da unificação em lote e sua prévia. */





/* Excluir é a ação mais perigosa da tela: fica discreta, nunca ao lado da

   principal, e nunca com a cor de quem convida ao clique. */





/* Bloco "Sem candidato" da tela de parear — as solicitações soltas que o

   casador não conseguiu propor. Ficam visíveis de propósito: o botão nas

   Solicitações conta ESTAS, e antes a tela abria vazia. */





/* Caixa "Mostrar canceladas" no quadro de Viagens — a fase Cancelada existe

   sempre, mas só ocupa espaço no quadro quando o agente pede. */

.vk-canceladas{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;

               color:var(--cinza-escuro); cursor:pointer; white-space:nowrap;}

.vk-canceladas input{width:15px; height:15px; cursor:pointer; accent-color:var(--azul);}

.kanban-coluna-cabecalho.fase-cancelada{background:#6b7076;}





/* A barra de ação acompanha a rolagem: com 137 linhas, o botão sumiria da tela

   justamente enquanto o agente escolhe o que excluir. */





.btn-perigo{background:var(--cereja); color:#fff; border:none; border-radius:8px; padding:8px 16px;

            font-size:13px; font-weight:700; cursor:pointer;}

.btn-perigo:disabled{background:#d8dee1; color:#98a4a9; cursor:default;}





/* Revisão de emissões — a busca de viagem mora dentro da célula. */







/* ── TOPO DOS QUADROS — Solicitações e Viagens (08/09/2026) ─────────────────

   Segunda passada no mesmo dia. De manhã o cabeçalho tinha ido de quatro

   blocos empilhados para dois; o Rafael olhou de novo e cortou o resto:



     "nessa tela de solicitações remover todos os filtros que tem... não precisa

      mostrar filtro nessa tela... o campo de buscar deve ficar no canto

      superior direito discreto.. e o item de nova solicitação também pode

      diminuir... a ideia é simplificar a tela e subir mais os quadros do

      kanban.... mesmos ajustes na tela de viagens para manter o mesmo padrão

      das duas."



   Sobrou UMA linha: título à esquerda, busca e "nova" encostados à direita.



   ⚠️ O prefixo é `quadro-`, e não `sol-`, de propósito. Regra dele, no mesmo

   pedido: *"as duas telas têm que ter um padrão global de kanban... quando

   trocar uma a outra deve ser trocada"*. O bloco não pertence às Solicitações;

   pertence aos dois quadros. Um nome que aponta para uma das telas é o convite

   para alguém duplicar as regras com outro prefixo e ajustar só um lado — que

   é exatamente o que ele acabou de proibir. */



.quadro-topo{

  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;

}

.quadro-topo h2{ font-size:21px; color:var(--azul); }   /* .painel-header usa 26px */



.quadro-acoes{

  margin-left:auto;                  /* é isto que joga a busca para o canto */

  display:flex; align-items:center; gap:10px;

}



/* Busca DISCRETA: pílula clara com a lupa dentro e nenhum botão ao lado. O

   "Buscar" saiu porque a busca é o único campo do formulário — o Enter

   submete, e o botão custava um controle na linha para dizer isso. */

.quadro-busca{ display:flex; align-items:center; gap:10px; }

.quadro-busca-campo{ position:relative; display:flex; align-items:center; }

.quadro-busca input[type="search"]{

  -webkit-appearance:none; appearance:none;   /* o campo de busca do WebKit vem

                                                 com moldura e cantos próprios */

  width:190px; padding:6px 26px 6px 30px; margin:0;

  border:1px solid #dde4e8; border-radius:99px;

  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aa3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 10px center / 13px 13px;

  font-family:'Open Sans'; font-size:12.5px; color:var(--texto);

}

.quadro-busca input[type="search"]::placeholder{ color:#9aa8b0; }

.quadro-busca input[type="search"]:focus{

  outline:none; border-color:var(--azul-2); width:250px;

}

/* O × nativo do type=search duplicaria o nosso, que além de limpar o campo

   recarrega a tela sem a busca. */

.quadro-busca input[type="search"]::-webkit-search-cancel-button{ display:none; }

.quadro-busca-limpar{

  position:absolute; right:10px; top:50%; transform:translateY(-50%);

  color:var(--cereja); font-weight:700; font-size:15px; line-height:1;

  text-decoration:none;

}



/* "Nova" pequeno. NÃO herda .btn-primary de propósito: aquele é o botão do

   formulário de login e tem `width:100%` — foi ele que fez o "+ Nova

   solicitação" ocupar a largura inteira da tela quando a barra quebrou de

   linha, o defeito que aparece no print que o Rafael mandou. */

.quadro-novo{

  flex:0 0 auto; width:auto;

  padding:6px 14px; border-radius:99px; white-space:nowrap;

  border:1.5px solid var(--azul-2); background:none; color:var(--azul-2);

  font-family:'Open Sans'; font-weight:700; font-size:12.5px;

  text-decoration:none; cursor:pointer;

}

.quadro-novo:hover{ background:var(--azul-2); color:#fff; }



/* A caixa "Canceladas" só existe no quadro de Viagens: ela não filtra o que a

   tela mostra, é a única porta para uma fase que fica fora do quadro por

   padrão. Fica discreta, à esquerda da busca. */

.quadro-acoes .vk-canceladas{ font-size:12px; margin:0; }



@media (max-width: 860px){

  /* A linha quebra: o bloco de ações passa a ocupar a largura toda, e a busca

     estica no que sobrar em vez de ficar com uma pílula de 190px perdida. */

  .quadro-acoes{ margin-left:0; width:100%; }

  .quadro-busca{ flex:1; }

  .quadro-busca-campo{ flex:1; }

  .quadro-busca input[type="search"]{ width:100%; }

  .quadro-busca input[type="search"]:focus{ width:100%; }

}



/* ── Geometria compartilhada dos dois quadros ───────────────────────────────

   As duas telas usam a mesma estrutura plana: colunas irmãs diretas de

   `.kanban`, sem invólucro de grupo (os grupos "Pós-venda"/"Viagem"/

   "Fechamento" saíram do quadro de Viagens em 08/09/2026, primeiro da tela e

   depois da estrutura). As regras `.kanban-grupo*` saíram junto — regra viva

   que nada usa vira armadilha para quem procurar de onde vem um estilo. */



:root{

  /* Quanto do alto da janela NÃO é quadro: a linha do topo + as folgas do

     .painel-inner. Um lugar só, porque este número envelhece toda vez que o

     cabeçalho muda — já foi 260 (quatro blocos) e 168 (dois blocos). */

  --kanban-topo: 130px;

}



/* A coluna tem a MESMA base nas duas telas. Sem base declarada, o navegador

   usa o conteúdo como referência e colunas com cartão mais largo ficavam

   maiores que as vizinhas. */

.kanban-coluna{ flex:1 1 210px; }



@media (max-width: 900px){

  :root{ --kanban-topo: 175px; }   /* o topo quebra em duas linhas */

}



/* ── Faxina de CSS órfão (08/09/2026) ───────────────────────────────────────

   Saíram daqui as regras das telas que foram apagadas no desmonte do andaime

   da consolidação do acervo, no dia anterior: `.er-*` (revisar emissões),

   `.sl-*` (limpeza de solicitações), `.pv-*` (parear solicitação × viagem),

   `.conciliar-*` (conciliar solicitações), `.vd-*` (viagens duplicadas) e a

   maior parte das `.dup-*` (passageiros duplicados).



   As `.dup-*` saíram uma a uma, e não pelo prefixo: `solicitacao_contato.php`

   ainda vive e reaproveita parte desse vocabulário (`.dup-card`, `.dup-campos`,

   `.dup-peso`, `.dup-aviso`...). Só foram removidas as que nenhum arquivo do

   repositório menciona.



   Junto foram sete classes avulsas sem dono: `.passageiro-info`,

   `.passageiro-meta`, `.link-acesso-acoes`, `.link-acesso-linha`,

   `.menu-flutuante-item`, `.chip-busca-linha` e `.prazo-linha`.



   E `.login-demo`, que quase escapou: parecia recurso exclusivo da demo e por

   isso ficou de fora na primeira leva. O convite de entrada da demonstração é

   `includes/demo_entrada.php`, e ele usa `.demo-convite*` — o `.login-demo` era

   de uma versão anterior desse convite, e nenhum arquivo do repositório o

   menciona. Regra que se apresenta como "de um ambiente que você não vê" é a

   mais fácil de manter viva por engano.



   A faxina achou um defeito de brinde: o estado "salvando" do cartão em

   `solicitacao_contato.php` estava escrito `.dup-par.dup-ocupado`, e o

   JavaScript põe a classe num `.dup-card` — o seletor nunca pegava. Corrigido

   junto, porque um seletor errado não dá erro nenhum, só não faz nada.



   O motivo de fazer isso, e não deixar quieto: regra viva que nada usa parece

   arquitetura para quem chega depois — alguém procura de onde vem um estilo e

   encontra um bloco que não tem mais tela. */



/* ── Bloco de Orçamentos da ficha da solicitação ────────────────────────────

   Estas regras viviam num `<style>` solto no rodapé de `solicitacao.php`, fora

   do sistema de design e invisíveis para quem mantém este arquivo. Vieram para

   cá em 08/09/2026, junto com a correção de dois defeitos que o Rafael viu na

   tela: *"os orçamentos mesmo estão ficando bem desconfigurado"*. */



/* O cabeçalho da proposta é um FORMULÁRIO, e formulário não acompanha a

   largura da tela. Com a ficha em 1452px a grade de auto-fit abria SETE

   trilhas de 192px para SEIS campos: três campos e quatro buracos na primeira

   linha, o destino atravessando sozinho, mais dois campos soltos embaixo. */

.orc-dest-bloco{border:1px solid #e3e8ea; border-radius:10px; padding:10px 16px;

                margin-bottom:12px; background:#fbfcfc; max-width:760px;}

.orc-dest-bloco > summary{font-size:12.5px; font-weight:700; color:var(--texto);

                          cursor:pointer; list-style:none; padding:2px 0;}

.orc-dest-bloco > summary::-webkit-details-marker{display:none;}

.orc-dest-bloco > summary::before{content:'▸ '; color:var(--cinza-escuro);}

.orc-dest-bloco[open] > summary::before{content:'▾ ';}

.orc-dest-bloco[open] > summary{margin-bottom:10px; padding-bottom:8px;

                                border-bottom:1px solid #eef2f4;}



/* Duas colunas fixas em vez de auto-fit: são poucos campos e eles têm ordem de

   leitura (para quem vai, aos cuidados de quem, sobre o quê, assinado por

   quem). Auto-fit reordena visualmente conforme a largura e desmancha isso. */

.orc-dest-grade{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px 12px;}

.orc-dest-grade label{display:flex; flex-direction:column; gap:3px; font-size:11.5px;

                      font-weight:700; color:#5c6f79;}

.orc-dest-grade label.largo{grid-column:1 / -1;}

.orc-dest-grade input{border:1.5px solid #dde3e6; border-radius:8px; padding:6px 11px;

                      font:inherit; font-size:12.5px; font-weight:400; color:var(--texto);}

.orc-dest-grade input:focus{outline:none; border-color:var(--azul-2);}



.orc-ordenar-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px;

                   font-size:12.5px; color:#5c6f79;}

.orc-ordenar-barra > span:first-child{font-weight:700; color:var(--texto);}

.orc-ord{border:1.5px solid #dde3e6; background:#fff; color:#5c6f79; font:inherit; font-size:11.5px;

         font-weight:700; padding:4px 12px; border-radius:16px; cursor:pointer;}

.orc-ord:hover{background:#eef3f5; border-color:#b9cdd7;}

.orc-dica{font-size:11.5px; color:#8b9aa3; font-style:italic; font-weight:400;}



/* Por que esta tabela precisa de tratamento próprio, medido no navegador em

   08/09/2026 com o quadro em 1760px:



   1. `.tabela-lista:not(.tabela-fixa) td:first-child{width:100%}` existe porque

      a primeira coluna das listas do sistema é o NOME, e é justo que ela

      absorva a sobra. Aqui a primeira coluna é a alcinha de arrastar: a regra

      entregava 853px de 1408 — 61% da tabela — a uma célula com um símbolo, e

      espremia as quatro opções no terço da direita. `tabela-fixa` desliga isso.

   2. `.tabela-lista` é `display:block` (para o corpo rolar com o cabeçalho

      grudado). Uma `<table>` em bloco vira caixa de bloco e o conteúdo forma

      uma tabela anônima que ENCOLHE até o conteúdo — as colunas ficavam certas

      e sobrava um vão em branco à direita. `display:table` devolve a largura

      inteira. O que se perde é a rolagem interna com `max-height`, que não faz

      falta: são as opções de UM pedido, nunca uma lista longa.



   Quem absorve a sobra agora é a coluna do código — a única imprevisível,

   porque leva o apelido do orçamento junto. */

.orc-tabela{display:table; table-layout:fixed;}

.orc-col-alca{width:34px;}

.orc-col-marca{width:34px;}

.orc-col-tipo{width:130px;}

.orc-col-valor{width:120px;}

.orc-col-status{width:110px;}

.orc-col-data{width:120px;}

.orc-col-abrir{width:80px;}

.orc-tabela td{white-space:nowrap;}

.orc-tabela td:nth-child(3){white-space:normal;}   /* só o código pode quebrar */



.orc-pegar{cursor:grab; color:#a9b7bf; font-size:16px; text-align:center; user-select:none;}

.orc-pegar:active{cursor:grabbing;}

.orc-linha.arrastando{opacity:.4;}

/* A linha alvo ganha uma régua no topo: sem isso não dá pra saber ONDE vai cair. */

.orc-linha.alvo td{box-shadow:inset 0 3px 0 var(--azul-2);}

/* ══ FICHA COMPACTA (prefixo .pg-) ═════════════════════════════════════════
   Nasceu na ficha do passageiro (`passageiro.php`) a partir de um mockup que o
   Rafael mandou: layout denso, blocos lado a lado, abas em vez de secoes
   empilhadas. E hoje a TELA DE REFERENCIA do sistema — quando ele pede para
   melhorar uma tela sem dizer como, e contra esta que vale comparar.

   Estas regras viviam num <style> dentro do proprio passageiro.php ate
   08/09/2026. Vieram para ca porque nenhuma outra tela conseguia enxerga-las:
   o padrao existia e nao era reusavel. O prefixo continua `.pg-` de proposito
   — renomear tudo agora quebraria a ficha do passageiro sem ganho nenhum. */
/* Layout compacto, blocos lado a lado — pedido explícito do Rafael a
   partir de um mockup de referência (ver plano). Prefixo .pg- em tudo. */
.pg-ficha { max-width:none; font-size:13px; }
.pg-ficha .painel-header-row { margin-bottom:10px; }

.pg-cabecalho { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px; background:#fff; border:1px solid #e3e8ee; border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.pg-cabecalho-nome { flex:1 1 240px; }
.pg-cabecalho-nome input { width:100%; box-sizing:border-box; font:700 17px 'Poppins',sans-serif; color:#1c2b3a; border:none; border-bottom:2px solid transparent; padding:2px 0; }
.pg-cabecalho-nome input:focus { border-bottom-color:#c0392b; outline:none; }
.pg-mini { display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:#8595a8; text-transform:uppercase; letter-spacing:.3px; }
.pg-mini input, .pg-mini select { font: 12.5px 'Open Sans',sans-serif; padding:4px 6px; border:1px solid #cfd8e1; border-radius:5px; text-transform:none; letter-spacing:normal; }
.pg-mini-check { flex-direction:row; align-items:center; gap:5px; }

.pg-resumo-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; margin-bottom:8px; align-items:start; }
.pg-resumo-card { background:#fff; border:1px solid #e3e8ee; border-radius:8px; padding:8px 10px; font-size:12px; }
.pg-resumo-card h4 { margin:0 0 4px; font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:#8595a8; font-weight:700; }
.pg-resumo-card h4:not(:first-child) { margin-top:8px; padding-top:8px; border-top:1px dashed #eef1f5; }
.pg-resumo-card .vinculo-linha, .pg-resumo-card .viagem-card { padding:4px 0; margin:0; font-size:11.5px; }
.pg-resumo-card .vazio { font-size:11.5px; margin:0; opacity:.7; }
.pg-chips-compacto { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.pg-chips-compacto .chip { padding:1px 6px; font-size:11px; }
.pg-linha-compacta { display:flex; gap:6px; align-items:center; }
.pg-linha-compacta input[type="text"] { flex:1; min-width:0; padding:3px 6px; font-size:11px; border:1px solid #cfd8e1; border-radius:5px; }
.pg-btn-mini { border:none; background:#eceff3; color:#5a6b7d; padding:3px 8px; border-radius:5px; font:600 11px 'Open Sans',sans-serif; cursor:pointer; white-space:nowrap; }
.pg-btn-mini:hover { background:#dde3ea; }
.pg-btn-mini.pg-btn-mini-primario { background:#1d7a34; color:#fff; }
.pg-btn-mini.pg-btn-mini-primario:hover { background:#166028; }
.pg-btn-mini.pg-btn-mini-perigo { background:#fbe4e4; color:#c0392b; }
.pg-empresa-linha { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:2px 0; font-size:11.5px; }
.pg-empresa-linha button { border:none; background:none; color:#c0392b; cursor:pointer; font-size:12px; padding:0 2px; }

.pg-abas { display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid #e3e8ee; }
.pg-aba-botao { border:none; background:none; padding:8px 12px; font:600 12px 'Open Sans',sans-serif; color:#66788c; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.pg-aba-botao.pg-aba-ativa { color:#c0392b; border-bottom-color:#c0392b; }
.pg-aba-painel { background:#fff; border:1px solid #e3e8ee; border-top:none; border-radius:0 0 10px 10px; padding:14px; margin-bottom:14px; }
.pg-aba-painel[hidden] { display:none; }
/* Dentro do workspace a fileira de sub-abas é desenhada pela casca
   (atendimento.php, ver abas.js) — a da ficha some, e o painel ganha de
   volta a borda de cima que a fileira fazia. */
.pg-abas.pg-abas-assumida { display:none; }
.pg-abas.pg-abas-assumida ~ .pg-aba-painel { border-top:1px solid #e3e8ee; border-radius:10px; }

.pg-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px 12px; }
.pg-grid label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:#8595a8; margin-bottom:3px; }
.pg-grid input, .pg-grid select, .pg-grid textarea { width:100%; box-sizing:border-box; padding:5px 7px; border:1px solid #cfd8e1; border-radius:5px; font:13px 'Open Sans',sans-serif; }
.pg-grid textarea { resize:vertical; min-height:50px; }
.pg-check { display:flex; align-items:center; gap:5px; font-size:12px; color:#3d4d5e; }
.pg-aceita-canto { display:flex; justify-content:flex-end; gap:10px; margin-bottom:6px; }
.pg-aceita-canto .pg-check { font-size:13px; gap:3px; }
.pg-aceita-canto input[type=checkbox] { width:13px; height:13px; margin:0; }
.pg-full { grid-column:1/-1; }

.pg-card-editavel { position:relative; }
.pg-card-status { display:inline-block; margin-left:8px; font-size:11px; font-weight:600; color:#256029; vertical-align:middle; transition:opacity .4s; }
.pg-card-status.pg-card-status-erro { color:#c0392b; }
.pg-card-status.pg-card-status-fade { opacity:0; }
.pg-familia-linha { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #eef1f5; font-size:12.5px; }
.pg-familia-linha:last-child { border-bottom:none; }
.pg-familia-linha .linha-sub { flex:1; }
.pg-familia-busca-linha { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:10px; }
.pg-familia-busca-linha .pg-mini { flex:1; min-width:180px; }
#pg-familia-res { position:relative; }
.aviso-telefone { display:block; color:#c0392b; margin-top:3px; font-size:11px; }
.pg-ia-caixa { margin-bottom:10px; padding:10px 12px; font-size:12px; }

/* ── Ficha da Solicitação em abas (08/09/2026) ──────────────────────────────
   Pedido do Rafael: *"deixar toda essa solicitacao.php com um design em abas
   mais clean estilo a tela de cadastro de passageiros"*. O estudo com as
   medições está em `docs/estudo_ficha_solicitacao.md`.

   A ficha reusa `.pg-ficha`, `.pg-abas` e `.pg-aba-painel` da ficha do
   passageiro — as mesmas classes, não uma cópia com outro prefixo. É por isso
   que a fatia anterior tirou esse CSS de dentro do `passageiro.php`. */

/* O painel não pinta fundo nem moldura: o conteúdo de cada aba já vem em
   cartões próprios (`.form-bloco`, `.tabela-card`, `.form-card`), e uma
   segunda moldura em volta viraria cartão dentro de cartão. Do padrão do
   passageiro aproveita-se o comportamento — esconder sem remover — não a
   decoração, que lá existe porque os campos ficam soltos no painel. */
.sol-aba-painel{ background:none; border:none; border-radius:0; padding:16px 0 0; }

/* ── Cabeçalho de uma linha ────────────────────────────────────────────────
   Eram três blocos empilhados: metadados, título da situação em cereja e a
   trilha. Viraram um. A situação entrou aqui porque o título grande repetia o
   que a trilha logo abaixo já diz com a etapa acesa. */
.sol-topo{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 11px;
  background:var(--branco); border:1px solid #e3e8ee; border-radius:10px;
  padding:9px 14px; margin-bottom:10px;
}
.sol-topo-voltar{
  margin:0; font-size:17px; line-height:1; text-decoration:none;
  color:var(--cinza-escuro); padding:0 2px;
}
.sol-topo-voltar:hover{ color:var(--azul); }
.sol-topo-cod{ font-weight:700; font-size:12.5px; color:var(--azul-2); font-variant-numeric:tabular-nums; }
.sol-topo-cliente{ font-family:'Poppins', sans-serif; font-weight:700; font-size:16px; color:#1c2b3a; }
.sol-topo-situacao{
  font-weight:700; font-size:11px; color:var(--cereja);
  text-transform:uppercase; letter-spacing:.05em;
  border:1px solid rgba(231,52,82,.3); border-radius:99px; padding:2px 9px;
}
.sol-topo-meta{ font-size:11.5px; color:var(--cinza-escuro); }

.sol-topo-acoes{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sol-topo-link{ font-size:11.5px; font-weight:700; color:var(--azul-2); text-decoration:none; white-space:nowrap; }
.sol-topo-link:hover{ text-decoration:underline; }
.sol-topo-excluir{ margin:0; }
.sol-topo-btn{
  border:1px solid #dde3e6; background:var(--branco); color:#5c6f79;
  border-radius:99px; padding:4px 11px; font-family:'Open Sans';
  font-weight:700; font-size:11.5px; cursor:pointer; white-space:nowrap;
}
.sol-topo-btn:hover{ background:#eef3f5; }
.sol-topo-btn-perigo{ color:var(--cereja); border-color:rgba(231,52,82,.35); }
.sol-topo-btn-perigo:hover{ background:rgba(231,52,82,.08); }

/* A trilha perdeu o título grande que vinha acima dela. */
.sol-ficha .trilha{ margin-bottom:14px; }

/* Numa tela estreita o nome do cliente manda: ele fica na primeira linha
   inteiro, e o resto quebra embaixo. */
@media (max-width: 760px){
  .sol-topo-cliente{ flex:1 1 100%; order:-1; }
  .sol-topo-acoes{ margin-left:0; }
}

/* ── Aba "Pedido": os quatro grupos em grade (08/09/2026, fatia 3) ──────────
   Pedido do Rafael, depois de ver as abas: *"quero essa primeira pagina na
   mesma estrutura... quem pediu / a viagem / preferencias de voo / servicos e
   observacoes"*. Os quatro grupos continuam sendo quatro — mudou o arranjo
   dentro deles.

   Antes eram quatro COLUNAS lado a lado, cada uma com os campos empilhados. O
   defeito disso e que toda coluna fica com a altura da mais alta: "Quem pediu"
   tem 4 campos e ficava com o vao em branco de "A viagem", que tem 9. Agora
   cada grupo ocupa a largura toda e os campos fluem em quatro colunas. */

/* `align-items:stretch` é obrigatório e nada obvio: `.form-blocos` declara
   `align-items:start` porque era uma GRADE de colunas, e ali isso alinhava os
   cartoes pelo topo. Virando FLEX EM COLUNA, o eixo transversal passa a ser o
   horizontal — e o mesmo `start` fazia cada bloco encolher ate o conteudo, em
   vez de ocupar a largura. */
.sol-form-grade{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }

/* Quatro colunas FIXAS, e nao auto-fit.
   Auto-fit parece mais esperto e nao e: ele so colapsa a trilha que esta vazia
   em TODAS as linhas. Basta um campo largo atravessando a grade — e aqui ha
   varios — para nenhuma trilha colapsar, e o resultado e o que o cabecalho da
   proposta fazia de manha: campos de 190px com buracos ao lado. Com quatro
   trilhas declaradas, cada campo sabe quanto ocupa. */
.sol-form-grade .form-bloco{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:9px 14px; align-items:start; padding:13px 16px 15px;
}
.sol-form-grade .form-bloco-titulo{ grid-column:1/-1; margin-bottom:0; padding-bottom:8px; }
.sol-form-grade .form-bloco-ajuda{ grid-column:1/-1; margin:-4px 0 0; }
.sol-form-grade .input-group{ margin-bottom:0; }
.sol-form-grade .form-linha{ gap:10px; }

.sol-form-grade .sol-col2{ grid-column:span 2; }
.sol-form-grade .sol-col3{ grid-column:span 3; }
.sol-form-grade .sol-largo{ grid-column:1/-1; }

/* O campo encolhe junto com a grade — senao ganhar colunas so faria a tela
   ficar mais larga, nao mais densa. Mesma escala da ficha do passageiro. */
.sol-form-grade input[type="text"],
.sol-form-grade input[type="date"],
.sol-form-grade input[type="number"],
.sol-form-grade select,
.sol-form-grade textarea,
.sol-form-grade .form-bloco input[type="date"],
.sol-form-grade .form-bloco input[type="number"]{
  padding:6px 10px; border-radius:8px; font-size:13px;
}
.sol-form-grade textarea{ min-height:66px; }

/* Rotulo miudo em maiusculas acima do campo, como no `.pg-grid`. O
   `:not(:has(input))` protege o rotulo que E um controle — "Datas flexiveis" e
   os radios de "Pedido de" sao <label> com <input> dentro, e viraria uma
   caixinha com legenda em versalete. Navegador sem `:has` simplesmente ignora
   a regra e mantem o rotulo como esta hoje. */
.sol-form-grade .input-group > label:first-child:not(:has(input)){
  display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#8595a8; margin-bottom:3px;
}

/* Os servicos voltam a fluir em linha. Eles eram empilhados na vertical porque
   a coluna tinha 330px; com duas trilhas de largura, oito caixas cabem em duas
   linhas. */
.sol-form-grade .form-bloco .checkbox-grupo{ flex-direction:row; flex-wrap:wrap; gap:7px 16px; }
.sol-form-grade .checkbox-grupo label{ font-size:12.5px; }

/* A dica do destino ocupava tres linhas explicando o obvio depois da primeira
   vez. Vira uma linha so, discreta, abaixo do rotulo. */
.sol-form-grade .campo-ajuda{ font-size:11px; color:#8b9aa3; margin:-1px 0 5px; }

@media (max-width: 1200px){
  .sol-form-grade .form-bloco{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sol-form-grade .sol-col3{ grid-column:span 2; }
}
@media (max-width: 700px){
  .sol-form-grade .form-bloco{ grid-template-columns:1fr; }
  .sol-form-grade .sol-col2,
  .sol-form-grade .sol-col3{ grid-column:span 1; }
}

/* Os orcamentos no rodape da aba "Pedido".

   E um `.form-bloco` como os outros quatro grupos, de proposito: o Rafael viu
   a primeira versao com o cabecalho antigo (<h2> grande e paragrafo) e disse
   *"o orcamento tem que preservar o layout do restante da pagina"*. Bloco que
   destoa dos vizinhos parece outra tela colada no fim desta.

   O que o distingue e so a margem maior e o fio acima: ele nao faz parte do
   formulario do pedido — vem depois do </form> dele. */
.sol-orcamentos{ margin-top:20px; padding:13px 16px 15px; }
.sol-orcamentos::before{
  content:''; display:block; height:1px; background:#e3e8ee;
  margin:-13px -16px 13px;
}

/* Titulo do bloco com uma acao a direita, na mesma linha. O `.form-bloco-titulo`
   sozinho e so texto; aqui ele vira a barra do cartao. */
.sol-bloco-titulo-acao{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sol-bloco-titulo-acao form{ margin:0; }
.sol-bloco-titulo-acao b{ font-variant-numeric:tabular-nums; opacity:.7; }

/* Cartao dentro de cartao: `.tabela-card` e `.tabela-lista` trazem fundo
   branco, sombra e 22px de respiro proprios, porque em toda outra tela eles
   SAO o cartao. Aqui ja estao dentro de um. */
.sol-orcamentos .tabela-card{ background:none; box-shadow:none; padding:0; }
.sol-orcamentos .orc-tabela{ box-shadow:none; border:1px solid #e3e8ee; }
.sol-orcamentos .form-acoes{ margin-top:12px; }

/* O cabecalho azul-marinho da tabela.

   `.tabela-lista th` e azul cheio com texto branco porque nas telas de LISTA
   (Passageiros, Empresas, Viagens) a tabela e a tela inteira, e a faixa escura
   e o que a ancora. Aqui ela e um pedaco de um cartao dentro de uma aba, e o
   Rafael viu na hora: *"esse bloco azul ainda ta diferente do padrao"*.

   Vira o mesmo rotulo miudo dos campos do formulario logo acima — versalete
   cinza sobre fundo claro. A tabela continua tabela: as colunas alinhadas sao
   o que deixa comparar dois valores de relance, e por isso ela nao virou lista
   de linhas soltas como no cadastro do passageiro. */
.sol-orcamentos .orc-tabela th{
  background:#f7fafb; color:#8595a8; font-size:10px; font-weight:700;
  letter-spacing:.05em; padding:7px 12px;
  border-bottom:1px solid #e3e8ee;
}
.sol-orcamentos .orc-tabela td{ padding:9px 12px; font-size:12.5px; }
.sol-orcamentos .orc-tabela tbody tr + tr td{ border-top:1px solid #eef2f4; }

/* O botao de gerar o PDF na escala do cartao — o `.btn-secundario` padrao tem
   12px 18px de respiro e ficava mais alto que a linha inteira da tabela. */
.sol-orcamentos .form-acoes .btn-secundario{ padding:7px 14px; font-size:12.5px; }

/* ══ LISTA COMPACTA (.pg-lista) ═════════════════════════════════════════════
   O irmao do `.pg-ficha`: mesma densidade, para as telas que mostram MUITOS
   registros em vez de um so. Nasceu em `painel.php` (Passageiros) e foi
   copiado para `empresas.php`; em 08/09/2026 os dois blocos eram identicos
   byte a byte, e vieram para ca. Qualquer uma das outras telas de lista pode
   adotar a classe agora — era o que a copia impedia; em 08/09 dez telas
   adotaram (Viagens, Vouchers, Agentes, Companhias, Condicoes de pagamento,
   Ajustes, Uso da IA, Grupos e Backup do WhatsApp, Importar contatos).

   O que ela faz: bordas finas, cantos discretos, densidade maior e ROTULO
   CLARO no lugar do cabecalho azul solido — o mesmo que o Rafael pediu para a
   tabela de orcamentos ("esse bloco azul ainda ta diferente do padrao"). A
   faixa azul continua valendo para quem nao adota a classe. */
.pg-lista .painel-header-row { margin-bottom:16px; }
.pg-lista .painel-header h2 { font-size:20px; }
.pg-lista .painel-header p { font-size:12.5px; margin-top:2px; }

.pg-lista .filtro-abas { gap:6px; margin-bottom:14px; }
.pg-lista .filtro-aba { border-radius:7px; padding:6px 11px; font-size:12px; border:1px solid #e3e8ee; }
.pg-lista .filtro-aba span { font-size:10.5px; }

.pg-lista .busca-form input, .pg-lista .busca-form select { border:1px solid #cfd8e1; border-radius:6px; padding:7px 10px; font-size:12.5px; }
.pg-lista .busca-form .btn-secundario { padding:7px 14px; font-size:12.5px; }

.pg-lista .tabela-lista { box-shadow:none; border:1px solid #e3e8ee; border-radius:10px; }
.pg-lista .tabela-lista th { background:#f8fafb; color:#8595a8; font-size:10.5px; letter-spacing:.3px; padding:10px 12px; border-bottom:1px solid #e3e8ee; }
.pg-lista .tabela-lista th.col-grupo { background:#f8fafb; }
.pg-lista .tabela-lista td { padding:9px 12px; font-size:12.5px; border-top:1px solid #eef1f5; }

/* Nas listas largas, so as colunas de IDENTIFICACAO quebram linha.

   A regra global `.tabela-lista td:first-child{width:100%}` faz a primeira
   coluna absorver a sobra — o que e certo, ela leva o nome. Mas num container
   de 1800px ela absorve muito, e as colunas seguintes caem para a largura
   minima do conteudo: "11 de mai de 2027" virou quatro linhas dentro de uma
   coluna de 30px assim que as listas ficaram largas (08/09/2026). Data,
   status e contagem sao valores curtos e nao devem quebrar; se a soma passar
   da largura, `.tabela-lista` ja rola sozinha. */
.pg-lista .tabela-lista td { white-space:nowrap; }
.pg-lista .tabela-lista td:first-child,
.pg-lista .tabela-lista td:nth-child(2) { white-space:normal; }
.pg-lista .tabela-lista td.col-grupo { background:rgba(0,60,88,.025); }
.pg-lista .tabela-lista tr.linha-divisor td { background:#f8fafb; font-size:10.5px; }
.pg-lista .lista-nome { font-size:13px; }
.pg-lista .lista-avatar, .pg-lista .lista-avatar-foto { width:30px; height:30px; font-size:11.5px; }

/* ── O conteudo DENTRO das abas (08/09/2026) ────────────────────────────────
   Rafael: *"dentro das viagens, as telas de passageiros, checklist, voos,
   documentos, roteiros e recomendacoes tambem precisam ir para o mesmo
   padrao"*.

   Cada painel abria com o cabecalho das telas antigas — h2 de 26px e paragrafo
   — e o conteudo num `.form-card` de 520px. Aqui dentro isso vira a mesma
   linguagem do resto da ficha: titulo miudo em versalete e cartao de largura
   total.

   Escopado a `.sol-aba-painel` de proposito: as MESMAS classes continuam
   valendo como sempre nas telas que nao sao ficha. */

/* O titulo da secao vira o titulo de bloco. */
.sol-aba-painel .painel-header{ margin-bottom:10px; }
.sol-aba-painel .painel-header h2{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--cereja); font-family:'Open Sans', sans-serif;
}
/* O paragrafo explicativo encolhe em vez de sumir: dentro da aba ele ainda diz
   o que a secao faz para quem chega nela pela primeira vez, mas nao pode custar
   uma linha inteira de 14px. */
.sol-aba-painel .painel-header p{ font-size:11.5px; margin-top:2px; color:#8b9aa3; }
.sol-aba-painel .painel-header-row{ margin-bottom:10px; align-items:center; }

/* O cartao de conteudo: largura toda e o respiro da ficha. O `max-width:520px`
   do `.form-card` existe porque em toda outra tela ele e um FORMULARIO
   centralizado; aqui ele e a area de uma aba. */
.sol-aba-painel .form-card{
  max-width:none; padding:13px 16px 15px; border-radius:10px;
  box-shadow:none; border:1px solid #e3e8ee;
}

/* As tabelas de dentro seguem a lista compacta — mesmo motivo da tabela de
   orcamentos: a faixa azul-marinho ancora uma tela inteira, nao um pedaco de
   aba. */
.sol-aba-painel .tabela-lista{ box-shadow:none; border:1px solid #e3e8ee; border-radius:10px; }
.sol-aba-painel .tabela-lista th{
  background:#f8fafb; color:#8595a8; font-size:10.5px; letter-spacing:.3px; padding:8px 12px;
}
.sol-aba-painel .tabela-lista td{ padding:9px 12px; font-size:12.5px; border-top:1px solid #eef1f5; }

/* Botoes de acao na escala do cartao. */
.sol-aba-painel .btn-secundario{ padding:7px 14px; font-size:12.5px; }
.sol-aba-painel .upload-btn{ padding:7px 14px; font-size:12.5px; }

/* Sub-titulo dentro do painel ("Companhia mudou o voo?", o titulo do roteiro).
   Herdava Poppins 800 do seletor global `h1,h2,h3` e ficava com mais peso que
   o titulo da propria secao logo acima — um degrau invertido. */
.sol-aba-painel .form-card h3,
.sol-aba-painel .viagem-card h3{
  font-family:'Open Sans', sans-serif; font-weight:700; font-size:12.5px;
  color:var(--texto);
}

/* O botao de acao dentro da aba (08/09/2026).

   Rafael: *"a aba de documentos, roteiros e recomendacoes ainda ta antiga"*. O
   que sobrava eram os botoes: "Gerar roteiro por IA", "+ Gerar voucher",
   "Adicionar recomendacao" sao `.btn-primary`, e `.btn-primary` e o botao do
   FORMULARIO DE LOGIN — `width:100%`, 14px de respiro, 15px de fonte. Numa
   tela cheia so dele isso e certo; dentro de um cartao denso ele vira um
   bloco vermelho que domina a aba.

   Aqui ele mantem a identidade (cereja, e a acao principal) e perde o tamanho.
   Nao vira `.btn-secundario`: a diferenca entre acao principal e secundaria
   continua valendo, so deixa de ser gritada. */
.sol-aba-painel .btn-primary{
  width:auto; margin-top:0; padding:8px 16px; font-size:13px; border-radius:8px;
}
.sol-aba-painel .btn-perigo{ padding:6px 11px; font-size:12px; }

/* O "nenhum X ainda" ocupava 20px acima e abaixo dentro de um cartao que tem
   13px de respiro proprio. */
.sol-aba-painel .vazio{ padding:6px 0; font-size:12.5px; }

/* A linha de anexar arquivo e as fichas de documento, na mesma escala. */
.sol-aba-painel .upload-form select{ padding:6px 9px; font-size:12.5px; }
.sol-aba-painel .doc-linha{ padding:6px 0; }
.sol-aba-painel .doc-chip{ padding:5px 7px 5px 11px; font-size:12px; }

/* O financeiro (09/09/2026) — nasceu como cartões `.fin-*` (hero azul, blocos
   coloridos) porque era assim em `viagem_financeiro.php`, sua tela própria.
   Virou `.pg-grid` no mesmo dia: *"temos que ter os campos como formulario"*,
   com `passageiro.php` de referência — não precisou de CSS novo aqui, só
   trocar o container. Só a LINHA de lançamento continua
   `.fin-item`/`.fin-tag`/`.fin-toggle`: isso nunca foi o problema, é
   detalhe, não container. */

/* ── Quadro rápido ─────────────────────────────────────────────────────────
   Anotação livre com colagem de imagem. Estas regras viviam num `<style>`
   dentro de `quadro_rapido.php` e vieram para cá em 08/09/2026, com o resto do
   CSS que ainda morava dentro de PHP. A `.qr-topo` sumiu no caminho: o topo da
   tela agora é o `.sol-topo` das outras fichas. */
.qr-status{font-size:12px; color:#8a99a0; margin-left:auto;}
.qr-status.ok{color:#1f8a4c;}
.qr-vinculo-atual{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:#1f8a4c;
                  background:#e3f6ea; border-radius:20px; padding:4px 10px 4px 12px;}
.qr-vinculo-atual button{border:none; background:transparent; color:#1f8a4c; cursor:pointer; font-size:13px; line-height:1;}
.qr-salvar-em{position:relative;}
.qr-salvar-em input{width:260px; padding:7px 10px; border:1px solid var(--cinza); border-radius:8px; font-size:13px;}
.qr-salvar-res{position:absolute; top:100%; left:0; right:0; margin-top:4px; background:#fff; border-radius:8px;
              box-shadow:0 8px 24px rgba(0,20,30,.18); max-height:280px; overflow-y:auto; z-index:20;}
.qr-salvar-item{display:flex; align-items:center; gap:8px; padding:8px 11px; cursor:pointer; font-size:13px; border-bottom:1px solid #f0f2f3;}
.qr-salvar-item:hover{background:#f5f8fa;}
.qr-salvar-item small{display:block; color:#8a99a0; font-size:11px;}
.qr-quadro{background:#fff; border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,40,60,.06); padding:20px 24px;
          min-height:60vh; font-size:14.5px; line-height:1.6; outline:none;}
.qr-quadro img{max-width:100%; border-radius:8px; margin:6px 0; display:block;
               resize:both; overflow:auto; min-width:60px; min-height:40px;}
.qr-quadro:empty:before{content:"Escreva aqui, cole imagens (Ctrl+V)... salva sozinho."; color:#98a3a8;}
.qr-acoes-rodape{margin-top:14px; display:flex; justify-content:space-between;}

/* O NUMERO do registro, colado ao nome numa lista (12/09/2026). Cinza e em
   fonte tabular: ele identifica, nao compete com o titulo, e as colunas de
   digitos ficam alinhadas entre as linhas. */
.lista-cod{color:#8a99a0; font-weight:700; font-variant-numeric:tabular-nums;}


/* ============================================================
   TELAS DE ATENDIMENTO AO CLIENTE (.atc-*)
   ------------------------------------------------------------
   Compartilhadas por DUAS telas desde 14/09/2026:
     public/admin/atendimento_cliente.php   — os blocos do atendimento
     public/admin/atendimento_conversa.php  — o historico de conversas

   O CSS morava dentro do <style> da primeira. Saiu de la quando a segunda
   nasceu, pela regra da casa desde 08/09: nenhum estilo dentro de um PHP, para
   poder ser reusado — foi exatamente o que aconteceu com `.pg-*` da ficha do
   passageiro, que nenhuma outra tela enxergava.

   Os tokens --atc-* sao os MESMOS da casca (atendimento_novo.php), que por sua
   vez saem do MIV aqui do style.css. Existem repetidos porque cada uma destas
   telas e um documento proprio dentro de um <iframe> e nao enxerga o :root da
   casca.
   ============================================================ */
/* Tokens: os MESMOS da casca (atendimento_novo.php), que por sua vez saem
   do MIV em style.css. Repetidos aqui porque esta página é um documento
   próprio dentro do <iframe> e não enxerga o :root de lá. */
:root{
  --atc-bg:var(--fundo-pagina, #eef2f4);
  --atc-panel:#fff;
  --atc-panel-alt:#f5f7f8;
  --atc-border:#e2e8ea;
  --atc-ink:var(--texto, #16323f);
  --atc-ink-soft:#5c6f79;
  --atc-ink-faint:#8a99a0;
  --atc-primary:var(--azul, #003c58);
  --atc-primary-2:var(--azul-2, #0a5b82);
  --atc-primary-soft:#eaf2f7;
  --atc-accent:var(--cereja, #b8203c);
  --atc-ok:#1f7a4d;
}
html body.atc-tela{background:var(--atc-bg); font-family:'Open Sans',sans-serif; font-size:13px; color:var(--atc-ink);}
/* ⚠️ `margin:0` fica SÓ no ramo embutido. Fora do workspace, quem afasta o
   conteúdo do menu lateral é `body.tem-lateral{margin-left:160px}` do
   style.css — e `html body.atc-tela` pesa mais que ele, então zerar a
   margem aqui em cima escondia a primeira coluna atrás da lateral. Achado
   na primeira captura desta tela, em 12/09/2026. */
/* Dentro do workspace o documento nunca rola: quem rola são os blocos e a
   conversa, cada um no seu quadro. 100vh (não 100%) pelo motivo já
   documentado no modo dock da Central: dentro do iframe não existe
   ancestral com altura definida, e 100% colapsa. */
html.wsp-embutido body.atc-tela{margin:0;}
html.wsp-embutido body.atc-tela, html.wsp-embutido body.atc-tela #tela-painel{height:100vh; overflow:hidden;}
/* `overflow-y:auto` (12/09/2026): os blocos e a conversa passaram a ter
   altura MÍNIMA propria — o Rafael disse que estava tudo espremido — e a
   soma delas pode nao caber num monitor baixo. Antes de rolar, porem, tudo
   cabe: num canvas de ~800px nao aparece barra nenhuma. Quem precisa de mais
   conversa ainda tem o ⤢, que esconde os blocos. */
.atc{display:flex; flex-direction:column; gap:7px; padding:7px 11px; box-sizing:border-box;
     height:100vh; min-height:0; overflow-y:auto;}
/* Uso solo (?solo=1, janela própria): a topbar ocupa o topo, então a altura
   fixa daria barra de rolagem no documento. Aqui ele rola mesmo. */
html:not(.wsp-embutido) .atc{height:auto; min-height:540px;}

/* ---------------- cabeçalho ---------------- */
.atc-topo{display:flex; align-items:center; gap:10px; flex:none; background:var(--atc-panel);
          border:1px solid var(--atc-border); border-radius:10px; padding:6px 13px;}
.atc-avatar{width:36px; height:36px; border-radius:50%; color:#fff; display:flex; align-items:center;
            justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;}
.atc-topo-txt{min-width:0; flex:1;}
.atc-topo-nome{font-family:'Poppins',sans-serif; font-weight:700; font-size:16.5px; line-height:1.2;
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.atc-topo-meta{display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin-top:2px;
               font-size:11.5px; color:var(--atc-ink-soft);}
.atc-topo-meta b{font-weight:700; color:var(--atc-ink);}
.atc-selo{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; padding:1px 7px;
          border-radius:20px; background:var(--atc-primary-soft); color:var(--atc-primary-2);}
.atc-selo.festa{background:#fff3d6; color:#8a6100;}
/* Campos pequenos do cabeçalho — nascimento e CPF (fila do uso #34). */
.atc-topo-dado{display:inline-flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums; color:var(--atc-ink);}
.atc-topo-dado small{font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--atc-ink-faint);}
/* Na Ficha completa o cabeçalho fica acima do bloco editável, com respiro. */
.pg-topo-pessoa{margin-bottom:10px;}
/* Cabeçalho EDITÁVEL (fila do uso #35): campos que parecem texto até receberem
   o mouse ou o foco — o Rafael corrige telefone e CPF o dia inteiro e não pode
   ficar procurando onde clicar, então a linha de baixo do campo fica sempre
   sugerida, e acende no foco. */
.atc-topo-edit{position:relative;}
/* Uma linha só embaixo do nome (fila do uso #35a): nada quebra; o que não
   couber (selos de empresa, no fim) fica cortado, não empurra a altura. */
.atc-topo-edit .atc-topo-meta{flex-wrap:nowrap; overflow:hidden; white-space:nowrap;}
.atc-topo-nome-linha{display:flex; align-items:baseline; gap:10px; min-width:0;}
.atc-topo-nome-linha .atc-topo-nome{flex:0 1 auto; max-width:100%; min-width:120px;}
/* Sexo no cabeçalho, só na Ficha completa (fila do uso #41). */
.atc-topo-sexo{margin-left:6px;}
.atc-topo-sexo select{height:20px; min-height:0; margin:0; padding:0 2px; font:inherit; font-size:11.5px; font-weight:700; color:var(--atc-ink);
                      border:0; border-bottom:1px dashed var(--atc-border); border-radius:0; background:transparent; box-shadow:none; width:auto;}
.atc-topo-sexo select:focus{border-bottom:1px solid var(--atc-primary-2); outline:0; background:var(--atc-primary-soft);}
.atc-topo-edit .atc-topo-nome{display:block; width:100%; box-sizing:border-box; border:0; border-bottom:2px solid transparent;
                              background:transparent; padding:0; margin:0; height:auto; min-height:0; box-shadow:none; color:var(--atc-ink);}
.atc-topo-edit .atc-topo-nome:hover{border-bottom-color:var(--atc-border);}
.atc-topo-edit .atc-topo-nome:focus{border-bottom-color:var(--atc-primary-2); outline:0;}
.atc-topo-dado input{border:0; border-bottom:1px dashed var(--atc-border); background:transparent; font:inherit; font-size:11.5px;
                     font-weight:700; color:var(--atc-ink); padding:0 2px; margin:0; height:18px; min-height:0; width:12ch;
                     box-shadow:none; border-radius:0; font-variant-numeric:tabular-nums;}
.atc-topo-dado input[data-campo="telefone"]{width:21ch;} /* "+55 (51) 99684-0014" cortava em 17 (fila do uso #37) */
.atc-topo-dado input[type="date"]{width:12.5ch;}
/* O campo de data vira texto + botão de calendário (campo-data.js), e a
   moldura nascia com 100% de largura: o calendário ia parar longe da data
   (fila do uso #39). Aqui a moldura tem a largura do conteúdo. */
.atc-topo-dado .campo-data-moldura{width:auto; display:inline-flex; align-items:center;}
.atc-topo-dado .campo-data-moldura .campo-data-br{width:15ch; padding-right:22px;} /* "16/11/1981" inteiro + o botão */
.atc-topo-dado .campo-data-botao{right:0; padding:1px;}
.atc-topo-dado .campo-data-botao svg{width:14px; height:14px;}
.atc-topo-dado input[data-campo="cpf_cnpj"]{width:19ch;}
.atc-topo-dado input:hover{border-bottom-style:solid;}
.atc-topo-dado input:focus{border-bottom:1px solid var(--atc-primary-2); outline:0; background:var(--atc-primary-soft);}
.atc-topo .pg-card-status{position:absolute; right:12px; top:6px; font-size:10.5px; color:var(--atc-ink-faint);}
/* Contato novo: o cabeçalho é o formulário de cadastrar. */
.atc-topo-form{align-items:flex-start;}
.atc-topo-form-campos{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr) auto; gap:8px; align-items:end;}
.atc-topo-form .atc-cadastrar{margin-top:0; padding-bottom:1px;}
@media (max-width:900px){ .atc-topo-form-campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.atc-selo.alerta{background:#fbe3e7; color:var(--atc-accent);}
.atc-topo-acoes{display:flex; gap:6px; flex:none; align-items:center;}
/* Mesclar e Excluir no cabeçalho da Ficha completa (fila do uso #41):
   compactos — os botões da casa nascem altos demais para uma linha de 53px. */
.atc-topo-acoes .btn-secundario, .atc-topo-acoes .btn-perigo{padding:4px 10px; font-size:11.5px; height:auto; min-height:0; line-height:1.3; margin:0; border-radius:7px;}
.atc-topo-acoes form{margin:0; display:inline;}
.atc-btn{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:6px 11px;
         border-radius:7px; border:1px solid var(--atc-border); background:var(--atc-panel-alt);
         color:var(--atc-ink-soft); text-decoration:none; cursor:pointer; white-space:nowrap;}
.atc-btn:hover{background:var(--atc-primary-soft); border-color:var(--atc-primary-2); color:var(--atc-primary-2);}
.atc-btn.destaque{background:var(--atc-primary); border-color:var(--atc-primary); color:#fff;}
.atc-btn.destaque:hover{background:var(--atc-primary-2); color:#fff;}

/* ---------------- grade de blocos ----------------
   `auto-fit` com piso de 265px: no canvas largo do workspace os quatro
   blocos ficam lado a lado; abaixo disso quebram sozinhos, sem media query.
   `minmax(0,1fr)` (e não `1fr`) porque toda trilha aqui recebe texto longo
   — a armadilha já registrada em docs/dull_workspaces.md. */
/* `flex:0 1 auto` + teto de 55%: os blocos ficam do tamanho do CONTEÚDO e a
   sobra vai toda para a conversa, que é o que se lê o dia inteiro. O teto
   impede que um cliente com dez viagens empurre a conversa para fora da
   tela; passando dele, o bloco rola por dentro. */
/* `flex:0 0 auto` — sem encolher. Com `0 1 auto` os blocos cediam altura
   para a conversa sempre que o conteúdo dela era alto (a grade de anexos,
   por exemplo): o cadastro virava uma faixa de 110px com barra de rolagem
   própria, e o agente perdia de vista o que a tela existe para mostrar.

   A FAIXA de altura veio do Rafael em 12/09: *"os três blocos iniciais têm
   que ter uma altura um pouco maior já... anotações precisará aumentar
   também"*. O piso de 320px garante respiro mesmo num cliente sem nada
   cadastrado — antes eles encolhiam para ~250px e ficavam espremidos.

   ⚠️ O teto é PROPORCIONAL (42%), e não um número fixo, porque os dois lados
   cresceram no mesmo pedido: com 340px fixos aqui e 430 na conversa a soma
   passava da tela num monitor de 800px e aparecia barra de rolagem na tela
   inteira — rolar a página para ver uma conversa que já rola por dentro é
   pior do que os dois um pouco menores. Assim, quem tem tela alta ganha os
   dois maiores sozinho. */
/* DOIS por fileira, sempre — `minmax(0,1fr)` e não `1fr` porque toda trilha
   aqui recebe texto longo (a armadilha já registrada em dull_workspaces.md).
   `auto-fit` não serve: num canvas de 1.300px ele caberia TRÊS colunas, e a
   fileira deixaria de ser a que o Rafael desenhou. */
.atc-blocos{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:9px;
            flex:0 0 auto; min-height:0; align-items:stretch;}
@media (max-width:720px){ .atc-blocos{grid-template-columns:minmax(0, 1fr);} }
/* Cada fileira com o piso do que ela precisa e teto proporcional, pelo mesmo
   motivo de antes: números cravados nos dois lados estouram um monitor de
   800px e a tela inteira ganha barra de rolagem. */
/* Os tetos somados com o piso da conversa TÊM de caber em 800px, que é o
   canvas de um monitor comum: 26% + 24% + 280px + 107px de cabeçalho, gaps e
   respiro = 787px. Medido com um cliente de duas solicitações e a fileira 2
   cheia — com 28%/26% passava 15px e a tela inteira ganhava barra. */
/* ⚠️ A fileira 2 cede altura ANTES da 1, de propósito. A 1 é formulário
   (cadastro) e quadro de anotação: rolar por dentro deles incomoda. A 2 é
   LISTA, e lista rolar por dentro é o normal — a de solicitações já rola
   quando o cliente tem duas ou mais. Por isso o teto dela é mais baixo. */
/* ⚠️ A 1a FILEIRA TEM ALTURA FIXA; a 2a cresce PARA BAIXO. Regra do Rafael em
   14/09/2026, vendo o defeito ao vivo:

     *"cadastro e anotacoes ficam fixo em seus tamanhos em tela... e os quadros
     de solicitacoes e viagens devem ser expandidos quando tiver mais
     informacoes em tela, apenas para baixo"*

   Antes as duas eram `flex:1 1 auto` e dividiam a tela: um cliente com mais
   solicitacoes fazia a fileira de baixo crescer ROUBANDO altura do cadastro e
   das anotacoes — a tela mudava de forma conforme quem estava aberto, e o
   agente perdia a referencia de onde as coisas ficam.

   Por isso a de baixo tambem nao rola por dentro (`overflow:visible` no corpo
   dos blocos dela): quem rola e a PAGINA. Rolar por dentro de um bloco que
   podia simplesmente crescer esconde conteudo sem motivo. */
/* Fila do uso #36 (18/09/2026): Solicitações | Viagens sobem para a 1a
   fileira (`.atc-fila2` continua sendo o nome dela — é a grade de dois
   blocos) e as ANOTAÇÕES ficam embaixo, com a página toda e toda a sobra
   de altura: é a área de trabalho da tela, o que o Rafael pediu — *"o bloco
   de anotações vai ficar abaixo ocupando toda a página com esse espaço
   maior"*. Piso de 360px para o editor e a lista terem corpo mesmo num
   cliente com muitas viagens; passando disso, quem rola é a página. */
.atc-anotacoes{flex:1 1 auto; min-height:360px; display:flex; flex-direction:column;}
.atc-anotacoes > .atc-bloco-corpo{display:flex; flex-direction:column; min-height:0; overflow:visible; padding-bottom:0;}
.atc-anotacoes .an{flex:1; min-height:0;}
.atc-fila2{flex:0 0 auto; min-height:200px;}
.atc-fila-novo{flex:0 0 auto; grid-template-columns:minmax(0, 1fr);}
.atc-item-anot{font-size:10.5px; color:var(--atc-ink-faint); margin-top:2px;}
.atc-fila2 .atc-bloco-corpo{overflow:visible;}
/* Com a conversa recolhida não há disputa: os blocos ficam com tudo. */
.atc-bloco{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--atc-panel);
           border:1px solid var(--atc-border); border-radius:10px; overflow:hidden;}
.atc-bloco-topo{display:flex; align-items:center; gap:7px; padding:8px 11px 6px; flex:none;}
.atc-bloco-topo h3{margin:0; font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:700;
                   letter-spacing:.07em; text-transform:uppercase; color:var(--atc-ink-faint);}
.atc-bloco-n{font-size:10px; font-weight:700; background:var(--atc-primary-soft); color:var(--atc-primary-2);
             border-radius:20px; padding:1px 7px;}
.atc-bloco-hint{font-size:10px; color:var(--atc-ink-faint); cursor:help;}
.atc-bloco-topo .atc-bloco-acao{margin-left:auto; font-size:11px; font-weight:700; color:var(--atc-primary-2);
                                text-decoration:none; white-space:nowrap;}
.atc-bloco-topo .atc-bloco-acao:hover{text-decoration:underline;}
.atc-bloco-corpo{flex:1; min-height:0; overflow-y:auto; padding:0 11px 10px;}
.atc-vazio{font-size:12px; color:var(--atc-ink-faint); padding:10px 0;}

/* ---------------- bloco de cadastro ---------------- */
.atc-campos{display:flex; flex-direction:column; gap:7px;}
.atc-campo label{display:block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                 color:var(--atc-ink-faint); margin-bottom:2px;}
/* Altura e padding explícitos: o style.css tem regra global de formulário
   (input alto, margem embaixo) que deixaria o bloco com o dobro do tamanho. */
.atc-campo input{width:100%; box-sizing:border-box; height:29px; margin:0; padding:0 8px; font:inherit;
                 font-size:12.5px; border:1px solid var(--atc-border); border-radius:6px; background:var(--atc-panel-alt);
                 color:var(--atc-ink); box-shadow:none;}
.atc-campo input:focus{background:#fff; border-color:var(--atc-primary-2); outline:0;}
.atc-campo-dupla{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px;}
.atc-campo-tripla{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr); gap:7px;}
@media (max-width:900px){ .atc-campo-tripla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.atc-campo-nota{font-size:10.5px; color:var(--atc-ink-faint); margin-top:1px;}
.atc-passaporte{margin-top:9px; padding-top:8px; border-top:1px dashed var(--atc-border); font-size:11.5px;
                color:var(--atc-ink-soft);}
.atc-passaporte b{color:var(--atc-ink);}

/* ---------------- itens (solicitação / viagem) ---------------- */
.atc-item{border:1px solid var(--atc-border); border-radius:8px; padding:7px 8px; margin-bottom:7px; background:var(--atc-panel-alt);}
.atc-item:last-child{margin-bottom:0;}
.atc-item-topo{display:flex; align-items:baseline; gap:6px; min-width:0;}
.atc-item-cod{font-size:10.5px; font-weight:700; color:var(--atc-ink-faint); flex:none;}
.atc-item-titulo{font-size:12.5px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.atc-item-titulo a{color:var(--atc-ink); text-decoration:none;}
.atc-item-titulo a:hover{color:var(--atc-primary-2); text-decoration:underline;}
.atc-item-sub{font-size:11px; color:var(--atc-ink-soft); margin-top:1px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.atc-item-mover{display:flex; align-items:center; gap:5px; margin-top:6px;}
/* Mesmo tratamento do input: sem isto o <select> herda a altura de
   formulário do style.css e cada item do bloco fica com 70px de altura. */
.atc-item-mover select{flex:1; min-width:0; height:26px; margin:0; padding:0 6px; font:inherit; font-size:11.5px;
                       border:1px solid var(--atc-border); border-radius:6px; background:#fff; color:var(--atc-ink);
                       box-shadow:none;}
.atc-item-mover select:focus{border-color:var(--atc-primary-2); outline:0;}
.atc-item-eco{font-size:11px; font-weight:700; color:var(--atc-ok); opacity:0; transition:opacity .15s; flex:none;}
.atc-item-eco.visivel{opacity:1;}
.atc-item-eco.ruim{color:var(--atc-accent);}
.atc-item.saindo{opacity:.25; transition:opacity .3s;}
.atc-dica{font-size:10.5px; color:var(--atc-ink-faint); line-height:1.4; margin-top:8px;}
.atc-dica a{color:var(--atc-primary-2);}
.atc-historico{margin-top:8px;}
.atc-historico summary{font-size:11px; font-weight:700; color:var(--atc-ink-soft); cursor:pointer; padding:3px 0;}
.atc-historico[open] summary{margin-bottom:6px;}


/* ---------------- conversa ---------------- */
/* Fica com TODA a sobra, e sem barra de resposta por dentro (ver
   body.cvx-cliente em conversas.php): as mensagens ganharam de volta a
   altura da caixa de escrever, dos emojis e do aviso das 24h — cerca de
   90px de leitura a mais sem a caixa crescer um pixel. */
/* `.atc-conv-sozinha` e a variante da tela propria de historico: ela fica com
   tudo que sobra do cabecalho, sem piso — nao ha com quem disputar. */
.atc-conv-sozinha{min-height:0 !important;}
.atc-conv{display:flex; flex-direction:column; flex:1 1 auto; min-height:280px;
          background:var(--atc-panel); border:1px solid var(--atc-border); border-radius:10px; overflow:hidden;}
/* Cadastro sem telefone: a conversa nunca vai existir, entao o bloco dela
   encolhe para o aviso e a tela toda fica para os blocos. Com `flex:1` ele
   tomava dois tercos da tela para dizer uma frase. */
.atc-conv-barra{display:flex; align-items:center; gap:8px; flex:none; padding:7px 11px;
                border-bottom:1px solid var(--atc-border); background:var(--atc-panel-alt);}
.atc-conv-titulo{font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:700;}
.atc-conv-meta{font-size:11px; color:var(--atc-ink-soft); min-width:0; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap;}
.atc-conv-abas{display:flex; gap:4px; margin-left:auto; flex:none;}
.atc-conv-aba{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; border:1px solid transparent;
              background:none; color:var(--atc-ink-soft);}
.atc-conv-aba:hover{background:#fff;}
.atc-conv-aba.ativa{background:#fff; border-color:var(--atc-border); color:var(--atc-primary-2);}
.atc-conv-corpo{flex:1; min-height:0; position:relative;}
.atc-conv-corpo iframe{width:100%; height:100%; border:0; display:block;}
.atc-conv-painel[hidden]{display:none;}
.atc-conv-painel{height:100%; overflow-y:auto;}

/* ---------------- anexos ---------------- */
.atc-anexos-filtros{display:flex; gap:5px; padding:8px 11px 0;}
.atc-anexos-filtro{font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
                   border:1px solid var(--atc-border); background:#fff; color:var(--atc-ink-soft);}
.atc-anexos-filtro.ativa{background:var(--atc-primary); border-color:var(--atc-primary); color:#fff;}
.atc-anexos-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:7px; padding:9px 11px;}
.atc-anexo{display:block; border:1px solid var(--atc-border); border-radius:8px; overflow:hidden; background:var(--atc-panel-alt);
           text-decoration:none; color:var(--atc-ink);}
.atc-anexo:hover{border-color:var(--atc-primary-2);}
.atc-anexo img{width:100%; height:74px; object-fit:cover; display:block; background:#dfe6e9;}
.atc-anexo-icone{height:74px; display:flex; align-items:center; justify-content:center; font-size:26px;}
.atc-anexo-rot{display:block; padding:4px 6px 5px; font-size:10px; line-height:1.3; color:var(--atc-ink-soft);
               word-break:break-all; overflow:hidden;}
.atc-anexo-rot b{display:block; color:var(--atc-ink); font-size:10.5px;}
.atc-anexos-vazio{padding:16px 12px; font-size:12px; color:var(--atc-ink-faint);}

/* --- Cadastro de um contato NOVO, na tela de atendimento (14/09/2026) --- */
.atc-opcional{font-weight:400; text-transform:none; letter-spacing:0; color:#a8b3b9;}
.atc-cadastrar{display:flex; align-items:center; gap:10px; margin-top:12px;}
.atc-cadastrar-status{font-size:11.5px; color:var(--atc-ink-soft);}
.atc-cadastrar-status.ruim{color:var(--atc-accent); font-weight:700;}
/* "Já existe no cadastro?" enquanto se digita o nome (fila do uso #20). */
.atc-parecidos{margin-top:6px; border:1px solid #edd39c; background:#fffaf0; border-radius:8px; overflow:hidden;}
.atc-parecidos[hidden]{display:none;}
.atc-parecidos-cab{font-size:11px; font-weight:700; color:#7a5208; padding:6px 10px; border-bottom:1px solid #f1e2bf;}
.atc-parecido{display:flex; align-items:center; gap:10px; padding:6px 10px; border-top:1px solid #f5ead1;}
.atc-parecido:first-of-type{border-top:0;}
.atc-parecido-txt{flex:1; min-width:0; display:flex; flex-direction:column; font-size:12.5px; color:var(--atc-ink);}
.atc-parecido-txt small{font-size:11px; color:var(--atc-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.atc-parecido .atc-btn{flex:none; font-size:11.5px; padding:4px 10px;}
.atc-depois{margin:0; padding:0 0 0 18px; font-size:12.5px; line-height:1.75; color:var(--atc-ink-soft);}
.atc-depois b{color:var(--atc-ink);}
/* Contato sem cadastro: a fileira fica do tamanho do CONTEUDO, e nao esticada
   ate o rodape. Com `flex:1` os dois blocos viravam caixas de 700px para 250 de
   conteudo — espaco vazio DENTRO da moldura parece tela quebrada, enquanto
   espaco vazio ABAIXO dela parece o que e: uma tela com pouca coisa ainda. */
.atc--novo .atc-blocos{flex:0 0 auto;}

/* --- Documento da viagem: mostrar ou ocultar no portal do cliente (14/09) ---
   Um controle so, que DIZ o estado e o troca ao clicar. Dois (um selo e um
   botao separado) obrigariam a ler os dois para saber o que esta valendo. */
.doc-portal{border:1px solid #dde5e9; background:#f4f7f8; color:#7b8a93; border-radius:20px;
        padding:2px 10px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;}
.doc-portal:hover{border-color:var(--azul-2, #0a5b82); color:var(--azul-2, #0a5b82);}
.doc-portal.on{background:#e3f6ea; border-color:#bfe6cd; color:#1f7a4d;}
.doc-portal:disabled{opacity:.5; cursor:wait;}
/* `label.doc-portal-check`, e nao so a classe: quem impoe MAIUSCULAS aqui e
   `.pg-grid label` (0,1,1), e uma classe sozinha (0,1,0) perde. Medido pedindo
   ao navegador quais regras batem no elemento — chutar especificidade e o
   caminho mais curto para a terceira tentativa. 'MOSTRAR AO CLIENTE' gritava
   mais que o proprio botao de anexar. */
label.doc-portal-check{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#5c6f79;
        white-space:nowrap; text-transform:none; font-weight:400; letter-spacing:0; margin:0;}
.doc-portal-check input{width:14px; height:14px; margin:0;}



/* ANEXAR VÁRIOS DOCUMENTOS DE UMA VEZ (16/09/2026, fila do uso #01) — ver o
   formulário em admin/viagem.php e o comportamento no fim de documentos.js.
   Os seletores levam `.pg-grid` na frente de propósito: a ficha põe MAIÚSCULAS
   em todo label e 100% de largura em todo input/select (`.pg-grid label`,
   `.pg-grid input`, 0,1,1), e uma classe solta perderia para as duas. */
.upload-form.doc-multi{align-items:center;}
.pg-grid label.doc-multi-escolher{display:inline-flex; align-items:center; margin:0; text-transform:none;
        letter-spacing:0; font-size:12.5px; color:var(--cinza-escuro);}
.doc-multi-dica{font-size:11.5px; color:#8595a8;}
.doc-multi-painel{flex:1 0 100%; margin-top:6px; border:1px solid #e3e8ee; border-radius:9px; background:#fafbfc;
        padding:8px 10px;}
.doc-multi-painel[hidden]{display:none;}
.doc-multi-todos{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#5c6f79;
        padding-bottom:7px; margin-bottom:4px; border-bottom:1px dashed #e3e8ee;}
.pg-grid .doc-multi-todos select{width:auto; min-width:170px;}
.doc-multi-linhas{display:flex; flex-direction:column;}
.doc-multi-linha{display:grid; grid-template-columns:minmax(150px,1.3fr) 180px minmax(140px,1fr) auto 24px;
        align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #eef1f5;}
.doc-multi-linha:last-child{border-bottom:0;}
.doc-multi-nome{min-width:0; font-size:12.5px; font-weight:600; color:var(--azul); overflow:hidden;
        text-overflow:ellipsis; white-space:nowrap;}
.doc-multi-nome small{display:block; font-weight:400; font-size:10.5px; color:#8595a8;}
.pg-grid .doc-multi-linha select, .pg-grid .doc-multi-linha input[type="text"]{width:100%; min-width:0; font-size:12.5px;}
.pg-grid .doc-multi-linha select.falta{border-color:var(--cereja); background:#fff7f8;}
.doc-multi-linha.com-problema .doc-multi-nome small{color:var(--cereja); font-weight:700;}
.doc-multi-linha.com-problema{background:#fff7f8;}
.doc-multi-tirar{width:24px; height:24px; border:0; border-radius:6px; background:none; color:#8595a8; cursor:pointer;
        font-size:12px; padding:0;}
.doc-multi-tirar:hover{background:#fbe3e7; color:var(--cereja);}
.doc-multi-acoes{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:8px;}
.doc-multi-aviso{font-size:11.5px; color:var(--cereja); font-weight:600;}
.doc-multi-enviar:disabled{opacity:.55; cursor:not-allowed;}
@media (max-width:760px){
  .doc-multi-linha{grid-template-columns:1fr 24px;}
  .doc-multi-linha > :not(.doc-multi-nome):not(.doc-multi-tirar){grid-column:1 / -1;}
}

/* PÁGINA NA JANELA FLUTUANTE (16/09/2026, fila do uso #02) — o voucher para
   impressão é uma folha A4 com barra de ferramentas; os 920px do visualizador
   de documento cortavam a folha e obrigavam rolagem lateral. */
.modal-overlay.pagina{padding:14px;}
.modal-overlay.pagina .modal-conteudo{max-width:1180px; height:calc(100vh - 28px);}

/* QUEM PEDE × QUEM VIAJA (16/09/2026, fila do uso #04) — o "quem está pedindo"
   e o "quem vai viajar" ao lado do rótulo. `.form-bloco label` impõe
   MAIÚSCULAS no rótulo inteiro; a dica é texto de apoio e não deve gritar. */
#quem-pediu label .qp-dica{text-transform:none; letter-spacing:0; font-weight:400; color:#8595a8; margin-left:4px;}
#quem-pediu .qp-sem-cadastro{display:block; margin:-2px 0 8px;}

/* KANBAN SEM BARRA DE ROLAGEM (16/09/2026, fila do uso #05) — o quadro anda com
   o mouse, ver assets/js/kanban-rolagem.js. A barra some, mas a rolagem continua
   existindo: touchpad e Shift+roda do mouse seguem funcionando. A classe só entra
   pelo JS e só com mouse de verdade — sem JS, ou em tela de toque, a barra fica. */
.kanban.kanban-sem-barra{scrollbar-width:none;}
.kanban.kanban-sem-barra::-webkit-scrollbar{display:none;}
/* As colunas também (17/09): a lista anda pelo alto e pelo pé da coluna. */
.kanban.kanban-sem-barra .kanban-coluna-corpo{scrollbar-width:none;}
.kanban.kanban-sem-barra .kanban-coluna-corpo::-webkit-scrollbar{display:none;}
/* E a página: o JS mede a altura para as colunas terminarem acima do rodapé
   fixo, e o quadro inteiro cabe na janela. O que ainda "rolava" (58 px medidos
   em 17/09) era espaço vazio — a altura mínima da tela somada à reserva do
   rodapé —, então a página deixa de rolar nestas duas telas. A classe só entra
   pelo JS, com mouse, fora do modo 'barra'. */
html.kanban-pagina-sem-barra, html.kanban-pagina-sem-barra body{overflow-y:hidden; scrollbar-width:none;}
html.kanban-pagina-sem-barra::-webkit-scrollbar, html.kanban-pagina-sem-barra body::-webkit-scrollbar{display:none;}

/* ============================================================
   ANOTAÇÕES DO CLIENTE (includes/anotacoes_bloco.php + js/anotacoes.js)
   ------------------------------------------------------------
   Fila do uso #36 (18/09/2026). Uma anotação ABERTA à esquerda, sempre
   gravando; as ANTERIORES à direita, como referência para abrir e buscar.
   O mesmo bloco em quatro telas — Atendimento, Ficha completa, coluna da
   Central (`.an-compacto`) e tela cheia —, por isso o CSS vive aqui.

   Substitui o editor de quadro (`.qd-*`) e a lista de quadros citados
   (`.ql-*`), removidos no mesmo dia.
   ============================================================ */
.an{display:grid; grid-template-columns:minmax(0,1fr) 320px; min-height:0; min-width:0;
    border-top:1px solid #e2e8ea;}
@media (max-width:900px){ .an{grid-template-columns:minmax(0,1fr);} }

/* --- a anotação aberta --- */
.an-editor{min-width:0; min-height:0; padding:10px 11px 12px 0; display:flex; flex-direction:column;
           border-right:1px solid #e2e8ea;}
@media (max-width:900px){ .an-editor{border-right:0; border-bottom:1px solid #e2e8ea; padding-right:0;} }
.an-aberta{flex:1; min-height:0; display:flex; flex-direction:column; gap:7px; padding:10px 12px;
           background:#fffbea; border:1.5px solid #f1e3a6; border-radius:9px;}
.an-soltando .an-aberta{border-color:var(--azul-2, #0a5b82); background:#f1f8fc;}
.an-aberta-topo{display:flex; align-items:center; gap:10px; min-height:18px; flex-wrap:wrap;}
.an-quando{font-size:11px; font-weight:700; letter-spacing:.03em; color:#5c6f79;}
.an-voltar{border:0; background:none; padding:0; font-size:11px; font-weight:700; color:var(--azul-2, #0a5b82); cursor:pointer;}
.an-voltar:hover{text-decoration:underline;}
.an-voltar[hidden]{display:none;}
.an-status{margin-left:auto; font-size:11px; font-weight:600; color:#1f7a4d; text-align:right;}
.an-status.ruim{color:var(--cereja, #b8203c); font-weight:700;}
/* O título parece texto, não campo: é o nome da anotação, e nasce sozinho da
   primeira linha. `.atc-tela` e `.pg-grid` põem altura e margem em todo
   input — daí zerar tudo aqui. */
.an-titulo{display:block; width:100%; box-sizing:border-box; margin:0; padding:0 0 2px; height:auto; min-height:0;
           border:0; border-bottom:1px dashed transparent; border-radius:0; background:transparent; box-shadow:none;
           font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--texto, #1c2b33); outline:none;}
.an-titulo::placeholder{font-weight:600; color:#a9b4ba;}
.an-titulo:hover{border-bottom-color:#e0d6a8;}
.an-titulo:focus{border-bottom-color:var(--azul-2, #0a5b82);}

/* referências */
.an-refs{display:flex; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; position:relative;}
.an-refs-lista{display:contents;}
.an-ref{display:inline-flex; align-items:center; gap:4px; max-width:100%; font-size:11px; font-weight:700;
        background:#dfeaf1; color:#0a5b82; border-radius:20px; padding:2px 5px 2px 9px; white-space:nowrap;}
.an-ref a{color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis;}
.an-ref a:hover{text-decoration:underline;}
.an-ref small{font-weight:400; opacity:.75;}
.an-ref-morto{color:#8a99a0; font-style:italic;}
.an-ref-dono{background:transparent; border:1px dashed #cbd6dc; color:#5c6f79; padding-right:9px;}
.an-ref-x{border:0; background:none; color:inherit; opacity:.5; cursor:pointer; font-size:11px; line-height:1; padding:0 2px;}
.an-ref-x:hover{opacity:1; color:var(--cereja, #b8203c);}
.an-add{position:relative; display:inline-flex;}
.an-add-botao{border:0; background:none; padding:2px 4px; font-size:11.5px; font-weight:700; color:var(--azul-2, #0a5b82); cursor:pointer;}
.an-add-botao:hover{text-decoration:underline;}
.an-add-caixa{position:absolute; top:100%; left:0; z-index:40; margin-top:4px; width:300px; max-width:80vw;
              background:#fff; border:1px solid #e2e8ea; border-radius:9px; box-shadow:0 8px 24px rgba(0,20,30,.18); padding:7px;
              display:flex; flex-direction:column; gap:4px;}
.an-add-caixa[hidden]{display:none;}
.an-add-titulo{display:block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a99a0; padding:2px 7px;}
.an-add-lista{display:block; max-height:200px; overflow-y:auto;}
.an-add-busca{width:100%; box-sizing:border-box; height:28px; min-height:0; margin:0; padding:0 8px; font:inherit; font-size:12px;
              border:1px solid #e2e8ea; border-radius:6px; box-shadow:none;}
.an-add-res{display:block; max-height:200px; overflow-y:auto;}
.an-add-item{display:block; width:100%; text-align:left; border:0; background:none; padding:5px 7px; border-radius:6px; cursor:pointer; font:inherit;}
.an-add-item:hover{background:#eaf2f7;}
.an-add-item b{display:block; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-add-item small{display:block; font-size:10.5px; color:#8a99a0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-add-vazio{display:block; padding:6px 7px; font-size:11.5px; color:#8a99a0;}

/* o texto */
.an-corpo{flex:1; min-height:150px; overflow-y:auto; padding:2px 0; font-size:13.5px; line-height:1.55; outline:none; color:var(--texto, #1c2b33);}
.an-corpo:empty:before,
.an-corpo:has(> br:only-child):before{content:attr(data-placeholder); color:#a9b4ba; pointer-events:none;}
.an-corpo p{margin:0 0 6px;}
.an-corpo img{max-width:min(100%, 460px); border-radius:8px; margin:6px 0; display:block; box-shadow:0 1px 6px rgba(0,30,45,.16); cursor:zoom-in;}
/* Prévia de link colado: título do site em cima, domínio e hora embaixo. */
.an-link{display:flex; flex-direction:column; gap:1px; max-width:560px; margin:4px 0 6px; padding:6px 10px;
         background:#fff; border:1px solid #e2e8ea; border-radius:7px; text-decoration:none; color:inherit; cursor:pointer;}
.an-link:hover{border-color:var(--azul-2, #0a5b82);}
.an-link b{font-size:12.5px; color:var(--azul-2, #0a5b82); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-link small{font-size:11px; color:#8a99a0;}
/* Anexo: um chip clicável, nunca um <img> quebrado. */
.an-arq{display:inline-flex; align-items:center; gap:5px; max-width:100%; margin:3px 4px 3px 0; padding:3px 10px;
        background:#fff; border:1px solid #dde5e9; border-radius:20px; font-size:12px; font-weight:600;
        color:#16323f; text-decoration:none; vertical-align:middle; cursor:pointer;}
.an-arq:hover{border-color:var(--azul-2, #0a5b82); color:var(--azul-2, #0a5b82);}

/* rodapé */
.an-rodape{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:7px; border-top:1px dashed #f1e3a6;}
.an-anexar, .an-excluir{border:0; background:none; padding:0; font-size:11.5px; font-weight:700; color:var(--azul-2, #0a5b82); cursor:pointer;}
.an-anexar:hover, .an-excluir:hover{text-decoration:underline;}
.an-excluir{color:#8a99a0; margin-left:auto;}
.an-excluir:hover{color:var(--cereja, #b8203c);}
.an-excluir[hidden]{display:none;}
.an-dica{font-size:11px; color:#a9b4ba;}
.an-nova{border:0; background:var(--azul, #003c58); color:#fff; border-radius:7px; padding:6px 13px; font-size:12.5px; font-weight:700; cursor:pointer;}
.an-nova:hover{background:var(--azul-2, #0a5b82);}
.an-excluir[hidden] + .an-nova{margin-left:auto;}

/* --- as anteriores --- */
.an-lista{min-width:0; min-height:0; padding:10px 0 12px 11px; display:flex; flex-direction:column; gap:6px;}
@media (max-width:900px){ .an-lista{padding-left:0;} }
.an-busca{width:100%; box-sizing:border-box; height:30px; min-height:0; margin:0; padding:0 10px; font:inherit; font-size:12.5px;
          border:1.5px solid #e2e8ea; border-radius:8px; background:#f5f7f8; box-shadow:none;}
.an-busca:focus{background:#fff; border-color:var(--azul-2, #0a5b82); outline:0;}
.an-lista-topo{display:flex; align-items:baseline; gap:8px; margin-top:2px;}
.an-lista-titulo{font-family:'Poppins',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8a99a0;}
.an-lista-todas{margin-left:auto; font-size:11px; font-weight:700; color:var(--azul-2, #0a5b82); text-decoration:none;}
.an-lista-todas:hover{text-decoration:underline;}
.an-itens{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px;}
.an-item{border:1px solid #e2e8ea; border-radius:8px; padding:7px 9px; background:#f5f7f8; cursor:pointer; display:grid; gap:2px; min-width:0;}
.an-item:hover, .an-item:focus{border-color:var(--azul-2, #0a5b82); outline:0;}
.an-item-atual{border-color:#f1e3a6; background:#fffbea;}
.an-item-antiga{opacity:.8;}
.an-item-q{font-size:10.5px; color:#8a99a0; display:flex; gap:6px; font-variant-numeric:tabular-nums; min-width:0;}
.an-item-q b{color:#5c6f79; white-space:nowrap;}
.an-item-q > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-item-icones{margin-left:auto; letter-spacing:.1em; flex:none;}
.an-item-cliente{font-size:11px; font-weight:700; color:#5c6f79; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-item-t{font-weight:600; font-size:12.5px; color:var(--texto, #1c2b33); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-item-p{font-size:11.5px; color:#5c6f79; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.an-item-r{display:flex; gap:4px; flex-wrap:wrap; margin-top:1px;}
.an-chip{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; background:#eef3f6; color:#5c6f79;
         border-radius:999px; padding:1px 7px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.an-vazio{font-size:12px; color:#8a99a0; padding:8px 2px;}

/* --- variante estreita (coluna da Central, ~260px) --- */
.an-compacto{grid-template-columns:minmax(0,1fr); border-top:0;}
.an-compacto .an-editor{border-right:0; padding:0 0 8px;}
.an-compacto .an-aberta{padding:8px 9px; gap:5px;}
.an-compacto .an-corpo{min-height:90px; max-height:260px; font-size:12.5px;}
.an-compacto .an-corpo img{max-width:100%;}
.an-compacto .an-titulo{font-size:13px;}
.an-compacto .an-dica{display:none;}
.an-compacto .an-nova{padding:4px 9px; font-size:11.5px;}
.an-compacto .an-add-caixa{width:240px;}
.an-compacto .an-lista{padding:8px 0 0; border-top:1px dashed #e2e8ea;}
.an-compacto .an-itens{max-height:300px;}

/* --- na Ficha completa (aba Anotações) --- */
.pg-aba-painel .an{min-height:420px; border-top:0;}

/* --- as que CITAM um registro (includes/anotacoes_lista.php) --- */
.an-citam{display:flex; flex-direction:column; gap:10px;}
.an-cita{display:grid; grid-template-columns:150px minmax(0,1fr); gap:4px 14px; background:#fff; border:1px solid #e2e8ea; border-radius:10px; padding:10px 14px;}
@media (max-width:700px){ .an-cita{grid-template-columns:minmax(0,1fr);} }
.an-cita-q{display:flex; flex-direction:column; font-size:11px; color:#8a99a0; line-height:1.4; font-variant-numeric:tabular-nums;}
.an-cita-q b{color:#5c6f79; font-size:12px;}
.an-cita-vinc{font-size:10.5px;}
.an-cita-corpo{min-width:0; display:grid; gap:3px;}
.an-cita-t{font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--azul, #003c58);}
.an-cita-p{font-size:13px; color:#5c6f79;}
.an-cita-r{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px;}
.an-cita-abrir{margin-left:auto; font-size:12px; font-weight:700; color:var(--azul-2, #0a5b82); text-decoration:none; white-space:nowrap;}
.an-cita-abrir:hover{text-decoration:underline;}
.an-cita-nova{display:inline-block; align-self:flex-start; border:1.5px dashed var(--cinza, #e3e3e3); border-radius:10px; padding:9px 16px;
              font-size:13px; font-weight:700; color:var(--azul-2, #0a5b82); text-decoration:none;}
.an-cita-nova:hover{background:rgba(10,91,130,.05);}

/* --- Ficha completa: aba Principal unificada (fila do uso #41, 18/09/2026) ---
   Contato, documentos, acesso, endereço, tags e empresas numa aba só, como
   o Rafael desenhou. Cada bloco continua um `.pg-card-editavel` próprio
   (o "Salvo" aparece no bloco certo). */
.pg-secao{margin-top:10px; padding-top:10px; border-top:1px dashed #e3e8ee;}
.pg-secao:first-child{margin-top:0; padding-top:0; border-top:0;}
.pg-secao-endereco{margin:12px 0 4px; padding:10px 12px 12px; border:1px solid #e3e8ee; border-radius:10px; background:#fbfcfd; position:relative;}
.pg-secao-endereco > .pg-secao-rotulo{position:absolute; top:-8px; left:12px; background:#fff; padding:0 6px; font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#8595a8;}
.pg-carimbo{text-align:right; font-size:10.5px; color:#8595a8; margin-top:10px;}
/* Aba WhatsApp da ficha: o histórico inteiro, em iframe, mais a importação. */
.pg-whats-topo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-size:12.5px;}
.pg-whats-iframe{width:100%; height:560px; border:1px solid #e3e8ee; border-radius:8px; background:#fff;}
/* Contato: quatro campos estreitos e os dois "aceita comunicação" no fim da
   mesma linha (fila do uso #41a). Documentos: os dez campos numa linha só —
   texto curto (CPF, RG, estado civil, passaporte, visto) mais estreito que
   as datas, que precisam de "dd/mm/aaaa" mais o botão do calendário. */
.pg-grid-contato{grid-template-columns:repeat(4, minmax(0, 1fr)) auto; align-items:end;}
.pg-grid-contato .pg-aceita-canto{margin:0 0 5px 8px; gap:8px;}
.pg-grid-docs{grid-template-columns:1fr .85fr .9fr .95fr .9fr 1.1fr 1.1fr .7fr 1.1fr 1.1fr;}
.pg-grid-docs label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* As datas dos documentos: "dd/mm/aaaa" inteiro com o calendário colado, sem
   os 38px de folga do campo largo. */
.pg-grid-docs .campo-data-moldura .campo-data-br{padding-right:26px; font-size:12.5px; letter-spacing:0;}
.pg-grid-docs .campo-data-botao{right:3px; padding:2px;}
.pg-grid-docs .campo-data-botao svg{width:15px; height:15px;}
/* Endereço: os oito campos numa linha — a rua larga, número e UF estreitos. */
.pg-secao-endereco .pg-grid{grid-template-columns:.9fr .8fr 2.4fr .7fr 1fr 1fr 1fr .5fr;}
@media (max-width:1100px){
  .pg-grid-contato{grid-template-columns:repeat(2, minmax(0, 1fr)) auto;}
  .pg-grid-docs{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));}
  .pg-secao-endereco .pg-grid{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));}
}

/* ---- Consulta de CPF (cpf_consultar.php, fila do uso #47) ---- */
.cpfc .painel-header{flex:1 1 520px; max-width:900px;}
.cpfc-cota{font-size:13px; color:var(--cinza-escuro); background:#fff; border:1px solid var(--cinza); border-radius:9px; padding:8px 12px; white-space:nowrap;}
.cpfc-cota b{color:var(--azul); font-size:16px;}
.cpfc-form{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.cpfc-form label{font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#8595a8; font-weight:700;}
.cpfc-form input{width:17ch; padding:9px 11px; border:1px solid #cfd8e1; border-radius:8px; font:15px 'Open Sans',sans-serif; letter-spacing:.5px;}
.cpfc-form .cpfc-btn{width:auto; margin:0; padding:10px 18px; font-size:14px;}
.cpfc-origem{font-size:12.5px; color:var(--cinza-escuro);}
.cpfc-vazio{font-size:13.5px; color:var(--cinza-escuro); margin:0 0 18px;}
.cpfc-resultado{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px;}
.cpfc-lado{background:#fff; border:1px solid var(--cinza); border-radius:var(--radius); padding:14px 16px; min-width:0;}
.cpfc-lado.erro{border-color:rgba(231,52,82,.35);}
.cpfc-lado-titulo{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cinza-escuro); margin-bottom:10px;}
.cpfc-lado-titulo small{font-weight:400; text-transform:none; letter-spacing:0; font-size:12px;}
.cpfc-campo{margin-bottom:8px; min-width:0;}
.cpfc-campo small{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; color:#8595a8; margin-bottom:2px;}
.cpfc-campo b{font-size:14px; color:#1f2d3d; overflow-wrap:anywhere;}
.cpfc-campo b.cpfc-nome{font-family:'Poppins',sans-serif; font-size:17px; color:var(--azul);}
.cpfc-campo b a{color:inherit;}
.cpfc-linha{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px;}
.cpfc-selo{display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px; text-transform:none; letter-spacing:0; margin-left:4px;}
.cpfc-selo.ok{background:rgba(0,60,88,.08); color:var(--azul);}
.cpfc-selo.dif{background:rgba(231,52,82,.1); color:var(--cereja);}
.cpfc-msg{font-size:13.5px; color:var(--cinza-escuro); margin:4px 0 8px; line-height:1.5;}
.cpfc-lado.erro .cpfc-msg{color:var(--cereja);}
.cpfc-dica{font-size:12.5px; color:var(--cereja); margin:6px 0 0; line-height:1.5;}
.cpfc-denovo{margin-top:6px;}
.cpfc-denovo .btn-secundario{padding:6px 12px; font-size:12.5px;}
.cpfc-receita{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--cinza-escuro); margin-bottom:26px; line-height:1.5;}
.cpfc-receita .btn-secundario{padding:9px 14px; font-size:13.5px;}
.cpfc-h3{font-size:15px; color:var(--azul); margin:0 0 10px;}
.cpfc-tabela td small{color:var(--cinza-escuro);}
.cpfc-erro-lista{color:var(--cereja); font-size:12.5px;}
.cpfc-sem{color:#b0bac6;}
.atc-cpf-consultar{text-decoration:none; font-size:11px; margin-left:2px;}
.pg-cpf-consultar{text-transform:none; letter-spacing:0; font-size:10.5px; margin-left:6px; text-decoration:none; color:var(--azul-2);}
.cpfc-resultado.tres{grid-template-columns:repeat(3, minmax(0,1fr));}
.cpfc-lado.cpfc-rec{border-color:rgba(0,60,88,.35);}
.cpfc-lado.cpfc-rec.erro{border-color:rgba(231,52,82,.35);}
.cpfc-situacao{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:rgba(0,60,88,.08); color:var(--azul); text-transform:uppercase; letter-spacing:.03em;}
.cpfc-situacao.irregular{background:rgba(231,52,82,.1); color:var(--cereja);}
.cpfc-ext{font-size:12.5px; color:var(--cinza-escuro); line-height:1.5; margin:-14px 0 26px;}
.cpfc-ext[hidden]{display:none;}
.cpfc-ext b.ok{color:#1b5e20;}
.cpfc-ext details{display:inline;}
.cpfc-ext summary{display:inline; cursor:pointer; color:var(--azul-2); font-weight:700;}
.cpfc-atalho{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.cpfc-atalho-btn{display:inline-block; flex:none; padding:7px 12px; border:1.5px dashed var(--azul-2); border-radius:8px; background:#fff; color:var(--azul); font-weight:700; font-size:13px; text-decoration:none; cursor:grab; white-space:nowrap;}
.cpfc-atalho-btn:active{cursor:grabbing;}
.cpfc-ext ol{margin:8px 0 0; padding-left:20px;}
.cpfc-ext li{margin:2px 0;}
.cpfc-aguarde{background:rgba(0,60,88,.06); border:1px solid rgba(0,60,88,.25); color:var(--azul); padding:10px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px;}
.cpfc-aguarde[hidden]{display:none;}
@media (max-width:1100px){ .cpfc-resultado.tres{grid-template-columns:1fr 1fr;} }
@media (max-width:900px){ .cpfc-resultado, .cpfc-resultado.tres{grid-template-columns:1fr;} }


/* ---- Voucher: montar a partir dos documentos da viagem, sem IA (fila #74, 25/09/2026) ---- */
.vch-docs-lista{display:flex; flex-direction:column; gap:6px; max-height:360px; overflow-y:auto; margin-bottom:12px;}
.vch-docs-vazio{font-size:13px; color:var(--cinza-escuro); padding:10px 2px;}
.vch-doc{display:grid; grid-template-columns:18px 1fr auto; gap:10px; align-items:center; padding:8px 12px;
  border:1px solid #e3e8ea; border-radius:10px; cursor:pointer; background:#fff;}
.vch-doc:hover{border-color:#b9ccd6;}
.vch-doc-nao{background:#fbfbfb; cursor:default;}
.vch-doc input{margin:0; width:16px; height:16px; accent-color:var(--azul); cursor:pointer;}
.vch-doc input:disabled{cursor:not-allowed;}
.vch-doc-corpo{display:flex; flex-direction:column; min-width:0;}
.vch-doc-nome{font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.vch-doc-leu{font-size:12px; color:var(--cinza-escuro); margin-top:2px;}
.vch-doc-chip{display:inline-block; font-weight:700; font-size:10.5px; padding:1px 8px; border-radius:999px;
  background:rgba(10,91,130,.10); color:var(--azul-2); margin-right:6px;}
.vch-doc-chip-nao{background:rgba(231,52,82,.10); color:var(--cereja);}
.vch-doc-quando{font-size:11px; color:#8b9aa3; white-space:nowrap;}
.vch-docs-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.vch-docs-montar{background:var(--azul); color:#fff; border:none; border-radius:10px; padding:10px 18px;
  font-family:'Open Sans'; font-weight:700; font-size:13.5px; cursor:pointer;}
.vch-docs-montar:hover{background:var(--azul-2);}
.vch-docs-montar:disabled{opacity:.45; cursor:not-allowed;}
.vch-docs-anexar{cursor:pointer;}
.vch-docs-status{font-size:12.5px; color:var(--cinza-escuro);}
.vch-docs-status.erro{color:var(--cereja);}
.vch-montagem-resumo{background:#eef6e1; border:1px solid #cfe3a8; border-radius:12px; padding:12px 16px; margin-bottom:14px;}
.vch-montagem-titulo{font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:#4d7412;}
.vch-montagem-aviso{font-size:12.5px; color:#7a4f10; background:#fdf6e7; border-radius:8px; padding:6px 10px; margin-top:6px;}
.vch-montagem-nota{font-size:12.5px; color:#274b5c; background:#eef4f7; border-radius:8px; padding:6px 10px; margin-top:6px;}