/* ============================================================
   Flujo de Fee — estilos PROPIOS de las pantallas, sobre nubi ui.
   Etapa 1: se conservan los patrones de pantalla (focos, carril, tabla de pagos,
   árbol de convenios, KPIs) con los colores y tokens de nubi. En la etapa 2 se
   van reemplazando por los patrones nativos de nubi.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   MODULE-SPECIFIC
   ══════════════════════════════════════════════════════════ */

.avatar-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.avatar-thumb-lg { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; }

.semaforo-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* Check-in / check-out en curso (barra flotante sobre el detalle del ticket) */
.sff-session-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; border-radius: var(--radius-lg);
  background: var(--ok-bg); border: 1px solid var(--ok-bg); color: var(--ok-ink);
  font-size: .8125rem; font-weight: 500; margin-bottom: 1rem;
}
.sff-session-bar .sff-session-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.text-primary   { color: var(--brand) !important; }
.cursor-pointer { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   FLUJO DE FEE — componentes propios
   ══════════════════════════════════════════════════════════ */

/* Encabezado de módulo */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.page-head h1 { font-size:1.25rem; font-weight:700; color:var(--navy); margin:0; }
.page-head p  { font-size:.8125rem; color:var(--text-faint); margin:.15rem 0 0; }
.page-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Barra de filtros */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filters .form-control, .filters .form-select { width:auto; min-width:150px; }
.filters .search { flex:1; min-width:180px; max-width:360px; }

/* Tiles de indicadores */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1.25rem; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:.9rem 1rem; }
.stat .stat-label { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
.stat .stat-value { font-size:1.5rem; font-weight:700; color:var(--text); line-height:1.15; margin-top:.25rem; font-variant-numeric:tabular-nums; }
.stat .stat-sub   { font-size:.6875rem; color:var(--text-faint); margin-top:.1rem; }
.stat.accent .stat-value { color:var(--brand); }
.stat.ok .stat-value     { color:var(--ok-ink); }
.stat.warn .stat-value   { color:var(--warn-ink); }

/* Pills de etapa del flujo */
.etapa { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:9999px; font-size:.6875rem; font-weight:600; white-space:nowrap; }
.etapa::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.etapa-programado          { background:var(--surface-muted); color:var(--text-muted); }
.etapa-reprogramado        { background:var(--warn-bg); color:var(--warn-ink); }
.etapa-pendiente_evidencia { background:var(--crit-bg); color:var(--crit-ink); }
.etapa-evidencia_cargada   { background:var(--info-bg); color:var(--info-ink); }
.etapa-evidencia_validada  { background:var(--brand-50); color:var(--brand); }
.etapa-factura_cargada     { background:var(--info-bg); color:var(--info-ink); }
.etapa-pagado              { background:var(--ok-bg); color:var(--ok-ink); }
.etapa-notificado          { background:var(--ok-bg); color:var(--ok-ink); }

/* Distribución por portafolio (barras) */
.dist-row { display:grid; grid-template-columns:150px 1fr 56px; align-items:center; gap:.6rem; margin:.35rem 0; font-size:.8125rem; }
.dist-track { height:8px; background:var(--border-soft); border-radius:99px; overflow:hidden; }
.dist-fill  { height:100%; background:var(--brand); border-radius:99px; }
.dist-sum-ok  { color:var(--ok-ink); font-weight:700; }
.dist-sum-bad { color:var(--crit-ink); font-weight:700; }

/* Dashboard — barras de composición (canal / portafolio) */
.dash-bars .dist-row { grid-template-columns:minmax(110px,170px) 1fr minmax(120px,160px); }
.dash-bars .dist-row > :last-child { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-faint); }
.dash-bars .dist-row b { color:var(--text); font-weight:600; }
.dash-section-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }

/* Uploader de evidencia */
.evi-drop { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:1.5rem; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.evi-drop:hover { border-color:var(--brand); background:var(--brand-light); }
.evi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.5rem; margin-top:.75rem; }
.evi-thumb { position:relative; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--surface-muted); }
.evi-thumb img { width:100%; height:100%; object-fit:cover; }
.evi-thumb .evi-del { position:absolute; top:2px; right:2px; width:20px; height:20px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; cursor:pointer; line-height:1; }
.evi-thumb .evi-size { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:.55rem; text-align:center; padding:1px; }
.evi-count { font-size:.8125rem; font-weight:600; }
.evi-count.ok  { color:var(--ok-ink); }
.evi-count.bad { color:var(--crit-ink); }

