/* =========================================================================
   K-Botanas · Palette Override — Sistema "Command · Cobalto"
   Cárgalo DESPUÉS de kb-design-system.css y antes de sidebar.css.
   Para revertir al sistema anterior: quita el <link> de esta hoja.
   ========================================================================= */

:root {
  /* ── Superficies / fondos (azul muy claro) ───────────────────────── */
  --kb-cream:       #eef1f5;   /* fondo principal de la app */
  --kb-cream-soft:  #f6f8fb;   /* relleno sutil (inputs, hovers) */
  --kb-paper:       #ffffff;   /* superficies de cards */
  --kb-card:        #ffffff;
  --kb-bg:          #eef1f5;
  --kb-bg-soft:     #f6f8fb;

  /* ── Líneas ──────────────────────────────────────────────────────── */
  --kb-line:        #e4e8ee;
  --kb-line-soft:   #eef1f5;
  --kb-line-strong: #d4dae3;

  /* ── Tinta ───────────────────────────────────────────────────────── */
  --kb-ink:    #0e1726;
  --kb-ink-2:  #3c4a60;
  --kb-ink-3:  #73829a;
  --kb-ink-4:  #9aa7bb;
  --kb-ink-5:  #c2ccd9;

  /* ── Acento de marca: azul cobalto ───────────────────────────────── */
  --kb-terracotta:      #1f5fe0;
  --kb-terracotta-2:    #4f86f0;
  --kb-terracotta-deep: #1647a8;
  --kb-terracotta-soft: #eaf1fe;
  --kb-terracotta-tint: #f4f8fe;
  --kb-red:        #1f5fe0;
  --kb-red-soft:   #eaf1fe;
  --kb-primary:        #1f5fe0;
  --kb-primary-hover:  #1647a8;
  --kb-accent-2:       #6f9bf0;   /* tono claro (activos, gradientes) */
  --kb-accent-ink:     #1647a8;   /* texto sobre accent-soft */
  --kb-accent-grad:    linear-gradient(150deg, #4f86f0, #1f5fe0);

  /* ── Riel lateral oscuro (azul marino frío) ──────────────────────── */
  --kb-rail:            #101826;
  --kb-rail-hover:      #1a2438;
  --kb-rail-muted:      #8492a8;
  --kb-rail-text:       #c5d0e0;
  --kb-rail-active-bg:  rgba(31, 95, 224, .18);
  --kb-rail-w:          74px;
  --kb-rail-w-open:     232px;

  /* ── Acento secundario (antes "green/azul"): se mantiene semántico ── */
  /* No lo usamos como marca. Verde = positivo/venta. */
  --kb-green:        #16a34a;
  --kb-green-deep:   #0f7a37;
  --kb-green-2:      #22b358;
  --kb-green-soft:   #e6f6ee;
  --kb-green-tint:   #eef7f1;

  /* ── Mostaza / estado (intactos, semánticos) ─────────────────────── */
  --kb-mustard:      #e8930c;
  --kb-mustard-soft: #fbf0e2;
  --kb-blue:         #2563eb;
  --kb-blue-soft:    #e7eefc;
  --kb-blue-tint:    #eef3fd;
  --kb-positive:     #16a34a;
  --kb-warning:      #e8930c;
  --kb-danger:       #dc2626;

  /* sombras del sistema nuevo */
  --kb-sh:    0 6px 22px rgba(20,40,80,.08);
  --kb-sh-lg: 0 12px 34px rgba(20,40,80,.12);
}

/* fondo unificado */
body { background: var(--kb-cream) !important; }

/* botón primario = gradiente cobalto */
.kb-btn.primary {
  background: var(--kb-accent-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.kb-btn.primary:hover { filter: brightness(1.04); }

/* sombras de CTA antes verdes/terracotta → tono acento */
.btn-save, .pos-save-btn, .btn-pay {
  box-shadow: 0 4px 12px rgba(31, 95, 224, 0.22) !important;
}
.btn-save:hover:not(:disabled),
.pos-save-btn:hover:not(:disabled),
.btn-pay:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(31, 95, 224, 0.30) !important;
}

/* item activo del riel: cobalto sobre fondo oscuro (def. detallada en sidebar.css) */
.kb-nav-item.active {
  background: var(--kb-rail-active-bg) !important;
  color: var(--kb-accent-2) !important;
}
.kb-nav-item.active .kb-nav-icon { color: var(--kb-accent-2) !important; }