/* KinzaOS Business Dashboard — estilos específicos */

/* Layout principal */
.db-layout { min-height: 100vh; background: var(--l-bg); }
.db-content { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }

/* KPI grid */
.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1080px) { .db-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .db-kpi-grid { grid-template-columns: 1fr; } }

/* Charts wrapper */
.db-chart-wrap {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--sh-1);
  margin-bottom: 24px;
}
.db-chart-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--l-text);
  margin-bottom: 16px;
}

/* VIP badge */
.db-vip-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--k-gold-50); color: #B45309;
  border: 1px solid var(--k-gold);
  border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 11px; font-weight: 700;
}

/* Section header */
.db-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.db-section-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--l-text);
}

/* Mobile bottom nav */
.db-bnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--l-surface);
  border-top: 1px solid var(--l-border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 12px rgba(15,23,42,0.06);
}
@media (max-width: 768px) {
  .db-bnav { display: flex; justify-content: space-around; align-items: center; }
  .db-content { padding: 20px 16px 80px; }
}
.db-bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--l-text-3);
  padding: 4px 12px; border-radius: var(--r-sm);
  text-decoration: none; transition: color var(--dur) var(--ease);
}
.db-bnav-item.active, .db-bnav-item:hover { color: var(--k-blue); }
.db-bnav-item i { font-size: 20px; }

/* ── k-btn-outline visibility fix — scoped a .k-app para mayor especificidad ── */
/* Usar .k-app scope da especificidad (0,3,0) vs (0,2,0) de kinzaos-components.css,
   ganando incluso cuando ambos tienen !important */
.k-app .k-btn.k-btn-outline,
.k-app a.k-btn.k-btn-outline,
.k-app button.k-btn.k-btn-outline {
  border: 1.5px solid #94A3B8 !important;
  color: #1E293B !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.07) !important;
}
.k-app .k-btn.k-btn-outline i,
.k-app a.k-btn.k-btn-outline i,
.k-app button.k-btn.k-btn-outline i {
  color: #1E293B !important;
}
.k-app .k-btn.k-btn-outline:hover,
.k-app a.k-btn.k-btn-outline:hover,
.k-app button.k-btn.k-btn-outline:hover {
  border-color: #3A7BD5 !important;
  color: #3A7BD5 !important;
  background: #EFF6FF !important;
}
.k-app .k-btn.k-btn-outline:hover i,
.k-app a.k-btn.k-btn-outline:hover i,
.k-app button.k-btn.k-btn-outline:hover i {
  color: #3A7BD5 !important;
}


/* ══════════════════════════════════════════════════════════════
   Bootstrap → KinzaOS overrides (aplicados dentro de .k-app)
   Arregla todos los btn-* de Bootstrap para usar el sistema
   de diseño KinzaOS: gradientes, sombras, tipografía correcta.
   ══════════════════════════════════════════════════════════════ */

.k-app .btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  transition: all var(--dur) var(--ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  border: none !important;
  letter-spacing: -0.01em !important;
}
.k-app .btn:hover { transform: translateY(-1px); }
.k-app .btn:active { transform: translateY(0) !important; }

/* Primary — gradiente azul */
.k-app .btn-primary,
.k-app .btn-primary:visited {
  background: var(--grad-blue) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(58,123,213,0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.k-app .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(58,123,213,0.40) !important;
  color: #fff !important;
}
.k-app .btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(58,123,213,0.28) !important;
}

