Peças Jurídicas HTML — Template Personalizável

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

:root {
  /* CORES — substituir conforme Etapa 5 do wizard */
  --ink:     #1A1714;
  --gold:    #B08A4E;
  --glt:     #CFA96A;
  --muted:   #6B5E4E;
  --rule:    #DDD6C8;
  --cream-t: rgba(176,138,78,.05);

  /* TIPOGRAFIA — substituir conforme Etapas 3 e 4 */
  --font-titulo: 'Space Grotesk', sans-serif;
  --font-corpo:  'DM Sans', sans-serif;
  --fs:      15px;       /* equivalente a 12pt Word */
  --fs-cita: 12.5px;    /* citações jurisprudenciais */
  --line-height: 1.65;
  --recuo:   2cm;

  /* LAYOUT — substituir conforme Etapa 4 */
  --faixa-width:  6px;
  --margin-left:  32mm;
  --margin-right: 20mm;
}

html, body {
  margin: 0; padding: 0;
  background: white;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/*
 * @page: controla margens de TODAS as páginas impressas.
 * NUNCA definir height em nenhum contêiner — a altura é sempre dinâmica.
 * margin-left/right = 0 (controlados pelo .doc).
 */
@page {
  size: A4 portrait;
  margin-top:    25mm;
  margin-bottom: 22mm;
  margin-left:   0;
  margin-right:  0;
}

/*
 * .doc: único contêiner de layout. SEM height, SEM min-height, SEM max-height.
 * border-left = faixa lateral (cor via --gold, largura via --faixa-width).
 * padding-top: zerado no print; @page assume.
 */
.doc {
  font-family: var(--font-corpo);
  font-size: var(--fs);
  color: var(--ink);
  background: white;
  width: 210mm;
  margin: 0 auto;
  padding-top:    25mm;   /* tela apenas */
  padding-bottom: 0;
  padding-right:  var(--margin-right);
  padding-left:   var(--margin-left);
  border-left: var(--faixa-width) solid var(--gold);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  .doc { padding-top: 0; margin: 0; }
}

/* HEADER */
.hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 26px;
  gap: 20px;
  page-break-after: avoid;
  break-after: avoid;
}

.hdr-right { text-align: right; }

.hdr-right .escritorio-nome {
  font-family: var(--font-titulo);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

.hdr-right .contato { font-size: 9px; color: var(--ink); line-height: 1.7; }
.hdr-right .contato .sep   { color: var(--gold); margin: 0 4px; }
.hdr-right .contato .email { color: var(--muted); font-size: 8.5px; }

/* ENDEREÇAMENTO — sempre caixa alta */
.enderecamento {
  font-size: var(--fs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  text-align: justify;
  line-height: var(--line-height);
  page-break-after: avoid;
  break-after: avoid;
}

/* ESPAÇADOR 3 linhas */
.gap3 {
  height: calc(var(--fs) * 1.65 * 2.2);
  page-break-inside: avoid;
  break-inside: avoid;
}

/* DADOS DO PROCESSO */
.dados-processo {
  font-size: var(--fs); color: var(--ink); line-height: var(--line-height);
  page-break-inside: avoid; break-inside: avoid;
  page-break-after: avoid; break-after: avoid;
}
.dados-processo span { display: block; }

/* PREÂMBULO */
.abertura {
  font-size: var(--fs); color: var(--ink);
  line-height: var(--line-height); text-align: justify; text-indent: var(--recuo);
  page-break-inside: avoid; break-inside: avoid;
  orphans: 3; widows: 3;
}

/* Nome do cliente e nome da ação: bold 14pt ≈ 18px */
.nome-cliente, .nome-acao { font-size: 18px; font-weight: 700; }

/* TÍTULO DE SEÇÃO — recuo 2cm em todas as linhas */
.sec-titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs); font-weight: 700;
  text-transform: uppercase; color: var(--ink);
  line-height: 1.5; margin: 20px 0 8px var(--recuo);
  page-break-after: avoid; break-after: avoid;
  page-break-inside: avoid; break-inside: avoid;
}

/* PARÁGRAFO */
.par {
  font-size: var(--fs); color: var(--ink);
  line-height: var(--line-height); text-align: justify; text-indent: var(--recuo);
  margin-bottom: 20px; orphans: 3; widows: 3;
}

/* VALORES E DATAS — sempre negrito */
.val, .dt { font-weight: 700; }

/* CITAÇÃO JURISPRUDENCIAL */
.cita {
  font-size: var(--fs-cita); color: var(--ink);
  line-height: 1.6; text-align: justify; font-style: italic;
  margin: 12px 10px 0 var(--recuo);
  page-break-inside: avoid; break-inside: avoid;
}

.cita-fonte {
  font-size: var(--fs-cita); color: var(--muted);
  font-style: italic; margin: 3px 10px 12px var(--recuo);
  page-break-before: avoid; break-before: avoid;
}

/* INTRO PEDIDOS */
.pedido-intro {
  font-size: var(--fs); color: var(--ink);
  line-height: var(--line-height); text-align: justify; text-indent: var(--recuo);
  margin-bottom: 6px;
  page-break-after: avoid; break-after: avoid;
}

