/* BIGSYS_NEXT_VISUAL_V2_START
   V2: capa estetica mas fina.
   Corrige exceso de verde del V1.
   No toca JS, OCR, IA, endpoints ni validaciones.
*/

:root{
  --ms-bg-0:#07111f;
  --ms-bg-1:#0b1627;
  --ms-bg-2:#101d31;
  --ms-panel:#111f34;
  --ms-panel-2:#14243b;
  --ms-panel-3:#0d1829;
  --ms-border:rgba(148,163,184,.20);
  --ms-border-strong:rgba(148,163,184,.32);
  --ms-text:#eaf2ff;
  --ms-muted:#93a4bb;
  --ms-soft:#cbd5e1;
  --ms-blue:#38bdf8;
  --ms-green:#22c55e;
  --ms-orange:#f59e0b;
  --ms-red:#ef4444;
  --ms-violet:#a78bfa;
  --ms-shadow:0 18px 48px rgba(0,0,0,.28);
  --ms-radius:18px;
  --ms-radius-sm:12px;
}

html,
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.13), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(245,158,11,.10), transparent 28%),
    linear-gradient(135deg, var(--ms-bg-0), var(--ms-bg-1) 48%, #081322) !important;
  color:var(--ms-text) !important;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Fondo general */
.app,
.app-shell,
.main-shell,
.shell,
.page,
.workspace,
.ocr-shell,
.bigshell,
main{
  background:transparent !important;
}

/* Header */
.header,
.topbar,
.top-bar,
.app-header,
.bigsys-header,
.zone-header,
[data-zone="header"]{
  background:rgba(8,18,32,.82) !important;
  border:1px solid var(--ms-border) !important;
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 36px rgba(0,0,0,.20) !important;
}

/* Tabs */
.doc-tabs-shell,
.tabs-shell,
.tabs,
.tabbar,
.invoice-tabs{
  background:rgba(12,24,42,.70) !important;
  border:1px solid var(--ms-border) !important;
  border-radius:999px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.tab,
.tabs button,
.tabbar button,
.invoice-tabs button{
  border-radius:999px !important;
  border:1px solid transparent !important;
  color:var(--ms-soft) !important;
  background:transparent !important;
  font-weight:700 !important;
}

.tab.active,
.tab.selected,
.tabs button.active,
.tabbar button.active,
.invoice-tabs button.active,
.tab:hover,
.tabs button:hover,
.tabbar button:hover{
  background:linear-gradient(135deg, rgba(56,189,248,.20), rgba(56,189,248,.08)) !important;
  border-color:rgba(56,189,248,.36) !important;
  color:#f8fbff !important;
}

.count,
.badge,
.pill{
  border-radius:999px !important;
  background:rgba(56,189,248,.16) !important;
  border:1px solid rgba(56,189,248,.28) !important;
  color:#dff7ff !important;
}

/* Paneles principales: siempre oscuros */
.panel,
.card,
.box,
.section,
.invoice-card,
.supplier-card,
.totals-card,
.lines-card,
.preview-card,
.document-card,
[data-zone="supplier"],
[data-zone="totals"],
[data-zone="lines"],
[data-zone="preview"],
[data-zone="document"],
.zone-supplier,
.zone-totals,
.zone-lines,
.zone-preview,
.zone-document-panel{
  background:linear-gradient(180deg, rgba(17,31,52,.96), rgba(13,25,43,.96)) !important;
  border:1px solid var(--ms-border) !important;
  border-radius:var(--ms-radius) !important;
  box-shadow:var(--ms-shadow) !important;
}

/* Correccion central: ningun bloque completo debe quedar verde */
.provider,
.supplier,
.totals,
.lines,
.line,
.line-row,
.invoice-line,
.current-line,
.product-line,
.ocr-line,
[data-zone="supplier"] *,
[data-zone="totals"] *,
[data-zone="lines"] *,
.zone-supplier *,
.zone-totals *,
.zone-lines *{
  color:inherit;
}

/* Tarjetas internas de proveedor / totales / lineas */
.provider *,
.supplier *,
.totals *,
.lines *,
.line-row *,
.invoice-line *{
  box-shadow:none;
}

/* Bloques de datos internos: oscuros, no verdes */
.field,
.field-box,
.data-field,
.info-field,
.ai-field,
.ai-card,
.ai-box,
.ai-suggestion,
.suggestion,
.totals-ai-option-v71{
  background:rgba(8,18,32,.62) !important;
  border:1px solid var(--ms-border) !important;
  border-radius:14px !important;
}

/* Si algun campo heredaba verde por valid/ok, lo neutralizamos */
.field.valid,
.field.ok,
.data-field.valid,
.data-field.ok,
.info-field.valid,
.info-field.ok,
.ai-field.valid,
.ai-field.ok,
.line-row.valid,
.line-row.ok,
.invoice-line.valid,
.invoice-line.ok{
  background:rgba(8,18,32,.62) !important;
  border-color:rgba(34,197,94,.34) !important;
}

/* Lineas: fondo oscuro con borde/acento verde suave */
.line-row,
.invoice-line,
.product-line,
.ocr-line,
tr{
  background:rgba(8,18,32,.56) !important;
  border-radius:14px !important;
}

.line-row.valid,
.line-row.ok,
.invoice-line.valid,
.invoice-line.ok,
.product-line.valid,
.product-line.ok,
.ocr-line.valid,
.ocr-line.ok{
  background:linear-gradient(90deg, rgba(34,197,94,.12), rgba(8,18,32,.72) 16%, rgba(8,18,32,.58)) !important;
  border-color:rgba(34,197,94,.34) !important;
}

.line-row:hover,
.invoice-line:hover,
.product-line:hover,
.ocr-line:hover,
tr:hover{
  background:rgba(15,35,59,.86) !important;
}

/* Titulos */
.section-title,
.card-title,
.panel-title{
  color:#f8fbff !important;
  letter-spacing:.01em;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-weight:800 !important;
}

/* Labels y valores */
.top-invoice-label,
.label,
.field-label{
  color:var(--ms-muted) !important;
  font-weight:700 !important;
}

.value,
.field-value{
  color:var(--ms-text) !important;
}

/* Inputs */
input,
select,
textarea{
  background:rgba(8,18,32,.82) !important;
  color:var(--ms-text) !important;
  border:1px solid var(--ms-border-strong) !important;
  border-radius:12px !important;
  outline:none !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(56,189,248,.72) !important;
  box-shadow:0 0 0 3px rgba(56,189,248,.14) !important;
}

/* Botones: sin selector generico [class*=green] */
button,
.btn,
.action-btn,
.icon-btn{
  border-radius:12px !important;
  font-weight:800 !important;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;
}

button:hover,
.btn:hover,
.action-btn:hover,
.icon-btn:hover{
  transform:translateY(-1px);
}

.btn,
.action-btn,
button.btn{
  border:1px solid var(--ms-border-strong) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

.btn.orange,
button.orange{
  background:linear-gradient(135deg, #f59e0b, #f97316) !important;
  border-color:rgba(251,191,36,.65) !important;
  color:#111827 !important;
}

.btn.blue,
button.blue{
  background:linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  border-color:rgba(56,189,248,.55) !important;
  color:white !important;
}

.btn.green,
button.green{
  background:linear-gradient(135deg, #22c55e, #16a34a) !important;
  border-color:rgba(74,222,128,.55) !important;
  color:#052e16 !important;
}

.btn.red,
button.red{
  background:linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color:rgba(248,113,113,.55) !important;
  color:white !important;
}

/* Estados: solo badges/chips, no paneles completos */
.ai-factor-green,
.status-green,
.badge-green,
.chip-green,
.check-green{
  border-color:rgba(34,197,94,.45) !important;
  background:rgba(34,197,94,.14) !important;
  color:#bbf7d0 !important;
}

.ai-factor-yellow,
.status-yellow,
.badge-yellow,
.chip-yellow{
  border-color:rgba(245,158,11,.50) !important;
  background:rgba(245,158,11,.13) !important;
  color:#fde68a !important;
}

.ai-factor-red,
.status-red,
.badge-red,
.chip-red{
  border-color:rgba(239,68,68,.50) !important;
  background:rgba(239,68,68,.13) !important;
  color:#fecaca !important;
}

.ai-factor-neutral,
.status-neutral,
.badge-neutral,
.chip-neutral{
  border-color:rgba(148,163,184,.28) !important;
  background:rgba(148,163,184,.10) !important;
  color:#dbe4f0 !important;
}

/* Checks reales: chicos y claros */
button[title*="OK"],
button[title*="ok"],
button[aria-label*="OK"],
button[aria-label*="ok"],
.check,
.check-btn{
  border-radius:12px !important;
}

/* IA y sugerencias */
.totals-ai-option-v71:hover,
.ai-suggestion:hover,
.suggestion:hover,
.ai-card:hover,
.ai-box:hover{
  border-color:rgba(56,189,248,.45) !important;
  background:rgba(14,165,233,.10) !important;
}

/* Tabla */
table,
.lines-table,
.grid-table{
  border-collapse:separate !important;
  border-spacing:0 7px !important;
}

thead,
.table-head{
  color:var(--ms-muted) !important;
}

td,
th{
  border-color:rgba(148,163,184,.12) !important;
}

/* Factor / cantidad final */
.qty-factor-wrap{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  background:rgba(56,189,248,.10) !important;
  border:1px solid rgba(56,189,248,.22) !important;
}

/* Visor */
.preview,
.viewer,
.document-viewer,
.ocr-preview{
  border-radius:var(--ms-radius) !important;
}

/* Scrollbar */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.45) rgba(15,23,42,.55);
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:rgba(15,23,42,.55);
  border-radius:999px;
}

*::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.45);
  border-radius:999px;
  border:2px solid rgba(15,23,42,.55);
}

/* BIGSYS_NEXT_VISUAL_V2_END */