/* ══════════════════════════════════════════════════════════════
   RECIBO — formulário + pré-visualização (public/panels/recibo.html)
   ══════════════════════════════════════════════════════════════ */

.recibo-app{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:var(--space-4);align-items:start;}
@media (max-width:960px){.recibo-app{grid-template-columns:minmax(0,1fr);}}
/* Itens do grid não podem crescer pelo conteúdo (a folha tem 720px): no celular empurrava a página. */
.recibo-app>*{min-width:0;}

/* Imprimir (botão Imprimir no menu Baixar) — mostra só o card do recibo,
   sem sidebar/topbar/formulário/menu do sistema em volta. Ativado
   momentaneamente via body.recibo-print-mode (reciboImprimir() em recibo.js). */
@media print{
  body.recibo-print-mode #sidebar,
  body.recibo-print-mode #app-topbar,
  body.recibo-print-mode .phead,
  body.recibo-print-mode .flash,
  body.recibo-print-mode .recibo-form-card{display:none !important;}
  body.recibo-print-mode .recibo-app{display:block;}
  body.recibo-print-mode .recibo-preview-scroll{max-height:none;overflow:visible;padding:0;background:none;display:block;}
  body.recibo-print-mode .recibo-doc{box-shadow:none;width:100%;max-width:100%;margin:0;}
}

.recibo-form-card{padding:var(--space-4);}
.recibo-card-title{display:flex;align-items:center;margin:0 0 var(--space-3);font-size:14px;font-weight:700;color:var(--text);}

/* Botão "Baixar recibo" com escolha de formato (PDF/PNG) num menu — um
   botão só (a seta faz parte dele, não é um segundo botão colado). */
.rec-split-btn{position:relative;display:inline-flex;}
/* position:fixed com top/left calculados em reciboToggleMenuBaixar() —
   o card do formulário tem overflow:hidden e cortaria um menu absolute. */
.rec-split-menu{display:none;position:fixed;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 12px 28px -10px rgba(10,16,32,.35);padding:6px;z-index:1000;}
.rec-split-menu.open{display:block;}
.rec-split-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:none;border:none;border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-family:inherit;text-align:left;cursor:pointer;}
.rec-split-menu button:hover{background:var(--surface-2);}

.recibo-preview-wrap{position:sticky;top:calc(var(--shell-offset,0px) + 12px);}
.recibo-preview-scroll{overflow:auto;max-height:calc(100vh - 140px);border-radius:var(--radius);background:var(--surface-2);padding:var(--space-4);display:flex;justify-content:center;}

/* Campo obrigatório vazio, sinalizado após tentativa de download */
.rec-input-erro{border-color:var(--danger) !important;box-shadow:0 0 0 1px var(--danger) !important;}

/* ── Folha do recibo ───────────────────────────────────────────
   Documento imprimível: fundo sempre branco/tinta escura, independente
   do tema ativo do sistema. Cores extraídas do logotipo oficial da
   Tropical Color (azul #003278, dourado #FAC800, laranja #F08C00). */
:root{
  --rec-azul:#003278;
  --rec-azul-2:#0a4faa;
  --rec-dourado:#e0a900;
  --rec-laranja:#f08c00;
  --rec-texto:#1b2233;
  --rec-muted:#6b7288;
  --rec-linha:#c7ccd8;
  --rec-borda-externa:#e6e9f0;
}

.recibo-doc{
  width:720px; max-width:100%; min-width:0; /* item flex: sem isso, min-width:auto ignora o max-width e corta o card em telas estreitas */
  background:#fff; color:var(--rec-texto);
  border-radius:0; /* cantos retos: a moldura funciona como guia de corte na impressão */
  border:1px solid var(--rec-borda-externa); /* borda bem clara — nunca "vaza" o friso de cima, ao contrário do box-shadow usado antes */
  box-shadow:0 18px 44px -16px rgba(10,16,32,.45);
  box-sizing:border-box;
  overflow:hidden; /* trava qualquer filho (friso, gradiente) exatamente dentro da borda */
}

/* Friso é um bloco real (não um background sobreposto) — assim fica preso
   dentro da borda por construção, sem risco de sub-pixel "vazando" nos cantos. */
.recibo-doc-faixa{height:6px;background:linear-gradient(90deg,var(--rec-azul),var(--rec-dourado) 50%,var(--rec-laranja));}

.recibo-doc-inner{
  padding:26px 36px 26px;
  font-family:'Georgia','Times New Roman',serif;
  position:relative;
}

