/* BIGSYS_NEXT_VISUAL_V10_HOVER_OK_PRIORITY_START
   Correccion:
   - Hover: no cambia fondo, solo intensifica borde.
   - OK final: prioridad visual sobre amarillo/rojo.
   - Si la linea conserva status-yellow + status-soft-green, gana verde.
   - Campos IA siguen verdes individuales.
   - No toca JS, OCR, IA, eventos ni validaciones.
*/

:root{
  --v10-gray-top:rgba(24,32,44,.98);
  --v10-gray-mid:rgba(18,27,40,.98);
  --v10-gray-bot:rgba(14,22,34,.98);

  --v10-ok-top:rgba(31,78,56,.52);
  --v10-ok-mid:rgba(24,61,47,.47);
  --v10-ok-bot:rgba(18,43,36,.44);

  --v10-ok:#36c985;
  --v10-ok-border:rgba(74,222,128,.82);

  --v10-yellow:#fbbf24;
  --v10-yellow-border:rgba(251,191,36,.90);

  --v10-red:#f87171;
  --v10-red-border:rgba(248,113,113,.92);

  --v10-field-green-bg:rgba(40,209,124,.22);
  --v10-field-green-bg2:rgba(40,209,124,.14);
  --v10-field-green-border:rgba(40,209,124,.62);
  --v10-field-green-text:#eafff2;
}

/* =========================================================
   1) BASE GRIS ESTABLE
   ========================================================= */

.invoice-line-card{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
}

/* Hover general: mantiene fondo, solo borde un poco mas claro */
.invoice-line-card:hover{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
  border-color:rgba(203,213,225,.44) !important;
}

/* Hover sobre campos: tampoco cambia fondo de toda la burbuja */
.invoice-line-card:hover .line-field:not(.field-ai-applied):not(.field-local-confirmed):not(.field-safe):not(.field-confirmed),
.invoice-line-card:hover .ai-field:not(.field-ai-applied):not(.field-local-confirmed):not(.field-safe):not(.field-confirmed):not(.ai-field-description){
  background:rgba(6,15,27,.78) !important;
}

/* =========================================================
   2) WARNING / ERROR: fondo gris, borde de estado
   ========================================================= */

.invoice-line-card.status-yellow,
.invoice-line-card.warning,
.invoice-line-card.yellow{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
  border-color:var(--v10-yellow-border) !important;
  border-left:4px solid var(--v10-yellow) !important;
}

.invoice-line-card.status-red,
.invoice-line-card.error,
.invoice-line-card.no-product,
.invoice-line-card.sin-producto{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
  border-color:var(--v10-red-border) !important;
  border-left:4px solid var(--v10-red) !important;
}

/* Hover warning/error: solo intensifica borde */
.invoice-line-card.status-yellow:hover,
.invoice-line-card.warning:hover,
.invoice-line-card.yellow:hover{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
  border-color:rgba(251,191,36,1) !important;
  border-left-color:rgba(251,191,36,1) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(251,191,36,.22) !important;
}

.invoice-line-card.status-red:hover,
.invoice-line-card.error:hover,
.invoice-line-card.no-product:hover,
.invoice-line-card.sin-producto:hover{
  background:
    linear-gradient(180deg, var(--v10-gray-top), var(--v10-gray-mid) 52%, var(--v10-gray-bot)) !important;
  border-color:rgba(248,113,113,1) !important;
  border-left-color:rgba(248,113,113,1) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(248,113,113,.23) !important;
}

/* =========================================================
   3) OK FINAL: PRIORIDAD ABSOLUTA
   ========================================================= */

/* Gana aunque la linea tambien tenga status-yellow/status-red */
.invoice-line-card.status-soft-green,
.invoice-line-card.status-ok,
.invoice-line-card.ok,
.invoice-line-card.valid,
.invoice-line-card.status-yellow.status-soft-green,
.invoice-line-card.status-yellow.status-ok,
.invoice-line-card.status-yellow.ok,
.invoice-line-card.status-yellow.valid,
.invoice-line-card.warning.status-soft-green,
.invoice-line-card.warning.status-ok,
.invoice-line-card.warning.ok,
.invoice-line-card.warning.valid,
.invoice-line-card.yellow.status-soft-green,
.invoice-line-card.yellow.status-ok,
.invoice-line-card.yellow.ok,
.invoice-line-card.yellow.valid,
.invoice-line-card.status-red.status-soft-green,
.invoice-line-card.status-red.status-ok,
.invoice-line-card.status-red.ok,
.invoice-line-card.status-red.valid,
.invoice-line-card.error.status-soft-green,
.invoice-line-card.error.status-ok,
.invoice-line-card.error.ok,
.invoice-line-card.error.valid,
.invoice-line-card.no-product.status-soft-green,
.invoice-line-card.no-product.status-ok,
.invoice-line-card.no-product.ok,
.invoice-line-card.no-product.valid,
.invoice-line-card.sin-producto.status-soft-green,
.invoice-line-card.sin-producto.status-ok,
.invoice-line-card.sin-producto.ok,
.invoice-line-card.sin-producto.valid{
  background:
    linear-gradient(180deg, var(--v10-ok-top), var(--v10-ok-mid) 52%, var(--v10-ok-bot)) !important;
  border-color:var(--v10-ok-border) !important;
  border-left:4px solid var(--v10-ok) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(74,222,128,.14) !important;
}

/* Si el estado OK esta en el control interno, tambien gana verde.
   Esto cubre casos donde la tarjeta quedo status-yellow pero el check final ya esta OK. */
