/* ============ A FOLHA DE UMA OPERAÇÃO ============
   O relatório que prova o que foi feito numa viagem: lacre, inspeção,
   horários, ocorrências e o dinheiro. Mora aqui, e não dentro de
   operacoes.html, porque o Fechamento imprime a MESMA folha em lote — todas as
   operações de uma empresa no mês. Duas cópias do documento seriam duas
   verdades sobre a mesma viagem.

   Tudo prefixado por .folha-op: o Fechamento tem as suas próprias .d-titulo,
   .d-tab e .d-cabeca, do demonstrativo, e sem o prefixo as duas folhas
   brigariam pelo mesmo nome. O desenho vale na tela e no papel — as medidas
   são as de uma A4 com as margens do @page já descontadas. */
.dossie{display:none}
.folha-papel .dossie, body.print-dossie .dossie, body.print-demo .dossie{
  display:block; color:var(--ink); font-size:11px; line-height:1.45}
.folha-op .d-cabeca{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  border-bottom:3px solid var(--blue-900); padding-bottom:9px}
.folha-op .d-cabeca img{height:42px}
.folha-op .d-cabeca .d-meta{text-align:right}
.folha-op .d-cabeca .d-meta strong{display:block; font-size:14px; color:var(--blue-900)}
.folha-op .d-cabeca .d-meta span{display:block; color:var(--slate); font-size:10px}
.folha-op .d-titulo{margin:8px 0 2px; font-size:16px; font-weight:800; color:var(--blue-900)}
.folha-op .d-sub{color:var(--slate); margin-bottom:12px; font-size:10.5px}
.folha-op .d-secao{margin-top:11px; break-inside:avoid}
.folha-op .d-secao > h3{font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-900); border-bottom:1px solid var(--line); padding-bottom:3px; margin-bottom:6px}
.folha-op .d-campos{display:grid; grid-template-columns:repeat(3,1fr); gap:5px 20px}
.folha-op .d-campos > div{break-inside:avoid}
.folha-op .d-campos dt{font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-bottom:1px}
.folha-op .d-campos dd{margin:0; font-size:11px; color:var(--ink); line-height:1.35}
.folha-op .d-campos .largo{grid-column:1/-1}
/* as linhas de apoio do valor da mercadoria: o dólar de origem e a base
   segurada do DTA. Menores e em cinza porque explicam o número de cima — se
   saíssem no mesmo peso, a folha passaria a ter três valores concorrendo onde
   só existe um. */
.folha-op .d-merc-nota{font-size:9px; color:var(--slate); line-height:1.3; margin-top:1px}
.folha-op .d-lista{margin:0; padding:0; list-style:none}
.folha-op .d-lista li{padding:2.5px 0; border-bottom:1px solid var(--line); font-size:10.5px;
  display:flex; gap:8px; break-inside:avoid}
.folha-op .d-lista li:last-child{border-bottom:0}
.folha-op .d-lista .q{color:var(--slate); font-variant-numeric:tabular-nums; flex:none; min-width:64px}
.folha-op table.d-tab{width:100%; border-collapse:collapse; margin-top:4px}
.folha-op .d-tab th{background:var(--blue-900); color:#fff; text-align:left; font-size:10px;
  padding:5px 10px; font-weight:700}
.folha-op .d-tab td{padding:3.5px 10px; border-bottom:1px solid var(--line); font-size:10.5px}
.folha-op .d-tab td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.folha-op .d-tab tr.d-total td{border-top:2px solid var(--blue-900); border-bottom:0;
  font-weight:800; font-size:12.5px; color:var(--blue-900); padding-top:6px}
.folha-op .d-selo{display:inline-block; font-size:9.5px; font-weight:800; padding:1px 6px;
  border-radius:3px; border:1px solid var(--line); color:var(--slate)}
