/* Bloque A7.5: dashboard "Cuentas a pagar" y sección "Control de pago" de
   Invoice Review. El grueso del layout (cabecera, filtros, tabla, tarjetas
   de resumen, diálogos de formulario, .review-section) reutiliza clases ya
   globales de invoices.css/master-data.css/review.css/purchase-orders.css
   (.badge-group, .amount-negative, .link-button, .toolbar-actions,
   .add-allocation-entry-button, .allocation-notice) — aquí solo lo que es
   propio de Accounts Payable: sus badges de estado y el conmutador de
   pestañas "Cuentas a pagar | Previsión" (§25). */

.badge--payable-pending {
  background: var(--warning-surface);
  color: var(--warning);
}

.badge--payable-postponed {
  background: var(--surface-alt);
  color: var(--text-secondary);
}

.badge--payable-paid {
  background: var(--success-surface);
  color: var(--success);
}

.badge--payable-cancelled {
  background: var(--surface-alt);
  color: var(--text-secondary);
  text-decoration: line-through;
}

/* Ortogonal al estado (§12): un vencimiento PENDING/POSTPONED puede estar
   vencido a la vez — nunca sustituye el badge de estado, mismo criterio que
   badge--po-over-consumed. */
.badge--payable-overdue {
  background: var(--danger-surface);
  color: var(--danger);
}

.badge--payable-plan-complete {
  background: var(--success-surface);
  color: var(--success);
}

.badge--payable-plan-partial {
  background: var(--warning-surface);
  color: var(--warning);
}

.badge--payable-plan-needs_review {
  background: var(--danger-surface);
  color: var(--danger);
}

/* --- Conmutador "Cuentas a pagar | Previsión" (§25) ------------------------- */

.tab-switch {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--surface-border);
}

.tab-button {
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
}

.tab-button:hover {
  color: var(--text-primary);
}

.tab-button.active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.payable-plan-section .summary-cards {
  margin-bottom: var(--space-3);
}