/* R4.2.1: administración de reglas de asignación (listado + editor de
   borradores). Reutiliza los tokens de variables.css y los patrones ya
   existentes (.master-data-header/.master-data-toolbar/.data-table-wrapper/
   .table-state/.form-field/.form-hint/.form-error/.link-button de
   components.css y pages/master-data.css, .assignment-rules-banner de
   pages/review.css) -- solo añade lo que no existía: las tarjetas del
   editor, las filas de condición y las tarjetas de output. Sin framework
   CSS, mismo criterio que el resto de la app. */

.assignment-rule-code {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.assignment-rule-editor-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.assignment-rule-editor-header h1 {
  margin: 0;
}

.assignment-rule-editor .card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.assignment-rule-editor .card h2 {
  margin-top: 0;
  font-size: 1rem;
}

.assignment-rule-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* R4.2.3: resumen de solo lectura (regla ACTIVE sin DRAFT / INACTIVE) --
   lista de texto plano, nunca los controles interactivos del editor. */
.assignment-rule-readonly-list {
  margin: 0;
  padding-left: var(--space-4);
}

.assignment-rule-readonly-list li {
  margin-bottom: var(--space-1);
}

/* Último hueco acordado de R4: histórico mínimo de versiones -- lista
   secundaria de solo texto, mismo criterio que .assignment-rule-readonly-
   list (sin controles, sin acciones). La versión que se está viendo ahora
   mismo se distingue con negrita, nunca con un color/badge nuevo. */
.assignment-rule-version-history {
  margin: 0;
  padding-left: var(--space-4);
}

.assignment-rule-version-history li {
  margin-bottom: var(--space-1);
}

.assignment-rule-version-history-current {
  font-weight: 600;
}

.form-field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

button.secondary {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.icon-button {
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.icon-button:hover {
  color: var(--danger);
}

/* --- Condiciones ------------------------------------------------------------- */

/* Bug post-smoke R4.2.1 §3: Campo/Operador/Valor son SIEMPRE una columna
   con la misma estructura (etiqueta + contenido) -- nunca CSS que mire si
   el campo es "supplier" en particular. Una columna más alta (p. ej. el
   selector compuesto Sociedad+Proveedor) simplemente ocupa más alto en su
   propia celda; las otras dos siguen alineadas arriba por `align-items:
   start`, pero ahora con su propia etiqueta en la misma posición relativa,
   así que la fila lee como tres columnas coherentes, no como un control
   suelto junto a un bloque desproporcionado. */
.condition-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: var(--space-2);
  align-items: start;
  margin-bottom: var(--space-2);
}

.condition-row-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.condition-row-cell-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.condition-row-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.condition-row-cell input,
.condition-row-cell select {
  width: 100%;
}

/* La fila "eliminar" (sin label, para no desalinear su propio botón
   respecto a las columnas que sí llevan etiqueta encima). */
.condition-row > .icon-button {
  align-self: start;
  margin-top: calc(0.75rem + var(--space-1) + 2px);
}

/* Bugfix R4.2.3: condición conservada pero cuyo campo ya no es válido para
   el scope actual (cambiado sin guardar/recargar) -- distinta de
   .has-check-error (eso es un error ya comprobado por el backend); esto es
   un aviso local, inmediato, de que hace falta corregirla antes de volver a
   comprobar. El aviso ocupa toda la fila (grid-column) para no desalinear
   las tres columnas de arriba. */
.condition-row--incompatible {
  border: 1px solid var(--warning);
  background: var(--warning-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.condition-row-warning {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--warning);
  font-size: 0.85rem;
}

/* --- Outputs ------------------------------------------------------------------ */

.output-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--surface-alt);
}

.output-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.output-card-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* Bugfix R4.2.3: mismo criterio que .condition-row--incompatible, para un
   output que ya no es válido en el scope actual. */
.output-card--incompatible {
  border-color: var(--warning);
  background: var(--warning-surface);
}

.output-card-warning {
  margin: 0 0 var(--space-2) 0;
  color: var(--warning);
  font-size: 0.85rem;
}

.output-card-summary {
  color: var(--text-secondary);
  font-size: 0.85rem;
  flex: 1;
}

.output-card-body > * + * {
  margin-top: var(--space-2);
}

.fk-picker-step {
  margin-bottom: var(--space-2);
}

/* --- Allocation ------------------------------------------------------------- */

.allocation-destination-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 120px auto;
  gap: var(--space-2);
  align-items: start;
  margin-bottom: var(--space-2);
}

.ar-alloc-total {
  font-weight: 600;
  margin: var(--space-2) 0;
}

/* --- Comprobar regla (R4.2.2) ------------------------------------------------- */

/* Fila de condición / tarjeta de output señalada por un error de
   validación o un conflicto devuelto por "Validar y probar" -- nunca
   recrea el nodo, solo añade/quita esta clase (ver highlightErrors() en
   editor.js). */
.condition-row.has-check-error,
.output-card.has-check-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.assignment-rule-check-status {
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.assignment-rule-check-status--ok {
  color: var(--success);
  background: var(--success-surface);
}

.assignment-rule-check-status--error {
  color: var(--danger);
  background: var(--danger-surface);
}

.assignment-rule-check-errors {
  color: var(--danger);
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}

.assignment-rule-conflicts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.assignment-rule-conflict-card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.assignment-rule-conflict-card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.assignment-rule-conflict-card--incompatible {
  border-color: var(--danger);
  background: var(--danger-surface);
}

.assignment-rule-conflict-card--redundant {
  border-color: var(--warning);
  background: var(--warning-surface);
}

.assignment-rule-check-metrics {
  margin: var(--space-3) 0;
  border-collapse: collapse;
}

.assignment-rule-check-metrics td {
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
}

.assignment-rule-check-metrics td:last-child {
  font-weight: 600;
  padding-right: 0;
}

.assignment-rule-check-outputs {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}

.assignment-rule-check-examples {
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  font-size: 0.85rem;
}

.assignment-rule-check-examples th,
.assignment-rule-check-examples td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--surface-border);
}

@media (max-width: 720px) {
  .condition-row,
  .allocation-destination-row {
    grid-template-columns: 1fr;
  }

  .condition-row > .icon-button {
    margin-top: 0;
    justify-self: start;
  }

  .assignment-rule-check-examples {
    display: block;
    overflow-x: auto;
  }
}