/* apps/payments-portal/pp.css */
:root {
  --bg0:    #06080d;
  --bg1:    #0b0f17;
  --bg2:    #161b24;
  --line:   #1f2530;
  --fg:     #e0e6ed;
  --fg-mut: #8892a6;
  --green:  #00ff88;
  --blue:   #4da6ff;
  --purple: #b88aff;
  --gold:   #d4af37;
  --amber:  #ffaa00;
  --red:    #ff4d4d;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg0);
  color: var(--fg);
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.pp-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 0 16px;
  flex-shrink: 0;
}
.pp-brand {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: var(--purple);
  padding: 0 20px 24px;
  letter-spacing: 0.05em;
}
.pp-sidebar nav { flex: 1; }
.pp-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: var(--fg-mut);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.pp-sidebar nav a:hover,
.pp-sidebar nav a.active {
  color: var(--fg);
  background: var(--bg2);
  border-left-color: var(--purple);
}
.pp-user-badge {
  padding: 12px 20px;
  font-size: 11px;
  color: var(--fg-mut);
  font-family: 'DM Mono', monospace;
  border-top: 1px solid var(--line);
  word-break: break-all;
}

/* ── Main ────────────────────────────────────────────────────────── */
.pp-main {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}
.pp-page-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
.pp-empty {
  color: var(--fg-mut);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* ── Table ───────────────────────────────────────────────────────── */
.pp-table-wrap { overflow-x: auto; }
table.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pp-table thead th {
  background: var(--bg1);
  color: var(--fg-mut);
  font-weight: 500;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
.pp-table tbody tr {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.pp-table tbody tr:hover { background: var(--bg2); }
.pp-table td { padding: 10px 12px; }

/* ── Status pills ────────────────────────────────────────────────── */
.pp-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pp-pill-draft          { background: rgba(136,146,166,0.15); color: var(--fg-mut); }
.pp-pill-pending_review { background: rgba(255,170,0,0.15);   color: var(--amber); }
.pp-pill-sent           { background: rgba(77,166,255,0.15);  color: var(--blue); }
.pp-pill-approved       { background: rgba(0,255,136,0.15);   color: var(--green); }
.pp-pill-rejected       { background: rgba(255,77,77,0.15);   color: var(--red); }
.pp-pill-executed       { background: rgba(212,175,55,0.15);  color: var(--gold); }
.pp-pill-reconciled     { background: rgba(184,138,255,0.15); color: var(--purple); }
.pp-pill-cancelled      { background: rgba(136,146,166,0.1);  color: var(--fg-mut); }
.pp-pill-notice         { background: rgba(77,166,255,0.15);  color: var(--blue); }
.pp-pill-generated_order { background: rgba(212,175,55,0.12); color: var(--gold); }
.pp-pill-signed_order   { background: rgba(0,255,136,0.15);   color: var(--green); }
.pp-pill-bank_confirmation { background: rgba(184,138,255,0.15); color: var(--purple); }
.pp-pill-other          { background: rgba(136,146,166,0.15); color: var(--fg-mut); }
/* NUEVO 2026-05-24: PAID pill — caja verde destacada */
.pp-pill-paid {
  background: rgba(56,201,160,0.18);
  color: var(--green);
  border: 1px solid rgba(56,201,160,0.45);
  font-weight: 700;
  letter-spacing: .04em;
}
.pp-pill-paid::before { content: '✓ '; }
/* /NUEVO */

/* NUEVO 2026-05-24: split-view inbox drawer */
.pp-inbox-drawer {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.72);
  display: flex; flex-direction: column;
}
.pp-drawer-header {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg1); flex-shrink: 0;
}
.pp-drawer-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.pp-drawer-split {
  display: grid; grid-template-columns: 1fr 500px;
  height: calc(100vh - 57px); overflow: hidden;
  background: var(--bg0);
}
.pp-drawer-preview { background: #080a0e; overflow: auto; }
.pp-drawer-form-panel {
  background: var(--bg1); border-left: 1px solid var(--line);
  padding: 20px; overflow-y: auto; display: flex; flex-direction: column;
}
.pp-drawer-footer {
  position: sticky; bottom: 0; background: var(--bg1);
  padding-top: 12px; margin-top: auto; border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
}
.pp-field-snippet {
  display: block; font-size: 10px; color: var(--fg-mut);
  font-family: 'DM Mono', monospace; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 980px) {
  .pp-drawer-split { grid-template-columns: 1fr; }
  .pp-drawer-preview { display: none; }
}
/* /NUEVO */

/* ── Buttons ─────────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
}
.pp-btn:hover { opacity: 0.85; }
.pp-btn-primary   { background: var(--purple); color: #000; font-weight: 600; }
.pp-btn-secondary { background: var(--bg2); color: var(--fg); border: 1px solid var(--line); }
.pp-btn-danger    { background: var(--red); color: #fff; font-weight: 600; }
.pp-btn-success   { background: var(--green); color: #000; font-weight: 600; }

/* ── Toolbar (filters) ───────────────────────────────────────────── */
.pp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pp-toolbar select, .pp-toolbar input {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
}
.pp-spacer { flex: 1; }

/* ── Modal ───────────────────────────────────────────────────────── */
.pp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-modal {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 600px;
  max-width: 95vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
}
.pp-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.pp-modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--fg-mut);
  font-size: 18px;
  cursor: pointer;
  margin-top: -4px;
}

