.ajuda{font-size:11.5px;color:var(--mudo);margin:0}
label.bt{cursor:pointer}

/* ---------------- layout do gerador ---------------- */
.gerador{display:grid;grid-template-columns:minmax(320px,410px) 1fr;
  grid-template-rows:minmax(0,1fr);height:calc(100dvh - var(--topo));
  min-height:0;overflow:hidden}
.lado-form{border-right:1px solid var(--borda);background:var(--sup);
  display:flex;flex-direction:column;min-height:0;min-width:0}
.form-cab{padding:12px 14px;border-bottom:1px solid var(--borda-2);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-cab select{flex:1;min-width:0;height:40px;padding:0 10px;border-radius:9px;
  border:1px solid var(--borda);background:var(--sup-2)}
.rolagem-form{flex:1;overflow-y:auto;padding:4px 14px 60px;min-width:0;
  overscroll-behavior:contain}
.bloco{border-bottom:1px solid var(--borda-2)}
.bloco>summary{display:flex;align-items:center;gap:9px;padding:12px 2px;
  cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;min-height:46px}
.bloco>summary::-webkit-details-marker{display:none}
.bloco>summary .seta{color:var(--mudo);transition:transform .18s;width:16px;height:16px}
.bloco[open]>summary .seta{transform:rotate(90deg)}
.bloco>summary .dica-b{margin-left:auto;font-size:11.5px;color:var(--mudo);
  font-weight:400}
.bloco-corpo{padding:0 0 14px}

.linha-campos{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.linha-campos.um{grid-template-columns:1fr}
.linha-campos.tres{grid-template-columns:1fr 1fr 1fr}
.campo-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo-f label{font-size:12px;font-weight:600;color:var(--mudo)}
.campo-f input,.campo-f textarea,.campo-f select{width:100%;min-width:0;
  padding:9px 10px;border-radius:8px;border:1px solid var(--borda);
  background:var(--sup-2);font-size:14px;outline:none}
.campo-f textarea{min-height:70px;resize:vertical;line-height:1.5}
.campo-f input:focus,.campo-f textarea:focus,.campo-f select:focus{
  border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-sup);background:var(--sup)}
.campo-f .ajuda{font-size:11.5px;color:var(--mudo)}
.linha-campos+.linha-campos{margin-top:10px}

/* Itens dinamicos — em duas linhas, nao em cinco colunas: numa coluna de 410px
   a descricao ficava com ~70px e nao dava para ler o que se digitava. */
.itens{margin-top:6px}
.item{display:grid;grid-template-columns:1fr 34px;gap:6px;align-items:center;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--borda-2)}
.item:last-child{border-bottom:0;margin-bottom:2px}
.item input{padding:8px 10px;border-radius:8px;border:1px solid var(--borda);
  background:var(--sup-2);font-size:13.5px;outline:none;min-width:0;width:100%}
.item input:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-sup);
  background:var(--sup)}
.item .nums{grid-column:1 / -1;display:grid;
  grid-template-columns:5.2rem 1fr auto;gap:6px;align-items:center}
.item .total-item{font-size:13px;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;padding-left:4px;white-space:nowrap}
.item .remover{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;
  border:1px solid var(--borda);background:var(--sup);color:var(--mudo);cursor:pointer}
