/* ============================================================
   Documentos de cotação — aéreo e hospedagem
   ============================================================
   Boa parte dos envios vai para empresa e prefeitura, então o
   documento é institucional antes de ser bonito: azul-marinho
   carregando o peso, turquesa da marca só como acento, e os
   dados que um comprador público precisa (razão social, CNPJ,
   endereço, número da cotação, destinatário e responsável)
   sempre visíveis.

   Medidas em pt e mm porque a referência é papel A4, não tela:
   o que aparece no preview é o que sai na impressão.

   Escopo em .doc-cotacao para não vazar no resto do sistema.
   ============================================================ */

.doc-cotacao {
  --marinho: #12294f;
  --marinho-claro: #1d3f76;
  --turquesa: #00c2cb;
  --dc-texto: #1f2937;
  --dc-suave: #6b7280;
  --dc-borda: #e3e8ef;
  --dc-fundo: #f7f9fb;
  --dc-verde: #15803d;
  --dc-ambar-fundo: #fff8e6;
  --dc-ambar-borda: #f0c674;
  --dc-ambar-texto: #8a5a00;

  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  background: #fff;
  color: var(--dc-texto);
  /* Inter, com Helvetica/Arial como rede de segurança.

     O documento declarava Helvetica e o PDF saía em Arial: Helvetica não
     existe no Windows, então o Chrome caía no substituto. O PDF do Gemini
     parecia melhor porque rodou em Linux, onde o substituto é Nimbus Sans —
     um clone de Helvetica bem mais próximo do original que o Arial.

     Inter é webfont: vem junto com a página e sai igual em qualquer máquina,
     em vez de depender do que o computador de quem imprime tem instalado. É
     também a fonte do resto do sistema, já carregada nesta página — trocar
     não custa nenhum download a mais. */
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Inter é uma das poucas com dígitos de largura fixa. Numa tabela de
     horários é o que faz 05h10 e 22h45 ocuparem exatamente a mesma largura. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
  font-size: 10pt;
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.13);
}
.doc-cotacao * { box-sizing: border-box; }
.doc-cotacao + .doc-cotacao { margin-top: 24px; }

/* ---------------------------------------------- cabeçalho */

