@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

:root {
    --background: #5e7094;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
    font-weight: 300; 
    background-color: #f7f7f7;
}

/* Contenedores de Ancho Máximo */
.menu_contenedor, .main-content {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Título (Dentro del menú azul) */
.contenedor-titulo {
    padding: 0; 
    width: auto; 
    color: #fff;
    display: flex;
    align-items: center; 
}
.contenedor-titulo h2 {
    border-bottom: none; 
    padding: 15px 0;
    font-size: 1.2em; 
    width: auto;
    text-align: left;
    font-weight: 700;
    color: #fff; 
}

/* Contenido Principal (Para crear el espacio en blanco) */
.main-content {
    margin: 40px auto; 
    padding: 20px;
    text-align: center;
    min-height: 400px; 
}

footer{
    text-align: center;
    padding: 15px 0;
    margin-top: 40px; 
    border-top: 1px solid #eee; 
    color: #666;
    font-size: 0.9em;
}

/* ESTILOS DEL MENÚ (nav) */
.menu{
    background-color: #1757d7;
    color: #fff;
    /* Altura automática para que se ajuste al título y enlaces */
    height: auto; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}
.menu_contenedor{
    display: flex;
    /* Distribución en escritorio: Título | Enlaces */
    justify-content: space-between; 
    align-items: center;
    height: 70px; /* Altura fija en escritorio para la barra */
    padding: 0; 
    flex-wrap: nowrap; 
}

.menu_links{
    height: 100%;
    transition: transform .3s; 
    display: flex;
}
.menu_tarea{
    list-style: none;
    position: relative;
    height: 100%;
    --clip: polygon(0 0, 100% 0, 100% 0, 0 0);
    --transform: rotate(-90deg);
    --opacity: 0;
    transition: background-color 0.3s ease;
}
.menu_tarea:hover{
    --clip: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    --transform: rotate(0);
    --opacity: 1;
    background-color: #5e7094; 
}
.menu_link{
    color: #fff;
    text-decoration: none;
    padding: 0 30px;
    display: flex;
    height: 100%;
    align-items: center;
    font-weight: 400; 
}

.menu_arrow{
    transform: var(--transform);
    transition: transform .3s;
    display: block;
    margin-left: 3px;
    width: 24px;
    height: 24px;
    align-self: center;
    filter: invert(100%);
}
.menu_tarea:hover .menu_arrow {
    transform: rotate(0deg); 
    transition: transform 0.3s;
}

.menu_anidado{
    list-style: none;
    transition: clip-path .3s, opacity .3s;
    clip-path: var(--clip);
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    background-color: #000000e0;
    opacity: var(--opacity);
    z-index: 100;
}
.menu_link--interior{
    padding: 15px 100px 15px 20px;
    display: block;
    width: 100%;
}
.menu_link--interior:hover{
    background-color: #444; 
}

.menu_hamburguer{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    display: none; 
}
.menu_hamburguer .menu_img img{
    display: block;
    width: 36px;
    transition: transform 0.3s;
    transform-origin: center;
    filter: invert(100%); 
}

/* --- MEDIA QUERY: Estilos para Móvil (max-width: 800px) --- */
@media (max-width: 800px){
    
    /* Disposición de la Barra de Navegación en Móvil (Título + Menú Hamburguesa) */
    .menu_contenedor {
        /* Se mantiene en fila para que el título y el icono se vean lado a lado */
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        height: 70px; /* Altura fija para la barra visible en móvil */
        padding: 0 5%; /* Padding a los lados para respirar */
    }
    
    /* Aseguramos que el título quepa y se alinee a la izquierda */
    .contenedor-titulo {
        padding: 0;
        width: auto;
    }
    .contenedor-titulo h2 {
        font-size: 1em; /* Se reduce un poco la fuente para que quepa mejor */
        padding: 0;
        text-align: left;
        width: auto;
    }

    /* Mostrar botón hamburguesa */
    .menu_hamburguer{
        display: flex;
        height: 100%;
        /* Ajustamos el padding para el clic */
        padding: 0 15px; 
    }
    
    /* El menú de enlaces se oculta y tiene posición fija */
    .menu_links{
        position: fixed;
        max-width: 400px;
        width: 100%;
        /* Empieza justo debajo de la barra de 70px */
        top: 70px; 
        bottom: 0;
        right: 0;
        background-color: #000000e6; 
        overflow-y: auto;
        flex-direction: column;
        transform: translate(100%); 
        transition: transform .3s ease-in-out;
    }
    .menu_links--show{
        transform: translate(0%);
    }

    /* Estilos del acordeón */
    .menu_tarea{
        --clip: 0; 
        --transform: rotate(0); 
        width: 100%;
        height: auto;
        overflow: hidden; 
    }
    .menu_tarea--active{
        --background: #5e7094; 
    }
    .menu_tarea--show{ 
        background-color: var(--background);
    }
    
    .menu_link{
        padding: 20px 30px;
        justify-content: space-between; 
        height: auto;
    }
    .menu_anidado{
        clip-path: none;
        position: unset; 
        width: 100%;
        opacity: 1;
        
        height: 0; 
        transition: height .3s ease; 
        transform: translate(0); 
        display: grid; 
    }
    
    .menu_tarea--active .menu_arrow{
        transform: rotate(180deg);
    }
    
    .menu_link--interior{
        width: 90%; 
        margin-left: auto; 
        border-left: 1px solid #798499; 
        padding: 15px 100px 15px 20px;
    }
}