/* ==========================================================
   MENÚ INSTITUCIONAL - TUTORÍA
   ========================================================== */


/* ==========================================================
   CONTENEDOR DEL MENÚ
   ========================================================== */

#menu {

    background:
        linear-gradient(
            180deg,
            #7A0019 0%,
            #620014 100%
        ) !important;

}


/* ==========================================================
   TÍTULO
   ========================================================== */

#menu h2 {

    color: #F4EFE4 !important;

    font-weight: 700;

    letter-spacing: .5px;

}


/* ==========================================================
   LISTA
   ========================================================== */

#menu ul {

    margin-top: 20px;

}


/* ==========================================================
   ENLACES
   ========================================================== */

#menu ul li a {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #F4EFE4 !important;

    font-size: 16px;

    font-weight: 500;

    padding:
        12px
        18px;

    border-radius: 8px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


/* ==========================================================
   ICONOS
   ========================================================== */

#menu ul li a i {

    width: 20px;

    text-align: center;

    color: #BC955B;

    font-size: 15px;

    transition:
        color .25s ease,
        transform .25s ease;

}


/* ==========================================================
   HOVER
   ========================================================== */

#menu ul li a:hover {

    background:
        rgba(244, 239, 228, .12);

    color: #FFFFFF !important;

    transform:
        translateX(5px);

}


/* ICONO HOVER */

#menu ul li a:hover i {

    color: #DDC8A4;

    transform:
        translateX(2px);

}


/* ==========================================================
   SEPARACIÓN ENTRE OPCIONES
   ========================================================== */

#menu ul li {

    margin-bottom: 5px;

}

/* ==========================================================
   BOTÓN MENÚ DEL ENCABEZADO
   ========================================================== */

#header nav a {
    color: #F4EFE4 !important;
    font-weight: 600;
    transition:
        color .25s ease,
        background .25s ease;
}


/* Icono / líneas del botón */

#header nav a:before,
#header nav a:after {
    background-color: #BC955B !important;
}


/* Hover */

#header nav a:hover {
    color: #FFFFFF !important;
}


/* ==========================================================
   TÍTULO DEL MENÚ LATERAL
   ========================================================== */

#menu h2 {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 10px;
}


/* Línea institucional debajo de "Menú" */

#menu h2:after {
    content: "";
    display: block;

    width: 55px;
    height: 3px;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #BC955B,
            #DDC8A4
        );

    border-radius: 3px;
}