body, html {
    height: 100%;
    margin: 0;
}
#wrapper {
    display: flex;
}
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}
.nav-link.active {
    background-color: rgba(116, 115, 115, 0.2);
    font-weight: bold;
    border-radius: 0.6rem;
}
/* --- Sidebar collapse --- */
#sidebar-wrapper {
  width: 250px;
  min-width: 270px;
  min-height: 100vh;
  transition: width .2s ease;
  overflow-x: hidden;
}
/* Opcional: que los submenús no “se corten” si hay scroll */

#page-content-wrapper {
  width: 100%;
}

/* Estado colapsado */
#wrapper.sidebar-collapsed #sidebar-wrapper {
  width: 72px;
  min-width: 72px;
}

/* Ocultar texto del título */
#wrapper.sidebar-collapsed .sidebar-text {
  display: none;
}

/* Centrar icono cuando esté colapsado */
#wrapper.sidebar-collapsed .sidebar-heading {
  text-align: center;
}

/* Ocultar textos (dejar solo íconos) */
#wrapper.sidebar-collapsed #sidebar-wrapper .nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

#wrapper.sidebar-collapsed #sidebar-wrapper .nav-link i {
  margin-right: 0 !important;   /* quita el espacio del texto */
  font-size: 1.15rem;
}

/* Esconde el texto del link (deja icono) */
#wrapper.sidebar-collapsed #sidebar-wrapper .nav-link {
  font-size: 0;                 /* truco: oculta texto */
}
#wrapper.sidebar-collapsed #sidebar-wrapper .nav-link i {
  font-size: 1.15rem;           /* vuelve a mostrar el icono */
}

/* Esconde submenús cuando está colapsado */
/* #wrapper.sidebar-collapsed #sidebar-wrapper .collapse {
  display: none !important;
} */

/* Opcional: centra los íconos */
#wrapper.sidebar-collapsed #sidebar-wrapper .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Reduce el heading al colapsar (opcional) */
#wrapper.sidebar-collapsed #sidebar-wrapper .sidebar-heading {
  font-size: 0.85rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== Hover expand cuando está colapsado ===== */

/* Cuando está colapsado y pasas el mouse sobre el sidebar: expande */
#wrapper.sidebar-collapsed #sidebar-wrapper:hover {
  width: 270px;
  min-width: 270px;
}

/* Al expandir por hover, vuelve a mostrar el texto del título */
#wrapper.sidebar-collapsed #sidebar-wrapper:hover .sidebar-text {
  display: inline;
}

/* Al expandir por hover, vuelve a mostrar textos de los links */
#wrapper.sidebar-collapsed #sidebar-wrapper:hover .nav-link {
  font-size: 1rem;              /* restaura tamaño normal */
  justify-content: flex-start;  /* vuelve alineación normal */
}

/* Restituye el margen del icono cuando está expandido por hover */
#wrapper.sidebar-collapsed #sidebar-wrapper:hover .nav-link i {
  margin-right: .5rem !important;
  font-size: 1rem;
}

/* Mostrar submenús cuando el sidebar está expandido por hover */
/* #wrapper.sidebar-collapsed #sidebar-wrapper:hover .collapse {
  display: none !important;
} */



#sidebarToggle {
  cursor: pointer;
  user-select: none;
}

/* ✅ Mantener estado del collapse, pero ocultarlo visualmente cuando está colapsado */
#wrapper.sidebar-collapsed #sidebar-wrapper .collapse {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
}

/* ✅ Cuando el sidebar se expande por hover, se vuelve visible (sin cambiar el estado show/hide) */
#wrapper.sidebar-collapsed #sidebar-wrapper:hover .collapse.show {
  max-height: 1000px !important;   /* suficiente para tus submenus */
  opacity: 1 !important;
  pointer-events: auto !important;
}