/* Correo — vista previa */
.mail-preview { background:var(--surface-muted); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:1rem 1.25rem; font-size:.8125rem; line-height:1.6; }
.mail-preview .mail-field { font-family:var(--f-mono); font-size:.75rem; color:var(--text-muted); }
.mail-preview .mail-attach { display:inline-flex; align-items:center; gap:.3rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.2rem .5rem; margin:.2rem .3rem 0 0; font-size:.75rem; }

/* Tabla dinámica (reportes) */
.pivot-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
table.pivot { border-collapse:collapse; font-size:.8125rem; width:100%; }
table.pivot th, table.pivot td { border:1px solid var(--border-soft); padding:.5rem .75rem; text-align:right; white-space:nowrap; }
table.pivot th:first-child, table.pivot td:first-child { text-align:left; position:sticky; left:0; background:var(--surface); }
table.pivot thead th { background:var(--surface-muted); font-weight:700; color:var(--text); position:sticky; top:0; }
table.pivot tr.pivot-total td { font-weight:700; background:var(--surface-muted); }

/* Detalle de pago — layout */
.detail-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:900px){ .detail-grid { grid-template-columns:1.4fr 1fr; } }
.kv { display:grid; grid-template-columns:130px 1fr; gap:.35rem .75rem; font-size:.8125rem; }
.kv dt { color:var(--text-faint); font-weight:600; }
.kv dd { margin:0; color:var(--text); }

/* ══════════════════════════════════════════════════════════════
   RESUMEN (bandeja de acción) + chip tipo convenio/acuerdo
   ══════════════════════════════════════════════════════════ */
.tipo-chip {
  display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:4px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; vertical-align:middle;
}
.tipo-convenio { background:var(--brand-light); color:var(--brand); }
.tipo-acuerdo  { background:var(--brand-50); color:var(--brand); }