.folha-op .d-selo.ok{color:#1a7f37; border-color:#bcded0}
.folha-op .d-selo.falta{color:#b3261e; border-color:#f3b7b0}
.folha-op .d-rodape{margin-top:14px; border-top:1px solid var(--line); padding-top:7px;
  font-size:9px; color:var(--slate); line-height:1.5}

/* ---- O FOLLOW-UP: O CARTÃO ----------------------------------------------
   Aqui o cartão é legítimo, e é a mesma exceção do rastreio.html: não é um
   bloco DENTRO de uma tela — é a página inteira, uma peça só, que vai sair
   daqui e chegar sozinha num e-mail ou num WhatsApp. Fora deste caso o painel
   continua sendo papel branco sem caixa.

   A primeira versão desta folha era a planilha do despachante copiada coluna
   por coluna. Ficava tudo do mesmo tamanho, e "tudo do mesmo tamanho" é o
   contrário de responder uma pergunta. Aqui há três tamanhos e nada mais: o
   contêiner (o que se procura), o trilho (a resposta) e o resto (o apoio). */
.folha-fup .fc{background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:0 18px 46px -30px rgba(10,42,94,.45);
  font-size:12px; line-height:1.45; color:var(--ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact}
/* a listra da casa: azul virando laranja, 4px no topo do cartão */
.folha-fup .fc-listra{height:4px;
  background:linear-gradient(90deg, var(--blue-900), var(--blue-600) 55%, var(--orange))}

.folha-fup .fc-topo{display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding:18px 22px 14px}
.folha-fup .fc-logo{height:38px; width:auto}
.folha-fup .fc-id{text-align:right; min-width:0}
.folha-fup .fc-id strong{display:block; font-family:var(--font-display);
  font-size:15px; font-weight:800; color:var(--blue-900); letter-spacing:-.01em}
.folha-fup .fc-id span{display:block; font-size:10.5px; color:var(--slate)}
.folha-fup .fc-id .fc-hora{font-size:9.5px; margin-top:3px}

/* a identidade da carga. O contêiner em Sora e grande porque é o nome que o
   cliente deu à carga na cabeça dele — o resto do cartão só faz sentido
   depois de ele reconhecer que é esta a carga. */
.folha-fup .fc-carga{padding:2px 22px 18px; border-bottom:1px solid var(--line)}
.folha-fup .fc-cli{font-size:9.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate)}
.folha-fup .fc-cont{font-family:var(--font-display); font-size:26px; font-weight:800;
  color:var(--blue-900); letter-spacing:-.02em; line-height:1.15; margin:2px 0 4px}
.folha-fup .fc-sub{font-size:11px; color:var(--slate)}
.folha-fup .fc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.folha-fup .fc-tag{font-size:9.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px}
.folha-fup .fc-tag.imo{background:#fdf0e3; color:var(--orange-600)}
.folha-fup .fc-tag.esc{background:#e7f0fd; color:var(--blue-800)}

/* ---- o trilho -----------------------------------------------------------
   Quatro colunas iguais, o ponto no alto de cada uma e o fio passando por
   trás. O fio é feito de duas metades por marco (::before à esquerda,
   ::after à direita) em vez de uma barra atrás de tudo: assim cada trecho
   acende sozinho, e um passo pulado no meio aparece como buraco em vez de
   sumir dentro de uma linha contínua. */
.folha-fup .fc-trilho{list-style:none; margin:0; padding:22px 22px 20px;
  display:grid; grid-template-columns:repeat(4,1fr)}
.folha-fup .fc-trilho li{position:relative; padding-top:20px; text-align:center;
  min-width:0}
.folha-fup .fc-trilho li::before, .folha-fup .fc-trilho li::after{content:"";
  position:absolute; top:5px; height:2px; background:var(--line)}
.folha-fup .fc-trilho li::before{left:0; right:50%}
.folha-fup .fc-trilho li::after{left:50%; right:0}
.folha-fup .fc-trilho li:first-child::before{display:none}
.folha-fup .fc-trilho li:last-child::after{display:none}
/* o trecho aceso: a metade da direita do marco ligado + a metade da esquerda
   do marco seguinte. As duas juntas fecham o vão. */
.folha-fup .fc-trilho li.ligado::after,
.folha-fup .fc-trilho li.ligado + li::before{background:var(--blue-600)}
.folha-fup .fc-trilho .fc-ponto{position:absolute; top:0; left:50%; margin-left:-6px;
  width:12px; height:12px; border-radius:50%; background:#fff;
  border:2px solid #cbd5e4; box-sizing:border-box; z-index:1}
.folha-fup .fc-trilho li.feito .fc-ponto{background:var(--blue-600); border-color:var(--blue-600)}
/* onde a carga está AGORA: laranja com halo — é o único ponto do cartão que
   pede o olho, e por isso é o único que tem brilho em volta */
.folha-fup .fc-trilho li.atual .fc-ponto{background:var(--orange); border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(244,124,32,.2)}
.folha-fup .fc-trilho .fc-nome{display:block; font-size:9px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate); line-height:1.3}
.folha-fup .fc-trilho .fc-quando{display:block; margin-top:2px; font-size:12px;
  font-weight:800; color:var(--blue-900); font-variant-numeric:tabular-nums}
.folha-fup .fc-trilho li.pendente .fc-quando{color:#b7c1d1; font-weight:600}
.folha-fup .fc-trilho li.atual .fc-nome{color:var(--orange-600)}

/* o pé: duas linhas de rótulo + valor, sem grade */
.folha-fup .fc-pe{padding:14px 22px 16px; border-top:1px solid var(--line)}
.folha-fup .fc-linha{display:flex; align-items:baseline; gap:14px; padding:4px 0}
.folha-fup .fc-linha b{flex:none; width:82px; font-size:9px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.folha-fup .fc-val{font-size:12px; font-weight:700}
.folha-fup .fc-val.vazio{color:#b7c1d1; font-weight:500}
.folha-fup .fc-chips{display:flex; flex-wrap:wrap; gap:6px}
.folha-fup .fc-chip{font-size:10.5px; font-weight:600; color:#b7c1d1;
  border:1px solid var(--line); border-radius:999px; padding:2px 10px}
.folha-fup .fc-chip.on{color:var(--blue-900); font-weight:800;
  border-color:#bcd3f2; background:#f2f7fe}

/* a observação: a única linha escrita à mão a cada envio, e a que o cliente
   lê primeiro. Faixa cheia no pé do cartão — no meio, ela competiria com o
   trilho; no rodapé em cinza, ninguém a leria. */
.folha-fup .fc-obs{display:flex; align-items:center; gap:10px;
  background:#fdf0e3; padding:12px 22px; font-size:12.5px; font-weight:700;
  color:#8a4207; line-height:1.35}
.folha-fup .fc-obs-sinal{flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--orange); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1}
.folha-fup .fc-rodape{padding:10px 22px 14px; font-size:9px; color:var(--slate);
  text-align:center; border-top:1px solid var(--line)}