/* ── Form ────────────────────────────────────────────────────────── */
.pp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pp-form-row.full { grid-template-columns: 1fr; }
label.pp-label {
  display: block;
  font-size: 11px;
  color: var(--fg-mut);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pp-input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
}
.pp-input:focus { outline: 1px solid var(--purple); border-color: var(--purple); }

/* ── Drop zone ───────────────────────────────────────────────────── */
.pp-dropzone {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  color: var(--fg-mut);
  font-size: 13px;
  transition: border-color 0.2s;
}
.pp-dropzone.drag-over { border-color: var(--purple); color: var(--fg); }

/* ── Banners ─────────────────────────────────────────────────────── */
.pp-banner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.pp-banner-warn  { background: rgba(255,170,0,0.12); border: 1px solid rgba(255,170,0,0.3); color: var(--amber); }
.pp-banner-error { background: rgba(255,77,77,0.12);  border: 1px solid rgba(255,77,77,0.3);  color: var(--red); }
.pp-banner-info  { background: rgba(77,166,255,0.12); border: 1px solid rgba(77,166,255,0.3); color: var(--blue); }

/* ── Tabs ────────────────────────────────────────────────────────── */
.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.pp-tab-btn {
  padding: 10px 18px;
  background: none;
  border: none;
  color: var(--fg-mut);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s;
}
.pp-tab-btn:hover { color: var(--fg); background: var(--bg2); }
.pp-tab-btn.active { color: var(--fg); border-bottom-color: var(--purple); }

/* ── Toast ───────────────────────────────────────────────────────── */
.pp-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
}
.pp-toast.show { transform: translateY(0); opacity: 1; }
.pp-toast.ok   { border-left: 3px solid var(--green); }
.pp-toast.err  { border-left: 3px solid var(--red); }

/* ── Detail header ───────────────────────────────────────────────── */
.pp-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.pp-detail-amount {
  font-family: 'Space Mono', monospace;
  font-size: 28px;
  color: var(--fg);
}
.pp-detail-ref { font-size: 13px; color: var(--fg-mut); margin-top: 4px; }

/* ── Signature canvas ────────────────────────────────────────────── */
#pp-sig-canvas {
  width: 100%;
  height: 160px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { flex-direction: column; }
  .pp-sidebar {
    width: 100%;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pp-sidebar nav { display: flex; flex-direction: row; overflow-x: auto; }
  .pp-sidebar nav a { padding: 8px 12px; border-left: none; border-bottom: 2px solid transparent; }
  .pp-user-badge { display: none; }
  .pp-main { padding: 16px; }
  .pp-form-row { grid-template-columns: 1fr; }
}