.foco {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1rem 1.1rem; margin-bottom:.9rem; border-left:3px solid var(--border);
}
.foco-ok   { border-left-color:var(--ok); }
.foco-warn { border-left-color:var(--warn); }
.foco-crit { border-left-color:var(--crit); }
.foco-info { border-left-color:var(--brand); }
.foco-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.foco-title { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.9375rem; color:var(--text); }
.foco-title i { font-size:1.05rem; color:var(--text-muted); }
.foco-count {
  background:var(--surface-muted); color:var(--text-muted); border-radius:9999px;
  font-size:.75rem; font-weight:700; padding:.05rem .5rem; min-width:1.6rem; text-align:center;
}
.foco-ok .foco-count   { background:var(--ok-bg); color:var(--ok-ink); }
.foco-warn .foco-count  { background:var(--warn-bg); color:var(--warn-ink); }
.foco-crit .foco-count  { background:var(--crit-bg); color:var(--crit-ink); }
.foco-monto { font-size:.78rem; color:var(--text-faint); font-weight:600; font-variant-numeric:tabular-nums; }
.foco-sub { font-size:.78rem; color:var(--text-faint); margin:.35rem 0 .1rem; }
.foco-empty { font-size:.8125rem; color:var(--text-faint); margin:.5rem 0 0; }
.foco-body { margin-top:.6rem; }
.foco-body .foco-tbl { font-size:.8125rem; margin:0; }
.foco-body .foco-tbl td { padding:.4rem .6rem; }
.foco-body .foco-tbl tr:hover td { background:var(--bg); }
.foco-more { font-size:.72rem; color:var(--text-faint); padding:.35rem .6rem 0; margin:0; }
.foco-actions { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD v2 — filtros, KPIs, gráficos, dónuts
   ══════════════════════════════════════════════════════════ */
.kpi-brand  { --kc:var(--brand); }
.kpi-ok     { --kc:var(--ok); }
.kpi-accent { --kc:var(--brand); }
.kpi-plain  { --kc:var(--mute); }

/* ── Árbol jerárquico colapsable (Convenios/OC + reutilizable) ── */
.tree { display:flex; flex-direction:column; gap:.5rem; }
.tnode { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; }
.tnode-head {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; cursor:pointer; user-select:none;
  font-size:.86rem; font-weight:600; color:var(--text);
}
.tnode-head:hover { background:var(--bg); }
.tnode-caret { font-size:.85rem; color:var(--text-faint); transition:transform .15s; flex-shrink:0; }
.tnode.open > .tnode-head > .tnode-caret { transform:rotate(90deg); }
.tnode-body { display:none; padding:0 .85rem .7rem; }
.tnode.open > .tnode-body { display:block; }
.tnode-title { display:flex; flex-direction:column; }
.tnode-title .text-faint { font-size:.72rem; font-weight:400; }
.tnode-tags { display:flex; align-items:center; gap:.4rem; margin-left:auto; font-size:.75rem; flex-wrap:wrap; }
.tlvl-1 { border:none; border-radius:0; }
.tlvl-1 > .tnode-head { padding-left:1.6rem; font-size:.82rem; background:var(--surface-muted); }
.tlvl-2 { border:none; border-top:1px solid var(--border-soft); border-radius:0; }
.tlvl-2 > .tnode-head { padding-left:2.6rem; font-weight:500; }
.tlvl-2 > .tnode-body { padding-left:2.6rem; }
.tree-tbl { font-size:.8rem; }
.tree-tbl td { padding:.35rem .55rem; }
.tree-indent { padding-left:1rem !important; }
.tree-empty { font-size:.75rem; color:var(--text-faint); padding:.4rem 0 0; margin:0; }
.btn-xs { padding:.1rem .45rem; font-size:.68rem; border-radius:4px; line-height:1.5; }

/* ── Resumen: focos colapsables ── */
.foco-head { cursor:pointer; user-select:none; }
.foco-caret { font-size:.85rem; transition:transform .15s; }
.foco:not(.collapsed) .foco-caret { transform:rotate(90deg); }
.foco.collapsed .foco-panel { display:none; }
.foco.collapsed .foco-sub { display:none; }

/* ── Resaltado de fila/columna al pasar el mouse (tablas de datos) ── */
table.pivot-cross tr.cx-row > * { background:var(--warn-bg) !important; }
table.pivot-cross .cx-col        { background:var(--warn-bg) !important; }
table.pivot-cross tr.cx-row > .cx-col { background:var(--warn-bg) !important; }   /* intersección */

/* fila completa en amarillo al pasar el mouse — tabla "Detalle" y demás */
#d-tabla table tbody tr:hover > td,
.pivot:not(.pivot-cross) tbody tr:hover > td { background:var(--warn-bg) !important; }

.form-control.upper, textarea.upper { text-transform: uppercase; }
.form-control.upper::placeholder { text-transform: none; }

/* ── Barra de progreso hacia la meta de compra de un pago ── */
.meta-prog { margin-top:.55rem; max-width:340px; }
.meta-prog-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.8125rem; margin-bottom:.3rem; }
.meta-prog-bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.meta-prog-fill { height:100%; border-radius:999px; background:var(--brand); transition:width .3s; }
.meta-prog-fill.ok { background:var(--ok-ink); }
.meta-prog-foot { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-faint); margin-top:.25rem; }
.meta-prog-nota { font-size:.72rem; color:var(--text-faint); margin:.3rem 0 0; }
.meta-prog-nodata { font-size:.72rem; color:var(--text-faint); margin:.3rem 0 0; }

/* ── Miniaturas de evidencia en la fila del módulo Evidencias ── */
.evi-row-grid { display:flex; gap:4px; margin-top:.35rem; flex-wrap:wrap; align-items:center; }
.evi-row-thumb { width:44px; height:44px; object-fit:cover; border-radius:4px; border:1px solid var(--border); cursor:pointer; background:var(--surface-muted); transition:transform .1s; }
.evi-row-thumb:hover { transform:scale(1.06); }
.evi-row-more { font-size:.72rem; color:var(--text-faint); align-self:center; }

