/* BIGSYS_NEXT_VISUAL_V9B_GRAY_IA_FIELDS_START
   Modelo visual:
   - Burbuja base gris.
   - Warning/Error: solo borde amarillo/rojo, fondo gris.
   - OK final/check final: burbuja levemente verde.
   - IA aplicada: campos individuales verdes mas intensos.
   - Stock/cantidad verde solo si el campo esta aplicado por IA.
   - No toca JS, OCR, IA, eventos ni validaciones.
*/

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

  --v9b-line-gray-hover-top:rgba(29,39,53,.99);
  --v9b-line-gray-hover-mid:rgba(22,32,47,.99);
  --v9b-line-gray-hover-bot:rgba(16,25,39,.99);

  --v9b-field-bg:rgba(6,15,27,.78);
  --v9b-field-bg-soft:rgba(9,18,31,.82);
  --v9b-field-border:rgba(148,163,184,.22);

  --v9b-text:#f7fbff;
  --v9b-text-soft:#dce8f8;
  --v9b-label:#b8c5d8;

  --v9b-ia-green:#28d17c;
  --v9b-ia-green-bg:rgba(40,209,124,.22);
  --v9b-ia-green-bg-2:rgba(40,209,124,.14);
  --v9b-ia-green-border:rgba(40,209,124,.62);
  --v9b-ia-green-text:#eafff2;

  --v9b-ok-bg-top:rgba(31,78,56,.58);
  --v9b-ok-bg-mid:rgba(24,61,47,.52);
  --v9b-ok-bg-bot:rgba(18,43,36,.48);
  --v9b-ok-border:rgba(74,222,128,.76);

  --v9b-warning:#fbbf24;
  --v9b-warning-border:rgba(251,191,36,.90);
  --v9b-warning-soft:rgba(251,191,36,.35);

  --v9b-error:#f87171;
  --v9b-error-border:rgba(248,113,113,.92);
  --v9b-error-soft:rgba(248,113,113,.36);
}

/* =========================================================
   1) BASE GRIS PARA TODAS LAS BURBUJAS
   ========================================================= */
