/* ── BUTTONS ──────────────────────────────────────── */
.btn {
  height:30px; padding:0 12px; border:1px solid var(--border); border-radius:4px;
  font-family:var(--mono); font-size:11px; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s; background:transparent; color:var(--text); white-space:nowrap;
}
.btn:hover { border-color:var(--border2); background:var(--s2); }
.btn.bp { background:var(--accent); color:#0f0f0f; border-color:var(--accent); font-weight:700; }
.btn.bp:hover { opacity:.85; }
.btn.bd,
.btn.d { color:var(--danger); border-color:rgba(241,85,53,.3); }
.btn.bd:hover,.btn.d:hover { background:rgba(241,85,53,.08); border-color:var(--danger); }
.btn.bw { color:var(--warn); border-color:rgba(241,196,53,.3); }
.btn.bw:hover { background:rgba(241,196,53,.08); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.add-btn {
  height:28px; padding:0 10px; border:1px dashed var(--border2); border-radius:4px;
  background:transparent; color:var(--muted); font-family:var(--mono); font-size:10px;
  cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:5px;
}
.add-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── BADGES ──────────────────────────────────────── */
.badge { font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:3px; }
.badge-draft { background:rgba(241,196,53,.15); color:var(--warn); border:1px solid rgba(241,196,53,.3); }
.badge-saved { background:rgba(53,241,137,.12); color:var(--ok); border:1px solid rgba(53,241,137,.25); }
.badge-ok { background:rgba(53,241,137,.12); color:var(--ok); border:1px solid rgba(53,241,137,.25); }
.badge-warn { background:rgba(241,196,53,.12); color:var(--warn); border:1px solid rgba(241,196,53,.25); }
.badge-err { background:rgba(241,85,53,.12); color:var(--danger); border:1px solid rgba(241,85,53,.25); }
.badge-neutral { background:rgba(255,255,255,.06); color:var(--muted2); border:1px solid var(--border); }

/* ── MODAL ──────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(4px);
  z-index:200; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open { opacity:1; pointer-events:all; }
.overlay.open .modal { transform:translateY(0); }
.modal {
  background:var(--surface); border:1px solid var(--border2); border-radius:8px;
  width:620px; max-height:88vh; overflow-y:auto;
  transform:translateY(10px); transition:transform .2s;
}
.mh {
  padding:16px 20px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.mt { font-family:var(--mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.mb { padding:20px; }
.mf {
  padding:12px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
  position:sticky; bottom:0; background:var(--surface);
}
.xcls { background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:0 4px; transition:color .15s; }
.xcls:hover { color:var(--text); }

/* ── SETTINGS MODAL ─────────────────────────────── */
.set-modal { width:640px; overflow:hidden; display:flex; flex-direction:column; max-height:88vh; }
.set-modal .mb { padding:0; flex:1; overflow:hidden; display:flex; flex-direction:column; }
.set-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; }
.set-tab { padding:10px 16px; font-family:var(--mono); font-size:10px; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; transition:all .15s; }
.set-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.set-panel { display:none; padding:20px; overflow-y:auto; flex:1; }
.set-panel.active { display:block; }

/* ── TABLES ──────────────────────────────────────── */
table.ptbl { width:100%; border-collapse:collapse; }
table.ptbl thead { background:var(--surface2); }
table.ptbl thead th { padding:8px 10px; text-align:left; font-family:var(--mono); font-size:10px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
table.ptbl thead th:hover { color:var(--text); }
table.ptbl td { padding:9px 10px; border-bottom:1px solid var(--border); font-size:12px; vertical-align:middle; }
table.ptbl tr:last-child td { border-bottom:none; }
table.ptbl tr:hover td { background:rgba(255,255,255,.02); }
table.ptbl th.r,table.ptbl td.r { text-align:right; }

/* ── CHIPS / PILLS ────────────────────────────────── */
.cpill { height:20px; padding:0 7px; border:1px solid var(--border); border-radius:10px; font-family:var(--mono); font-size:9px; font-weight:600; cursor:pointer; background:transparent; color:var(--muted); transition:all .12s; }
.cpill:hover { color:var(--text); }
.cpill.active { color:var(--accent); border-color:var(--accent); background:rgba(200,241,53,.07); }
.pt-chip { font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:3px; background:var(--s3); border:1px solid var(--border); color:var(--muted2); }

/* ── TOOLBAR PATTERN ─────────────────────────────── */
.ptb { display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface); flex-wrap:wrap; }
.ptb-lbl { font-family:var(--mono); font-size:9px; color:var(--muted); white-space:nowrap; }
.ptb-sel { height:26px; background:var(--s2); border:1px solid var(--border); border-radius:3px; color:var(--text); font-family:var(--mono); font-size:10px; padding:0 6px; outline:none; }
.ptb-grp { display:flex; align-items:center; gap:5px; }

/* ── SECTION COLLAPSIBLE ─────────────────────────── */
.sec { border-radius:8px; margin-bottom:14px; background:var(--surface); border:1px solid var(--border); }
.sec-h { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; cursor:pointer; border-radius:8px 8px 0 0; }
.sec-h:hover { background:var(--s2); }
.sec.collapsed .sec-h { border-radius:8px; }
.sec.collapsed .sec-b { display:none; }
.sec-title { font-family:var(--mono); font-size:10px; letter-spacing:.12em; font-weight:700; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.sec-tog { color:var(--muted); font-size:11px; transition:transform .15s; }
.sec.collapsed .sec-tog { transform:rotate(-90deg); }
.sec-b { padding:14px 16px; border-top:1px solid var(--border); }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── STATUS COLORS ────────────────────────────────── */
.st-pagado,.st-cobrado { color:var(--ok); }
.st-pendiente,.st-pendiente-pago { color:var(--warn); }
.st-cancelado { color:var(--danger); }
.st-borrador { color:var(--muted2); }
.st-confirmado { color:var(--accent2); }

/* ── LOADING OVERLAY ─────────────────────────────── */
.loading-overlay { position:absolute; inset:0; background:rgba(15,15,15,.7); display:flex; align-items:center; justify-content:center; z-index:100; font-family:var(--mono); font-size:11px; color:var(--muted); }
.spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin-right:8px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── EMPTY STATE ──────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:12px; color:var(--muted); font-family:var(--mono); font-size:11px; }
.empty-state .empty-icon { font-size:32px; opacity:.2; }