.dc-cab {
  background: linear-gradient(100deg, var(--marinho) 0%, var(--marinho-claro) 100%);
  color: #fff; padding: 9mm 15mm 7mm; display: table; width: 100%;
}
.dc-cab-marca { display: table-cell; vertical-align: top; width: 46%; }
.dc-cab-marca .nome {
  font-size: 25pt; font-weight: 700; letter-spacing: 2px; display: block; line-height: 1;
}
.dc-cab-marca .etiqueta {
  display: inline-block; margin-top: 8px; padding: 3px 9px;
  background: var(--turquesa); color: #06282c; border-radius: 3px;
  font-size: 7.5pt; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.dc-cab-dados {
  display: table-cell; vertical-align: top; text-align: right; width: 54%;
  font-size: 8pt; line-height: 1.6; color: #d7e2f2;
}
.dc-cab-dados strong { color: #fff; }

/* ---------------------------------------------- faixa do documento */

.dc-faixa {
  background: var(--dc-fundo); border-bottom: 1px solid var(--dc-borda);
  padding: 4.5mm 15mm; display: table; width: 100%;
}
.dc-faixa-titulo {
  display: table-cell; vertical-align: middle;
  font-size: 15pt; font-weight: 700; color: var(--marinho);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.dc-faixa-titulo .linha2 {
  font-size: 8.5pt; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--dc-suave);
}
.dc-faixa-meta {
  display: table-cell; vertical-align: middle; text-align: right;
  font-size: 8.5pt; color: var(--dc-suave); line-height: 1.7;
}
.dc-faixa-meta strong { color: var(--marinho); }
.dc-numero {
  display: inline-block; background: var(--marinho); color: #fff;
  padding: 3px 10px; border-radius: 4px; font-size: 9pt; font-weight: 700;
  letter-spacing: 0.5px;
}

.dc-corpo { padding: 5mm 15mm 8mm; }

/* ---------------------------------------------- destinatário */

.dc-destinatario {
  border: 1px solid var(--dc-borda); border-left: 3px solid var(--turquesa);
  border-radius: 0 5px 5px 0; padding: 9px 14px; margin-bottom: 7mm; font-size: 9.5pt;
}
.dc-destinatario .rot {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--dc-suave); font-weight: 700; display: block; margin-bottom: 2px;
}

/* ---------------------------------------------- seções */

.dc-secao {
  font-size: 9.5pt; font-weight: 700; color: var(--marinho);
  text-transform: uppercase; letter-spacing: 1px;
  padding-bottom: 4px; margin: 5mm 0 3mm; border-bottom: 2px solid var(--dc-borda);
}
.dc-secao:first-child { margin-top: 0; }

/* ---------------------------------------------- trecho aéreo */

.dc-trecho {
  border: 1px solid var(--dc-borda); border-radius: 6px;
  margin-bottom: 3.5mm; overflow: hidden; page-break-inside: avoid;
}
/* O cabeçalho do trecho era texto marinho sobre branco, na mesma família de
   cor do conteúdo logo abaixo — o olho não achava onde um trecho terminava e
   o outro começava. Agora é barra marinho com texto branco: separa os trechos
   de relance, que é o que o gestor pediu ao comparar com o PDF do Gemini. */
.dc-trecho-topo {
  padding: 7px 12px; background: var(--marinho); border-bottom: none;
  display: table; width: 100%;
}
.dc-trecho-id { display: table-cell; vertical-align: middle; }
.dc-tag {
  display: inline-block; padding: 2px 9px; border-radius: 3px;
  font-size: 7.5pt; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  margin-right: 9px; vertical-align: middle;
}
/* sobre o marinho, a distinção ida/volta/trecho vem do tom do texto: fundo
   sólido claro aqui brigaria com a barra e devolveria o visual manchado */
.dc-tag-ida    { background: rgba(255, 255, 255, 0.16); color: #cfe0ff; }
.dc-tag-volta  { background: rgba(255, 255, 255, 0.16); color: #b6e8ce; }
.dc-tag-meio   { background: rgba(255, 255, 255, 0.16); color: #d9d3f8; }
.dc-trecho-rota {
  font-size: 12pt; font-weight: 700; color: #fff; vertical-align: middle;
}
.dc-trecho-dur {
  display: table-cell; vertical-align: middle; text-align: right;
  font-size: 8pt; color: rgba(255, 255, 255, 0.88);
}
.dc-trecho-dur span {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 3px 9px; border-radius: 12px;
}
.dc-trecho-data {
  padding: 3px 12px; font-size: 8pt; color: var(--dc-suave);
  background: var(--dc-fundo); border-bottom: 1px solid var(--dc-borda);
  line-height: 1.4;
}
.dc-trecho-data strong { color: var(--dc-texto); }

/* table-layout fixed é o que faz as colunas realmente se alinharem: sem ele o
   navegador redimensiona cada coluna pelo conteúdo e "São Paulo (Guarulhos)"
   empurra a coluna de horários para longe do lugar onde ela está na linha
   de cima. As larguras somam 100%. */
table.dc-voo { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.dc-voo td, table.dc-voo th {
  padding: 3px 11px; font-size: 9pt; vertical-align: middle;
  border-bottom: 1px solid #f1f4f8;
}
table.dc-voo tr:last-child td { border-bottom: none; }

.dc-voo-cab th {
  background: var(--dc-fundo); text-align: left;
  font-size: 6.5pt; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--dc-suave);
  padding-top: 2px; padding-bottom: 2px; line-height: 1.4;
}
.dc-voo-cab th:nth-child(1), .dc-voo-cab th:nth-child(2) { width: 21%; }
.dc-voo-cab th:nth-child(3) { width: 27%; }
.dc-voo-cab th:nth-child(4) { width: 31%; }

.dc-ponto { line-height: 1.15; }
.dc-iata { font-weight: 700; color: var(--marinho-claro); font-size: 9.5pt; }
.dc-cidade {
  display: block; font-size: 7.5pt; color: var(--dc-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-horarios { line-height: 1.15; }
.dc-horarios span { display: block; font-size: 8.5pt; white-space: nowrap; }
.dc-horarios strong { color: var(--dc-suave); font-weight: 600; }
.dc-maisdia { color: var(--dc-suave); font-size: 7.5pt; }
.dc-cia {
  font-size: 8.5pt; color: var(--dc-texto); font-weight: 600; line-height: 1.25;
}
/* Detalhe do voo embaixo da companhia — hoje a chegada em outro dia e o
   "voo direto", que é o que mais muda o planejamento de quem lê. */
.dc-cia-nota {
  display: block; font-size: 7.5pt; font-weight: 400;
  color: var(--dc-suave); margin-top: 1px;
}

/* A FAIXA DE CONEXÃO SAIU EM 27/08/2026. A conexão passou a ser mais uma
   observação na coluna de detalhes, junto da companhia — o gestor tinha pedido
   esse formato para TODAS as notas em 19/08 ("muito mais bonito e organizado
   visualmente em comparação com essa linha amarela embaixo do voo"), e a faixa
   que sobrou foi lida como o padrão antigo quando ele gerou uma cotação nova.
   As regras ficam aqui comentadas caso a faixa volte a fazer falta em algum
   documento que tenha muitas escalas.
.dc-conexao-linha td {
  background: var(--dc-ambar-fundo);
  border-top: 1px solid var(--dc-ambar-borda);
  border-bottom: 1px solid var(--dc-ambar-borda) !important;
  padding: 1px 11px !important; font-size: 7pt; line-height: 1.5;
  color: var(--dc-ambar-texto); text-align: center;
}
*/
.dc-conexao {
  background: var(--dc-ambar-fundo);
  border-top: 1px solid var(--dc-ambar-borda); border-bottom: 1px solid var(--dc-ambar-borda);
  padding: 4px 11px; font-size: 8pt; color: var(--dc-ambar-texto); text-align: center;
}

/* ---------------------------------------------- inclusões */

.dc-inclusoes { border: 1px solid var(--dc-borda); border-radius: 6px; padding: 8px 14px; }
.dc-inclusoes ul { margin: 0; padding: 0; list-style: none; font-size: 9.5pt; }
.dc-inclusoes li { padding: 2px 0 2px 20px; position: relative; }
.dc-inclusoes li::before {
  content: "✓"; position: absolute; left: 0; color: var(--dc-verde); font-weight: 700;
}

/* ---------------------------------------------- preço */

.dc-preco {
  border: 2px solid var(--marinho); border-radius: 6px; overflow: hidden;
  page-break-inside: avoid;
}
.dc-preco-principal { padding: 13px 16px; display: table; width: 100%; }
.dc-preco-esq { display: table-cell; vertical-align: middle; }
.dc-preco-rot {
  font-size: 8pt; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dc-suave); font-weight: 700; display: block;
}
.dc-preco-num { font-size: 24pt; font-weight: 700; color: var(--marinho); line-height: 1.15; }
.dc-preco-sub { font-size: 8.5pt; color: var(--dc-suave); }
.dc-preco-dir { display: table-cell; vertical-align: middle; text-align: right; width: 40%; }
.dc-preco-pax { font-size: 9pt; color: var(--dc-suave); }
.dc-preco-pax strong { color: var(--dc-texto); font-size: 11pt; }

.dc-parcelamento {
  background: var(--dc-fundo); border-top: 1px solid var(--dc-borda); padding: 11px 16px;
}
.dc-parcelamento-tit {
  font-size: 8.5pt; font-weight: 700; color: var(--marinho); margin-bottom: 7px;
}
.dc-parcelas { display: table; width: 100%; border-spacing: 8px 0; margin: 0 -8px; }
.dc-parcela {
  display: table-cell; width: 50%; background: #fff;
  border: 1px solid var(--dc-borda); border-radius: 5px; padding: 8px 12px;
}
.dc-parcela .rot {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--marinho-claro); font-weight: 700; display: block;
}
.dc-parcela .val { font-size: 12pt; font-weight: 700; }

/* ---------------------------------------------- hospedagem */

.dc-destino-box {
  border: 1px solid var(--dc-borda); border-left: 3px solid var(--turquesa);
  border-radius: 0 5px 5px 0; padding: 8px 14px; margin-bottom: 5mm;
}
.dc-destino-box table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.dc-destino-box td { padding: 2px 0; border: none; }
.dc-destino-box .rot { font-weight: 700; color: var(--marinho); width: 92px; }

.dc-hotel {
  border: 1px solid var(--dc-borda); border-radius: 6px; margin-bottom: 3.5mm;
  overflow: hidden; page-break-inside: avoid;
}
/* Mesma correção da barra de trecho no aéreo: o nome do hotel era marinho
   sobre fundo claro, na família de cor do conteúdo logo abaixo, e um hotel
   se confundia com o seguinte. Barra marinho separa de relance. */
.dc-hotel-topo {
  background: var(--marinho); padding: 7px 12px; display: table; width: 100%;
  border-bottom: none;
}
.dc-hotel-nome {
  display: table-cell; vertical-align: middle;
  font-size: 12pt; font-weight: 700; color: #fff;
}
.dc-hotel-tag {
  display: table-cell; vertical-align: middle; text-align: right;
  font-size: 7.5pt; font-weight: 700; letter-spacing: 0.5px;
}
.dc-hotel-tag span {
  background: rgba(255, 255, 255, 0.16); color: #cfe0ff;
  padding: 2px 9px; border-radius: 3px; text-transform: uppercase;
}
.dc-hotel-corpo { display: table; width: 100%; }
/* Grade de duas colunas: rótulo numa, valor na outra. Antes era
   "Rótulo: valor" corrido, e como os rótulos têm larguras diferentes
   cada valor começava num ponto — o mesmo problema dos voos. */
.dc-hotel-dados {
  display: table-cell; vertical-align: top; width: 63%; padding: 8px 12px;
  font-size: 9pt; border-right: 1px solid var(--dc-borda);
  margin: 0;
}
/* A coluna acomoda "Observações", o rótulo mais longo. Menor que isso ele
   quebra em duas linhas e desalinha a lista inteira. */
.dc-hotel-dados dt {
  float: left; clear: left; width: 84px;
  font-weight: 700; color: var(--marinho); line-height: 1.5;
}
.dc-hotel-dados dt::after { content: ":"; }
.dc-hotel-dados dd { margin: 0 0 2px 92px; line-height: 1.5; }
.dc-hotel-dados a { color: var(--marinho-claro); word-break: break-word; }
.dc-hotel-preco {
  display: table-cell; vertical-align: middle; width: 37%;
  padding: 8px 12px; text-align: right;
}
.dc-hotel-preco .rot {
  font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--dc-suave); font-weight: 700; display: block;
}
.dc-hotel-preco .val {
  font-size: 16pt; font-weight: 700; color: var(--marinho); display: block; margin: 2px 0;
}
.dc-hotel-preco .taxas { font-size: 8pt; font-weight: 700; color: var(--dc-verde); }

/* ---------------------------------------------- observações e assinatura */

.dc-obs {
  background: var(--dc-ambar-fundo); border-left: 3px solid var(--dc-ambar-borda);
  border-radius: 0 5px 5px 0; padding: 11px 15px; font-size: 8pt;
  color: var(--dc-ambar-texto); line-height: 1.6; margin-top: 6mm;
  page-break-inside: avoid;
}
.dc-obs strong {
  display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.dc-obs p { margin: 0 0 5px; }
.dc-obs p:last-child { margin-bottom: 0; }

.dc-assinatura {
  margin-top: 7mm; padding-top: 6px; border-top: 1px solid var(--dc-borda);
  display: table; width: 100%; font-size: 8.5pt; color: var(--dc-suave);
  page-break-inside: avoid;
}
.dc-assinatura .quem { display: table-cell; vertical-align: middle; }
.dc-assinatura .quem strong { color: var(--dc-texto); display: block; font-size: 9.5pt; }
.dc-assinatura .cnpj {
  display: table-cell; vertical-align: middle; text-align: right; font-size: 7.5pt;
}

/* ---------------------------------------------- impressão

   Na hora de imprimir só o documento existe: menu, formulário e
   botões saem da página. A folha perde a sombra e a margem, que
   são recurso de preview — no papel a margem vem do @page.      */

@media print {
  /* A margem da @page é a única que se repete a cada folha. O padding do
     documento vale só no começo do fluxo, então da segunda página em diante
     o conteúdo encostava na borda e a impressora cortava a linha ao meio.

     A primeira página fica sem margem no topo de propósito: a faixa azul do
     cabeçalho sangra até a borda do papel, e é assim que ela foi desenhada.
     Da segunda em diante entra a margem superior. O rodapé respira em todas. */
  @page { size: A4; margin: 15mm 0 17mm; }
  @page :first { margin: 0 0 17mm; }

  /* O documento mora dentro de .layout > .area-principal > main. Esconder
     esses ancestrais com display:none levava a subárvore inteira junto e a
     folha saía em branco — display:none no pai não se desfaz no filho, por
     mais !important que se ponha nele.

     Então a cadeia até o documento continua existindo, zerada de margem e
     espaçamento, e quem some é só quem está ao lado dela. */
  html, body, .layout, .area-principal, main, .area-documentos {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .sidebar, .topo-conteudo, .painel-cotacao, .cabecalho-dashboard,
  .mensagem, .aviso-impressao, .tela-centro { display: none !important; }

  .doc-cotacao {
    box-shadow: none !important; margin: 0 !important;
    width: 210mm;
    /* na tela o min-height desenha a folha inteira; na impressão ele passaria
       a sobrar, porque a área útil encolheu com a margem da @page — e 297mm
       de conteúdo numa página de 265mm empurraria o resto para uma folha
       extra em branco */
    min-height: 0;
    page-break-after: always;
  }
  .doc-cotacao:last-child { page-break-after: auto; }

  /* o gradiente do cabeçalho só sai se o navegador imprimir o fundo.
     .dc-trecho-topo e .dc-trecho-dur span entraram junto com a barra marinho
     do trecho: sem eles o fundo some na impressão e o texto branco fica
     invisível sobre o papel */
  .dc-cab, .dc-faixa, .dc-conexao, .dc-obs, .dc-hotel-topo, .dc-trecho-data,
  .dc-trecho-topo, .dc-trecho-dur span, .dc-conexao-linha td, .dc-voo-cab th,
  .dc-parcelamento, .dc-tag, .dc-numero, .dc-cab-marca .etiqueta, .dc-hotel-tag span {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .doc-cotacao a { text-decoration: none; color: inherit; }

  /* Blocos que não podem ser partidos ao meio pela quebra de página. Foi o
     que aconteceu com "Atendimento e suporte exclusivo Swift Viagens": a
     linha saiu cortada na horizontal, metade numa folha, metade na outra. */
  .dc-inclusoes, .dc-preco, .dc-parcelamento, .dc-obs, .dc-assinatura,
  .dc-destinatario, .dc-trecho, .dc-hotel, .dc-destino-box {
    page-break-inside: avoid; break-inside: avoid;
  }
  .dc-inclusoes li, .dc-parcela, .dc-obs p {
    page-break-inside: avoid; break-inside: avoid;
  }

  /* Título de seção sozinho no pé da página, com o conteúdo na seguinte,
     é pior do que empurrar os dois juntos. */
  .dc-secao { page-break-after: avoid; break-after: avoid; }

  /* nenhuma linha solta de parágrafo no começo ou no fim da folha */
  .doc-cotacao p, .doc-cotacao li { orphans: 3; widows: 3; }
}