.invoice-line-card,
.invoice-line-card.status-yellow,
.invoice-line-card.warning,
.invoice-line-card.yellow,
.invoice-line-card.status-red,
.invoice-line-card.error,
.invoice-line-card.no-product,
.invoice-line-card.sin-producto{
  background:
    linear-gradient(180deg, var(--v9b-line-gray-top), var(--v9b-line-gray-mid) 52%, var(--v9b-line-gray-bot)) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-left:4px solid rgba(148,163,184,.42) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

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

/* =========================================================
   2) WARNING / ERROR: FONDO GRIS, SOLO BORDE DE ESTADO
   ========================================================= */
.invoice-line-card.status-yellow,
.invoice-line-card.warning,
.invoice-line-card.yellow{
  border-color:var(--v9b-warning-border) !important;
  border-left-color:var(--v9b-warning) !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(251,191,36,.10) !important;
}

.invoice-line-card.status-red,
.invoice-line-card.error,
.invoice-line-card.no-product,
.invoice-line-card.sin-producto{
  border-color:var(--v9b-error-border) !important;
  border-left-color:var(--v9b-error) !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(248,113,113,.11) !important;
}

.invoice-line-card.status-yellow:hover,
.invoice-line-card.warning:hover,
.invoice-line-card.yellow:hover{
  border-color:rgba(251,191,36,1) !important;
}

.invoice-line-card.status-red:hover,
.invoice-line-card.error:hover,
.invoice-line-card.no-product:hover,
.invoice-line-card.sin-producto:hover{
  border-color:rgba(248,113,113,1) !important;
}

/* =========================================================
   3) CHECK FINAL OK: BURBUJA LEVEMENTE VERDE
   ========================================================= */
.invoice-line-card.status-soft-green,
.invoice-line-card.status-ok,
.invoice-line-card.ok,
.invoice-line-card.valid{
  background:
    linear-gradient(180deg, var(--v9b-ok-bg-top), var(--v9b-ok-bg-mid) 52%, var(--v9b-ok-bg-bot)) !important;
  border:1px solid var(--v9b-ok-border) !important;
  border-left:4px solid rgba(74,222,128,.96) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(74,222,128,.12) !important;
}

.invoice-line-card.status-soft-green:hover,
.invoice-line-card.status-ok:hover,
.invoice-line-card.ok:hover,
.invoice-line-card.valid:hover{
  background:
    linear-gradient(180deg, rgba(36,88,64,.62), rgba(27,68,52,.56) 52%, rgba(20,49,40,.52)) !important;
  border-color:rgba(74,222,128,.96) !important;
}

/* =========================================================
   4) DESCRIPCION PRINCIPAL SIEMPRE BLANCA
   ========================================================= */
.invoice-line-card .line-description,
.invoice-line-card .line-description *,
.invoice-line-card.status-yellow .line-description,
.invoice-line-card.status-yellow .line-description *,
.invoice-line-card.status-red .line-description,
.invoice-line-card.status-red .line-description *,
.invoice-line-card.status-soft-green .line-description,
.invoice-line-card.status-soft-green .line-description *,
.invoice-line-card.ok .line-description,
.invoice-line-card.ok .line-description *,
.invoice-line-card.valid .line-description,
.invoice-line-card.valid .line-description *{
  color:var(--v9b-text) !important;
  text-shadow:none !important;
}

.invoice-line-card .line-label,
.invoice-line-card.status-yellow .line-label,
.invoice-line-card.status-red .line-label,
.invoice-line-card.status-soft-green .line-label,
.invoice-line-card.ok .line-label,
.invoice-line-card.valid .line-label{
  color:var(--v9b-label) !important;
}

/* Badges de estado internos: texto con color, sin fondo pesado */
.invoice-line-card.status-yellow .line-ready-warning,
.invoice-line-card.warning .line-ready-warning,
.invoice-line-card.yellow .line-ready-warning{
  color:#ffe7a3 !important;
  background:rgba(251,191,36,.12) !important;
  border-color:rgba(251,191,36,.32) !important;
}

.invoice-line-card.status-red .line-ready-warning,
.invoice-line-card.error .line-ready-warning,
.invoice-line-card.no-product .line-ready-warning,
.invoice-line-card.sin-producto .line-ready-warning{
  color:#ffd6d6 !important;
  background:rgba(248,113,113,.13) !important;
  border-color:rgba(248,113,113,.34) !important;
}

/* =========================================================
   5) CAMPOS NORMALES: GRIS / OSCUROS
   ========================================================= */
.invoice-line-card .line-field,
.invoice-line-card .ai-field,
.invoice-line-card .line-field:not(.field-ai-applied):not(.field-local-confirmed):not(.field-safe):not(.field-confirmed),
.invoice-line-card .ai-field:not(.field-ai-applied):not(.field-local-confirmed):not(.field-safe):not(.field-confirmed):not(.ai-field-description){
  background:var(--v9b-field-bg) !important;
  border:1px solid var(--v9b-field-border) !important;
  color:var(--v9b-text-soft) !important;
  box-shadow:none !important;
}

.invoice-line-card .line-value,
.invoice-line-card .line-value.mono,
.invoice-line-card .line-field *,
.invoice-line-card .ai-field *{
  color:var(--v9b-text-soft) !important;
}

/* =========================================================
   6) CAMPOS APLICADOS POR IA: VERDE MAS INTENSO
   ========================================================= */
.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(--v9b-ia-green-bg), var(--v9b-ia-green-bg-2)) !important;
  border:1px solid var(--v9b-ia-green-border) !important;
  color:var(--v9b-ia-green-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(40,209,124,.06) !important;
}

/* Producto/propuesta IA */
.invoice-line-card .ai-field-description{
  border-radius:12px !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(--v9b-ia-green-text) !important;
}

/* Hover campo IA */
.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,.28), rgba(40,209,124,.18)) !important;
  border-color:rgba(40,209,124,.78) !important;
}

/* =========================================================
   7) STOCK / CANTIDAD
      Default gris. Verde solo si el campo cantidad fue aplicado por IA.
   ========================================================= */

/* Default stock/cant gris */
.invoice-line-card .qty-stock-inline-v3,
.invoice-line-card .qty-stock-compact-v2,
.invoice-line-card .ai-stock-applied,
.invoice-line-card .stock-applied-main-notice{
  background:rgba(6,15,27,.72) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  color:var(--v9b-text-soft) !important;
  box-shadow:none !important;
}

.invoice-line-card .qty-stock-value-v3,
.invoice-line-card .qty-stock-value,
.invoice-line-card .stock-ia-ok{
  color:var(--v9b-text-soft) !important;
  font-weight:800 !important;
}