/* BLOCO DE ITENS (agrupa intro + itens — evita quebra entre eles) */
.bloco-itens { page-break-inside: avoid; break-inside: avoid; }

/* ITEM a) b) c) — letra sempre em negrito, recuo 2cm */
.item-lista {
  font-size: var(--fs); color: var(--ink);
  line-height: var(--line-height); text-align: justify;
  margin-left: var(--recuo); margin-bottom: 7px;
  page-break-inside: avoid; break-inside: avoid;
  orphans: 3; widows: 3;
}
.item-lista .letra { font-weight: 700; }

/*
 * CAIXA QUEBRÁVEL (box-break pattern)
 * Usar quando o conteúdo é longo e deve fluir entre páginas sem espaço vazio.
 * Princípio: a caixa quebra livremente entre páginas; cada item interno é
 * protegido individualmente de ser cortado ao meio.
 *
 * Estrutura obrigatória:
 *   .box-break           → container (sem page-break-inside)
 *   .box-break-titulo    → cabeçalho da caixa
 *   .box-break-item      → cada linha/entrada (tem page-break-inside: avoid)
 *
 * Divisor visual entre itens via border-top em .box-break-item;
 * primeiro item sem border-top via :first-of-type.
 */
.box-break {
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 10px 0;
  background: var(--cream-t);
  /* SEM page-break-inside: avoid — quebra é permitida entre itens */
}
.box-break-titulo {
  font-family: var(--font-titulo);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 10px;
}
.box-break-item {
  font-size: 13px; color: var(--ink);
  line-height: 1.6; text-align: justify;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  page-break-inside: avoid; break-inside: avoid;
}
.box-break-item:first-of-type { border-top: none; padding-top: 0; }
.box-break-item:last-child     { padding-bottom: 0; }
.box-break-label {
  font-weight: 700; color: var(--muted);
  font-family: var(--font-titulo);
  font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}

/* TABELA — sem recuo (margin-left: 0), largura total */
.tabela-wrap {
  margin: 14px 0 4px 0; width: 100%;
  page-break-inside: avoid; break-inside: avoid;
}

.tabela-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }

.tabela-wrap thead { display: table-header-group; }
.tabela-wrap thead tr { background: var(--ink); color: white; }
.tabela-wrap thead th {
  font-family: var(--font-titulo);
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 9px; text-align: left;
}
.tabela-wrap thead th.num { text-align: right; }

.tabela-wrap tbody tr {
  border-bottom: 1px solid var(--rule);
  page-break-inside: avoid; break-inside: avoid;
}
.tabela-wrap tbody tr:last-child { border-bottom: none; }
.tabela-wrap tbody tr:nth-child(even) { background: var(--cream-t); }
.tabela-wrap tbody td { padding: 6px 9px; color: var(--ink); vertical-align: middle; }
.tabela-wrap tbody td.num  { text-align: right; font-weight: 700; white-space: nowrap; }
.tabela-wrap tbody td.dt-cell { font-weight: 700; white-space: nowrap; }

.tabela-wrap tfoot { display: table-footer-group; }
.tabela-wrap tfoot tr {
  background: rgba(176,138,78,.08); border-top: 2px solid var(--gold);
  page-break-inside: avoid; break-inside: avoid;
}
.tabela-wrap tfoot td {
  padding: 7px 9px;
  font-family: var(--font-titulo);
  font-size: 11px; font-weight: 700; color: var(--ink);
}
.tabela-wrap tfoot td.num { text-align: right; color: var(--gold); font-size: 12px; white-space: nowrap; }

.tabela-nota {
  font-size: 10px; color: var(--muted); font-style: italic;
  margin: 4px 0 12px 0;
  page-break-before: avoid; break-before: avoid;
}

/* FECHAMENTO */
.fechamento { page-break-inside: avoid; break-inside: avoid; margin-top: 20px; }
.termos { font-size: var(--fs); color: var(--ink); line-height: var(--line-height); text-indent: var(--recuo); margin-bottom: 4px; }
.pede   { font-size: var(--fs); color: var(--ink); line-height: var(--line-height); text-indent: var(--recuo); margin-bottom: 30px; }

.local-data {
  font-size: var(--fs); color: var(--ink);
  text-align: left; text-indent: var(--recuo); margin-bottom: 40px;
}

.assinatura {
  font-family: var(--font-titulo);
  font-size: var(--fs); font-weight: 500;
  color: var(--ink); text-align: center; line-height: 1.7;
}
.assinatura .oab { font-size: 13px; font-weight: 400; color: var(--muted); }

/* RODAPÉ */
.doc-footer {
  margin-top: 32px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-titulo);
  font-size: 8px; color: var(--muted); letter-spacing: 1px;
  page-break-inside: avoid; break-inside: avoid;
}
.doc-footer .pgn { color: var(--gold); font-weight: 600; font-size: 9px; }

.quebra-doc { page-break-after: always; break-after: page; height: 0; margin: 0; padding: 0; }