/* ============================================================
   CONTAS A PAGAR — tela e modal de detalhe  (Fase 1: interface)
   Markup em parciais/contas_pagar.html; comportamento em js/financeiro.js.

   TUDO escopado em #cpTela / #cpDetOvl. A tela mora dentro do .content do
   painel, e css/base.css estiliza table/th/td por seletor de ELEMENTO
   (padding 12px, th sticky) — sem o escopo isso entra por cima e desmonta
   a tabela. .btn tambem e global (351 usos): por isso aqui e .cp-btn.
   ============================================================ */

#cpTela{
  --cp-panel:#ffffff; --cp-ink:#1a2230; --cp-muted:#5f6d86; --cp-line:#d9e0ea;
  --cp-blue:#1a3c7d; --cp-blue-soft:#e7eefb; --cp-chip:#f4f7fb;
  --cp-good:#1f7a3d; --cp-good-bg:#e7f4ec; --cp-warn:#b26a00; --cp-warn-bg:#fdf3e3;
  --cp-bad:#c0392b;  --cp-bad-bg:#fbe9e7;
  color:var(--cp-ink); font-size:13px; line-height:1.5;
}
#cpTela *{ box-sizing:border-box; }

/* ---------- topo ---------- */
#cpTela .cp-top{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#cpTela .cp-kicker{ font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cp-blue); font-weight:600; }
#cpTela .cp-h1{ font-size:23px; font-weight:700; margin:3px 0 0; letter-spacing:-.01em; color:var(--cp-ink); }
#cpTela .cp-proto{ display:inline-flex; gap:6px; align-items:center; font-size:11px; font-weight:600;
  color:var(--cp-warn); background:var(--cp-warn-bg); border:1px solid #e5c99a;
  border-radius:999px; padding:4px 10px; margin-top:6px; }
#cpTela .cp-hoje{ font-size:12px; color:var(--cp-muted); }

/* ---------- KPIs ---------- */
#cpTela .cp-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
@media(max-width:720px){ #cpTela .cp-kpis{ grid-template-columns:1fr 1fr; } }
#cpTela .cp-kpi{ background:var(--cp-panel); border:1px solid var(--cp-line); border-radius:11px;
  padding:12px 14px; box-shadow:0 6px 22px rgba(20,40,80,.10);
  border-top:3px solid var(--c,var(--cp-blue)); cursor:pointer; }
#cpTela .cp-kpi:hover{ background:var(--cp-chip); }
#cpTela .cp-kpi .l{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cp-muted); font-weight:600; }
#cpTela .cp-kpi .v{ font-size:20px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; }
#cpTela .cp-kpi .n{ font-size:11px; color:var(--cp-muted); }
#cpTela .cp-kpi.venc{ --c:var(--cp-bad); } #cpTela .cp-kpi.venc .v{ color:var(--cp-bad); }
#cpTela .cp-kpi.sem{ --c:var(--cp-warn); }
#cpTela .cp-kpi.mes{ --c:var(--cp-blue); }
#cpTela .cp-kpi.tot{ --c:var(--cp-good); } #cpTela .cp-kpi.tot .v{ color:var(--cp-good); }

/* ---------- barra de filtros ---------- */
#cpTela .cp-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
#cpTela .cp-bar input,#cpTela .cp-bar select{ font-family:inherit; font-size:13px; padding:8px 10px;
  border:1px solid var(--cp-line); border-radius:8px; background:var(--cp-panel); color:var(--cp-ink); }
#cpTela .cp-seg{ display:flex; background:var(--cp-chip); border:1.5px solid var(--cp-line);
  border-radius:8px; padding:3px; }
#cpTela .cp-seg button{ font-family:inherit; font-size:12px; font-weight:600; border:none;
  background:transparent; color:var(--cp-muted); border-radius:6px; padding:6px 11px; cursor:pointer; }
#cpTela .cp-seg button[aria-pressed="true"]{ background:var(--cp-panel); color:var(--cp-ink);
  box-shadow:0 1px 3px rgba(0,0,0,.15); }

/* ---------- tabela ---------- */
#cpTela .cp-card{ background:var(--cp-panel); border:1px solid var(--cp-line); border-radius:12px;
  box-shadow:0 6px 22px rgba(20,40,80,.10); overflow:hidden; }
