/* ══════════════════════════════════════════════════════════════
   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:1fr;}}

/* 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;}