.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 */
}
  

.title {
  font-family:
    Greycliff CF,
    var(--mantine-font-family);
  margin-bottom: var(--mantine-spacing-sm);
  background-color: var(--mantine-color-body);
  padding: var(--mantine-spacing-xs);
  padding-top: 15px;
  height: 50px;
  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-7));
}
  


  .wrapper {
    display: flex;
    flex: 1;
  }
  
  /* Esta es la barra izquierda pequeña donde los iconos */
  .aside {
    flex: 0 0 52px;
    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));
  }
  
  .topSection {
    padding-top: 12px; /* o la cantidad que desees */
  }

  /* Estos son los iconos */
  .mainLink {
    
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    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-brand-7);
        color: var(--mantine-color-brand-2);
      }
    }
  }
  

  
  .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: 420;
    height: 30px;
    line-height: 30px;
  
    &: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 {
        background-color: var(--mantine-color-brand-7);
        color: var(--mantine-color-brand-2);
      }
    }
  }