/* ============================================================================
 * pantalla-4.css — Sugerencias IA + Compromisos de Pago
 * ----------------------------------------------------------------------------
 * Extiende components.css. NO redefine .btn / .card / .modal / .badge / .tabs.
 * Tesis: cada decisión visible, cada motivo guardado, cada compromiso trackeado.
 * ============================================================================
 */

/* ============================================================================
 * STATS BAR — 4 chips horizontales con KPIs de decisión
 * ============================================================================ */
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  letter-spacing: 0.2px;
}

.stat-chip strong {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.stat-chip--info    { border-color: rgba(84, 175, 247, 0.3);  background: rgba(84, 175, 247, 0.08); }
.stat-chip--success { border-color: rgba(0, 168, 132, 0.3);   background: rgba(0, 168, 132, 0.08); }
.stat-chip--warning { border-color: rgba(255, 160, 0, 0.3);   background: rgba(255, 160, 0, 0.08); }
.stat-chip--alert   { border-color: rgba(241, 92, 109, 0.4);  background: rgba(241, 92, 109, 0.10); color: var(--status-rojo); }
.stat-chip--alert strong { color: var(--status-rojo); }

/* ============================================================================
 * SUG FILTER BAR — chips que filtran sugerencias
 * ============================================================================ */
.sug-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.sug-filter-bar__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: var(--space-1);
}

.sug-filter-bar__hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Reusable filter chip (compatible with pantalla-2's filter-chip) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.filter-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.filter-chip--active {
  background: rgba(0, 208, 164, 0.15);
  border-color: var(--cofoundy-accent-hi);
  color: var(--cofoundy-accent-hi);
}

/* ============================================================================
 * SUGERENCIA CARD — la pieza estrella de la pantalla
 * ============================================================================ */
.sug-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sugerencia-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: relative;
  transition: border-color var(--t-base), opacity var(--t-slow), transform var(--t-base);
}

.sugerencia-card--pending {
  border-left: 4px solid var(--color-warning);
  box-shadow: 0 0 0 1px rgba(255, 160, 0, 0.05);
}

.sugerencia-card--accepted {
  border-left: 4px solid var(--status-regular);
  opacity: 0.88;
  background: linear-gradient(180deg, rgba(0, 168, 132, 0.04), transparent 60%), var(--bg-secondary);
}

.sugerencia-card--rejected {
  border-left: 4px solid var(--color-warning);
  opacity: 0.72;
  background: linear-gradient(180deg, rgba(255, 138, 0, 0.04), transparent 60%), var(--bg-secondary);
}

.sugerencia-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--border-strong);
}

.sugerencia-card__id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.sugerencia-card__id-emoji {
  font-size: var(--fs-lg);
}

.sugerencia-card__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sugerencia-card__time {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Confianza badge */
.confianza-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}

.confianza-badge--high {
  background: rgba(0, 168, 132, 0.18);
  color: var(--status-regular);
  border-color: rgba(0, 168, 132, 0.4);
}

.confianza-badge--medium {
  background: rgba(255, 160, 0, 0.18);
  color: var(--color-warning);
  border-color: rgba(255, 160, 0, 0.4);
}

.confianza-badge--low {
  background: rgba(255, 138, 0, 0.18);
  color: var(--tier-c);
  border-color: rgba(255, 138, 0, 0.4);
}

/* Body */
.sugerencia-card__cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.sugerencia-card__cliente-link {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.sugerencia-card__cliente-link:hover {
  color: var(--cofoundy-accent-hi);
  text-decoration: underline;
}

.sugerencia-card__ruc {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sugerencia-card__razon {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-3);
}

/* Acción sugerida — el highlight más importante de la card */
.accion-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border-left: 3px solid var(--cofoundy-accent-hi);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.accion-highlight__icon {
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

.accion-highlight__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.accion-highlight__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}

.sugerencia-card__impacto {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-strong);
}

.sugerencia-card__impacto strong {
  color: var(--text-secondary);
}

/* Footer — actions or audit trail */
.sugerencia-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
}

.sugerencia-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Audit trail (after decision) */
.audit-trail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.audit-trail strong {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.audit-trail__motivo {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-accent);
  color: var(--text-secondary);
  font-style: italic;
  line-height: var(--lh-normal);
}

/* ============================================================================
 * COMPROMISOS — toolbar, table, summary
 * ============================================================================ */
.cmp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.cmp-toolbar__hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 60ch;
}

.cmp-table thead th { white-space: nowrap; }
.cmp-table .num    { white-space: nowrap; }

.compromiso-row--vencido {
  background: rgba(241, 92, 109, 0.06) !important;
}

.compromiso-row--vencido:hover {
  background: rgba(241, 92, 109, 0.12) !important;
}

.compromiso-row--cumplido {
  opacity: 0.7;
}

.cmp-cliente {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--lh-tight);
}

.cmp-cliente__nombre {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.cmp-cliente__ruc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Estado badges (reuses .badge--accepted/pending/rejected pero aliases semánticos) */
.cmp-estado--abierto {
  background: rgba(255, 160, 0, 0.15);
  color: var(--color-warning);
  border-color: rgba(255, 160, 0, 0.3);
}
.cmp-estado--cumplido {
  background: rgba(0, 168, 132, 0.15);
  color: var(--status-regular);
  border-color: rgba(0, 168, 132, 0.3);
}
.cmp-estado--incumplido {
  background: rgba(241, 92, 109, 0.15);
  color: var(--status-rojo);
  border-color: rgba(241, 92, 109, 0.3);
}
.cmp-estado--parcial {
  background: rgba(84, 175, 247, 0.15);
  color: var(--color-info);
  border-color: rgba(84, 175, 247, 0.3);
}

/* Cumplimiento progress mini */
.cumplimiento-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 100px;
}

.cumplimiento-cell__pct {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  min-width: 32px;
}

.cumplimiento-cell .progress-bar {
  flex: 1;
  height: 4px;
}

/* Próxima revisión coloring */
.proxima-revision {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.proxima-revision--vencido { color: var(--status-rojo); }
.proxima-revision--hoy     { color: var(--color-warning); }
.proxima-revision--proximo { color: var(--color-info); }
.proxima-revision--ok      { color: var(--status-regular); }

/* Via icon (chip mini) */
.via-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.via-icon__emoji { font-size: var(--fs-sm); line-height: 1; }

/* Summary cards (4 mini cards bottom) */
.cmp-summary {
  margin-top: var(--space-5);
}

.cmp-summary__card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cmp-summary__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cmp-summary__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cmp-summary__card--success { border-top: 3px solid var(--status-regular); }
.cmp-summary__card--warning { border-top: 3px solid var(--color-warning); }
.cmp-summary__card--danger  { border-top: 3px solid var(--status-rojo); }
.cmp-summary__card--info    { border-top: 3px solid var(--color-info); }

/* ============================================================================
 * MODAL EXTENSIONS
 * ============================================================================ */
.modal-rechazo__lead {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--lh-loose);
}

.template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.template-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.template-chip:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.template-chip--active {
  background: rgba(0, 208, 164, 0.15);
  color: var(--cofoundy-accent-hi);
  border-color: var(--cofoundy-accent-hi);
}

/* Form grid for compromiso modal (2 columns) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.form-grid__full {
  grid-column: 1 / -1;
}

/* ============================================================================
 * RESPONSIVE — table horizontal scroll on narrow
 * ============================================================================ */
@media (max-width: 1100px) {
  .form-grid { grid-template-columns: 1fr; }
  .stats-bar { flex-direction: column; align-items: stretch; }
  .stat-chip { justify-content: space-between; }
}