#cpTela .cp-scroll{ overflow-x:auto; }
#cpTela .cp-tab{ width:100%; border-collapse:collapse; background:none; border-radius:0;
  box-shadow:none; margin:0; }
#cpTela .cp-tab th,#cpTela .cp-tab td{ text-align:left; font-size:12.5px; padding:9px 11px;
  border-bottom:1px solid var(--cp-line); vertical-align:middle; position:static; letter-spacing:0; }
#cpTela .cp-tab th{ font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cp-muted); font-weight:600; background:var(--cp-chip);
  border-bottom:1px solid var(--cp-line); }
#cpTela .cp-tab tr:hover td{ background:#f3f7fd; }
#cpTela .cp-tab .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
#cpTela .cp-tab tr.grupo td{ background:#eef2f8; font-weight:700; color:var(--cp-blue); font-size:13px; }
#cpTela .cp-mono{ font-family:ui-monospace,Consolas,monospace; }
#cpTela .cp-venc.v{ color:var(--cp-bad); font-weight:700; }
#cpTela .cp-st{ font-size:10px; font-weight:700; border-radius:5px; padding:2px 8px; white-space:nowrap; }
#cpTela .cp-st.aberto{ color:var(--cp-blue); background:var(--cp-blue-soft); }
#cpTela .cp-st.hoje{ color:var(--cp-warn); background:var(--cp-warn-bg); }
#cpTela .cp-st.vencido{ color:var(--cp-bad); background:var(--cp-bad-bg); }
#cpTela .cp-st.pago{ color:var(--cp-good); background:var(--cp-good-bg); }
#cpTela .cp-st.cancelado{ color:#888; background:#f2f2f2; }
#cpTela .cp-cat{ font-size:11px; color:var(--cp-muted); }
#cpTela .cp-orig{ font-size:9px; font-weight:700; color:var(--cp-blue); background:var(--cp-blue-soft);
  border-radius:4px; padding:1px 5px; margin-left:6px; white-space:nowrap; }
#cpTela .cp-selo{ font-size:10px; font-weight:700; background:#fff3cd; color:#856404;
  border-radius:5px; padding:1px 6px; margin-left:4px; }
#cpTela .cp-foot{ font-size:12px; color:var(--cp-muted); padding:12px 14px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ⚠️ Paginação (29/09/2026). SEM o prefixo #cpTela de propósito: a barra de
   Contas a Receber é montada fora daquela árvore e usaria as mesmas regras. A tela trazia 500 títulos de 1.114 e não dizia que
   havia mais: quem não achava um título concluía que o sistema tinha perdido o
   dado. A barra só aparece quando existe mais de uma página. */
