/* Bloque A7.4: listado, detalle y sección de Invoice Review de Purchase
   Orders. El grueso del layout (cabecera, filtros, tabla, tarjetas de
   resumen, diálogos de formulario) reutiliza clases ya globales de
   invoices.css/master-data.css/review.css — aquí solo lo que es propio de
   Purchase Orders: sus badges de estado, el aviso de sobreconsumo y el
   bloque de datos de cabecera del detalle. */

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

.badge--po-open {
  background: var(--success-surface);
  color: var(--success);
}

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

.badge--po-cancelled {
  background: var(--danger-surface);
  color: var(--danger);
}

/* Ortogonal al estado (§7): una PO abierta o cerrada puede estar
   sobreconsumida a la vez — nunca sustituye el badge de estado. */
.badge--po-over-consumed {
  background: var(--danger-surface);
  color: var(--danger);
}

.badge-group {
  display: inline-flex;
  gap: var(--space-1, 4px);
  align-items: center;
}

/* Bloque de "Datos de la orden" en el detalle — mismo patrón dt/dd que
   .allocation-context (review.css), con su propio nombre porque vive fuera
   de Imputación contable. */
.review-context {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px var(--space-3);
  margin: 0;
  font-size: 13px;
}

.review-context dt {
  color: var(--text-secondary);
}

.review-context dd {
  margin: 0;
}

/* Nº de factura clicable dentro de la tabla de asociadas — navega a su
   propia Revisión (§32), sin ser toda la fila clicable (la fila también
   tiene acciones propias, a diferencia del listado). */
.link-cell {
  cursor: pointer;
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Pendiente/Exceso (§29): el importe en negativo (exceso) se distingue del
   pendiente normal sin depender solo del signo del número. */
.amount-negative {
  color: var(--danger);
  font-weight: 600;
}

.po-summary-panel {
  margin: var(--space-2, 8px) 0 var(--space-3, 16px);
}