/* =====================================================================
   Papel: o que sai impresso e no PDF. 10 células por A4 (2 × 5); cada carnê
   ocupa uma capa (com o QR da entrega) e uma célula por folha (com o QR da baixa).
   Medidas em mm/pt e cores fixas: o papel é branco nos dois temas.
   ===================================================================== */
.sheet {
  --c: #7a1f3d;
  --c-soft: rgba(122, 31, 61, .08);
  --tinta: #1c1c1c;
  --cinza: #666666;
  --fio: #c9c9c9;
  --corte: #9a9a9a;
  width: 210mm;
  height: 297mm;
  padding: 6mm;
  background: #fff;
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 6.5pt;
  line-height: 1.2;
  overflow: hidden;
  position: relative;
}

.celulas {
  width: 198mm;
  height: 285mm;
  display: grid;
  grid-template-columns: 99mm 99mm;
  grid-template-rows: repeat(5, 57mm);
}
.slip {
  --grampo: 6mm;
  display: grid;
  grid-template-columns: 25mm minmax(0, 1fr);
  padding-left: var(--grampo); /* faixa livre à esquerda para grampear o carnê */
  overflow: hidden;
  border-top: .25mm dashed var(--corte);
  border-left: .25mm dashed var(--corte);
}
.slip.b-r { border-right: .25mm dashed var(--corte); }
.slip { position: relative; }

/* marcas de grampo na faixa livre da esquerda (mesma altura em todas as células) */
.grampos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--grampo);
  padding: 7mm 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.grampos i { display: block; width: 1.2mm; height: 8mm; border: .25mm dashed #a5a5a5; border-radius: .6mm; }
.grampos b {
  display: block;
  font-size: 4pt;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a5a5a5;
  white-space: nowrap;
  transform: rotate(-90deg);
}
.slip.b-b { border-bottom: .25mm dashed var(--corte); }
.slip--vazia { border-color: transparent; }

.lbl {
  display: block;
  font-size: 4.6pt;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cinza);
  white-space: nowrap;
}
.val { display: block; font-family: var(--f-mono); font-weight: 600; font-size: 7pt; white-space: nowrap; }
.linha { display: block; height: 2.6mm; border-bottom: .2mm solid var(--corte); }

/* canhoto: fica no carnê, com a pessoa */
.stub {
  padding: 2.2mm 2mm 2mm 2.4mm;
  border-right: .3mm dotted var(--corte);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}
