/* =========================================================
   BIGSYS OCR GLOBAL AESTHETIC V1
   Capa exclusivamente visual.
   No modifica JS, eventos, acciones, render, API ni estados.
   ========================================================= */

/* ---------------------------------------------------------
   PALETA BASE  modo oscuro
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme="dark"] {
  --ocr-a-bg: #09162d;
  --ocr-a-bg-soft: #0d1c36;
  --ocr-a-surface: #10213e;
  --ocr-a-surface-2: #142845;
  --ocr-a-surface-3: #182d4d;
  --ocr-a-text: #f2f4ff;
  --ocr-a-muted: #aeb9d4;
  --ocr-a-border: rgba(148, 127, 222, 0.24);
  --ocr-a-border-soft: rgba(148, 127, 222, 0.15);
  --ocr-a-violet: #715bc8;
  --ocr-a-violet-soft: rgba(113, 91, 200, 0.18);
  --ocr-a-red: #ef315e;
  --ocr-a-shadow: rgba(0, 0, 0, 0.22);
}

/* ---------------------------------------------------------
   PALETA BASE  modo claro
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme="light"] {
  --ocr-a-bg: #f3f1fb;
  --ocr-a-bg-soft: #f8f7fd;
  --ocr-a-surface: #ffffff;
  --ocr-a-surface-2: #fbfaff;
  --ocr-a-surface-3: #f5f2ff;
  --ocr-a-text: #162342;
  --ocr-a-muted: #5b6785;
  --ocr-a-border: rgba(103, 83, 188, 0.20);
  --ocr-a-border-soft: rgba(103, 83, 188, 0.12);
  --ocr-a-violet: #6855ba;
  --ocr-a-violet-soft: rgba(104, 85, 186, 0.10);
  --ocr-a-red: #e72b59;
  --ocr-a-shadow: rgba(47, 37, 95, 0.09);
}

/* ---------------------------------------------------------
   FONDO Y ESTRUCTURA GENERAL
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] {
  background:
    radial-gradient(circle at 15% 0%, var(--ocr-a-violet-soft), transparent 32%),
    var(--ocr-a-bg) !important;
  color: var(--ocr-a-text) !important;
}

body[data-bigsys-ocr-visual-theme] .app-shell,
body[data-bigsys-ocr-visual-theme] .app-layout,
body[data-bigsys-ocr-visual-theme] .app-region-left,
body[data-bigsys-ocr-visual-theme] .app-region-center,
body[data-bigsys-ocr-visual-theme] .app-region-right {
  background-color: transparent !important;
}

/* ---------------------------------------------------------
   CONTENEDORES PRINCIPALES
   Sin tocar clases de estado, validación ni IA.
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .zone-filters,
body[data-bigsys-ocr-visual-theme] .zone-invoice-list,
body[data-bigsys-ocr-visual-theme] .zone-invoice-header,
body[data-bigsys-ocr-visual-theme] .zone-supplier,
body[data-bigsys-ocr-visual-theme] .zone-totals,
body[data-bigsys-ocr-visual-theme] .zone-lines,
body[data-bigsys-ocr-visual-theme] .zone-preview,
body[data-bigsys-ocr-visual-theme] .zone-document-panel,
body[data-bigsys-ocr-visual-theme] .zone-footer-actions,
body[data-bigsys-ocr-visual-theme] .filters-card,
body[data-bigsys-ocr-visual-theme] .invoice-list-card,
body[data-bigsys-ocr-visual-theme] .document-panel,
body[data-bigsys-ocr-visual-theme] .panel-card,
body[data-bigsys-ocr-visual-theme] .card:not(.invoice-line-card) {
  border-color: var(--ocr-a-border) !important;
  box-shadow: 0 10px 24px var(--ocr-a-shadow) !important;
}

/* ---------------------------------------------------------
   BARRA DE FILTROS Y ACCIONES NEUTRAS
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .app-sticky-actions,
body[data-bigsys-ocr-visual-theme] #app-sticky-actions,
body[data-bigsys-ocr-visual-theme] .zone-filters {
  background:
    linear-gradient(120deg, var(--ocr-a-violet-soft), transparent 45%),
    var(--ocr-a-surface) !important;
  border-color: var(--ocr-a-border) !important;
  box-shadow: 0 8px 20px var(--ocr-a-shadow) !important;
}

body[data-bigsys-ocr-visual-theme] .filter-btn,
body[data-bigsys-ocr-visual-theme] .filter-button,
body[data-bigsys-ocr-visual-theme] .btn-neutral,
body[data-bigsys-ocr-visual-theme] .btn-secondary,
body[data-bigsys-ocr-visual-theme] .btn-outline {
  border-color: var(--ocr-a-border) !important;
  background: var(--ocr-a-surface-2) !important;
  color: var(--ocr-a-text) !important;
  box-shadow: none !important;
}

body[data-bigsys-ocr-visual-theme] .filter-btn:hover,
body[data-bigsys-ocr-visual-theme] .filter-button:hover,
body[data-bigsys-ocr-visual-theme] .btn-neutral:hover,
body[data-bigsys-ocr-visual-theme] .btn-secondary:hover,
body[data-bigsys-ocr-visual-theme] .btn-outline:hover {
  border-color: rgba(135, 108, 224, 0.58) !important;
  background: var(--ocr-a-violet-soft) !important;
  transform: translateY(-1px);
}

/* Filtros seleccionados: violeta suave, sin tocar conteos ni lógica. */
body[data-bigsys-ocr-visual-theme] .filter-btn.active,
body[data-bigsys-ocr-visual-theme] .filter-btn.is-active,
body[data-bigsys-ocr-visual-theme] .filter-button.active,
body[data-bigsys-ocr-visual-theme] .filter-button.is-active {
  border-color: var(--ocr-a-violet) !important;
  background: linear-gradient(135deg, rgba(104, 85, 186, 0.30), rgba(113, 91, 200, 0.18)) !important;
  color: var(--ocr-a-text) !important;
}

