/* ==========================================================================
   Ferramentas HL — folha única das duas telas

   Não é o app (macio, arredondado, de celular) nem o site público (grafite,
   institucional). É bancada de trabalho: tela de computador, muito campo,
   pouca decoração, e o que importa em negrito. A Bruna e a Luisa passam o dia
   aqui entre o XML e o Sygma.

   Duas decisões que explicam o resto:

   1. A FOLHA IMPRESSA MANDA. A Ordem de Coleta na tela é a mesma coisa que sai
      na impressora, no mesmo tamanho de A4. O que a pessoa vê é o papel, não
      uma "prévia" que depois sai diferente.
   2. NADA DE SPINNER. Tudo acontece no navegador, sem servidor. Se a conta
      apareceu, ela está certa; se não apareceu, falta preencher.
   ========================================================================== */

:root {
  --tinta: #0e1526;
  --tinta-media: #4a5570;
  --tinta-clara: #8d97ae;
  --azul: #0033ff;
  --azul-fundo: #eef2ff;
  --aco: #f4f6fa;
  --linha: #dde2ec;
  --branco: #fff;
  --verde: #0f7b52;
  --verde-fundo: #e8f6f0;
  --vermelho: #b3261e;
  --vermelho-fundo: #fdecea;
  --ambar: #8a5a00;
  --ambar-fundo: #fff6e0;
  --raio: 3px;
  --texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --maquina: 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--aco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 12px; }
a { color: var(--azul); }

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

.topo {
  background: var(--tinta);
  color: var(--branco);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.topo h1 { font-size: 17px; letter-spacing: .01em; }
/* A logo vem do site público (mesmo arquivo), num fundo escuro — o azul do
   logo tem contraste suficiente sobre o grafite, então não precisa de versão
   invertida. */
.topo .marca { display: flex; align-items: center; }
.topo .marca img { height: 26px; width: auto; display: block; }
.topo nav { margin-left: auto; display: flex; gap: 16px; }
.topo nav a { color: #b9c3dc; text-decoration: none; font-size: 14px; }
.topo nav a:hover, .topo nav a[aria-current] { color: var(--branco); text-decoration: underline; }

.envolto { max-width: 1120px; margin: 0 auto; padding: 22px 20px 70px; }
.estreito { max-width: 760px; }

/* --- blocos ----------------------------------------------------------- */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
  margin-bottom: 16px;
}
.cartao > h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-media);
  margin-bottom: 14px;
}
.ajuda { color: var(--tinta-media); font-size: 13.5px; }
.ajuda-mini { color: var(--tinta-clara); font-size: 12.5px; margin-top: 4px; }

/* --- área de soltar arquivo ------------------------------------------ */

.solta {
  border: 2px dashed var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.solta:hover, .solta.ativa { border-color: var(--azul); background: var(--azul-fundo); }
.solta strong { display: block; font-size: 16px; margin-bottom: 4px; }
.solta input[type=file] { display: none; }

/* --- formulários ------------------------------------------------------ */

.grade { display: grid; gap: 12px 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

label { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-media); margin-bottom: 4px; }

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }
input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 58px; }

.botao {
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  padding: 9px 18px;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  background: var(--azul);
  color: var(--branco);
  cursor: pointer;
}
.botao:hover { background: #0028cc; }
.botao.leve { background: var(--branco); color: var(--azul); }
.botao.leve:hover { background: var(--azul-fundo); }
.botao.some { border-color: var(--linha); background: var(--branco); color: var(--tinta-media); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.barra-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

/* --- cadastro de cabeçalhos ------------------------------------------ */

.empurra { margin-left: auto; }

/* O editor é um painel embutido, não um modal: a folha ao lado continua
   visível e vai se redesenhando com o que está sendo digitado. Modal esconderia
   justamente a prova de que o cadastro está certo. */
.painel-editor {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--azul);
  border-left-width: 3px;
  border-radius: var(--raio);
  background: var(--azul-fundo);
}
.painel-editor > h3 { font-size: 15px; margin-bottom: 4px; }
.painel-editor .grade { margin-top: 14px; }
.painel-editor input { background: var(--branco); }

/* --- lista de arquivos lidos ----------------------------------------- */

.arquivos { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13.5px; }
.arquivos li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--linha);
}
.arquivos li:first-child { border-top: 0; }
.arquivos .nf { font-weight: 700; font-variant-numeric: tabular-nums; }
.arquivos .quem { color: var(--tinta-media); flex: 1; }
.arquivos .erro { color: var(--vermelho); }