.stub__via { font-size: 4.4pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.stub__igreja {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5.6pt;
  line-height: 1.15;
  max-height: 4.6mm;
  overflow: hidden;
}
.stub__igreja--longo { font-size: 4.4pt; max-height: 5.4mm; }
.stub .val { font-size: 6.6pt; }
.stub .val--valor { color: var(--c); font-size: 7.2pt; }
.stub__par { display: flex; gap: 2mm; }
.stub__qr { display: flex; flex-direction: column; align-items: center; gap: .3mm; }
.stub__qr svg { display: block; width: 14mm; height: 14mm; }
.stub__qr .qr__cod { font-size: 4.8pt; }
.stub__qr .qr__dica { font-size: 4.2pt; white-space: nowrap; }

/* via da igreja: destacada na hora do pagamento */
.main {
  padding: 2.2mm 2.4mm 1.8mm 2.2mm;
  display: flex;
  flex-direction: column;
  gap: 1.1mm;
  min-width: 0;
  overflow: hidden;
}
.main__head { display: flex; align-items: center; gap: 1.8mm; height: 11mm; flex: none; }
.sheet .logo {
  width: 10.5mm;
  height: 10.5mm;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sheet .logo img { max-width: 100%; max-height: 100%; }
.sheet .mono-logo { background: var(--c); font-size: 8pt; letter-spacing: .02em; }
.main__id { flex: 1; min-width: 0; }
.main__nome {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 7.4pt;
  line-height: 1.12;
  max-height: 6mm;
  overflow: hidden;
}
.main__nome--longo { font-size: 6.2pt; }
.main__end { font-size: 5pt; color: var(--cinza); line-height: 1.2; max-height: 4.3mm; overflow: hidden; margin-top: .4mm; }
.main__end--longo { font-size: 4.3pt; max-height: 3.7mm; }
.main__num { flex: none; text-align: right; }
.main__num .val { font-size: 10.5pt; color: var(--c); line-height: 1.05; }

.band {
  flex: none;
  height: 4.4mm;
  border-radius: .7mm;
  background: var(--c);
  color: #fff;
  padding: 0 1.6mm;
  display: flex;
  align-items: center;
  font-size: 5.5pt;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.band--longo { font-size: 4.7pt; letter-spacing: .02em; }

.main__corpo { flex: 1; min-height: 0; display: flex; gap: 1.5mm; }
.main__dados { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1mm; }
.sheet .row { display: flex; gap: 1.1mm; flex: none; }
.sheet .box {
  border: .2mm solid var(--fio);
  border-radius: .8mm;
  padding: .8mm 1.3mm .9mm;
  min-width: 0;
  overflow: hidden;
}
.box--valor { border-color: var(--c) !important; background: var(--c-soft); flex: 1.3; }
.box--valor .val { color: var(--c); font-size: 8.8pt; }
.box--valor .val--longo { font-size: 7.2pt; }
.box--venc { flex: 1; }
.box--cod { flex: 1.1; }
.sheet .box .val { margin-top: .3mm; }
.box--contrib { flex: 1; display: flex; flex-direction: column; }
.box--contrib .nome { display: block; margin-top: .4mm; font-size: 7pt; font-weight: 600; line-height: 1.15; max-height: 5.8mm; overflow: hidden; }
.box--contrib .linha { margin-top: auto; }
.box--resp { flex: 1.4; padding-top: .6mm !important; padding-bottom: .6mm !important; }
.box--resp .txt { display: block; margin-top: .3mm; font-size: 5.4pt; font-weight: 600; line-height: 1.1; max-height: 4.2mm; overflow: hidden; }
.box--resp .txt--longo { font-size: 5pt; }
.box--resp .tel { display: block; margin-top: .2mm; font-family: var(--f-mono); font-size: 5.4pt; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.box--ass { flex: 1; display: flex; flex-direction: column; }
.box--ass .linha { margin-top: auto; }
.row--baixo { height: 10.4mm; }
.row--baixo .box { height: 100%; }

.qr { flex: none; width: 17mm; display: flex; flex-direction: column; align-items: center; gap: .5mm; }
.qr svg { display: block; width: 17mm; height: 17mm; }
.qr__cod { font-family: var(--f-mono); font-weight: 600; font-size: 5.4pt; letter-spacing: .03em; white-space: nowrap; }
.qr__dica { font-size: 4.4pt; color: var(--cinza); text-align: center; line-height: 1.15; }

.main__pe {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 2mm;
  font-size: 4.6pt;
  color: var(--cinza);
  white-space: nowrap;
  overflow: hidden;
}
.main__pe b { color: var(--tinta); font-weight: 600; }
.main__pe .via { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* capa: identifica o carnê e leva o QR da entrega */
.slip--capa { grid-template-columns: minmax(0, 1fr); }
.capa {
  padding: 2.4mm 2.6mm 1.8mm;
  display: flex;
  flex-direction: column;
  gap: 1.1mm;
  min-width: 0;
  overflow: hidden;
  background: var(--c-soft);
}
.capa__corpo { flex: 1; min-height: 0; display: flex; gap: 2.5mm; }
.capa__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .9mm; }
.capa__titulo { font-size: 5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.capa__linha-num { flex: none; display: flex; align-items: baseline; gap: 1.2mm; }
.capa__num { font-family: var(--f-mono); font-weight: 600; font-size: 14pt; line-height: 1; color: var(--c); }
.capa__codigo { margin-left: auto; text-align: right; }
.capa__codigo .val { font-size: 8pt; }
.capa__descricao { flex: none; font-size: 5.8pt; line-height: 1.2; max-height: 3.6em; overflow: hidden; }
.capa__descricao--media { font-size: 5.2pt; }
.capa__descricao--longa { font-size: 4.8pt; }
.main__head--capa { height: 9mm; }
.main__head--capa .logo { width: 8.5mm; height: 8.5mm; }
.main__head--capa .main__nome { font-size: 7pt; }
.capa__valor { font-size: 6.4pt; line-height: 1.25; }
.capa__valor b { font-family: var(--f-mono); }
.capa .box { background: #fff; }
/* na capa de um carnê já entregue, o nome fica sobre a linha (não há espaço para os dois) */
.capa .nome--linha { display: block; margin-top: .3mm; font-size: 6.6pt; font-weight: 600; line-height: 1.2; border-bottom: .2mm solid var(--corte); white-space: nowrap; overflow: hidden; flex: none; }
/* com responsável e telefone longos, o rodapé da capa quebra em duas linhas */
.capa .main__pe { flex-wrap: wrap; row-gap: .4mm; }
.capa .main__pe > span { max-width: 100%; overflow: hidden; }
.capa .qr { width: 20mm; }
.capa .qr svg { width: 20mm; height: 20mm; }
.capa .qr__cod { font-size: 7pt; }

/* ---------- Impressão dos carnês: só as páginas, em tamanho real ---------- */
.area-impressao { display: none; }
@media print {
  body.imprimindo-carnes { background: #fff !important; }
  body.imprimindo-carnes > *:not(.area-impressao) { display: none !important; }
  body.imprimindo-carnes .area-impressao { display: block; }
  body.imprimindo-carnes .area-impressao .sheet { break-after: page; page-break-after: always; }
  body.imprimindo-carnes .area-impressao .sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* A margem zero da página entra por JS só na hora de imprimir carnês (impressao.js),
   para não afetar a impressão dos relatórios. */

/* área usada só para gerar o PDF */
.export-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}