.ax-sidebar {
  position: fixed;
  top: 45px; left: 0;
  height: calc(100vh - 40px);
  width: 50px;               
  background: #1c1c1c;       
  border-right: 1px solid #1f2937;
  z-index: 1000;
  transition: width .25s ease, transform .25s ease;
}

.ax-menu-btn { 
  display: none; 
}

.ax-menu { list-style:none; margin:0; padding:3px; overflow-y:auto; height:100%; }
.ax-menu li { margin:4px 0; }

.ax-menu-link, .ax-submenu-toggle {
  width:90%; height:44px; display:flex; align-items:center; gap:12px;
  background:transparent; border:0; color:#dbdbdb;
  padding:0 10px; border-radius:12px; cursor:pointer; text-decoration:none;
  transition: background .2s, color .2s;
}
.ax-menu-link:hover, .ax-submenu-toggle:hover { background:#111827; color:#f9fafb; }

.ax-icon { width:20px; text-align:center; font-size:14px; flex-shrink:0; color:inherit; }

.ax-label {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform: translateX(-6px); transition: opacity .2s, transform .2s;
  color:inherit; font-weight:400;
}
.ax-caret { margin-left:auto; font-size:10px; transition: transform .2s, opacity .2s; color:inherit; opacity:0; }

/* Expandir en desktop por hover */
@media (min-width: 900px) {
  .ax-sidebar:hover { width: 200px; }
  .ax-sidebar:hover .ax-label,
  .ax-sidebar:hover .ax-caret { opacity:1; transform:none; }
}

/* Submenús */
.ax-has-submenu .ax-submenu {
  list-style:none; margin:4px 0 0 0; padding:0;
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.ax-submenu-link {
  display:flex; align-items:center; gap:12px; height:38px;
  padding:0 3px 0 16px; color:#9ca3af; text-decoration:none; border-radius:10px;
}
.ax-submenu-link:hover { background:#0b1220; color:#f3f4f6; }

/* Estado abierto del submenu */
.ax-has-submenu.ax-open .ax-submenu { max-height:300px; } /* acordeón simple */
.ax-has-submenu.ax-open .ax-caret { transform: rotate(90deg); }

/* Estado activo (opcional: agrega .ax-active a .ax-menu-link) */
.ax-menu-link.ax-active { background:#111827; color:#fff; border:1px solid #1f2937; }

/* MOBILE: sheet lateral */
@media (max-width: 1023.98px) {
  .ax-sidebar { transform: translateX(-100%); width: 288px; }
  .ax-sidebar.ax-open { transform: translateX(0); }
  .ax-label, .ax-caret { opacity:1; transform:none; } /* en mobile siempre visibles */

  .ax-menu-btn {
    display: grid; place-items:center;
    position: fixed; top:10px; left:10px; z-index:1100;
    width:40px; height:40px; border-radius:10px; border:1px solid #e5e7eb;
    background:#ffffff; color:#111827;
  }

  .ax-sidebar-overlay {
    position: fixed; inset:0; background: rgba(0,0,0,.35); z-index:900;
  }
}

/* Scroll estético */
.ax-menu::-webkit-scrollbar { width:8px; }
.ax-menu::-webkit-scrollbar-thumb { background:#1f2937; border-radius:8px; }