.navbar {
  height: 100vh; /* ← Ocupa todo el alto de la ventana */
  display: flex;
  flex-direction: column;
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  width: 300px;
  border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  position: sticky; /* ← Opcional, si quieres que se quede "pegado" */
  top: 0; /* ← Ancla arriba */
}
  


  
  .collapsed {
    width: 70px; /* Ancho reducido cuando colapsa */
  }

  .wrapper {
    display: flex;
    flex: 1;
  }
  
  .collapseButton {
    margin-top: auto; /* Hace que el botón se empuje hacia abajo */
    margin-bottom: 16px; /* ← Agrega separación del borde inferior */

  }

  .aside {
    flex: 0 0 60px;
    background-color: var(--mantine-color-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
  }
  
  .main {
    flex: 1;
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  }
  
  .mainLink {
    width: 44px;
    height: 44px;
    border-radius: var(--mantine-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
  
    &:hover {
      background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
    }
  
    &[data-active] {
      &,
      &:hover {
        background-color: var(--mantine-color-blue-light);
        color: var(--mantine-color-blue-light-color);
      }
    }
  }
  
  .title {
    font-family:
      Greycliff CF,
      var(--mantine-font-family);
    margin-bottom: var(--mantine-spacing-xl);
    background-color: var(--mantine-color-body);
    padding: var(--mantine-spacing-md);
    padding-top: 18px;
    height: 60px;
    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
  }
  
  .logo {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 60px;
    padding-top: var(--mantine-spacing-md);
    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
    margin-bottom: var(--mantine-spacing-xl);
  }
  
  .link {
    display: block;
    text-decoration: none;
    border-top-right-radius: var(--mantine-radius-md);
    border-bottom-right-radius: var(--mantine-radius-md);
    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
    padding: 0 var(--mantine-spacing-md);
    font-size: var(--mantine-font-size-sm);
    margin-right: var(--mantine-spacing-md);
    font-weight: 500;
    height: 44px;
    line-height: 44px;
  
    &:hover {
      background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
      color: light-dark(var(--mantine-color-dark), var(--mantine-color-light));
    }
  
    &[data-active] {
      &,
      &:hover {
        border-left-color: var(--mantine-color-blue-filled);
        background-color: var(--mantine-color-blue-filled);
        color: var(--mantine-color-white);
      }
    }
  }