.cp-pag{ display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px; border-top:1px solid var(--cp-linha,#eef1f6); flex-wrap:wrap; }
.cp-pag button{ background:#fff; border:1px solid #d5dbe5; border-radius:7px;
  padding:5px 11px; font-size:12.5px; cursor:pointer; color:#243044; }
.cp-pag button:hover:not(:disabled){ background:#f1f5fb; border-color:#9fb4d4; }
.cp-pag button:disabled{ opacity:.45; cursor:default; }
.cp-pag button.atual{ background:#1a3c7d; border-color:#1a3c7d; color:#fff;
  font-weight:700; }
.cp-pag .cp-pag-info{ font-size:12px; color:var(--cp-muted,#6b7280);
  margin-right:8px; }
#cpTela .cp-note{ font-size:12px; color:var(--cp-muted); background:var(--cp-panel);
  border:1px dashed var(--cp-line); border-radius:9px; padding:11px 13px; margin-top:14px; line-height:1.55; }
#cpTela .cp-legenda{ display:flex; gap:15px; padding:11px 4px; font-size:12px;
  color:var(--cp-muted); flex-wrap:wrap; }

/* ---------- botoes (cp-btn, e NAO .btn: a global tem 351 usos) ---------- */
#cpTela .cp-btn,#cpDetOvl .cp-btn{ font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; border-radius:7px; padding:6px 11px; border:1.5px solid var(--cp-line);
  background:#fff; color:#1a2230; transition:none; }
#cpTela .cp-btn.green,#cpDetOvl .cp-btn.green{ background:#1f7a3d; color:#fff; border-color:#1f7a3d; }
#cpTela .cp-btn.blue,#cpDetOvl .cp-btn.blue{ background:#1a3c7d; color:#fff; border-color:#1a3c7d; }
#cpTela .cp-btn[disabled],#cpDetOvl .cp-btn[disabled]{ opacity:.4; cursor:default; }

/* ============================================================
   O MODAL DE DETALHE — a rastreabilidade da entrada
   ============================================================ */
#cpDetOvl{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1060;
  overflow:auto; padding:24px; color:#1a2230; font-size:13px; line-height:1.5; }
#cpDetOvl[hidden]{ display:none !important; }
#cpDetOvl *{ box-sizing:border-box; }
#cpDetOvl .cp-box{ max-width:560px; margin:0 auto; background:#fff; border-radius:12px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); }
#cpDetOvl .cp-mhead{ background:#1a3c7d; color:#fff; padding:13px 16px;
  display:flex; align-items:center; gap:10px; }
#cpDetOvl .cp-mhead b{ font-size:15px; }
#cpDetOvl .cp-mhead .sub{ font-size:11px; opacity:.85; }
#cpDetOvl .cp-mhead .x{ margin-left:auto; cursor:pointer; background:none; border:none;
  color:#fff; font-size:22px; line-height:1; padding:0 4px; }
#cpDetOvl .cp-msec{ padding:13px 16px; border-bottom:1px solid #d9e0ea; }
#cpDetOvl .cp-msec h3{ margin:0 0 8px; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#5f6d86; font-weight:600; }
#cpDetOvl .cp-aud{ display:flex; gap:10px; align-items:flex-start; background:#e7eefb;
  border-radius:9px; padding:11px 13px; font-size:13px; }
#cpDetOvl .cp-aud b{ color:#1a3c7d; }
#cpDetOvl .cp-kv{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:12.5px; }
#cpDetOvl .cp-kv .k{ color:#5f6d86; }
#cpDetOvl .cp-st{ font-size:10px; font-weight:700; border-radius:5px; padding:2px 8px; white-space:nowrap; }
#cpDetOvl .cp-st.aberto{ color:#1a3c7d; background:#e7eefb; }
#cpDetOvl .cp-st.hoje{ color:#b26a00; background:#fdf3e3; }
#cpDetOvl .cp-st.vencido{ color:#c0392b; background:#fbe9e7; }
#cpDetOvl .cp-st.pago{ color:#1f7a3d; background:#e7f4ec; }
#cpDetOvl .cp-mfoot{ padding:12px 16px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* a nota: imita papel, cor fixa, independente do painel */
#cpDetOvl .cp-danfe{ background:#fff; color:#111; border:1px solid #333; border-radius:5px;
  padding:10px; font-family:Arial,Helvetica,sans-serif; font-size:10.5px; }
#cpDetOvl .cp-danfe .dh{ display:flex; gap:6px; align-items:center; border-bottom:1px solid #333;
  padding-bottom:5px; margin-bottom:5px; }
#cpDetOvl .cp-danfe .dh b{ font-size:14px; }
#cpDetOvl .cp-danfe .dh span{ font-size:9px; color:#555; }
#cpDetOvl .cp-danfe .dh .ent{ margin-left:auto; border:1px solid #333; border-radius:3px;
  padding:1px 6px; font-weight:700; color:#111; }
#cpDetOvl .cp-danfe .dbox{ border:1px solid #333; border-radius:3px; padding:4px 6px; margin-bottom:5px; }
#cpDetOvl .cp-danfe .dbox small{ color:#666; font-size:8px; display:block; letter-spacing:.03em; }
#cpDetOvl .cp-danfe .barcode{ height:22px; margin:3px 0;
  background:repeating-linear-gradient(90deg,#111 0 1px,#fff 1px 2px,#111 2px 4px,#fff 4px 7px); }
#cpDetOvl .cp-danfe .mono{ font-family:ui-monospace,Consolas,monospace; font-size:9px; }
#cpDetOvl .cp-danfe table{ width:100%; border-collapse:collapse; background:none;
  box-shadow:none; border-radius:0; margin:0; }
#cpDetOvl .cp-danfe th,#cpDetOvl .cp-danfe td{ border:1px solid #999; padding:2px 4px;
  font-size:9px; text-align:left; color:#111; position:static; text-transform:none; letter-spacing:0; }
#cpDetOvl .cp-danfe th{ background:#eee; }