@charset "utf-8";
/* CSS Document */

/*////// NAVEGADOR ///////*/

.nav{
    padding: 2rem 1.5rem;
    height: 100vh;
		top;0px;
    width: max-content;
    background-color: #6a505e;
    position: relative;
    --grid-columnas-nav: max-content 0fr;
	z-index: 1;
	
}

.nav:has(:hover), .nav:hover{
    --grid-columnas-nav: max-content 1fr;
}

.nav__list{
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nav__item{
    color: #e4e2e2;
    display: grid;
    align-items: center;
    grid-template-columns: var(--grid-columnas-nav);


    transition: grid-template-columns .3s;
    border-radius: 5px;

}

.nav__item--down{
    margin-top: auto;
}

.nav__item:hover{
    cursor: pointer;
    background-color: #e16ea7;
}

.nav__item--user{
    position: relative;
    margin-top: 10px;
}

.nav__figure{
    padding: 16px;
    
}

.nav__show{
    overflow: hidden;
  
}

.nav__show a{
	color: #fff;
	text-decoration: none;
}

.nav__name--user{
    padding-right:1rem;
    white-space: nowrap;
}

.nav__img{
    width: 35px;
}

.nav__img--avatar{
    border-radius: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.nav__name{

	padding: 7px;
}

/* DISEÑO PARA MOVIL */

@media (min-width:0px) and (max-width:480px){
	
	
	
.nav{
    padding: 1rem 10px;
   height: 800px;
}	
	
.nav__name{
		font-size: 12pt;
	}	

}