.contenedor-menu-vertical {
    width: 233px;
    background-color: #737373;
    color: #FFFFFF;
}
.menu-vertical {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.menu-vertical li {
    display: block;
    border-bottom: 2px solid #FFFFFF;
}
.menu-vertical li:first-child {
    border-top: 2px solid #FFFFFF;
}
.menu-vertical a {
    text-decoration: none;
    padding: 10px 10px;
    display: block;
    color: #FFFFFF;
    transition: background-color 0.3s;
}
.menu-vertical a:hover,.menu-vertical a.active {
    background-color: #DAAA3E;
    color: #FFFFFF;
}

        /* Solo el enlace activo en negrita */
.menu-vertical a.active {
    font-weight: bold;
}

#content{
    width:100%;
    display: inline-block;
    float: right;
}
#aside{
    width:100%;
    display: inline-block;
    float: left
}




/* Estilos responsivos para pantallas móviles */
@media (max-width: 768px) {
    .contenedor-menu-vertical {
        width: 100%;
        background-color: #858585;
    }

    .menu-vertical {
        display: flex;
        flex-direction: column;
        background-color: #737373;
    }

    .menu-vertical li {
        flex-grow: 1;
        border-bottom: 2px solid white;
        text-align: center;
    }

    .menu-vertical a {
        padding: 4px 20px;
        background-color: #737373;
        color: white;
        text-align: center;
    }

    .menu-vertical a:hover,
    .menu-vertical a.active {
        font-weight: bold;
        background-color: #DAAA3E;
        color: #FFFFFF;
    }
}




/* SOLO MEDIANO */
@media only screen and (min-width:37em) and (max-width: 61.99em) {   

}

/* DESDE MEDIANO */
@media only screen and (min-width:37em) {

    #aside{
        width: 30%;
    }
    #content{
        width: 70%;
    }
    

}

/* DESDE GRANDE */
@media only screen and (min-width: 62em) { 

    #aside{
        width: 20%;
    }
    #content{
        width: 80%;
    }

    

}