/* ── Compras ─────────────────────────────────────────────────── */
/* .cp-card / .cp-card-head / .cp-card-meta migrados a .card / .card-head / .card-meta en components.css */
/* Badges: migrados a badges.css (.badge + .badge-pending/progress/completed/cancelled/error) */
.cp-total      { font-size:15px; font-weight:700; font-family:var(--font-h); color:var(--p); }
.cp-filters    { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cp-filters input,.cp-filters select { flex:1; min-width:120px; max-width:180px; }
.cp-tbl        { width:100%; border-collapse:collapse; font-size:13px; }
.cp-tbl th     { padding:7px 10px; text-align:left; font-size:11px; font-weight:600; color:var(--t3); background:var(--bg2); border-bottom:1px solid var(--border); }
.cp-tbl td     { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.cp-tbl tr:last-child td { border-bottom:none; }
.cp-tbl-wrap   { border:1px solid var(--border); border-radius:10px; margin-top:10px; overflow:visible; }
.cp-total-bar  { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--bg2); border-radius:8px; margin-top:10px; font-size:13px; }
.cp-saldo-ok   { color:var(--ok); font-size:12px; }
.cp-saldo-err  { color:var(--err); font-size:12px; }
.cp-btn-add    { background:none; border:1px dashed var(--border2); border-radius:8px; padding:6px 12px; font-size:12px; color:var(--t3); cursor:pointer; width:100%; margin-top:6px; }
.cp-btn-add:hover { border-color:var(--p); color:var(--p); }
.cp-btn-rm     { background:none; border:none; color:var(--err); cursor:pointer; font-size:16px; padding:0 4px; line-height:1; }
.cp-prod-wrap  { position:relative; }
.cp-prod-dd    { position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:400; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.5); max-height:180px; overflow-y:auto; }
.cp-prod-dd-item { padding:8px 12px; cursor:pointer; font-size:13px; }
.cp-prod-dd-item:hover { background:var(--bg2); }
.cp-paso-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.cp-paso-dot   { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.cp-paso-dot-act { background:var(--p); color:#fff; }
.cp-paso-dot-done { background:var(--ok); color:#fff; }
.cp-paso-dot-idle { background:var(--bg3); color:var(--t3); }
.input-error  { border-color:var(--err) !important; }
.input-warn   { border-color:#f59e0b !important; }
.cp-pago-ok      { background:#d1fae5 !important; color:#065f46; border:1px solid #6ee7b7; }
.cp-pago-insuf   { background:#fee2e2 !important; color:#991b1b; border:1px solid #fca5a5; }
.cp-pago-excedido{ background:#fef3c7 !important; color:#92400e; border:1px solid #fcd34d; }

/* ── Filtros responsive ───────────────────────────────────────── */
.cp-filters-toggle { display:none; }

@media (max-width:600px) {
  .cp-filters-toggle {
    display:block; width:100%; margin-bottom:8px;
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:8px 14px; font-size:13px; cursor:pointer; text-align:left;
    color:var(--t2); font-weight:500;
  }
  .cp-filters { display:none; flex-direction:column; gap:8px; }
  .cp-filters.cp-filters-open { display:flex; }
  .cp-filters input,.cp-filters select { max-width:100% !important; }
}

/* ── Lista de productos (modal nueva compra) ──────────────────── */
.cp-prod-list    { border:1px solid var(--border); border-radius:10px; margin-top:10px; overflow:visible; }
.cp-prod-row     { padding:10px 12px; border-bottom:1px solid var(--border); }
.cp-prod-row:last-child { border-bottom:none; }
.cp-prod-row-name   { display:flex; gap:6px; align-items:flex-start; margin-bottom:8px; }
.cp-prod-row-fields { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.cp-prod-field      { display:flex; flex-direction:column; gap:3px; }
.cp-prod-field label { font-size:10px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.cp-prod-field input,.cp-prod-field select { width:90px; }
.cp-prod-field:nth-child(1) input { width:80px; }
.cp-prod-subtotal { font-size:13px; font-weight:700; color:var(--p); padding:6px 0; white-space:nowrap; }

/* ── Tabla de monedas responsiva en móvil ────────────────────── */
@media (max-width:600px) {
  .cp-tbl-wrap { overflow-x:hidden; }

  .cp-tbl-pago thead { display:none; }
  .cp-tbl-pago,
  .cp-tbl-pago tbody,
  .cp-tbl-pago tr { display:block; width:100%; }
  .cp-tbl-pago tr { padding:10px 8px; border-bottom:2px solid var(--border); }
  .cp-tbl-pago tr:last-child { border-bottom:none; }
  .cp-tbl-pago td { display:block; border:none; padding:4px 2px; }
  .cp-tbl-pago td::before {
    content:attr(data-label);
    font-size:10px; font-weight:600; color:var(--t3);
    display:block; margin-bottom:3px; text-transform:uppercase; letter-spacing:.4px;
  }
  .cp-tbl-rm { text-align:right; padding-top:6px !important; }
  .cp-tbl-rm::before { display:none !important; }
}