/* Si cantidad fue aplicada por IA, stock/cant tambien verde */
.invoice-line-card .line-field.line-qty.field-ai-applied .qty-stock-inline-v3,
.invoice-line-card .line-field.line-qty.field-local-confirmed .qty-stock-inline-v3,
.invoice-line-card .line-field.line-qty.field-safe .qty-stock-inline-v3,
.invoice-line-card .line-field.line-qty.field-confirmed .qty-stock-inline-v3,
.invoice-line-card .line-field.line-qty.field-ai-applied .qty-stock-compact-v2,
.invoice-line-card .line-field.line-qty.field-local-confirmed .qty-stock-compact-v2,
.invoice-line-card .line-field.line-qty.field-safe .qty-stock-compact-v2,
.invoice-line-card .line-field.line-qty.field-confirmed .qty-stock-compact-v2,
.invoice-line-card .line-field.line-qty.field-ai-applied .ai-stock-applied,
.invoice-line-card .line-field.line-qty.field-local-confirmed .ai-stock-applied,
.invoice-line-card .line-field.line-qty.field-safe .ai-stock-applied,
.invoice-line-card .line-field.line-qty.field-confirmed .ai-stock-applied,
.invoice-line-card .line-field.line-qty.field-ai-applied .stock-applied-main-notice,
.invoice-line-card .line-field.line-qty.field-local-confirmed .stock-applied-main-notice,
.invoice-line-card .line-field.line-qty.field-safe .stock-applied-main-notice,
.invoice-line-card .line-field.line-qty.field-confirmed .stock-applied-main-notice{
  background:
    linear-gradient(180deg, var(--v9b-ia-green-bg), var(--v9b-ia-green-bg-2)) !important;
  border-color:var(--v9b-ia-green-border) !important;
  color:var(--v9b-ia-green-text) !important;
}

.invoice-line-card .line-field.line-qty.field-ai-applied .qty-stock-value-v3,
.invoice-line-card .line-field.line-qty.field-local-confirmed .qty-stock-value-v3,
.invoice-line-card .line-field.line-qty.field-safe .qty-stock-value-v3,
.invoice-line-card .line-field.line-qty.field-confirmed .qty-stock-value-v3,
.invoice-line-card .line-field.line-qty.field-ai-applied .stock-ia-ok,
.invoice-line-card .line-field.line-qty.field-local-confirmed .stock-ia-ok,
.invoice-line-card .line-field.line-qty.field-safe .stock-ia-ok,
.invoice-line-card .line-field.line-qty.field-confirmed .stock-ia-ok{
  color:#d8ffe7 !important;
}

/* =========================================================
   8) BOTONES / CHECKS
   ========================================================= */

/* Default gris */
.invoice-line-card .line-main > button,
.invoice-line-card button.icon-btn,
.invoice-line-card .line-status-control,
.invoice-line-card .line-status-pill,
.invoice-line-card .line-status-icon,
.invoice-line-card button.green,
.invoice-line-card .check,
.invoice-line-card .check-btn{
  background:rgba(9,19,32,.78) !important;
  border:1px solid rgba(148,163,184,.26) !important;
  color:var(--v9b-text-soft) !important;
  box-shadow:none !important;
}

/* Warning: boton con borde amarillo */
.invoice-line-card.status-yellow .line-main > button,
.invoice-line-card.status-yellow .line-status-control,
.invoice-line-card.status-yellow .line-status-pill,
.invoice-line-card.status-yellow button.green,
.invoice-line-card.warning .line-main > button,
.invoice-line-card.warning .line-status-control,
.invoice-line-card.warning .line-status-pill,
.invoice-line-card.warning button.green,
.invoice-line-card.yellow .line-main > button,
.invoice-line-card.yellow .line-status-control,
.invoice-line-card.yellow .line-status-pill,
.invoice-line-card.yellow button.green{
  border-color:var(--v9b-warning-soft) !important;
}

/* Error: boton con borde rojo */
.invoice-line-card.status-red .line-main > button,
.invoice-line-card.status-red .line-status-control,
.invoice-line-card.status-red .line-status-pill,
.invoice-line-card.status-red button.green,
.invoice-line-card.error .line-main > button,
.invoice-line-card.error .line-status-control,
.invoice-line-card.error .line-status-pill,
.invoice-line-card.error button.green,
.invoice-line-card.no-product .line-main > button,
.invoice-line-card.no-product .line-status-control,
.invoice-line-card.no-product .line-status-pill,
.invoice-line-card.no-product button.green,
.invoice-line-card.sin-producto .line-main > button,
.invoice-line-card.sin-producto .line-status-control,
.invoice-line-card.sin-producto .line-status-pill,
.invoice-line-card.sin-producto button.green{
  border-color:var(--v9b-error-soft) !important;
}

/* OK final: botones verdes suaves */
.invoice-line-card.status-soft-green .line-main > button,
.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-main > button,
.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-main > button,
.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-main > button,
.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{
  background:rgba(40,209,124,.14) !important;
  border-color:rgba(40,209,124,.42) !important;
  color:#eafff2 !important;
}

/* BIGSYS_NEXT_VISUAL_V9B_GRAY_IA_FIELDS_END */