/* ---------------------------------------------------------
   LISTADO DE FACTURAS
   No toca los indicadores, IDs, estados ni botón de eliminar.
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .invoice-list-item,
body[data-bigsys-ocr-visual-theme] .document-list-item,
body[data-bigsys-ocr-visual-theme] .invoice-item {
  background: var(--ocr-a-surface-2) !important;
  border-color: var(--ocr-a-border-soft) !important;
  box-shadow: 0 5px 14px rgba(15, 25, 60, 0.06) !important;
}

body[data-bigsys-ocr-visual-theme] .invoice-list-item:hover,
body[data-bigsys-ocr-visual-theme] .document-list-item:hover,
body[data-bigsys-ocr-visual-theme] .invoice-item:hover {
  background: var(--ocr-a-surface-3) !important;
  border-color: rgba(126, 102, 211, 0.45) !important;
}

/* ---------------------------------------------------------
   BOTONES PRIMARIOS GENÉRICOS
   Excluye botones verdes, rojos, amarillos y confirmaciones.
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .btn-primary:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-ai),
body[data-bigsys-ocr-visual-theme] button.btn-primary:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-ai) {
  background: linear-gradient(135deg, var(--ocr-a-violet), #8b74dc) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(91, 70, 178, 0.24) !important;
}

/* ---------------------------------------------------------
   TEXTO Y SEPARADORES NEUTROS
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .muted,
body[data-bigsys-ocr-visual-theme] .help-text,
body[data-bigsys-ocr-visual-theme] .section-subtitle,
body[data-bigsys-ocr-visual-theme] .document-meta,
body[data-bigsys-ocr-visual-theme] .invoice-meta {
  color: var(--ocr-a-muted) !important;
}

body[data-bigsys-ocr-visual-theme] hr,
body[data-bigsys-ocr-visual-theme] .divider,
body[data-bigsys-ocr-visual-theme] .section-divider {
  border-color: var(--ocr-a-border-soft) !important;
}

/* ---------------------------------------------------------
   PROTECCIÓN EXPLÍCITA DE ESTADOS OPERATIVOS
   No reemplaza colores de validación, IA ni revisión.
   --------------------------------------------------------- */
body[data-bigsys-ocr-visual-theme] .ai-applied,
body[data-bigsys-ocr-visual-theme] .field-ai-applied,
body[data-bigsys-ocr-visual-theme] .field-confirmed,
body[data-bigsys-ocr-visual-theme] .field-review,
body[data-bigsys-ocr-visual-theme] .field-error,
body[data-bigsys-ocr-visual-theme] .status-success,
body[data-bigsys-ocr-visual-theme] .status-warning,
body[data-bigsys-ocr-visual-theme] .status-error,
body[data-bigsys-ocr-visual-theme] .invoice-line-card,
body[data-bigsys-ocr-visual-theme] [data-status],
body[data-bigsys-ocr-visual-theme] [data-validation-state] {
  /* Estados controlados por CSS específico existente. */
}