/* ==========================================================================
   Eneon Sidebar — Apple / SaaS Design System
   Alineado con /dashboard y /clientes (slate + accent #2563eb).
   Se aplica con la clase .apple-sidebar sobre .app-menu.navbar-menu y
   sobrescribe el tema Velzon (data-sidebar="dark"/"light") sin tocar el layout.
   ========================================================================== */

.app-menu.navbar-menu.apple-sidebar {
  /* Superficie gris corporativa original (#575a4f) con textos de alto contraste (WCAG AA) */
  --as-bg: #575a4f;
  --as-border: rgba(255, 255, 255, 0.10);
  --as-title: #d6d9cd;
  --as-text: #f8faf5;
  --as-text-muted: #e4e7dc;
  --as-icon: #e4e7dc;
  --as-hover-bg: rgba(255, 255, 255, 0.10);
  --as-hover-text: #ffffff;
  --as-accent: #cce673;
  --as-accent-soft: rgba(204, 230, 115, 0.16);
  --as-accent-ring: rgba(204, 230, 115, 0.30);
  --as-accent-contrast: #2b2d26;
  --as-guide: rgba(255, 255, 255, 0.16);
  --as-dot: rgba(255, 255, 255, 0.45);
  --as-radius: 10px;
  --as-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--as-bg) !important;
  border-right: 1px solid var(--as-border) !important;
  box-shadow: 4px 0 24px -12px rgba(15, 23, 42, 0.25) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Marca ───────────────────────────────────────────────────────────────── */
.app-menu.apple-sidebar .navbar-brand-box {
  background: transparent !important;
  border-bottom: 1px solid var(--as-border);
  margin-bottom: 0.5rem;
}

.app-menu.apple-sidebar .navbar-brand-box .logo-light {
  display: none !important;
}

.app-menu.apple-sidebar .navbar-brand-box .logo-dark {
  display: block !important;
}

.app-menu.apple-sidebar .navbar-brand-box .logo-lg img {
  height: 26px;
  width: auto;
  object-fit: contain;
  /* Logo n)ON en blanco para que sea legible sobre el gris corporativo */
  filter: brightness(0) invert(1);
}

.app-menu.apple-sidebar .btn-vertical-sm-hover {
  color: var(--as-text-muted) !important;
}

/* ── Títulos de sección ─────────────────────────────────────────────────── */
.app-menu.apple-sidebar .navbar-nav .menu-title {
  padding: 0.9rem 1.25rem 0.4rem !important;
  letter-spacing: 0.08em;
}

.app-menu.apple-sidebar .navbar-nav .menu-title span {
  color: var(--as-title) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Ítems de primer nivel ──────────────────────────────────────────────── */
.app-menu.apple-sidebar .navbar-nav .nav-item {
  position: relative;
}

.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link {
  position: relative;
  margin: 2px 0.65rem;
  padding: 0.55rem 0.75rem !important;
  border-radius: var(--as-radius);
  color: var(--as-text) !important;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  gap: 0.15rem;
  transition: background-color 0.18s var(--as-ease), color 0.18s var(--as-ease), box-shadow 0.18s var(--as-ease);
}

.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.4rem;
  font-size: 1.05rem;
  border-radius: 8px;
  color: var(--as-icon) !important;
  background: transparent;
  transition: background-color 0.18s var(--as-ease), color 0.18s var(--as-ease);
}

.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link:hover {
  background: var(--as-hover-bg);
  color: var(--as-hover-text) !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link:hover i {
  color: var(--as-hover-text) !important;
}

/* Activo / desplegado */
.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link.active,
.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link[aria-expanded="true"] {
  background: var(--as-accent-soft);
  color: var(--as-accent) !important;
  font-weight: 600;
}

.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link.active i,
.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link[aria-expanded="true"] i {
  color: var(--as-accent-contrast) !important;
  background: var(--as-accent);
  box-shadow: 0 4px 10px -4px var(--as-accent-ring);
}

/* Elimina bordes/líneas heredadas del tema oliva */
.app-menu.apple-sidebar .navbar-nav .nav-link.menu-link::before {
  display: none !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-item,
.app-menu.apple-sidebar .navbar-nav .nav-link {
  border: 0 !important;
}

/* Chevron de colapso */
.app-menu.apple-sidebar .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
  right: 14px !important;
  font-size: 1rem !important;
  color: var(--as-title) !important;
  transition: transform 0.25s var(--as-ease), color 0.18s var(--as-ease) !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  color: var(--as-accent) !important;
}

/* ── Submenús ────────────────────────────────────────────────────────────── */
.app-menu.apple-sidebar .navbar-nav .menu-dropdown {
  background: transparent !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-sm {
  position: relative;
  padding: 0.15rem 0 0.35rem 0 !important;
  margin-left: 1.95rem;
}

/* Guía vertical tipo macOS Finder */
.app-menu.apple-sidebar .navbar-nav .nav-sm::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.25rem;
  bottom: 0.45rem;
  width: 1px;
  background: var(--as-guide);
}

.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1px 0.65rem 1px 1rem;
  padding: 0.42rem 0.65rem !important;
  border-radius: 8px;
  color: var(--as-text-muted) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  transition: background-color 0.18s var(--as-ease), color 0.18s var(--as-ease);
}

/* Punto indicador (reemplaza el guion oliva) */
.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link::before {
  content: "" !important;
  position: absolute !important;
  left: -0.62rem !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--as-dot) !important;
  opacity: 1 !important;
  transform: translateY(-50%);
  transition: background-color 0.18s var(--as-ease), box-shadow 0.18s var(--as-ease) !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link:hover {
  background: var(--as-hover-bg);
  color: var(--as-hover-text) !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link:hover::before {
  background-color: var(--as-hover-text) !important;
}

.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link.active,
.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link[aria-expanded="true"] {
  background: var(--as-accent-soft);
  color: var(--as-accent) !important;
  font-weight: 600;
}

.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-link.active::before {
  background-color: var(--as-accent) !important;
  box-shadow: 0 0 0 3px var(--as-accent-ring);
}

/* Tercer nivel */
.app-menu.apple-sidebar .navbar-nav .nav-sm .nav-sm {
  margin-left: 1rem;
}

/* ── Foco accesible (WCAG 2.4.7) ────────────────────────────────────────── */
.app-menu.apple-sidebar .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--as-accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--as-accent-ring) !important;
}

/* ── Scrollbar discreta ─────────────────────────────────────────────────── */
.app-menu.apple-sidebar .simplebar-scrollbar::before {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* ── Modo compacto (data-sidebar-size="sm") ─────────────────────────────── */
[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-link.menu-link {
  justify-content: center;
  margin: 3px 0.5rem;
  padding: 0.5rem !important;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-link.menu-link i {
  margin-right: 0;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-item:hover > .menu-dropdown {
  background: var(--as-bg) !important;
  border: 1px solid var(--as-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18) !important;
  padding: 0.35rem 0;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-item:hover > a.menu-link {
  background: var(--as-hover-bg) !important;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-sm {
  margin-left: 0;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-nav .nav-sm::before {
  display: none;
}

[data-sidebar-size="sm"] .app-menu.apple-sidebar .navbar-brand-box {
  background: var(--as-bg) !important;
}

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .app-menu.apple-sidebar .navbar-nav .nav-link,
  .app-menu.apple-sidebar .navbar-nav .nav-link::after,
  .app-menu.apple-sidebar .navbar-nav .nav-link i {
    transition: none !important;
  }
}