
/* BIGSYS_NEXT_VISUAL_V6_DESC_UNIFY_START
   Objetivo:
   - descripcion principal siempre blanca
   - propuesta IA como campo verde aparte
   - amarillo mas claro
   - rojo menos oscuro
   - sin tocar logica/IA/OCR
*/

:root{
  --ms-v6-white:#f4f8ff;
  --ms-v6-white-soft:#d6e2f2;
  --ms-v6-green:#36c985;
  --ms-v6-green-2:#62df9f;
  --ms-v6-green-bg:rgba(54,201,133,.14);
  --ms-v6-green-bg-hover:rgba(54,201,133,.18);
  --ms-v6-green-border:rgba(54,201,133,.34);

  --ms-v6-yellow-border:rgba(245,158,11,.56);
  --ms-v6-yellow-bg1:rgba(44,35,16,.42);
  --ms-v6-yellow-bg2:rgba(13,23,37,.94);

  --ms-v6-red-border:rgba(239,68,68,.52);
  --ms-v6-red-bg1:rgba(59,24,39,.48);
  --ms-v6-red-bg2:rgba(24,18,35,.92);
}

/* =========================================================
   1) DESCRIPCION OCR PRINCIPAL: SIEMPRE BLANCA
   ========================================================= */
.invoice-line-card .line-description,
.invoice-line-card .line-description *,
.invoice-line-card .line-main .line-description,
.invoice-line-card .line-main .line-description *{
  color:var(--ms-v6-white) !important;
  text-shadow:none !important;
}

/* Etiquetas pequeñas arriba de la descripcion */
.invoice-line-card .line-label{
  color:rgba(214,226,242,.82) !important;
}

/* Si alguna variante de estado la estaba pintando amarilla o verde, la neutralizamos */
.invoice-line-card.status-yellow .line-description,
.invoice-line-card.status-yellow .line-description *,
.invoice-line-card.warning .line-description,
.invoice-line-card.warning .line-description *,
.invoice-line-card.yellow .line-description,
.invoice-line-card.yellow .line-description *,
.invoice-line-card.status-red .line-description,
.invoice-line-card.status-red .line-description *,
.invoice-line-card.error .line-description,
.invoice-line-card.error .line-description *,
.invoice-line-card.no-product .line-description,
.invoice-line-card.no-product .line-description *,
.invoice-line-card.sin-producto .line-description,
.invoice-line-card.sin-producto .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(--ms-v6-white) !important;
}

/* =========================================================
   2) PROPUESTA / PRODUCTO SUGERIDO IA:
      CAMPO VERDE SEPARADO Y UNIFICADO
   ========================================================= */
.invoice-line-card .ai-field-description,
.invoice-line-card .ai-field-description *,
.invoice-line-card .line-ai-field-suggestions .ai-field-description,
.invoice-line-card .line-ai-field-suggestions .ai-field-description *{
  background:linear-gradient(180deg, var(--ms-v6-green-bg), rgba(54,201,133,.08)) !important;
  border:1px solid var(--ms-v6-green-border) !important;
  color:#ecfff4 !important;
  box-shadow:none !important;
}

.invoice-line-card .ai-field-description{
  border-radius:12px !important;
}

.invoice-line-card .ai-field-description:hover,
.invoice-line-card .line-ai-field-suggestions .ai-field-description:hover{
  background:linear-gradient(180deg, var(--ms-v6-green-bg-hover), rgba(54,201,133,.10)) !important;
  border-color:rgba(54,201,133,.44) !important;
}

/* Si el texto interno del producto sugerido venia azul, forzamos verde-blanco uniforme */
.invoice-line-card .ai-field-description .line-value,
.invoice-line-card .ai-field-description .line-value.mono,
.invoice-line-card .ai-field-description span,
.invoice-line-card .ai-field-description div{
  color:#dff9ea !important;
}

/* =========================================================
   3) FILAS AMARILLAS: MAS CLARAS Y MENOS MARRONES
   ========================================================= */
.invoice-line-card.status-yellow,
.invoice-line-card.warning,
.invoice-line-card.yellow{
  background:
    linear-gradient(90deg, var(--ms-v6-yellow-bg1), rgba(20,25,34,.30) 18%, rgba(10,22,38,.95) 42%, var(--ms-v6-yellow-bg2)) !important;
  border-color:rgba(245,158,11,.34) !important;
  border-left:3px solid var(--ms-v6-yellow-border) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.invoice-line-card.status-yellow:hover,
.invoice-line-card.warning:hover,
.invoice-line-card.yellow:hover{
  background:
    linear-gradient(90deg, rgba(66,48,18,.46), rgba(18,28,44,.34) 18%, rgba(12,26,43,.97) 42%, rgba(13,23,37,.97)) !important;
  border-color:rgba(245,158,11,.44) !important;
}

/* =========================================================
   4) FILAS ROJAS / SIN PRODUCTO: MAS VISIBLES, MENOS OSCURAS
   ========================================================= */
.invoice-line-card.status-red,
.invoice-line-card.error,
.invoice-line-card.no-product,
.invoice-line-card.sin-producto{
  background:
    linear-gradient(90deg, var(--ms-v6-red-bg1), rgba(48,28,49,.34) 18%, rgba(28,20,39,.95) 45%, var(--ms-v6-red-bg2)) !important;
  border-color:rgba(239,68,68,.34) !important;
  border-left:3px solid var(--ms-v6-red-border) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !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(90deg, rgba(78,30,49,.52), rgba(52,30,55,.38) 18%, rgba(29,21,40,.97) 45%, rgba(25,19,37,.97)) !important;
  border-color:rgba(239,68,68,.44) !important;
}

/* =========================================================
   5) ICONO IZQUIERDO / BOTON DE ACCION:
      mantener verde suave, no tan pesado
   ========================================================= */
.invoice-line-card .line-main > button,
.invoice-line-card button.icon-btn{
  background:rgba(54,201,133,.13) !important;
  border:1px solid rgba(54,201,133,.26) !important;
  color:#dff9ea !important;
  box-shadow:none !important;
}

/* =========================================================
   6) CHECK OK: mas moderado
   ========================================================= */
.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(54,201,133,.13) !important;
  border:1px solid rgba(54,201,133,.26) !important;
  color:#dff9ea !important;
  box-shadow:none !important;
}

/* =========================================================
   7) CAMPOS VERDES APLICADOS:
      quedan sutiles, no dominantes
   ========================================================= */
.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:rgba(54,201,133,.07) !important;
  border-color:rgba(54,201,133,.22) !important;
  color:#dff9ea !important;
}

/* El resto de los campos técnicos siguen oscuros */
.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:rgba(4,13,24,.72) !important;
}

/* BIGSYS_NEXT_VISUAL_V6_DESC_UNIFY_END */