/* ── Treasury ─────────────────────────────────────────────────────── */
.pp-treasury-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.pp-account-summary {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.pp-reconcile-suggestion {
  background: var(--bg2);
  border-left: 2px solid var(--amber);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg-mut);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

table.pp-tx-table tbody tr.pp-reconcile-suggestion-row {
  cursor: default;
}
table.pp-tx-table tbody tr.pp-reconcile-suggestion-row:hover {
  background: transparent;
}
table.pp-tx-table tbody tr.pp-reconcile-suggestion-row td {
  padding: 0;
}

/* ── Transaction status pills ────────────────────────────────────── */
.pp-pill-unmatched { background: rgba(136,146,166,0.12); color: var(--fg-mut); }
.pp-pill-suggested { background: rgba(255,170,0,0.15);   color: var(--amber); }
.pp-pill-matched   { background: rgba(0,255,136,0.15);   color: var(--green); }
.pp-pill-manual    { background: rgba(77,166,255,0.15);  color: var(--blue); }
.pp-pill-ignored   { background: rgba(184,138,255,0.15); color: var(--purple); }

/* ── AI extraction indicators (Prompt 5) ─────────────────────────────────── */
.pp-input.ai-est,
.ai-est {
  border-color: rgba(159, 122, 234, 0.45);
  box-shadow: 0 0 0 1px rgba(159, 122, 234, 0.12) inset;
}
.pp-input.ai-est:focus {
  outline: 1px solid var(--purple);
  border-color: var(--purple);
  box-shadow: none;
}
/* ── cbmAiBadge component (lib/ai-badge.js) ─── */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  letter-spacing: .3px;
  border: 1px solid;
  vertical-align: middle;
  margin-left: 6px;
  cursor: default;
}
.ai-badge::before { content: '✦'; font-size: 8px; }
.ai-badge[data-engine="claude"]     { color: #d97757; border-color: rgba(217,119,87,.3); background: rgba(217,119,87,.1); }
.ai-badge[data-engine="gemini"]     { color: #4ea8f5; border-color: rgba(78,168,245,.3); background: rgba(78,168,245,.1); }
.ai-badge[data-engine="grok"]       { color: #c9c9c9; border-color: rgba(201,201,201,.3); background: rgba(201,201,201,.08); }
.ai-badge[data-engine="perplexity"] { color: #38c9a0; border-color: rgba(56,201,160,.3); background: rgba(56,201,160,.1); }

.pp-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  letter-spacing: .3px;
  background: rgba(159, 122, 234, 0.10);
  color: var(--purple);
  border: 1px solid rgba(159, 122, 234, 0.22);
  vertical-align: middle;
  margin-left: 6px;
  cursor: default;
}
.pp-ai-badge::before { content: '✦'; font-size: 8px; }
.pp-ai-badge.low {
  background: rgba(255, 170, 0, 0.10);
  color: var(--amber);
  border-color: rgba(255, 170, 0, 0.30);
}
.pp-ai-badge.high {
  background: rgba(0, 255, 136, 0.08);
  color: var(--green);
  border-color: rgba(0, 255, 136, 0.20);
}
.pp-ai-section-note {
  font-size: 11px;
  color: var(--fg-mut);
  font-family: 'DM Mono', monospace;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(159, 122, 234, 0.06);
  border: 1px solid rgba(159, 122, 234, 0.12);
}

/* ═══ CATEGORY BADGES ═══ */
.pp-cat-badge { font-size: 9px; padding: 2px 7px; border-radius: 10px; font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; display: inline-block; }
.pp-cat-uncategorized { color: #444; border: 1px dashed #333 !important; background: transparent !important; }
.pp-ai-section-note::before { content: '✦'; color: var(--purple); font-size: 10px; }

/* ═══ COMPLIANCE ALERT BANNER ═══ */
#pp-compliance-banner { position: sticky; top: 0; z-index: 100; }
.pp-compliance-banner-inner { background: #0d0a07; border-bottom: 1px solid rgba(255,170,0,.25); padding: 8px 20px; }
.pp-compliance-title { font-family: 'Space Mono', monospace; font-size: 10px; color: #ffaa00; letter-spacing: .08em; margin-bottom: 6px; }
.pp-compliance-alert-row { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: 12px; }
.pp-compliance-critical .pp-compliance-prio { color: #ff4d4d; font-family: 'DM Mono', monospace; font-size: 10px; white-space: nowrap; }
.pp-compliance-high .pp-compliance-prio { color: #ffaa00; font-family: 'DM Mono', monospace; font-size: 10px; white-space: nowrap; }
.pp-compliance-msg { color: #ccc; flex: 1; }
.pp-compliance-age { color: #555; font-size: 10px; white-space: nowrap; }

/* ── Inbox: tabs ─────────────────────────────────────────────────── */
.pp-tabs { display: flex; gap: 4px; }
.pp-tab {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--fg-mut);
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pp-tab.active, .pp-tab:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.pp-tab-count {
  display: inline-block;
  background: var(--bg0);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  margin-left: 4px;
}

/* ── Inbox: drag-drop zone ───────────────────────────────────────── */
.pp-dropzone {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--fg-mut);
  font-size: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pp-dropzone:hover, .pp-dropzone.dragover {
  border-color: var(--purple);
  background: rgba(184, 138, 255, 0.05);
  color: var(--fg);
}

/* ── Inbox: drawer ───────────────────────────────────────────────── */
.pp-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
.pp-drawer {
  position: fixed;
  top: 0;
  right: -500px;
  width: 480px;
  max-width: 95vw;
  height: 100vh;
  background: var(--bg1);
  border-left: 1px solid var(--line);
  z-index: 1001;
  overflow-y: auto;
  padding: 24px;
  transition: right 0.25s ease;
}
.pp-drawer.open { right: 0; }
.pp-drawer-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.pp-drawer-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pp-drawer-fields .pp-input {
  padding: 7px 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
}
.pp-drawer-fields .pp-input:focus {
  outline: none;
  border-color: var(--purple);
}

/* NUEVO 2026-05-24: form sections in modals */
.pp-form-section { margin-bottom: 20px; }
.pp-form-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-mut);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.pp-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.pp-form-grid-2 > div { min-width: 0; }
.pp-label {
  display: block;
  font-size: 11px;
  color: var(--fg-mut);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* /NUEVO */

/* ── Signatures card (pp-09) ─────────────────────────────────────────── */
.pp-signatures-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  background: var(--bg1);
}
.pp-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pp-sig-badge {
  background: rgba(77,166,255,.12);
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--blue);
}
.pp-sig-status {
  font-size: 12px;
  color: var(--fg-mut);
}
.pp-sig-pending {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--amber);
}

/* NUEVO 2026-05-24: roles multiselect ─────────────────────────────── */
.pp-roles-multiselect {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--bg2, #0a0e15); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px;
}
.pp-roles-category-title {
  font-size: 10px; font-weight: 600; color: var(--fg-mut);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.pp-roles-multiselect label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 2px 0; cursor: pointer;
}
.pp-roles-multiselect input[type=checkbox] { accent-color: var(--purple); }
/* /NUEVO */

/* ── Role pills (pp-09) ─────────────────────────────────────────────── */
.pp-pill-manager        { background: rgba(184,138,255,.15); color: var(--purple); }
.pp-pill-validator      { background: rgba(77,166,255,.12);  color: var(--blue);   }
.pp-pill-approver       { background: rgba(77,166,255,.12);  color: var(--blue);   }
.pp-pill-senior_approver{ background: rgba(0,255,136,.12);   color: var(--green);  }
.pp-pill-depositary     { background: rgba(212,175,55,.12);  color: var(--gold);   }
.pp-pill-viewer         { background: rgba(255,255,255,.05); color: var(--fg-mut); }
.pp-pill-org_admin      { background: rgba(184,138,255,.15); color: var(--purple); }

/* ── PP-14.E: PDF bbox highlight overlays ─────────────────────────── */
.pp-bbox {
  position: absolute; pointer-events: none;
  border: 2px solid; border-radius: 3px;
  mix-blend-mode: multiply;
  transition: opacity .15s;
}
.pp-bbox-amount       { border-color: #38c9a0; background: rgba(56,201,160,.18); }
.pp-bbox-beneficiary  { border-color: #9f7aea; background: rgba(159,122,234,.18); }
.pp-bbox-date         { border-color: #4ea8f5; background: rgba(78,168,245,.18); }
.pp-bbox-reference    { border-color: #c9a227; background: rgba(201,162,39,.18); }
.pp-bbox-other        { border-color: #888;    background: rgba(136,136,136,.18); }
.pp-bbox-label {
  position: absolute; top: -18px; left: 0;
  font-size: 10px; font-family: 'DM Mono', monospace;
  background: var(--bg0,#070a0f); color: var(--fg,#e8eaf0);
  padding: 1px 4px; border-radius: 3px;
  border: 1px solid currentColor; white-space: nowrap;
}

/* ── PP-14.C.4: XLSX sheet preview ───────────────────────────────── */
.pp-xlsx-sheet { margin-bottom: 24px; }
.pp-xlsx-sheet table { border-collapse: collapse; font-size: 11px; font-family: 'DM Mono', monospace; }
.pp-xlsx-sheet td, .pp-xlsx-sheet th {
  border: 1px solid #ccc; padding: 3px 6px;
  white-space: nowrap; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
}
.pp-xlsx-sheet th { background: #f0f0f0; font-weight: 600; }
/* /PP-14 */

/* NUEVO: snab-form-sections ─────────────────────────────────────── */
details.pp-form-section {
  background: var(--bg1, #0d1117);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 8px;
  margin-bottom: 12px;
}
details.pp-form-section > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg, #e0e6ed);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
details.pp-form-section > summary::-webkit-details-marker { display: none; }
details.pp-form-section > summary::before {
  content: "▸";
  color: var(--fg-mut);
  transition: transform .15s;
  font-size: 10px;
}
details.pp-form-section[open] > summary::before { transform: rotate(90deg); }
details.pp-form-section > div { padding: 4px 14px 14px; }

.pp-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pp-items-table th {
  text-align: left;
  font-size: 9px;
  color: var(--fg-mut);
  padding: 4px 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
.pp-items-table td { padding: 3px 4px; }
.pp-items-table input, .pp-items-table select {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--fg);
  width: 100%;
  font-family: 'DM Mono', monospace;
}
.pp-items-table input:focus, .pp-items-table select:focus {
  outline: 1px solid var(--purple);
  border-color: var(--purple);
}
.pp-items-table tfoot td {
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 6px 2px;
  border-top: 1px solid var(--line);
  text-align: right;
}

.pp-chip-input {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 34px;
  align-items: center;
}
.pp-chip-input input {
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  min-width: 80px;
  flex: 1;
  padding: 2px 4px;
}
.pp-chip {
  background: rgba(78,168,245,.12);
  color: #4ea8f5;
  border: 1px solid rgba(78,168,245,.25);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
}
.pp-chip .pp-chip-x {
  cursor: pointer;
  color: rgba(78,168,245,.7);
  font-size: 11px;
  line-height: 1;
}
.pp-chip .pp-chip-x:hover { color: var(--red); }

.pp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.pp-toggle-row:last-child { border-bottom: none; }
.pp-toggle-row label { color: var(--fg); cursor: pointer; user-select: none; }
.pp-toggle-row .pp-toggle-desc { font-size: 11px; color: var(--fg-mut); margin-top: 2px; }
.pp-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.pp-toggle input { opacity: 0; width: 0; height: 0; }
.pp-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: background .2s, border-color .2s;
}
.pp-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 2px; top: 2px;
  background: var(--fg-mut);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.pp-toggle input:checked + .pp-toggle-slider { background: rgba(0,255,136,.15); border-color: var(--green); }
.pp-toggle input:checked + .pp-toggle-slider::before { transform: translateX(16px); background: var(--green); }

.pp-note-item {
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.pp-note-meta { font-size: 10px; color: var(--fg-mut); font-family: 'DM Mono', monospace; margin-bottom: 4px; }
.pp-note-text { color: var(--fg); line-height: 1.5; }

.pp-cols-dropdown {
  position: relative;
}
.pp-cols-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  min-width: 200px;
  z-index: 100;
  display: none;
}
.pp-cols-panel.open { display: block; }
.pp-cols-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg);
  padding: 4px 0;
  cursor: pointer;
}
.pp-cols-panel input[type=checkbox] { accent-color: var(--purple); }

.pp-sum-warning {
  font-size: 11px;
  color: var(--amber);
  margin-top: 4px;
  font-family: 'DM Mono', monospace;
}
.pp-add-row-btn {
  background: none;
  border: 1px dashed var(--line);
  color: var(--fg-mut);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 6px;
  transition: border-color .15s, color .15s;
}
.pp-add-row-btn:hover { border-color: var(--purple); color: var(--purple); }
/* /NUEVO */

/* ── PP-15.E: PDF.js viewer wrapper ──────────────────────────────── */
.pp-pdf-viewer {
  width: 100%; height: 100%;
  background: #525659;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  box-sizing: border-box;
}
.pp-pdf-page {
  position: relative;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  display: inline-block;
}
.pp-pdf-page canvas { display: block; }
/* /PP-15 */

/* NUEVO: pp-sidebar-role-hydration — visibilidad pre-render basada en body[data-pp-role] */

/* Cold load sin caché: ocultar todos los items con data-role hasta conocer la role */
body[data-pp-role-pending] #pp-nav a[data-role] {
  display: none;
}

/* Role conocida (caché o post-gate): ocultar todos los items con data-role por defecto */
body[data-pp-role] #pp-nav a[data-role] {
  display: none;
}

/* Mostrar selectivamente según role cacheada en body[data-pp-role] */
body[data-pp-role="manager"]   #pp-nav a[data-role*="manager"]   { display: flex; }
body[data-pp-role="org_admin"] #pp-nav a[data-role*="org_admin"] { display: flex; }
body[data-pp-role="depositary"] #pp-nav a[data-role*="depositary"] { display: flex; }

/* Depositary: treasury/audit/depositaries/reports siempre ocultos (no tienen data-role) */
body[data-pp-role="depositary"] #pp-nav a[data-route="/treasury"],
body[data-pp-role="depositary"] #pp-nav a[data-route="/audit"],
body[data-pp-role="depositary"] #pp-nav a[data-route="/depositaries"],
body[data-pp-role="depositary"] #pp-nav a[data-route="/reports"] {
  display: none;
}

/* Skeleton shimmer para primera carga (sin caché) */
body[data-pp-role-pending] #pp-nav::after {
  content: "";
  display: block;
  margin: 4px 14px;
  height: 18px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: pp-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  width: 80%;
}
@keyframes pp-skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── NUEVO 2026-05-30: approval badges + tooltip + direction sub-tabs ── */
.pp-approval-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; font-size: 10px; font-weight: 600;
  font-family: 'DM Mono', monospace; border-radius: 3px;
  border: 1px solid; white-space: nowrap;
}
.pp-approval-badge.approved {
  color: var(--green,#00ff88);
  border-color: rgba(0,255,136,.3);
  background: rgba(0,255,136,.08);
}
.pp-approval-badge.pending {
  color: var(--amber,#ffaa00);
  border-color: rgba(255,170,0,.3);
  background: rgba(255,170,0,.08);
}
.pp-approval-badge.rejected {
  color: #ff5d5d;
  border-color: rgba(255,93,93,.3);
  background: rgba(255,93,93,.08);
}
.pp-approval-badge.no-flow {
  color: var(--fg-mut,#888);
  border-color: rgba(136,146,166,.2);
  background: transparent;
}

.pp-approval-cell {
  position: relative;
  cursor: help;
}
.pp-approval-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9000;
  min-width: 280px;
  max-width: 420px;
  background: var(--bg1,#0d1117);
  border: 1px solid var(--border,rgba(255,255,255,.08));
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.pp-approval-cell:hover .pp-approval-tooltip,
.pp-approval-cell:focus .pp-approval-tooltip,
.pp-approval-cell:focus-within .pp-approval-tooltip { display: block; }
.pp-tt-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.5;
}
.pp-tt-row:last-child { border-bottom: none; }

.pp-pagos-direction-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.pp-pagos-direction-tabs .pp-dir-tab {
  background: var(--bg1,#0d1117);
  border: 1px solid var(--line,#1f2530);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-mut,#8892a6);
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, color .15s;
}
.pp-pagos-direction-tabs .pp-dir-tab:hover {
  background: var(--bg2,#161b24);
  color: var(--fg,#e0e6ed);
}
.pp-pagos-direction-tabs .pp-dir-tab.active {
  background: var(--purple,#b88aff);
  color: #000;
  border-color: var(--purple,#b88aff);
  font-weight: 600;
}
/* /NUEVO */
/* /NUEVO: pp-sidebar-role-hydration */

/* NUEVO: panel-info-toggle */
.panel-info-toggle{margin:0 0 16px;border:1px solid rgba(255,255,255,.06);border-radius:6px;background:rgba(255,255,255,.02)}
.panel-info-toggle summary{padding:8px 14px;font-size:11px;font-weight:600;color:var(--fg-mut,#8892a6);letter-spacing:.04em;cursor:pointer;list-style:none;user-select:none}
.panel-info-toggle summary::-webkit-details-marker{display:none}
.panel-info-toggle[open] summary{color:var(--purple,#b88aff)}
.panel-info-body{padding:0 14px 12px;font-size:11px;color:var(--fg-mut,#8892a6);line-height:1.6;border-top:1px solid rgba(255,255,255,.05)}
.panel-info-body strong{color:var(--fg,#e0e6ed)}
/* /NUEVO */