.recibo-doc-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding-bottom:16px;margin-bottom:18px;border-bottom:2.5px solid var(--rec-azul);}
.recibo-logo{height:44px;width:auto;object-fit:contain;justify-self:start;}
.recibo-doc-titulo{margin:0;text-align:center;font-size:24px;letter-spacing:6px;color:var(--rec-azul);font-weight:700;text-transform:uppercase;white-space:nowrap;}

.recibo-valor-box{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:3px;background:linear-gradient(180deg,#f6f8fc,#eef1f8);border:1.5px solid var(--rec-azul);border-radius:8px;padding:7px 20px;min-width:160px;}

/* Telas estreitas (celular): a linha logo+título+caixa não cabe no
   grid rígido de 3 colunas — empilha e encolhe pra caber sem cortar. */
@media (max-width:560px){
  .recibo-doc-inner{padding:18px 16px 20px;}
  .recibo-doc-top{grid-template-columns:1fr auto;grid-template-areas:"logo box" "titulo titulo";gap:10px 12px;padding-bottom:12px;margin-bottom:14px;}
  .recibo-logo{grid-area:logo;height:34px;justify-self:start;}
  .recibo-doc-titulo{grid-area:titulo;font-size:18px;letter-spacing:3px;text-align:left;}
  .recibo-valor-box{grid-area:box;min-width:0;padding:5px 12px;}
  .recibo-valor-cifra{font-size:12px !important;}
  .recibo-valor-num{font-size:20px !important;}
  .recibo-linha,.recibo-campo strong,.recibo-data-linha{font-size:13px;}
  .recibo-campos{gap:8px;}
}
.recibo-valor-box>span{font-family:'Segoe UI',Arial,sans-serif;font-size:9.5px;letter-spacing:2px;color:var(--rec-muted);font-weight:700;text-transform:uppercase;}
.recibo-valor-box strong{display:flex;align-items:baseline;gap:4px;white-space:nowrap;line-height:1;}
/* Tamanhos fixados explicitamente (não por herança) — o design system tem
   uma regra global de "span" que, sem isso, vencia por especificidade e
   deixava o número minúsculo. */
.recibo-valor-cifra{font-family:'Segoe UI',Arial,sans-serif !important;font-size:15px !important;font-weight:700 !important;color:var(--rec-laranja) !important;font-style:normal;letter-spacing:0;}
.recibo-valor-num{font-family:'Segoe UI',Arial,sans-serif !important;font-size:27px !important;font-weight:700 !important;color:var(--rec-azul) !important;letter-spacing:-.3px;}

/* justify: só estica as linhas que realmente quebram dentro do próprio
   parágrafo — a última linha (ou um parágrafo de uma linha só, como
   "referente a") continua alinhada à esquerda normalmente, por padrão do CSS. */
.recibo-linha{font-size:14.5px;line-height:2;margin:0 0 6px;font-family:'Segoe UI',Arial,sans-serif;color:var(--rec-texto);text-align:justify;text-justify:inter-word;}
.recibo-recebemos{margin-bottom:10px;}
.recibo-linha strong{font-weight:700;border-bottom:1px dotted var(--rec-linha);padding:0 3px;}

.recibo-campos{display:flex;flex-direction:column;gap:12px;margin:18px 0 4px;font-family:'Segoe UI',Arial,sans-serif;font-size:14px;padding-top:14px;border-top:1px dashed var(--rec-linha);}
.recibo-campo{display:flex;flex-direction:column;gap:2px;}
.recibo-campo span{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--rec-muted);font-weight:700;}
.recibo-campo strong{font-size:14.5px;color:var(--rec-texto);font-weight:600;border-bottom:1px dotted var(--rec-linha);padding-bottom:3px;}

.recibo-data-linha{font-family:'Segoe UI',Arial,sans-serif;font-size:14px;text-align:right;margin:18px 0 0;color:var(--rec-texto);}
.recibo-data-linha strong{font-weight:700;color:var(--rec-azul);}

.recibo-assinatura{display:flex;flex-direction:column;align-items:center;gap:7px;margin:34px auto 18px;width:62%;}
.recibo-assinatura-linha{width:100%;border-top:1.5px solid var(--rec-azul);}
.recibo-assinatura span{font-family:'Segoe UI',Arial,sans-serif;font-size:11px;color:var(--rec-muted);letter-spacing:.6px;text-transform:uppercase;}

.recibo-endereco-empresa{text-align:center;font-family:'Segoe UI',Arial,sans-serif;font-size:10.5px;color:var(--rec-muted);letter-spacing:.3px;margin:0;border-top:1px solid var(--rec-linha);padding-top:10px;}

/* ── Folha = recibo + PIX embaixo, FORA da moldura (29/09/2026) ── */
.recibo-folha{width:720px;max-width:100%;min-width:0;display:flex;flex-direction:column;}
.recibo-folha .recibo-doc{width:100%;}
/* Fora do papel: na tela segue o tema; no papel (impressão/imagem) tinta escura. */
.recibo-pix{margin:10px 2px 0;font-family:'Segoe UI',Arial,sans-serif;font-size:11.5px;color:var(--text-muted);overflow-wrap:anywhere;}
.recibo-pix span{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-right:6px;}
.recibo-pix strong{font-weight:600;color:var(--text);}
.recibo-pix[hidden]{display:none;}
.recibo-pix.papel{color:var(--rec-muted);}
.recibo-pix.papel strong{color:var(--rec-texto);}
@media print{
  body.recibo-print-mode .recibo-folha{width:100%;max-width:100%;}
  body.recibo-print-mode .recibo-pix{color:var(--rec-muted);}
  body.recibo-print-mode .recibo-pix strong{color:var(--rec-texto);}
}

/* ── Buscar contato (Gerar Recibo) ── */
.rec-contato{margin:0 0 var(--space-4);padding-bottom:var(--space-4);border-bottom:1px dashed var(--border);}
.rec-contato>label{display:block;font-size:var(--font-xs);font-weight:600;color:var(--text-muted);margin-bottom:var(--space-1);}
.rec-contato-linha{display:flex;gap:var(--space-2);align-items:center;}
.rec-contato-campo{position:relative;flex:1;min-width:0;}
.rec-contato-campo input{width:100%;padding-left:32px;}
.rec-contato-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:inline-flex;pointer-events:none;}
.rec-contato-res{margin-top:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);max-height:240px;overflow:auto;}
.rec-contato-res[hidden]{display:none;}
.rec-contato-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border);padding:var(--space-2) var(--space-3);cursor:pointer;color:var(--text);font-family:inherit;}
.rec-contato-item:last-child{border-bottom:0;}
.rec-contato-item:hover,.rec-contato-item.ativo{background:var(--surface-2);}
.rec-contato-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}
.rec-contato-item b{display:block;font-size:var(--font-sm);}
.rec-contato-item small{display:block;font-size:var(--font-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rec-contato-msg{padding:var(--space-3);font-size:var(--font-xs);color:var(--text-muted);}

/* ── Diálogo "Contatos do recibo" ── */
.rec-ct-topo{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3);}
.rec-ct-conta{font-size:var(--font-xs);color:var(--text-muted);white-space:nowrap;}
.rec-ct-lista{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-sm);max-height:min(60vh,520px);overflow:auto;}
.rec-ct-item{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-3);border-bottom:1px solid var(--border);}
.rec-ct-item:last-child{border-bottom:0;}
.rec-ct-info{flex:1;min-width:0;}
.rec-ct-info b{display:block;font-size:var(--font-sm);color:var(--text);overflow-wrap:anywhere;}
.rec-ct-info small{display:block;font-size:var(--font-xs);color:var(--text-muted);line-height:1.5;overflow-wrap:anywhere;}
.rec-ct-lanca{display:inline-flex !important;align-items:center;gap:2px;margin-top:2px;color:var(--primary) !important;}
.rec-ct-acoes{display:flex;gap:var(--space-1);flex-shrink:0;}
.rec-ct-apagar{color:var(--danger);}
.rec-ct-editando{background:var(--surface-2);}
.rec-ct-form-acoes{display:flex;justify-content:flex-end;gap:var(--space-2);}
.rec-ct-lista .state{border:0;}
@media (max-width:560px){
  .rec-ct-item{flex-wrap:wrap;}
  .rec-ct-acoes{width:100%;justify-content:flex-end;}
}

/* Mensagem da caixa "Link de assinatura" (enviado / mande você). */
.rec-link-msg{margin:0 0 var(--space-2);font-size:var(--font-xs);line-height:1.5;color:var(--text-muted);}
.rec-link-msg:empty{display:none;}
.rec-link-msg.aviso{color:var(--warning);font-weight:600;}