@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}

:root {
    --blanco-fondo: #FFFFFF;
    --gris-texto: #828282;
    --azul-corporativo: #242a46;
    --azul-i360: #1ca8c1;
    --rojo-claro: #EA4335;
    --rojo-oscuro: #d41111;
}

/* Aplico los estilos para el header */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;

    position: relative;
    z-index: 1000; /* Para que se vea el header correctamente encima de todo */
}

.logo {
    width: 10rem;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 1.4rem;
}

.header-content a {
    color: var(--azul-corporativo);
    padding: 0.875rem;
}

.header-content a:hover {
    color: var(--azul-i360);
    transform: scale(1.1);
}

#init {
    background-color: var(--azul-corporativo);
    color: var(--blanco-fondo);
    border-radius: 0.625rem;
}

#init:hover {
    background-color: var(--azul-i360);
    color: var(--blanco-fondo);
}

.menu-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    color: var(--azul-corporativo);
    cursor: pointer;
    border: none;
}

.here {
    border-bottom: 0.25rem solid var(--azul-corporativo);
}

.here:hover {
    border-bottom: 0.25rem solid var(--azul-i360);
}

#logout {
    background-color: var(--rojo-claro);
    color: var(--blanco-fondo);
    padding: 0.625rem;
    border-radius: 0.625rem;
    transition: 2s;
}

#logout:hover {
    background-color: var(--rojo-oscuro);
    color: var(--blanco-fondo);
}

/* Estilos para el navegador */

#second-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 1.25rem;
}

#second-header a {
    border: none;
    color: var(--gris-texto);
    font-size: 1.5rem;
}

#second-header a:hover {
    color: var(--azul-i360);
}

@media (max-width: 972px) {
    .header-content {
        display: none;
        flex-direction: column;
        
        width: 100%;
        
        background-color: var(--blanco-fondo);
        
        padding: 1.25rem 0;
        margin-top: 0.625rem;
        border-top: 0.063rem solid var(--gris-texto);
    }

    .menu-toggle {
        display: block;
        position: absolute;
        right: 1rem;
    }

    .header-content.active { 
        display: flex;
        position: absolute;
        top: 8rem;
        left: 0;

        background-color: var(--blanco-fondo);

        width: 100%;

        z-index: 9999;
    }

    #second-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
    }
}