.selo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 2px; background: var(--aco); color: var(--tinta-media);
}
.selo.ok { background: var(--verde-fundo); color: var(--verde); }
.selo.aviso { background: var(--ambar-fundo); color: var(--ambar); }
.selo.ruim { background: var(--vermelho-fundo); color: var(--vermelho); }

/* --- resultados da calculadora --------------------------------------- */

.contas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.contas th, .contas td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--linha); }
.contas th:first-child, .contas td:first-child { text-align: left; }
.contas thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-clara); }
.contas .rotulo { color: var(--tinta-media); }
.contas .base td { font-weight: 700; background: var(--aco); }
.contas .total td { font-weight: 700; font-size: 17px; border-bottom: 2px solid var(--tinta); }
.contas .discreto td { color: var(--tinta-clara); font-size: 13px; }
.numero { font-variant-numeric: tabular-nums; }

.aviso-caixa {
  border-left: 3px solid var(--ambar);
  background: var(--ambar-fundo);
  color: #6b4700;
  padding: 10px 12px;
  font-size: 13.5px;
  border-radius: 0 var(--raio) var(--raio) 0;
  margin-top: 14px;
}
.aviso-caixa.boa { border-color: var(--verde); background: var(--verde-fundo); color: #0b5b3d; }
.aviso-caixa.ruim { border-color: var(--vermelho); background: var(--vermelho-fundo); color: #86201a; }

/* --- hub -------------------------------------------------------------- */

.atalhos { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.atalho {
  display: block; text-decoration: none; color: inherit;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 22px;
}
.atalho:hover { border-color: var(--azul); }
.atalho h2 { font-size: 19px; margin-bottom: 6px; }
.atalho p { color: var(--tinta-media); font-size: 14px; margin: 0; }

/* ==========================================================================
   A ORDEM DE COLETA

   O ActiveTrans imprimia em fonte de máquina, com linha pontilhada até o valor
   ("Remetente....: FLORA"). Era o que a impressora matricial dos anos 90
   permitia, e o motorista que recebe o papel na portaria paga a conta: para
   achar o endereço de entrega ele varre trinta linhas iguais procurando a
   palavra certa.

   Aqui a mesma informação vira CAIXA ROTULADA — rótulo miúdo em cima, valor
   graúdo embaixo — que é como nota fiscal, CRLV e conhecimento de transporte
   são desenhados. Três decisões sustentam o resto:

   1. O QUE O MOTORISTA PRECISA VEM MAIOR. Onde pegar e onde entregar ocupam a
      faixa mais larga da folha, lado a lado, numeradas 1 e 2. O resto do
      formulário é conferência de escritório e pode ser menor.
   2. RÓTULO NUNCA COMPETE COM VALOR. Rótulo 6px em cinza e caixa alta; valor
      em preto, maior e em negrito. De longe, só os valores aparecem.
   3. A FOLHA É UMA SÓ. Largura em milímetros, A4 retrato, e tudo dimensionado
      para caber sem segunda página — coleta com duas folhas é coleta que
      perde a segunda.
   ========================================================================== */

.folhas { display: grid; gap: 22px; }

.oc {
  background: var(--branco);
  border: 1px solid var(--linha);
  padding: 9mm;
  width: 210mm;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--texto);
  font-size: 9.5px;
  line-height: 1.35;
  color: #000;
}

/* --- cabeçalho: logo à esquerda, identificação à direita --------------- */

.oc-topo {
  display: flex;
  align-items: flex-start;
  gap: 10mm;
  padding-bottom: 3mm;
  border-bottom: 1.5px solid var(--tinta);
}
.oc-marca { flex: 1; }
.oc-marca img { width: 38mm; height: auto; margin-bottom: 1.5mm; }
.oc-emissor { color: #333; line-height: 1.5; }
.oc-emissor strong { display: block; color: #000; font-size: 10.5px; letter-spacing: .01em; }

.oc-identificacao { text-align: right; flex: 0 0 auto; }
.oc-doc {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--azul);
}
.oc-num {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.oc-meta { color: #555; margin-top: .5mm; }

/* --- caixas rotuladas -------------------------------------------------- */

.oc-grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2mm;
  margin-top: 1.2mm;
}
.oc-caixa {
  grid-column: span var(--col, 12);
  border: .5px solid #9aa3b5;
  border-radius: 1px;
  padding: 1mm 1.6mm;
  min-height: 7.5mm;
}
.oc-caixa .rot {
  display: block;
  font-size: 6px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #6b748a;
}
.oc-caixa .val { display: block; font-weight: 700; font-size: 10px; word-break: break-word; }
.oc-caixa .val:empty::after { content: '\00a0'; }
.oc-caixa.vazia .val { color: #b9bfcc; font-weight: 400; }
.oc-caixa .val.grande { font-size: 13px; }
.oc-caixa .val.num { font-variant-numeric: tabular-nums; }

/* --- blocos -------------------------------------------------------------- */

.oc-bloco { margin-top: 3mm; }
.oc-bloco > h3 {
  font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinta-media);
  padding-bottom: .8mm;
  border-bottom: .5px solid var(--linha);
}
.oc-bloco > h3 .n {
  display: inline-block; min-width: 4mm;
  color: var(--azul); font-size: 9px;
}
.oc-bloco > h3 .sub { float: right; font-weight: 400; letter-spacing: .06em; color: #8d97ae; }

/* Os dois endereços, lado a lado — a parte que o motorista lê. */
.oc-rota { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 3mm; }
.oc-rota .oc-bloco { margin-top: 0; }
.oc-rota .oc-caixa .val { font-size: 10.5px; }
.oc-rota .oc-caixa .val.destaque { font-size: 12px; }

/* --- tabela de notas ---------------------------------------------------- */

.oc-notas { width: 100%; border-collapse: collapse; margin-top: 1.2mm; font-size: 9px; }
.oc-notas th, .oc-notas td { border: .5px solid #9aa3b5; padding: .9mm 1.4mm; text-align: left; }
.oc-notas thead th {
  font-size: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #6b748a;
}
.oc-notas td { font-weight: 600; }
.oc-notas .n { text-align: right; font-variant-numeric: tabular-nums; }
.oc-notas tfoot td { font-weight: 700; background: #f4f6fa; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* --- rodapé -------------------------------------------------------------- */

.oc-adicionais {
  border: .5px solid #9aa3b5;
  border-left: 2px solid var(--azul);
  margin-top: 3mm;
  padding: 1.4mm 2mm;
  min-height: 13mm;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.oc-adicionais .rot {
  display: block;
  font-size: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b748a;
}
.oc-adicionais .val { font-weight: 700; font-size: 10px; }

.oc-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; margin-top: 14mm; }
.oc-assinaturas div { border-top: .5px solid #000; padding-top: 1mm; text-align: center; font-size: 7.5px; color: #555; }

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

@page { size: A4 portrait; margin: 8mm; }

@media print {
  body { background: var(--branco); }
  /* Sai só a folha. Os formulários vivem dentro de `#formularios`, então o
     seletor não pode ser `.envolto > .cartao` — tem que pegar todo cartão. */
  .topo, .cartao, .barra-acoes, .nao-imprime { display: none !important; }
  .envolto { padding: 0; max-width: none; }
  .folhas { display: block; }
  .oc {
    border: 0;
    padding: 0;
    width: auto;
    page-break-after: always;
    break-after: page;
  }
  .oc:last-child { page-break-after: auto; break-after: auto; }
}

/* --- telas estreitas -------------------------------------------------- */

@media (max-width: 760px) {
  .g2, .g3, .g4, .atalhos { grid-template-columns: 1fr; }
  .envolto { padding: 16px 14px 60px; }
  .oc { font-size: 10px; padding: 5mm; }
}