/* Outline primary — tono suave azul */
.k-app .btn-outline-primary {
  background: var(--k-blue-50) !important;
  color: var(--k-blue) !important;
  border: 1.5px solid rgba(58,123,213,0.28) !important;
  box-shadow: none !important;
}
.k-app .btn-outline-primary:hover {
  background: rgba(58,123,213,0.14) !important;
  color: var(--k-blue-2, #1e5fbe) !important;
}

/* Secondary / outline-secondary — outline neutro */
.k-app .btn-secondary,
.k-app .btn-outline-secondary {
  background: var(--l-surface) !important;
  color: var(--l-text-2) !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
.k-app .btn-secondary:hover,
.k-app .btn-outline-secondary:hover {
  background: var(--l-surface-2, #F8FAFC) !important;
  border-color: #94A3B8 !important;
  color: var(--l-text) !important;
}

/* Danger — gradiente coral */
.k-app .btn-danger {
  background: var(--grad-coral) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(229,78,63,0.28) !important;
}
.k-app .btn-danger:hover {
  box-shadow: 0 8px 20px rgba(229,78,63,0.38) !important;
  color: #fff !important;
}

/* Success — verde esmeralda */
.k-app .btn-success {
  background: linear-gradient(135deg, #22C55E 0%, #15A34A 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(21,163,72,0.26) !important;
}
.k-app .btn-success:hover {
  box-shadow: 0 8px 20px rgba(21,163,72,0.36) !important;
  color: #fff !important;
}

/* Warning / outline-warning — dorado */
.k-app .btn-warning,
.k-app .btn-outline-warning {
  background: var(--grad-gold) !important;
  color: #4A3008 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(229,156,42,0.26) !important;
}
.k-app .btn-warning:hover,
.k-app .btn-outline-warning:hover {
  box-shadow: 0 8px 20px rgba(229,156,42,0.36) !important;
  color: #4A3008 !important;
}

/* Light */
.k-app .btn-light {
  background: var(--l-surface) !important;
  color: var(--l-text-2) !important;
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06) !important;
}
.k-app .btn-light:hover {
  background: var(--l-surface-2, #F8FAFC) !important;
  color: var(--l-text) !important;
}

/* Tamaños */
.k-app .btn-sm {
  padding: 6px 13px !important;
  font-size: 12px !important;
  border-radius: var(--r-sm) !important;
  gap: 5px !important;
}
.k-app .btn-lg {
  padding: 13px 22px !important;
  font-size: 15px !important;
  border-radius: var(--r-lg) !important;
}

/* btn-group: quitar borde interno */
.k-app .btn-group > .btn { border-radius: var(--r-sm) !important; }
.k-app .btn-group > .btn:not(:first-child) { margin-left: 4px !important; }

/* ── Nav pills → KinzaOS ─────────────────────────────────── */
.k-app .nav-pills .nav-link {
  font-family: var(--font-body);
  color: var(--l-text-2);
  font-size: 13px; font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.k-app .nav-pills .nav-link:hover {
  background: var(--k-hover-bg);
  color: var(--l-text);
}
.k-app .nav-pills .nav-link.active,
.k-app .nav-pills .show > .nav-link {
  background: var(--grad-blue) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(58,123,213,0.28);
}

/* ── Bootstrap card → KinzaOS card ──────────────────────── */
.k-app .card {
  background: var(--l-surface) !important;
  border: 1px solid var(--l-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-1) !important;
}
.k-app .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--l-border) !important;
  padding: 14px 20px !important;
  font-family: var(--font-display) !important;
}
.k-app .card-body { padding: 20px !important; }
.k-app .card-title {
  font-family: var(--font-display) !important;
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--l-text) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0 !important;
}

/* ── Bootstrap table → KinzaOS table ────────────────────── */
.k-app .table {
  font-size: 13.5px !important;
  color: var(--l-text-2) !important;
  border-color: var(--l-border) !important;
}
.k-app .table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--l-text-3) !important;
  border-bottom: 1px solid var(--l-border) !important;
  background: transparent !important;
  padding: 10px 16px !important;
}
.k-app .table-light { background: transparent !important; }
.k-app .table > :not(caption) > * > * {
  padding: 11px 16px !important;
  border-color: var(--l-border-2, #F1F5F9) !important;
}
.k-app .table-sm > :not(caption) > * > * { padding: 7px 12px !important; }
.k-app .table-hover tbody tr:hover > * {
  background-color: var(--k-blue-50) !important;
  color: var(--l-text) !important;
}

/* ── card-accent-left — usado en CRM ────────────────────── */
.card-accent-left {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-left: 3px solid var(--k-blue) !important;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
}