#aside_menu_lateral{
    position: fixed;/*Se posicionara sobre la ventana principal y estara en relacion a la posicion de pantalla, osea si bajo esta barra no se movera*/
    display: flex;/*que los bloques se podran acomodar verticalmente*/
    flex-direction: column;/*ahora estan en columna*/
    justify-content: space-between;/*los elementos estaran separados */
    width: 250px;/*es el ancho del bloque*/
    height: 100vh;/*la altura es el 100% del body*/
    /*overflow: hidden;si algo sobrepasas estas dimensiones se ocultará*/
    padding: 20px 15px;/*tendrá un padding de 20px para el alto y bajo y 15px para los laterales*/
    padding-bottom: 70px;
    background-color: var(--color-barra-lateral);/*es el color de fondo de la barra lateral*/
    transition: width 0.5s ease,background-color 0.3s ease,left 0.5s ease;/*tendra una transición de ancho, de color de fondo y cuando la posición horizontal desde la izquierda cambia tendran un tiempo de transición*/
    z-index: 100;/*este bloque estará en el z-index:50, por lo tanto estará ubicado sobre los demas elementos*/
    left: -250px;/*se desplaza el ancho del elemento, ocultandolo*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
/*Para mostrar el sidebar o barra lateral*/
#aside_menu_lateral.mostrar_sidebar{
    left: 0px;
}
/*menu sidebar donde esta el icono de cerrado y el logo*/
#aside_menu_lateral .menu_sidebar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#aside_menu_lateral .menu_sidebar img{/*ña imagen del usuario*/
    cursor: pointer;
    width: 150px;/*tendra un ancho de 50 pixeles*/
    min-width: 150px;/*el ancho minimo de la imagen es 50 pixeles*/
}
#aside_menu_lateral .menu_sidebar .icono_cerrar_aside{
    cursor: pointer;
    background-color: var(--color-fondo-icono-buscador);
    color: var(--color-icono-menu-buscador);
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
#aside_menu_lateral .menu_sidebar .icono_cerrar_aside:hover{
    background-color: var(--color-fondo-hover-icono-buscador);
}
/**bloque de navegación de aside**/
/*estilos de los elementos del bloque navegación*/
#aside_menu_lateral .navegacion{
    padding: 10px 0;
    height: 100%;/*Tendra todo el alto disponible*/
    overflow-y: auto;/*para que cuando el contenido sobrepase el ancho se genere una barra deslizante vertical o scroll vertical*/
    overflow-x: hidden;/*cuando el contenido sobrepase el ancho se oculte*/
    font-weight: 400;
}
#aside_menu_lateral .navegacion h3{
    color: var(--color-texto-aside);/*cambia el color del texto*/
    font-style: italic;
}  
#aside_menu_lateral .navegacion li{  
    /*list-style: none;*/
    display: flex;
    margin-bottom: 5px;/*todos los li tendran un margen inferior de 5 pixeles*/
}
#aside_menu_lateral .navegacion a{
    width: 100%;/*el hipervinculo tendra un ancho del 100% del contenedor padre*/
    height: 45px;/*el elemento de hipervinculo tendra un ancho de 45 pixeles*/
    display: flex;/*los elementos se pondran horixontalmente, esto me permitira usar el siguiente estilo */
    align-items: center;/*para centrar verticalmente a los elemetos*/
    text-decoration: none;/*elimina cualquier decoración de texto como subrayado, tachado*/
    border-radius: 10px;/*el redondeado de las esquinas del hipervinculo "a" que funcionará como boton*/
    color: var(--color-texto-aside);/*cambia el color del texto*/
}
#aside_menu_lateral .navegacion a:hover{/*cuando el puntero se posicione sobre a*/
    background-color: var(--color-fondo-texto-aside-hover);/*cambia el fondo del hipervinculo*/
    color: var(--color-texto-aside-hover);/*cambia el color del texto del hipervinculo*/
}
#aside_menu_lateral .navegacion .material-icons-sharp{
    min-width: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center;
}
/*estilo del scroll del bloque de navegación de la barra lateral o aside*/
#aside_menu_lateral .navegacion::-webkit-scrollbar{/*Este pseudo-elemento específico de WebKit (motor utilizado por navegadores como Chrome y Safari) selecciona la barra de desplazamiento del elemento.*/
    width: 5px;/*El ancho de la barra de desplazamiento sera de 5 pixeles*/
}
#aside_menu_lateral .navegacion::-webkit-scrollbar-thumb{/*de la barra de desplazamiento seleccionamos el thumb que es la barrita pequeña que se desplaza en la barra de desplazamiento con el fin de bajar o subir*/
    background-color: var(--color-scroll-aside);/*el color del thumb del scrool*/
    border-radius: 5px;/*las esquinas del thumb seran redondeadas*/
}
#aside_menu_lateral .navegacion::-webkit-scrollbar-thumb:hover{/*cuando el mause se posicione sobre el thumb del scroll este cambiara su color*/
    background-color: var(--color-scroll-aside-hover);
}
/**bloque de modo oscuro e información del usuario**/
/*estilo del bloque de modo oscuro e información del usuario*/
/*linea*/
#aside_menu_lateral .linea{
    width: 100%;/*el ancho de la linea sera el 100% del ancho disponible del bloque padre*/
    height: 1px;/*el alto de la linea*/
    margin-top: 15px;/*este se alejara 15 pixeles del elemento superior*/
    background-color: var(--color-linea);/*color de la linea*/
}
#aside_menu_lateral .contenedor-info-modo_oscuro{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/*estilos del contenedor del modo oscuro e info*/
#aside_menu_lateral .contenedor-info-modo_oscuro .info{
    width: 150px;/*el bloque del texto modo oscuro tendra un ancho maximo de 150 pixeles*/
    height: 45px;/*el alto sera 45 pixeles para este bloque*/
    overflow: hidden;/*si se sobrepasa el bloque se oculta*/
    display: flex;/*Es para luego poder centrar horizontalmente*/
    align-items: center;/*centramos horizontalmente*/
    color: var(--color-texto-aside);/*color del texto y el icono*/
}
/*estilos del contenedor usuario*/
#aside_menu_lateral .login_register, .login_register a{
    color: var(--color-icono-texto-buscador);
}
#aside_menu_lateral .login_register{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
#aside_menu_lateral .login_register img{/*ña imagen del usuario*/
    width: 50px;/*tendra un ancho de 50 pixeles*/
    height: 50px;/*el ancho minimo de la imagen es 50 pixeles*/
    border-radius: 10px;/*el radio de la imagen es 10 pixeles*/
    background-color: white;
}
#aside_menu_lateral .login_register .info_usuario{
    display: flex;
    align-items: center;
}
#aside_menu_lateral .login_register .info_usuario .nombre_email p{
    overflow-wrap: break-word;
    word-break: break-all;
}
#aside_menu_lateral .login_register .info_usuario .nombre_email .nombre_usuario{
    font-weight: bold;
}
#aside_menu_lateral .login_register .info_usuario .nombre_email .correo_usuario{
    font-family: 'Open+Sans', sans-serif;
    font-size: 0.9rem;
}
#aside_menu_lateral .login_register .info_usuario .menu_usuario_aside{
    position: relative;
    display: flex;;
    align-items: center;
    justify-content: center;
}
#aside_menu_lateral .login_register .info_usuario .menu_usuario_aside span{
    cursor: pointer;
}
#aside_menu_lateral .login_register .info_usuario .opciones_usuario_aside{
    position: absolute;
    left: 10px;
    bottom: 30px;
    width: 90px;
    background-color: var(--color-fondo-opciones-usuario);
    border-radius: 10px;
    z-index: 2;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#aside_menu_lateral .login_register .info_usuario .opciones_usuario_aside div{
    display: flex;
}
#aside_menu_lateral .login_register .info_usuario .opciones_usuario_aside ul{
    width: 100%;
    height: 100%;
    margin: 5px;
    display: flex;
    flex-direction: column;
}
#aside_menu_lateral .login_register .info_usuario .opciones_usuario_aside ul a{
    display: flex;
    width: 100%;
    cursor: pointer;
    border-radius: 7px;
    padding: 5px;
    color: var(--color-texto-opciones-usuario);
    font-weight: bold;
}
#aside_menu_lateral .login_register .info_usuario .opciones_usuario_aside ul a:hover{
    background-color: var(--color-fondo-texto-opciones-usuario);
}