/*
    Archivo de estilos generales
    Jakov Josias Vazquez Akiyama
    4BMPR
*/
/*Estilo para todo el documento*/
* {
  box-sizing: border-box;/*Permite que el padding y el border se incluyan dentro del ancho y alto total de los elementos, evitando que se desborden del contenedor*/
}

/*Estilo general para el cuerpo*/
body{
    font-family: Helvetica, Arial, sans-serif;/*Tipo de fuente*/
    text-align: center;/*Centra el texto dentro de los elementos*/
    /*Elimina el margen y padding*/
    margin: 0;
    padding: 0;
    background-color: #ebebeb;/*Color de fondo gris claro*/
    width: 100%;/*Ancho al 100% del tamaño del navegador (depende de la pantalla)*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.menu {
    width: 300px;
    max-width: 80%; /* Evita que en móviles tape toda la pantalla */
    height: 100vh;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: -300px; 
    transition: all 0.4s ease;
    z-index: 2000;
    overflow-y: auto; /* Permite scroll dentro del menú si hay muchos cursos */
}

/*Estilo para el encabezado*/
header{
    background-color: #cdcdcd;/*Color de fondo gris*/
    position: sticky;/*Hace que el encabezado se mantenga "pegado" a la parte superior de la página al hacer scroll*/
    top: 0;/*Posición del encabezado al borde de la parte superior*/
    z-index: 100;/*Asegura que el encabezado se muestre por encima de otros elementos*/
}

/*Estilo para la barra de navegación*/
nav{
    display: flex;/*Flexbox para organizar los elementos*/
    flex-direction: row;/*Organiza los elementos de manera horizontal*/
    padding: 10px;/*Espaciado interno de la barra de navegación*/
    align-items: center;/*Alinea los elementos verticalmente al centro*/
    width: 100%;/*Ancho al 100% del tamaño del navegador*/
    height: fit-content;/*Altura ajustada al contenido interno*/
    background-color: #cdcdcd;/*Color de fondo gris*/
}

/*Estilo para el logo de la página (se llama por la clase)*/
.logo{
    width: 50px;/*Ancho del logo*/
    height: auto;/*Altura automática proporcional*/
}

/*Estilo para el título de la página dentro de la barra de navegación*/
nav h3{
    font-size: 18px;/*Tamaño de fuente del título*/
}

/*Estilo para el botón del menú*/
.btn_menu{
    background-color: #cdcdcd;/*Color de fondo gris*/
    width: 50px;/*Ancho del botón*/
    height: auto;/*Altura automática proporcional*/
    border: none;/*Elimina el borde del botón*/
    cursor: pointer;/*Cambia el cursor a una mano al pasar*/
}

/*Estilo para la imagen dentro del botón de menú*/
.btn_menu img{
    width: 100%;/*Ancho ajustado al 100% del botón*/
    height: auto;/*Altura automática proporcional*/
}

/*Estilo para el botón del menú al pasar el cursor por encima*/
.btn_menu:hover{
    scale: 1.1;/*Aumenta el tamaño del botón*/
}

/*Estilo para el menú lateral*/
aside{
    background-color: #e8e7e7;/*Color de fondo gris claro*/
    display: flex;/*Flexbox para organizar los elementos*/
    flex-direction: column;/*Organiza los elementos de manera vertical*/
    text-align: left;/*Alinea el texto a la izquierda*/
    padding: 10px 15px;/*Espaciado interno del menú (10px arriba y abajo, 15px a los lados)*/
    width: 26%;/*Ancho del menú al 26% del tamaño del navegador*/
    height: 100%;/*Altura al 100% del tamaño del navegador*/
    position: fixed;/*Hace que el menú se mantenga fijo en su posición al hacer scroll*/
    z-index: 1000;/*Asegura que el menú se muestre por encima de otros elementos (más alto que el encabezado)*/
    top: 0;/*Posición del menú hasta arriba*/
    left: -100%;/*Posición del menú fuera de la pantalla a la izquierda (se oculta)*/
    transition: all 0.5s ease;/*Transición suave para mostrar y ocultar el menú (0.5 segundos)*/
}

/*Estilo para el menú lateral cuando se agrega la clase active (javascript)*/
aside.active{
    left: 0;/*Regresa el menú al borde izquierdo de la pantalla (se muestra)*/
}

/*Estilo para el contenedor del logo y título dentro del menú lateral*/
aside .logomn{
    display: flex;/*Flexbox para organizar los elementos*/
    flex-direction: row;/*Organiza los elementos de manera horizontal*/
    align-items: center;/*Centra los elementos verticalmente*/
}

/*Estilo para el título dentro del menú*/
aside .logomn h3{
    margin-left: -5px;/*Disminuye el espacio entre el logo y el título (menos margen a la izquierda)*/
}

/*Estilo para la línea horizontal dentro del menú*/
aside hr{
    width: 100%;/*Ancho al 100% del menú (menos el padding)*/
    border: 2px solid #c2c2c2;/*Borde de la línea (2px de grosor, sólido, color gris)*/
    border-radius: 8px;/*Bordes redondeados para la línea*/
}

