/* ============================================================================
 * pantalla-2.css — DEMO v2 · Cartera + Segmentación
 * ============================================================================ */

/* Page header chips */
.cartera-header__chips {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.cartera-header__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  background: #F9FAFB;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.cartera-header__chip strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cartera-header__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.cartera-header__chip-dot--rojo     { background: var(--status-rojo);     box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18); }
.cartera-header__chip-dot--amarillo { background: var(--status-amarillo); box-shadow: 0 1px 2px rgba(217, 119, 6, 0.18); }
.cartera-header__chip-dot--regular  { background: var(--status-regular);  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.18); }

/* Filters bar */
.filters-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.filters-bar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.filters-bar__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}

.filters-bar__chips {
  display: inline-flex;
  gap: 4px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: var(--text-muted);
  color: var(--text-secondary);
}

.filter-chip--active {
  background: rgba(70, 160, 208, 0.14);
  border-color: var(--cofoundy-primary);
  color: var(--cofoundy-primary-hi);
}

/* Tier-specific active states */
.filter-chip--active[data-value="A"]        { background: rgba(139, 92, 246, 0.14);  border-color: var(--tier-a);          color: #6D28D9; }
.filter-chip--active[data-value="B"]        { background: rgba(70, 160, 208, 0.14);  border-color: var(--cofoundy-primary); color: var(--cofoundy-primary-hi); }
.filter-chip--active[data-value="C"]        { background: rgba(148, 163, 184, 0.16); border-color: var(--text-muted);      color: var(--text-secondary); }
.filter-chip--active[data-value="Rojo"]     { background: rgba(239, 68, 68, 0.14);   border-color: var(--status-rojo);     color: #B91C1C; }
.filter-chip--active[data-value="Amarillo"] { background: rgba(245, 158, 11, 0.14);  border-color: var(--status-amarillo); color: #B45309; }
.filter-chip--active[data-value="Regular"]  { background: rgba(16, 185, 129, 0.14);  border-color: var(--status-regular);  color: #047857; }

.filters-bar__numeric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filters-bar__numeric .input {
  width: 88px;
  padding: 5px var(--space-2);
  font-size: var(--fs-xs);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.filters-bar__numeric-suffix {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.filters-bar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-strong);
  flex-shrink: 0;
}

.filters-bar__spacer { flex: 1; }

.filters-bar__count {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.filters-bar__count strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Layout */
.cartera-layout {
  display: grid;
  grid-template-columns: 1fr 0fr;
  gap: var(--space-4);
  align-items: start;
  transition: grid-template-columns var(--t-slow);
}

.cartera-layout--with-panel {
  grid-template-columns: minmax(0, 1fr) 440px;
}

@media (max-width: 1100px) {
  .cartera-layout--with-panel { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* Table */
.cartera-table-wrap { overflow-x: auto; }

.cartera-table tbody td {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.cartera-table .col-cliente   { min-width: 240px; }
.cartera-table .col-tier      { width: 70px; text-align: center; }
.cartera-table .col-ruc       { width: 140px; }
.cartera-table .col-saldo     { width: 140px; text-align: right; }
.cartera-table .col-antiguedad{ width: 130px; text-align: center; }
.cartera-table .col-estado    { width: 130px; text-align: center; }

.cliente-row {
  cursor: pointer;
  transition: background var(--t-fast);
}

.cliente-row__name {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.cliente-row__name:hover {
  color: var(--cofoundy-primary-hi);
  text-decoration: none;
}

.cliente-row__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.cliente-row__saldo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cliente-row__saldo--high { color: #B91C1C; }

.cliente-row--selected td {
  background: rgba(70, 160, 208, 0.08) !important;
}

.cliente-row--selected td:first-child {
  box-shadow: inset 3px 0 0 var(--cofoundy-primary);
}

.col-ruc {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

/* Antiguedad numeric badge */
.antiguedad-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  letter-spacing: -0.01em;
}

.antiguedad-badge--rojo     { background: rgba(239, 68, 68, 0.14);   color: #B91C1C; border-color: rgba(239, 68, 68, 0.32); }
.antiguedad-badge--amarillo { background: rgba(245, 158, 11, 0.14);  color: #B45309; border-color: rgba(245, 158, 11, 0.32); }
.antiguedad-badge--regular  { background: rgba(16, 185, 129, 0.14);  color: #047857; border-color: rgba(16, 185, 129, 0.32); }

/* Detail panel */
.detail-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--topbar-h) + 88px);
  max-height: calc(100vh - var(--topbar-h) - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: opacity var(--t-slow), transform var(--t-slow);
  width: 100%;
  box-shadow: var(--shadow-elevated);
}

.cartera-layout--with-panel .detail-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.detail-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.detail-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 6px;
}

.detail-panel__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.detail-panel__sub .muted {
  font-family: var(--font-mono);
  font-size: 11px;
}

.detail-panel__close {
  background: transparent;
  border: 1px solid var(--border-accent);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.detail-panel__close:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.detail-panel__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Info pairs grid */
.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.detail-info-cell {
  background: #F3F4F6;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.detail-info-cell__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 4px;
}

.detail-info-cell__value {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* KPI mini cards */
.detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.detail-kpi {
  background: #F3F4F6;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.detail-kpi__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 6px;
}

.detail-kpi__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.detail-kpi--danger  { border-top: 2px solid var(--status-rojo); }
.detail-kpi--warning { border-top: 2px solid var(--status-amarillo); }
.detail-kpi--info    { border-top: 2px solid var(--cofoundy-primary); }

.detail-kpi--danger  .detail-kpi__value { color: #B91C1C; }
.detail-kpi--warning .detail-kpi__value { color: #B45309; }
.detail-kpi--info    .detail-kpi__value { color: var(--cofoundy-primary-hi); }

/* Documentos table */
.detail-section__title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-2);
}

.documentos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  background: #F3F4F6;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.documentos-table thead th {
  background: #F3F4F6;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 8px var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.documentos-table tbody td {
  padding: 8px var(--space-3);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.documentos-table tbody tr:last-child td { border-bottom: none; }

.documentos-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.documento--vencido td {
  background: rgba(239, 68, 68, 0.04);
}

.dias-vencido-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dias-vencido-badge--rojo     { background: rgba(239, 68, 68, 0.18);   color: #B91C1C; }
.dias-vencido-badge--amarillo { background: rgba(245, 158, 11, 0.18);  color: #B45309; }
.dias-vencido-badge--regular  { background: rgba(16, 185, 129, 0.18);  color: #047857; }

/* Panel actions */
.detail-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.detail-panel__action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: #F3F4F6;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-fast);
}

.detail-panel__action-link:hover {
  background: rgba(70, 160, 208, 0.08);
  border-color: rgba(70, 160, 208, 0.32);
  text-decoration: none;
  transform: translateX(2px);
}

.detail-panel__action-link__arrow {
  color: var(--cofoundy-primary-hi);
  font-weight: 700;
}

/* Empty state */
.cartera-empty {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}

.cartera-empty__icon {
  font-size: 40px;
  margin-bottom: var(--space-3);
  opacity: 0.3;
}

.cartera-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.cartera-empty__body {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--lh-loose);
}