/* =========================================================================
   K-Botanas · Palette Override
   --------------------------------------------------------------------------
   Sobrescribe los colores primarios del design system.
   Cárgalo DESPUÉS de kb-design-system.css y antes de cualquier <style>:
       <link rel="stylesheet" href="kb-design-system.css" />
       <link rel="stylesheet" href="kb-palette-override.css" />
       <link rel="stylesheet" href="sidebar.css" />

   Para revertir: solo elimina la línea del <link>.
   ========================================================================= */

:root {
  /* ── PRIMARIO: Rosa frambuesa (antes terracotta) ─────────────────── */
  --kb-terracotta:        #C2185B;   /* rosa principal */
  --kb-terracotta-deep:   #8E1148;   /* hover/active más oscuro */
  --kb-terracotta-soft:   #FBEAF0;   /* fondos suaves de pills, etc. */

  /* aliases que algunos componentes usan */
  --kb-red:               #C2185B;
  --kb-primary:           #C2185B;
  --kb-primary-hover:     #8E1148;

  /* ── ACENTO: Azul cielo (antes green olivo) ──────────────────────── */
  --kb-green:             #5DADE2;   /* azul claro vibrante */
  --kb-green-deep:        #2980B9;   /* hover/active del CTA verde */
  --kb-green-soft:        #DDE9F5;   /* fondos suaves, badges */

  /* aliases */
  --kb-success:           #5DADE2;
  --kb-accent:            #5DADE2;

  /* ── FONDOS: tinte azul muy claro (antes cream) ──────────────────── */
  --kb-cream:             #F0F7FB;   /* fondo principal de app */
  --kb-cream-soft:        #F7FBFD;   /* fondos de inputs/cards secundarios */
  --kb-paper:             #FFFFFF;   /* superficies de cards (se mantiene) */
  --kb-card:              #FFFFFF;   /* cards (se mantiene) */
  --kb-bg:                #F0F7FB;
  --kb-bg-soft:           #F7FBFD;

  /* ── MOSTAZA: se queda igual (warning, en ruta, etc.) ────────────── */
  --kb-mustard:           #F0C545;
  --kb-mustard-soft:      #FBEAD0;

  /* ── Líneas y tinta: se mantienen, pero más frías ──────────────── */
  --kb-line:              #DDE3EA;   /* antes #E5DCD0 (línea cálida) */
  --kb-line-soft:         #EEF2F6;   /* antes #F0E8DC */
  --kb-ink:               #1F1A14;   /* texto principal igual */
  --kb-ink-2:             #4A4640;   /* secundario */
  --kb-ink-3:             #7E7973;   /* terciario / labels */
  --kb-ink-4:             #B5B0A8;   /* placeholders / disabled */
}

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

/* ── Botones primarios .kb-btn.primary ──────────────────────────────── */
.kb-btn.primary {
  background: var(--kb-primary) !important;
  border-color: var(--kb-primary) !important;
  color: #FFFFFF !important;
}
.kb-btn.primary:hover {
  background: var(--kb-primary-hover) !important;
  border-color: var(--kb-primary-hover) !important;
}

/* ── Sombras coloradas que usaban verde → ahora azul ─────────────────── */
.btn-save,
.pos-save-btn,
.btn-pay {
  box-shadow: 0 4px 12px rgba(93, 173, 226, 0.28) !important;
}
.btn-save:hover:not(:disabled),
.pos-save-btn:hover:not(:disabled),
.btn-pay:hover:not(:disabled) {
  background: var(--kb-green-deep) !important;
  box-shadow: 0 6px 16px rgba(93, 173, 226, 0.35) !important;
}

/* ── Sombras del primario que usaban terracotta ──────────────────────── */
.pos-product-card:hover {
  box-shadow: 0 4px 12px rgba(194, 24, 91, 0.10) !important;
}

/* ── Pill "Detalle" usaba mostaza, ahora la dejamos igual (mostaza) ──
   pero el pill "Distribuidor" usaba verde olivo; lo dejamos como verde
   real porque los estados/canales tienen lógica semántica separada del
   acento del CTA. Si quieres cambiar también esto, descomenta abajo. */

/* .channel-pill.distribuidor {
     background: var(--kb-green-soft) !important;
     color: #1B5887 !important;
     border-color: #A6C5E5 !important;
   } */

/* ── Stock badges: verde fuerte → azul medio ─────────────────────────── */
.stock-badge.high {
  background: var(--kb-green-soft) !important;
  color: #1B5887 !important;
}

/* ── balance-zero (saldo $0 en la tabla) ─────────────────────────────── */
.balance-zero {
  color: #2980B9 !important;
}

/* ── Success toast ───────────────────────────────────────────────────── */
.toast.success {
  background: var(--kb-green-deep) !important;
}

/* ── Drawer "completamente pagado" ───────────────────────────────────── */
.drawer-foot div[style*="--kb-green"] {
  color: var(--kb-green-deep) !important;
}

/* ============================================================
   Sidebar item activo: usar paleta primaria (rosa), no acento
   ============================================================
   sidebar.css usa var(--kb-green-tint) y var(--kb-green) para
   el item activo. Los redirigimos al rosa primario (identidad
   del ERP) en lugar del azul (acento).
   ============================================================ */

:root {
  --kb-green-tint: var(--kb-terracotta-soft);
}

.kb-nav-item.active {
  background: var(--kb-terracotta-soft) !important;
  color: var(--kb-primary) !important;
}

.kb-nav-item.active .kb-nav-icon {
  color: var(--kb-primary) !important;
}