/* ---------------------------------------------------------------------------
   Estilo comum dos documentos impressos (OS, recibo, etiquetas).

   Regra de ouro: o que se vê na tela é o que sai no papel. A folha é desenhada
   em milímetros no tamanho A4, então a pré-visualização já é o documento.
   --------------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 10mm;
}

:root {
  --tinta: #000;
  --linha: #000;
  --cinza: #555;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px;
  font: 11pt/1.35 "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--tinta);
  background: #8a8a8a;   /* fundo de "mesa" só na tela; some na impressão */
}

/* A folha A4. Largura fixa em mm para a tela mostrar a proporção real. */
.folha {
  width: 190mm;
  min-height: 277mm;
  margin: 0 auto 18px;
  padding: 6mm;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Barra de ações — existe só na tela. */
.barra-acoes {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  width: 190mm; margin: 0 auto 14px; padding: 10px 14px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.barra-acoes .espaco { flex: 1; }
.barra-acoes button, .barra-acoes a {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 7px 16px; text-decoration: none;
  color: #0b2b2f; background: #eef6f8;
  border: 1px solid #0f6b6b; border-radius: 5px; cursor: pointer;
}
.barra-acoes button.primario { color: #fff; background: #0f6b6b; }
.barra-acoes .observacao { font-size: 13px; color: #555; }

/* --- Blocos com título embutido na moldura (o visual do sistema antigo) --- */
.bloco {
  position: relative;
  margin-bottom: 4mm;
  padding: 5mm 3mm 3mm;
  border: 1px solid var(--linha);
}
.bloco > .titulo {
  position: absolute; top: -9px; left: 8px;
  padding: 0 8px;
  font-size: 9.5pt; font-weight: 700;
  background: #fff;
}

table.dados { width: 100%; border-collapse: collapse; }
table.dados th, table.dados td { padding: 1.2mm 2mm; text-align: left; vertical-align: top; }
table.dados th { font-size: 9pt; font-weight: 700; }
table.dados td.num, table.dados th.num { text-align: right; }
table.dados tr.total td { font-weight: 700; border-top: 1px solid var(--linha); }

/* Caixinha de marcação impressa (☐ / ☒) */
.marca {
  display: inline-block; width: 3.6mm; height: 3.6mm;
  border: 1px solid var(--linha); vertical-align: -0.6mm;
  text-align: center; line-height: 3.3mm; font-size: 9pt; font-weight: 700;
}

.campo-linha { display: flex; gap: 3mm; align-items: baseline; margin-bottom: 1.6mm; }
.campo-linha .rotulo { flex: 0 0 26mm; font-weight: 700; font-size: 9.5pt; }
.campo-linha .valor { flex: 1; min-height: 5mm; border-bottom: 1px solid #bbb; }

.assinatura { text-align: center; }
.assinatura img.risco { max-height: 18mm; max-width: 60mm; }
.assinatura img.logo { max-height: 12mm; max-width: 45mm; }
.assinatura .linha-nome { margin-top: 1mm; padding-top: 1mm; border-top: 1px solid var(--linha); }
.assinatura .contato { font-size: 8.5pt; line-height: 1.3; }

.logo-cabecalho { max-height: 20mm; max-width: 60mm; object-fit: contain; }

/* --- Impressão ----------------------------------------------------------- */
@media print {
  body { padding: 0; background: #fff; }
  .barra-acoes { display: none !important; }
  .folha {
    width: auto; min-height: 0; margin: 0; padding: 0;
    box-shadow: none;
  }
  /* Cada folha começa numa página nova; a última não gera página em branco. */
  .folha { break-after: page; }
  .folha:last-child { break-after: auto; }
}