.contenedor-aside {
    display: flex;
    height: 100%; /* Ocupa el 100% del alto de la ventana */
    width: 100%;
    margin: auto;
}

aside {   
    position: relative;
    z-index: 300;
    background-color: #1848e7;
    font-family: Lora, serif;
    color: #fff;
    width: 20%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    scrollbar-width: 20px;
    scrollbar-color: #20afff #008fdf;
}

@media (max-width: 1400px){
    aside{
        width: 25%;   
    }
}

@media (max-width: 1400px) and (max-height: 1200px){
    aside {
       width: 18%;
    }   
}

@media (max-width: 1250px) and (max-height: 1200px){
    aside {
       width: 22%;
    }   
}

@media (max-width: 950px) and (max-height: 1200px){
    aside {
       width: 25%;
    }   
}

@media (max-width: 800px){
    aside{
        display: none;    
    }
}

main {
    background-color: #f94;
   /*background-image: url("patronnaranja.png");  */
   width: 80%;
   margin-left: 20%;
}

@media (max-width: 1400px){
    main{
        width: 75%;
        margin-left: 25%;    
    }
}

@media (max-width: 1400px) and (max-height: 1200px){
    main {
        width: 82%;
        margin-left: 18%; 
    }   
}

@media (max-width: 1250px) and (max-height: 1200px){
    main {
        width: 78%;
        margin-left: 22%;
    }   
}

@media (max-width: 950px) and (max-height: 1200px){
    main {
       width: 75%;
       margin-left: 25%;
    }   
}

@media (max-width: 800px){
    main{
        width: 100%;
        margin: 0;    
    }
}

.nav-svg {
    max-width: 21px;
    max-height: 21px;
    transition: transform 1.2s;
    transform-style: preserve-3d;
}

@media (max-width: 600px) {
    .nav-svg {
        margin: auto 15px auto 5px;
    }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(360deg) scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.li-aside:hover .nav-svg {
  animation: rotate 1.2s;
}

.logo-aside {
    display: flex;    
}

.logo-cent-aside {
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 45%;    
}

@media (max-width: 1400px) and (max-height: 1200px){
    .logo-cent-aside {
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 45%;    
    }    
}

.contenedor-aside .li-aside { 
    display: flex;
    justify-content: left;
    align-items: center;   
    list-style: none;
    padding: 10px 10px;
    width: 70%;
    margin: 15px auto;
    font-family: Lora, serif;
    font-size: 90%;    
    letter-spacing: 2px;
    border-left: solid 3px #f38a4c; 
    border-radius: 0;
    cursor: pointer;
    align-items: center;
    transition: .4s;   
}

@media (max-width: 1800px){
    .contenedor-aside .li-aside {
        padding: 7px 7px;
        margin: 12px auto;
        font-size: 90%;
    }    
}

@media (max-width: 1500px){
    .contenedor-aside .li-aside {
        font-size: 90%;
        padding: 7px 7px;
        margin: 15px auto;
    }    
}

@media (max-width: 1400px){
    .contenedor-aside .li-aside {
        font-size: 80%;
        padding: 7px 7px;
        margin: 15px auto;
    }    
}

@media (max-width: 1400px) and (max-height: 1200px){
    .contenedor-aside .li-aside {
        font-size: 60%;
        padding: 5px 5px;
        margin: 10px auto;
    }    
}

@media (max-width: 980px){
    .contenedor-aside .li-aside {
        font-size: 60%;
    }    
}

.contenedor-aside .li-aside:hover {    
    border-left: solid 9px #f59e6a;
    border-radius: 0 15px 0 15px;   
    background-color: #40baff;
    transition: .4s;     
}

.contenedor-aside a {
    color: #fff;
}