.item .remover:hover{color:#c0392b;border-color:#c0392b;background:#fff1ef}
.item .remover svg{width:15px;height:15px}
.somatorio{margin-top:10px;padding-top:10px;border-top:1px dashed var(--borda);
  font-size:13px;color:var(--mudo);display:flex;justify-content:space-between}
.somatorio b{color:var(--tinta)}

/* logo e cores */
.logo-area{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo-previa{width:96px;height:64px;border-radius:9px;border:1px dashed var(--borda);
  display:grid;place-items:center;background:var(--sup-2);overflow:hidden;flex:none}
.logo-previa img{max-width:100%;max-height:100%;object-fit:contain}
.logo-previa span{font-size:11px;color:var(--mudo);text-align:center;padding:4px}
.logo-acoes{display:flex;flex-direction:column;gap:6px}
.cores{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cor{width:30px;height:30px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;position:relative}
.cor[aria-pressed="true"]{border-color:var(--tinta);
  box-shadow:0 0 0 2px var(--sup),0 0 0 4px var(--tinta)}
.cor-livre{width:34px;height:30px;padding:0;border:1px solid var(--borda);
  border-radius:8px;background:none;cursor:pointer}

/* previa */
.lado-previa{display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--fundo)}
.previa-topo{display:flex;align-items:center;gap:7px;padding:8px 14px;
  border-bottom:1px solid var(--borda);background:var(--sup);flex-wrap:wrap}
.previa-topo .obs{font-size:12px;color:var(--mudo);max-width:30ch;line-height:1.35}
.previa-topo .zoom{display:flex;align-items:center;gap:2px;margin-left:auto}
.previa-topo .zoom .val{min-width:44px;text-align:center;font-size:12.5px;
  color:var(--mudo);font-variant-numeric:tabular-nums}
.rolagem-recibo{flex:1;overflow:auto;padding:20px 16px 60px;
  overscroll-behavior:contain}
@media (max-width:1180px){.previa-topo .obs{display:none}}

.abas-r{display:none;gap:6px;padding:8px 14px;background:var(--sup);
  border-bottom:1px solid var(--borda)}
.abas-r button{flex:1;min-height:40px;border-radius:9px;border:1px solid var(--borda);
  background:var(--sup);cursor:pointer;font-size:13.5px;font-weight:550}
.abas-r button[aria-pressed="true"]{background:var(--acento);
  border-color:var(--acento);color:#fff}

@media (max-width:900px){
  .gerador{grid-template-columns:1fr}
  .abas-r{display:flex}
  .gerador.ver-form .lado-previa{display:none}
  .gerador.ver-doc .lado-form{display:none}
  .lado-form{border-right:0}
  .item{grid-template-columns:1fr 54px 84px 84px 34px}
  .cab-itens{grid-template-columns:1fr 54px 84px 84px 34px}
}
@media (max-width:520px){
  .item,.cab-itens{grid-template-columns:1fr 46px 74px 74px 32px;gap:4px}
  .linha-campos,.linha-campos.tres{grid-template-columns:1fr}
}

/* ---------------- a folha do recibo ---------------- */
.folha-r{--cor:#2f6df6;--cor-clara:#eaf0ff;
  background:#fff;color:#111;width:21cm;max-width:100%;min-height:29.7cm;
  margin:0 auto;padding:1.4cm 1.5cm;box-sizing:border-box;
  font-family:Arial,Helvetica,"Segoe UI",sans-serif;font-size:10.5pt;
  line-height:1.45;box-shadow:var(--sombra);border:1px solid var(--borda)}
.folha-r *{box-sizing:border-box}
/* A separacao entre vias e feita pelo proprio .corte, que ja desenha a linha
   tracejada; sem isso a tesoura subia por cima das assinaturas da via acima. */
.folha-r .corte{display:flex;align-items:center;gap:8px;color:#9aa0aa;
  font-size:8pt;letter-spacing:.15em;margin:0.6cm 0}
.folha-r .corte::before,.folha-r .corte::after{content:"";flex:1;
  border-top:1px dashed #b8bcc4}

.folha-r .topo-r{display:flex;gap:14px;align-items:flex-start;
  border-bottom:3px solid var(--cor);padding-bottom:10px;margin-bottom:14px}
.folha-r .marca{display:flex;gap:12px;align-items:center;min-width:0;flex:1}
.folha-r .marca img{max-width:150px;max-height:70px;object-fit:contain}
.folha-r .emit{min-width:0}
.folha-r .emit .nome{font-size:13.5pt;font-weight:bold;line-height:1.2;
  overflow-wrap:anywhere}
.folha-r .emit .det{font-size:8.5pt;color:#555;margin-top:2px;
  overflow-wrap:anywhere;white-space:pre-line}
.folha-r .selo{text-align:right;flex:none}
.folha-r .selo .tit{font-size:20pt;font-weight:bold;color:var(--cor);
  letter-spacing:.04em;line-height:1}
.folha-r .selo .sub{font-size:8.5pt;color:#666;margin-top:2px}
.folha-r .selo .valor{margin-top:8px;background:var(--cor);color:#fff;
  border-radius:6px;padding:7px 14px;font-size:15pt;font-weight:bold;
  white-space:nowrap}

.folha-r .faixa{background:var(--cor);color:#fff;font-weight:bold;font-size:9.5pt;
  padding:5px 9px;border-radius:4px 4px 0 0;letter-spacing:.03em;
  text-transform:uppercase}
.folha-r .caixa{border:1px solid #d5d9e0;border-top:0;border-radius:0 0 4px 4px;
  padding:9px 10px;margin-bottom:12px}
.folha-r .par{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.folha-r .par.um{grid-template-columns:1fr}
.folha-r .dado{min-width:0}
.folha-r .dado .rot{font-size:7.5pt;color:#777;text-transform:uppercase;
  letter-spacing:.05em}
.folha-r .dado .val{font-size:10pt;overflow-wrap:anywhere;min-height:14px}

.folha-r table{width:100%;border-collapse:collapse;font-size:9.5pt;
  margin-bottom:10px}
.folha-r thead th{background:var(--cor);color:#fff;padding:6px 8px;
  text-align:left;font-size:8.5pt;text-transform:uppercase;letter-spacing:.04em}
.folha-r thead th.n,.folha-r td.n{text-align:right}
.folha-r tbody td{border-bottom:1px solid #e3e6ec;padding:6px 8px;
  vertical-align:top}
.folha-r tbody tr:nth-child(even) td{background:#fafbfd}
.folha-r .vazio-linha td{color:#bbb}

.folha-r .totais{margin-left:auto;width:min(62%,9.5cm)}
.folha-r .totais .l{display:flex;justify-content:space-between;gap:10px;
  padding:4px 8px;font-size:10pt}
.folha-r .totais .l.destaque{background:var(--cor);color:#fff;font-weight:bold;
  font-size:12pt;border-radius:5px;margin-top:4px;padding:8px}
.folha-r .extenso{margin-top:10px;font-size:9.5pt;background:var(--cor-clara);
  border-left:3px solid var(--cor);padding:7px 10px;border-radius:0 4px 4px 0}
.folha-r .extenso b{text-transform:uppercase;font-size:8pt;color:#555;
  letter-spacing:.05em;display:block;margin-bottom:1px}

.folha-r .corpo-texto{font-size:11pt;line-height:1.85;text-align:justify;
  margin:6px 0 10px}
.folha-r .corpo-texto .pre{font-weight:bold}
.folha-r .corpo-texto .vaz{color:#999}

.folha-r .assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:22px;
  margin-top:26px}
.folha-r .assinaturas.uma{grid-template-columns:1fr;max-width:11cm;margin-inline:auto}
.folha-r .ass{text-align:center}
.folha-r .ass .linha-ass{border-top:1px solid #333;margin-bottom:4px}
.folha-r .ass .papel{font-size:8.5pt;font-weight:bold}
.folha-r .ass .quem{font-size:8.5pt;color:#555;overflow-wrap:anywhere}
.folha-r .rodape-r{margin-top:20px;padding-top:8px;border-top:1px solid #e3e6ec;
  font-size:8pt;color:#777;text-align:center;overflow-wrap:anywhere}
.folha-r .obs-r{font-size:9pt;color:#444;margin-top:10px;white-space:pre-line}

.folha-r .marcar{display:inline-block;width:11px;height:11px;border:1px solid #555;
  margin-right:5px;vertical-align:-1px}
.folha-r .marcar.on{background:var(--cor);border-color:var(--cor);position:relative}
.folha-r .marcar.on::after{content:"";position:absolute;left:3px;top:0;width:4px;
  height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.folha-r .pgto{font-size:9.5pt;display:flex;flex-wrap:wrap;gap:12px}

/* via compacta do recibo de caixa */
.folha-r.compacta{min-height:0}
.folha-r .via.mini .topo-r{border-bottom-width:2px;padding-bottom:7px;
  margin-bottom:9px}
.folha-r .via.mini .selo .tit{font-size:15pt}
.folha-r .via.mini .selo .valor{font-size:12pt;padding:5px 10px}
.folha-r .via.mini .marca img{max-height:46px}
.folha-r .via.mini .emit .nome{font-size:11pt}

@media (max-width:820px){
  .folha-r{width:100%;padding:0.9cm 0.7cm;min-height:0;font-size:11pt}
  .folha-r .topo-r{flex-direction:column;gap:8px}
  .folha-r .selo{text-align:left}
  .folha-r .par{grid-template-columns:1fr}
  .folha-r .totais{width:100%}
  .folha-r .assinaturas{grid-template-columns:1fr;gap:26px}
}

@media print{
  .topo,.form-cab,.lado-form,.previa-topo,.abas-r,.rodape-site{display:none!important}
  body{background:#fff}
  .gerador,.lado-previa{display:block;height:auto;overflow:visible}
  .rolagem-recibo{overflow:visible;padding:0}
  .folha-r{width:auto;max-width:none;min-height:0;margin:0;padding:0;
    box-shadow:none!important;border:0;zoom:1!important}
  .folha-r .via{page-break-inside:avoid}
  .folha-r table,.folha-r .assinaturas{page-break-inside:avoid}
  @page{size:A4;margin:1.4cm 1.5cm}
}