/*Estilo para los enlaces y párrafos dentro del menú*/
aside a, aside p{
    text-decoration: none;/*Elimina el subrayado de los enlaces*/
    color: black;/*Color de letra negro*/
    font-weight: bold;/*Letra en negrita*/
    margin: 0 5px;/*margen de los elementos (0 arriba y abajo, 5px a los lados)*/
    cursor: pointer;/*cursor de mano al pasar el mouse*/
    transition: all 0.5s ease;/*trancisión suave en 0.5 segundos*/
    padding: 10px;/*espaciado interno por todos lados*/
    width: fit-content;/*Ancho ajustable al contenido*/
}

/*Estilo para el anclaje de la cuenta*/
.cuenta{
    display: flex;/*Flexbox para organizar los elementos*/
    flex-direction: row;/*Organizados en fila*/
    align-items: center;/*elementos centrados verticalmente*/
}

/*Estilo para la imagen dentro del anclaje de la cuenta*/
.cuenta .user{
    width: 25px;/*Ancho de la imagen*/
}

/*Estilo para la lista dentro del menú (submenú de cursos)*/
aside ul{
    list-style: none; /*Quita las viñetas o círculos de la lista*/
    margin: 0; /*Elimina el margen externo*/
    display: none; /*Oculta la lista*/
}

/*Estilo para las imagenes de cada anclaje del submenú*/
aside a img{
    width: 20px; /*Ancho pequeño para iconos de submenú*/
    height: auto; /*Altura proporcional*/
    margin-right: 5px; /*Espacio entre el icono y el texto*/
}

/*Estilo para el submenú de cursos*/
.cursosmn{
    display: none; /*Asegura que el bloque de cursos esté oculto*/
}

/*Estilo para los contenedores de cada curso dentro del menú lateral*/
.cursomn1, .cursomn2, .cursomn3{
    display: flex; /*Alinea icono y texto en fila*/
    flex-direction: row;
    align-items: center; /*Centra el contenido verticalmente*/
}

/*Cambio de color de letra individual para cada curso según su identidad visual*/
.cursomn1{
    color: #4f90ee; /*Azul para Documentos*/
}
.cursomn2{
    color: #48aa55; /*Verde para Hojas de Cálculo*/
}
.cursomn3{
    color: #ebbf0c; /*Amarillo para Presentaciones*/
}

/*Estilo para los enlaces del menú al pasar el cursor por encima*/
aside a:hover{
    transform: scale(1.1); /*Aumenta ligeramente el tamaño del enlace*/
}

/*Muestra el submenú oculto al pasar el cursor por el contenedor "desplegable"*/
aside .desplegable:hover .cursosmn{
    display: block; /*Devuelve la vista predeterminada de la lista de cursos*/
}

/*Estilo para el mensaje de alerta*/
#alert{
    position: fixed;/*Mantiene la notificación fija en su posición al hacer scroll*/
    top: 20px;/*Posición desde la parte superior*/
    right: 20px;/*Posición desde la derecha*/
    background-color: #333;/*Color de fondo gris oscuro*/
    color: white;/*Color de letra blanco*/
    padding: 15px 20px;/*Espaciado interno (15px arriba y abajo, 20px a los lados)*/
    border-radius: 8px;/*Bordes redondeados*/
    display: flex;/*Flexbox para organizar los elementos*/
    flex-direction: row;/*Organiza los elementos de manera horizontal*/
    align-items: center;/*Alinea los elementos verticalmente al centro*/
    gap: 15px;/*Espacio entre el mensaje y el botón*/
    z-index: 9999;/*Asegura que se muestre por encima de todos los elementos*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);/*Sombra para dar profundidad*/
    transition: opacity 0.4s ease, transform 0.4s ease;/*Transición suave para mostrar y ocultar*/
}

/*Estilo para el botón de cerrar la notificación*/
#alert button{
    background: none;/*Sin color de fondo*/
    border: none;/*Sin borde*/
    color: white;/*Color de letra blanco*/
    font-size: 16px;/*Tamaño de fuente*/
    cursor: pointer;/*Cambia el cursor a una mano al pasar*/
}

/*Estilo para la notificación cuando es visible (se agrega con javascript)*/
.visible{
    opacity: 1;/*Totalmente visible*/
    transform: translateY(0);/*En su posición original*/
}

/*Estilo para la notificación cuando está oculta (clase por defecto)*/
.oculta{
    opacity: 0;/*Totalmente transparente*/
    transform: translateY(-20px);/*Desplazada hacia arriba*/
    pointer-events: none;/*Evita que interfiera con clicks cuando está oculta*/
}

/*Estilo para el pie de página*/
footer{
    z-index: 1000;
    position: sticky;
    bottom: 0;
    text-align: right;/*texto alineado a la derecha*/
    margin-right: 20px;/*margen a la derecha*/
    height: fit-content;
    padding: 10px;/*espaciado interno por todos lados*/
}

/*Estilo para los párrafos del pie de página*/
footer p{
    margin: 0;/*margen hacia arriba (acerca los párrafos)*/
    font-weight: bold;/*texto en negritas*/
}

main{
    width: 100%; /*Ancho al 100% del tamaño del navegador*/
    flex: 1; /*Permite que el contenido principal ocupe todo el espacio disponible entre el header y el footer*/ 
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    aside{
        font-size: 18px;
    }
}