.invoice-line-card:has(.line-status-control.status-soft-green),
.invoice-line-card:has(.line-status-control.status-ok),
.invoice-line-card:has(.line-status-control.ok),
.invoice-line-card:has(.line-status-control.valid),
.invoice-line-card:has(.line-status-pill.status-soft-green),
.invoice-line-card:has(.line-status-pill.status-ok),
.invoice-line-card:has(.line-status-pill.ok),
.invoice-line-card:has(.line-status-pill.valid),
.invoice-line-card:has(.line-status-icon.status-soft-green),
.invoice-line-card:has(.line-status-icon.status-ok),
.invoice-line-card:has(.line-status-icon.ok),
.invoice-line-card:has(.line-status-icon.valid){
  background:
    linear-gradient(180deg, var(--v10-ok-top), var(--v10-ok-mid) 52%, var(--v10-ok-bot)) !important;
  border-color:var(--v10-ok-border) !important;
  border-left:4px solid var(--v10-ok) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(74,222,128,.14) !important;
}

/* Hover OK: no cambia fondo fuerte, solo borde mas vivo */
.invoice-line-card.status-soft-green:hover,
.invoice-line-card.status-ok:hover,
.invoice-line-card.ok:hover,
.invoice-line-card.valid:hover,
.invoice-line-card:has(.line-status-control.status-soft-green):hover,
.invoice-line-card:has(.line-status-control.status-ok):hover,
.invoice-line-card:has(.line-status-control.ok):hover,
.invoice-line-card:has(.line-status-control.valid):hover,
.invoice-line-card:has(.line-status-pill.status-soft-green):hover,
.invoice-line-card:has(.line-status-pill.status-ok):hover,
.invoice-line-card:has(.line-status-pill.ok):hover,
.invoice-line-card:has(.line-status-pill.valid):hover{
  background:
    linear-gradient(180deg, var(--v10-ok-top), var(--v10-ok-mid) 52%, var(--v10-ok-bot)) !important;
  border-color:rgba(74,222,128,.98) !important;
  border-left-color:rgba(74,222,128,1) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 0 0 1px rgba(74,222,128,.24) !important;
}

/* =========================================================
   4) CAMPOS APLICADOS POR IA: VERDES INTENSOS
   ========================================================= */

.invoice-line-card .ai-field-description,
.invoice-line-card .line-field.field-ai-applied,
.invoice-line-card .line-field.field-local-confirmed,
.invoice-line-card .line-field.field-safe,
.invoice-line-card .line-field.field-confirmed,
.invoice-line-card .ai-field.field-ai-applied,
.invoice-line-card .ai-field.field-local-confirmed,
.invoice-line-card .ai-field.field-safe,
.invoice-line-card .ai-field.field-confirmed{
  background:
    linear-gradient(180deg, var(--v10-field-green-bg), var(--v10-field-green-bg2)) !important;
  border:1px solid var(--v10-field-green-border) !important;
  color:var(--v10-field-green-text) !important;
}

.invoice-line-card .ai-field-description *,
.invoice-line-card .line-field.field-ai-applied *,
.invoice-line-card .line-field.field-local-confirmed *,
.invoice-line-card .line-field.field-safe *,
.invoice-line-card .line-field.field-confirmed *,
.invoice-line-card .ai-field.field-ai-applied *,
.invoice-line-card .ai-field.field-local-confirmed *,
.invoice-line-card .ai-field.field-safe *,
.invoice-line-card .ai-field.field-confirmed *{
  color:var(--v10-field-green-text) !important;
}

/* Hover en campos IA: solo intensifica campo, no la burbuja */
.invoice-line-card .ai-field-description:hover,
.invoice-line-card .line-field.field-ai-applied:hover,
.invoice-line-card .line-field.field-local-confirmed:hover,
.invoice-line-card .line-field.field-safe:hover,
.invoice-line-card .line-field.field-confirmed:hover,
.invoice-line-card .ai-field.field-ai-applied:hover,
.invoice-line-card .ai-field.field-local-confirmed:hover,
.invoice-line-card .ai-field.field-safe:hover,
.invoice-line-card .ai-field.field-confirmed:hover{
  background:
    linear-gradient(180deg, rgba(40,209,124,.30), rgba(40,209,124,.20)) !important;
  border-color:rgba(40,209,124,.82) !important;
}

/* =========================================================
   5) BOTONES DE ESTADO
   ========================================================= */

.invoice-line-card.status-soft-green .line-status-control,
.invoice-line-card.status-soft-green .line-status-pill,
.invoice-line-card.status-soft-green .line-status-icon,
.invoice-line-card.status-soft-green button.green,
.invoice-line-card.status-ok .line-status-control,
.invoice-line-card.status-ok .line-status-pill,
.invoice-line-card.status-ok .line-status-icon,
.invoice-line-card.status-ok button.green,
.invoice-line-card.ok .line-status-control,
.invoice-line-card.ok .line-status-pill,
.invoice-line-card.ok .line-status-icon,
.invoice-line-card.ok button.green,
.invoice-line-card.valid .line-status-control,
.invoice-line-card.valid .line-status-pill,
.invoice-line-card.valid .line-status-icon,
.invoice-line-card.valid button.green,
.invoice-line-card:has(.line-status-control.status-soft-green) .line-status-control,
.invoice-line-card:has(.line-status-control.status-ok) .line-status-control,
.invoice-line-card:has(.line-status-control.ok) .line-status-control,
.invoice-line-card:has(.line-status-control.valid) .line-status-control{
  background:rgba(40,209,124,.16) !important;
  border-color:rgba(40,209,124,.46) !important;
  color:#eafff2 !important;
}

/* BIGSYS_NEXT_VISUAL_V10_HOVER_OK_PRIORITY_END */