nav{
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    width: var(--width-navbar); /*LOS MISMOS PX QUE EN EL PADDING DE BODY*/
    /* border-right: 1px solid rgba(217, 217, 217, 0.5); */
    border-right: 1px solid color-mix(in srgb, var(--secondary) 25%, var(--primary) 75%);
    box-shadow: 0 0 4px var(--secondary);
    z-index: 1104;
    background-color: var(--primary-dark);
  }

  .closed{
    width: 0;
  }
  nav .footer-nav{
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
  }
  
  .offcanvas .nav-link{
    border-bottom: 1px solid var(--primary-dark);
    padding: 1rem;
    font-weight: 600;
    font-size: 12px;
  }
  #sidebar .navbar-nav .nav-link {
    border-bottom: 1px solid var(--primary-dark);
    padding: 1.5rem 1rem 1.5rem 3rem;
    font-weight: 600;
    font-size: 12px;
  }
  

  nav .navbar-nav .nav-link:hover,
  nav .navbar-nav .nav-item.active{
    background-color: var(--primary);
    color: var(--color);
  }




  #offCanvasLv1 .nav-item.active,
  #offCanvasLv1 .nav-link:hover{
    background-color: var(--secondary);
    color: var(--primary);
  }
  
  #offCanvasLv2{
    /* margin-left: calc(var(--width-navbar) * 2);
    width: var(--width-navbar);
    background-color: var(--secondary);
    color: var(--primary);
    z-index: 1101; */
  }
  
  #offCanvasLv2 .nav-item.active,
  #offCanvasLv2 .nav-link:hover{
    background-color: var(--primary);
    color: var(--color);
  }
  
  .navbar-nav{
    transition: 1s all;
  }