/* ── Flujo de pagos — tabla ancha tipo Airtable (todo inline, sin ficha aparte) ── */
.pgw-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
table.pgw { font-size:.78rem; border-collapse:collapse; width:100%; min-width:1360px; background:var(--surface); }
table.pgw thead th { background:var(--surface-muted); border-bottom:1px solid var(--border); padding:.5rem .6rem; text-align:left; white-space:nowrap; }
table.pgw tbody td { padding:.45rem .6rem; border-bottom:1px solid var(--border-soft); vertical-align:top; white-space:nowrap; }
table.pgw td.pgw-nota, table.pgw td.pgw-meta { white-space:normal; max-width:200px; }
tr.pgw-group td { background:var(--bg); border-bottom:1px solid var(--border); border-left:3px solid var(--brand); padding:.55rem .75rem; white-space:normal; }
.pgw-groupbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.pgw-group-title { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pgw-group-tags { display:flex; align-items:center; gap:.6rem; font-size:.75rem; flex-wrap:wrap; }
.pgw-sub { font-size:.7rem; color:var(--text-faint); margin-top:.15rem; white-space:normal; }
.pgw-ev { display:flex; align-items:center; gap:.4rem; }
.pgw-ev .badge { white-space:nowrap; }
.pgw-actions { display:flex; gap:.25rem; flex-wrap:nowrap; }
.pgw-actions .btn-icon { padding:.2rem .4rem; line-height:1; }
.pgw-link { background:none; border:none; padding:0; color:inherit; font:inherit; cursor:pointer; text-decoration:underline dotted; white-space:nowrap; }
tr[data-id].pgw-flash { animation: pgwFlash 2.4s ease; }
@keyframes pgwFlash { 0% { background:var(--warn-bg); } 100% { background:transparent; } }
tr.pgw-addrow td { padding:.35rem .75rem; border-bottom:1px solid var(--border-soft); white-space:normal; }
.pgw-addbtn { background:none; border:1px dashed var(--border); border-radius:6px; padding:.3rem .7rem; font-size:.75rem; color:var(--text-faint); cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; }
.pgw-addbtn:hover { background:var(--surface-muted); color:var(--text); border-color:var(--brand); }

/* ── Lightbox — visor de fotos a pantalla completa ── */
.lbx { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; animation:fadeIn .12s ease; }
.lbx-img { max-width:92vw; max-height:86vh; object-fit:contain; border-radius:6px; box-shadow:0 10px 50px rgba(0,0,0,.6); cursor:zoom-in; }
.lbx-x { position:absolute; top:12px; right:18px; background:none; border:none; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; opacity:.85; }
.lbx-x:hover { opacity:1; }
.lbx-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; font-size:2.4rem; width:46px; height:66px; border-radius:8px; cursor:pointer; }
.lbx-nav:hover { background:rgba(255,255,255,.24); }
.lbx-prev { left:14px; } .lbx-next { right:14px; }
.lbx-bar { position:absolute; bottom:14px; left:0; right:0; display:flex; gap:1.25rem; justify-content:center; align-items:center; color:#fff; font-size:.8125rem; }
.lbx-open { color:#9ccaff; text-decoration:none; }
.lbx-open:hover { text-decoration:underline; }
@media (max-width:600px){ .lbx-nav { font-size:1.7rem; width:38px; height:50px; } .lbx-img { max-width:96vw; } }

/* ══════════════════════════════════════════════════════════════
   PANTALLAS
   ══════════════════════════════════════════════════════════════ */

/* Encabezado de módulo */
.page-head { margin-bottom: 1.25rem; align-items: flex-end; }
.page-head h1 { font: 800 1.6rem var(--f-display); color: var(--morado-deep); letter-spacing: -.02em; }
.page-head p  { font-size: .88rem; color: var(--text-faint); }

/* Focos del Resumen */
.foco { border-radius: var(--radius-lg); border-left-width: 1px; padding: 0; overflow: hidden; margin-bottom: .75rem; transition: box-shadow .15s; }
.foco:hover { box-shadow: var(--shadow-md); }
.foco-head { padding: .95rem 1.15rem; align-items: center; }
.foco-panel { padding: 0 1.15rem 1rem; }
.foco-title { font-family: var(--f-display); font-size: .95rem; }
.foco-title > i:not(.foco-caret) {
  width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
  background: var(--surface-muted); font-size: 1rem;
}
.foco-ok   .foco-title > i:not(.foco-caret) { background: var(--menta-soft); color: var(--menta-ink); }
.foco-warn .foco-title > i:not(.foco-caret) { background: var(--warn-bg); color: var(--warn-ink); }
.foco-crit .foco-title > i:not(.foco-caret) { background: var(--crit-bg); color: var(--crit-ink); }
.foco-info .foco-title > i:not(.foco-caret) { background: var(--lavanda); color: var(--morado); }
.foco-ok .foco-count { background: var(--menta-soft); color: var(--menta-ink); }
.foco-info .foco-count { background: var(--lavanda); color: var(--morado); }
.foco-count { font-family: var(--f-mono); font-weight: 500; }
.foco-monto { font-family: var(--f-mono); font-weight: 500; color: var(--text-muted); }

/* Dashboard */
.kpi-brand  { --kc: var(--morado); }
.kpi-ok     { --kc: var(--menta-ink); }
.kpi-accent { --kc: var(--warn); }
.kpi-plain  { --kc: var(--mute); }
.stat { border-radius: var(--radius-lg); }
.stat.accent .stat-value { color: var(--morado); }
.stat.ok .stat-value { color: var(--menta-ink); }
.dist-fill, .meta-prog-fill { background: var(--morado-2); }
.meta-prog-fill.ok { background: var(--menta); }
.meta-prog-bar, .dist-track { background: var(--surface-muted); }
.dash-section-label { font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; color: var(--morado-2); }

/* Árbol Convenios / OC */
.tnode { border-radius: var(--radius-md); }
.tnode-head:hover { background: var(--lavanda-2); }
.tlvl-1 > .tnode-head { background: var(--surface-muted); }

/* Evidencias */
.evi-drop { border-radius: var(--radius-lg); border-color: var(--line); }
.evi-drop:hover { border-color: var(--menta); background: var(--menta-soft); }
.evi-thumb, .evi-row-thumb { border-radius: 10px; }
.evi-count.ok { color: var(--menta-ink); }

/* Formulario público de evidencia */
#public-page { background: linear-gradient(180deg, var(--lavanda) 0, var(--bg) 280px); min-height: 100vh; }

@media (prefers-reduced-motion: no-preference) {
  #app > * { animation: sffIn .22s ease; }
  @keyframes sffIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD v3 — KPIs que no se cortan, tarjeta protagonista, gráficos
   ══════════════════════════════════════════════════════════════ */

/* Tarjeta protagonista: pendiente por pagar (ocupa 2 columnas) */
@media (max-width: 560px) { .kpi-row-v2 .kpi-hero { grid-column: auto; } }
/* Anula el "primer KPI morado" genérico dentro del layout nuevo */

/* Tarjetas de gráficos */
.dash-chart-card { margin-bottom: 1rem; }
.dash-chart-card .card-header, .dash-chart-card .card-header b, .chart-sub { display: block; font: 400 .78rem var(--f-body); color: var(--text-faint); margin-top: .15rem; }
.dash-section-label { border-top: 0; padding-top: .5rem; font-size: .7rem; }

/* Tabla dinámica y detalle */
.pivot-wrap { border: 0; border-radius: 14px; }
table.pivot th, table.pivot td { border-color: var(--border-soft); font-variant-numeric: tabular-nums; }
table.pivot th:first-child, table.pivot td:first-child { font-weight: 700; }
table.pivot tfoot td, table.table tfoot td { background: var(--lavanda-2); font-weight: 800; color: var(--title); }
#d-tabla table td:first-child { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   FLUJO DE PAGOS — grupos tipo tarjeta + indicador de etapas
   ══════════════════════════════════════════════════════════════ */
.pgw-wrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: auto; max-height: calc(100vh - 230px); }
table.pgw { border-collapse: collapse; background: var(--surface); font-size: 13px; }
table.pgw thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line);
  font: 600 12.5px var(--f); color: var(--ink); padding: 9px 12px; letter-spacing: 0; text-transform: none;
}
tr.pgw-gap { display: none; }
tr.pgw-group td { background: var(--line-2); border: 0; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 9px 12px; }
tr.pgw-group td::before { display: none; }
.pgw-group-title strong { font: 700 13.5px var(--f); color: var(--ink); }
.pgw-group-title .text-faint, .pgw-group-tags .text-faint { font-family: var(--f-mono); font-size: 11.5px; }
table.pgw tbody tr[data-id] td { background: var(--surface); border-bottom: 1px solid var(--line-2); padding: 9px 12px; vertical-align: middle; }
table.pgw tbody tr[data-id]:hover td { background: var(--brand-50); }
tr.pgw-addrow td { background: var(--surface); border-bottom: 1px solid var(--line-2); padding: 6px 12px; }
table.pgw td.text-end { font-family: var(--f-mono); font-weight: 500; color: var(--ink); }

/* Etapa: pill + indicador de 6 segmentos */
.pgw-etapa { display: grid; gap: .35rem; justify-items: start; }
.steps i.n { animation: stepPulse 1.6s ease-in-out infinite; }
@keyframes stepPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .steps i.n { animation: none; } }

/* Botones de acción */
.pgw-actions { gap: .3rem; }
.pgw-actions .btn-icon { width: 28px; height: 28px; padding: 0; border-radius: var(--r-sm); display: inline-grid; place-items: center; font-size: .9rem; }
.evi-row-thumb { width: 38px; height: 38px; border-radius: 10px; }

/* KPIs: protagonista 2×2 a la izquierda + 4 tarjetas en cuadrícula */
@media (min-width: 1100px) {
          }

/* ══════════════════════════════════════════════════════════════
   FLUJO DE PAGOS — contenedor con borde para el scroll horizontal
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) { .pgw-wrap { max-height: none; } }

/* ══════════════════════════════════════════════════════════════
   CONVENIOS / OC
   ══════════════════════════════════════════════════════════════ */

/* Árbol: tipo → canal → OC (lista plana con el aspecto de nubi) */
.tree { gap: 16px; }
.tree > .tnode { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: none; overflow: hidden; }
.tnode-head { gap: 10px; }
.tree > .tnode > .tnode-head { padding: 12px 16px; font-size: 14px; }
.tnode-head:hover { background: var(--line-2); }
.tnode-caret { width: auto; height: auto; background: none; border-radius: 0; color: var(--mute); font-size: 14px; }
.tnode-tipo { display: flex; align-items: center; gap: 10px; font: 700 14px var(--f); color: var(--ink); }
.tnode-tipo .tipo-chip { margin: 0; }
.tnode-canal { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.tnode-canal i { color: var(--mute); font-size: 15px; }
.tnode-pill { font: 500 11.5px var(--f-mono); padding: 1px 8px; border-radius: 99px; background: var(--line-2); color: var(--ink-2); }
.tnode-money { font: 600 12.5px var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.tlvl-1 { border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0; }
.tlvl-1 > .tnode-head { background: var(--line-2); padding: 8px 16px 8px 28px; font-size: 13px; }
.tlvl-1 > .tnode-head:hover { background: var(--brand-50); }
.tlvl-1 > .tnode-body { padding: 0; background: var(--surface); }
.tnode.tlvl-0 > .tnode-body { padding: 0; }

/* Filas de OC: tabla plana */
table.tree-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
table.tree-tbl tr td { background: var(--surface); border: 0; border-top: 1px solid var(--line-2); padding: 9px 16px 9px 28px; vertical-align: middle; border-radius: 0; }
table.tree-tbl tr:first-child td { border-top: 0; }
table.tree-tbl tr td:last-child { white-space: nowrap; }
table.tree-tbl tr:hover td { background: var(--brand-50); box-shadow: none; }
.cv-oc { display: flex; align-items: center; gap: .75rem; min-width: 260px; }
.cv-avatar {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); font: 700 .9rem var(--f);
}
.cv-oc-txt { display: grid; gap: .1rem; min-width: 0; }
.cv-oc-txt strong { font: 700 .9rem var(--f-display); color: var(--title); }
.cv-oc-meta { font: .72rem var(--f-mono); color: var(--text-faint); }
.cv-mini { display: block; height: 5px; width: 120px; border-radius: 99px; background: var(--surface-muted); overflow: hidden; margin-top: .3rem; }
.cv-mini i { display: block; height: 100%; border-radius: 99px; background: var(--teal); }
.cv-mini-lbl { font: .66rem var(--f-mono); color: var(--text-faint); }
.cv-pend b { display: block; font: 600 .92rem var(--f-mono); color: var(--title); font-variant-numeric: tabular-nums; }
.cv-pend span { font-size: .7rem; color: var(--text-faint); }

/* Ficha del convenio */
.page-head nav a { color: var(--info-ink) !important; font-weight: 700; }
.detail-grid .card-header { font: 700 1rem var(--f-display); color: var(--title); padding: 1rem 1.25rem .5rem; border-bottom: 0; }
.kv { grid-template-columns: 1fr; gap: 0; }
.kv dt, .kv dd { margin: 0; }
.kv { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; }
.kv dt { font: 500 .66rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: .6rem 0; border-bottom: 1px dashed var(--border-soft); align-self: stretch; display: flex; align-items: center; }
.kv dd { padding: .6rem 0; border-bottom: 1px dashed var(--border-soft); color: var(--text); font-weight: 600; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.dist-row { grid-template-columns: 120px 1fr 48px; font-weight: 600; }
.dist-track { height: 10px; }
.dist-fill { background: linear-gradient(90deg, var(--morado-2), var(--menta)); }

/* ══════════════════════════════════════════════════════════════
   RESUMEN — filas de los focos
   ══════════════════════════════════════════════════════════════ */
.foco-sub {
  display: flex; gap: .5rem; align-items: flex-start; background: var(--surface-muted);
  border-radius: 12px; padding: .6rem .8rem; margin: 0 0 .6rem; color: var(--text-muted); font-size: .8rem;
}
.foco-sub i { color: var(--info-ink); margin-top: .1rem; }
.foco-body { margin-top: .2rem; }
.foco-body .foco-tbl { border-collapse: separate; border-spacing: 0 .35rem; }
.foco-body .foco-tbl td {
  background: var(--surface); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
  padding: .6rem .75rem; vertical-align: middle;
}
.foco-body .foco-tbl td:first-child { border-left: 1px solid var(--border-soft); border-radius: 12px 0 0 12px; }
.foco-body .foco-tbl td:last-child  { border-right: 1px solid var(--border-soft); border-radius: 0 12px 12px 0; }
.foco-body .foco-tbl tr:hover td { background: var(--lavanda-2); border-color: var(--line); }
.foco-tbl .r-con { font: 700 .86rem var(--f-display); color: var(--title); }
.foco-tbl .r-oc, .foco-tbl .r-per { font: .74rem var(--f-mono); color: var(--text-faint); white-space: nowrap; }
.foco-tbl .r-monto { font: 600 .86rem var(--f-mono); color: var(--title); white-space: nowrap; }
.foco-more { font-family: var(--f-mono); }
.foco-empty { display: flex; align-items: center; gap: .4rem; color: var(--ok-ink); font-weight: 600; }
.foco.collapsed .foco-head { border-bottom: 0; }
.foco:not(.collapsed) .foco-head { border-bottom: 1px solid var(--border-soft); margin-bottom: .7rem; }
.foco-panel { background: var(--surface); }
.tlvl-1 > .tnode-body { overflow-x: auto; padding: .35rem .75rem .9rem 1rem; }
.cv-oc { min-width: 220px; }
table.tree-tbl td .btn-xs { margin-left: .2rem; }

/* Fila recién pagada: brillo menta (acompaña al sonido "cha-ching") */
table.pgw tbody tr.pgw-paid td { animation: pgwPaid 1.6s ease; }
@keyframes pgwPaid {
  0%   { background: var(--surface); }
  18%  { background: rgba(1,126,132,.35); box-shadow: inset 0 0 0 9999px rgba(1,126,132,.08); }
  100% { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { table.pgw tbody tr.pgw-paid td { animation: none; } }

/* Cabecera de OC: su contenido se queda en la parte visible al desplazar la tabla */
.pgw-groupbar { position: sticky; left: 1.1rem; width: fit-content; max-width: min(1000px, calc(100vw - var(--rail-w) - 7rem)); justify-content: flex-start; column-gap: 1.25rem; }
@media (max-width: 820px) { .pgw-groupbar { max-width: calc(100vw - 4rem); } }
.pgw-wrap { max-height: max(460px, calc(100vh - 200px)); }

/* Factura con varios archivos */
.fac-files { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.fac-files li { display: flex; align-items: center; gap: .5rem; background: var(--surface-muted); border-radius: 10px; padding: .45rem .7rem; font-size: .82rem; }
.fac-files li i { color: var(--info-ink); }
.fac-files-links a { font-weight: 700; }