/* Contenedor principal del men� */
/*
#uab-nav {
    width: min-content;
    height: 15vh;
    background-color: #5344b9;
    margin: 0 auto; 
    border-radius: 20px; 
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3); 
    display: flex;
    align-items: center;
    justify-content: center;

}*/

#uab-nav {
    /* width: min-content; */
    width: 80%;
    height: 85px;
    background-color: #5344b9;
    margin: 0 auto; /* Centrar en la pantalla */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3); /* Suave sombreado */
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative; /* Permite posicionar el elemento con respecto a su ubicación normal */
    top: -7.5vh; /* Desplaza hacia arriba la mitad de su altura */
    z-index: 10; /* Asegura que esté por encima del banner */
}


/* Estilo para las opciones del men� */
#uab-menu .menu-items {
    display: flex;
    flex-direction: row;
    /* justify-content: space-around; */
    justify-content: center;
    width: 100%;
    padding: 0;
}

/* A�adir espacio horizontal entre las cajas blancas */
#uab-menu .menu-items .item-menu {
    list-style: none;
    background-color: #fff; /* Caja blanca */
    border-radius: 10px; /* Esquinas redondeadas */
    width: 17%;
    height: 65px;
    display: flex;
    align-items: center; /* Alinear �cono y texto verticalmente al centro */
    justify-content: center; /* �cono a la izquierda del texto */
    padding: 1vh;
    margin-right: 0.7vh; /* A�adir espacio entre las cajas blancas */
    margin-left: 0.7vh; /* A�adir espacio entre las cajas blancas */
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); /* Sombra suave */
}


/* Asegurar que el �cono y el texto est�n alineados horizontalmente */
#uab-menu .menu-items .item-menu .item {
    color: #20313d !important;
    font-family: 'AncizarSans-Regular', sans-serif;
    font-size: 15px; /* Tamaño adecuado para que el texto encaje */
    text-align: left; /* Alineación del texto */
    display: flex;
    align-items: center; /* Alinear verticalmente ícono y texto */
    flex-direction: row; /* Alinear el texto e ícono en una fila horizontal */
    justify-content: flex-start;
    line-height: 1.0; /* Separación entre líneas */
    width: 100%;
    height: 100%;
    border-radius: 10px;
     background-size: contain;

    transition: all 0.3s ease; /* Suaviza los cambios para hover */
}

/* Eliminar los c�rculos alrededor de los �conos */
#uab-menu .menu-items .item-menu i {
    font-size: 1.8em;
    color: #5344b9; /* Color del �cono */
    margin-right: 0px; /* Espacio entre el �cono y el texto */
    background-color: transparent; /* Elimina el fondo blanco */
    border: none; /* Elimina el c�rculo negro */
}

.icon-question {
    object-fit: contain;
    color: #5344b9 !important;
    /* max-width: 100%;
    max-height: 100%; */
    display: flex;
  justify-content: center;
  align-items: center;
}
/* Efecto hover */
#uab-menu .menu-items .item-menu .item:hover {
    /*transform: scale(1.1);  Agranda el tamaño del elemento */
    background-color: #f6f8fc; /* Cambia el color de fondo */
    border: 1px solid #dfe2e4; /* Aplica un borde sólido, ligeramente más oscuro que el fondo */
}







/* Responsive: Pantallas medianas */


/* Responsive: Pantallas pequeñas (teléfonos) */
@media screen and (max-width: 768px) {

    .menu-name{
        padding-top: 6px !important;
        font-family: inherit !important;
        font-size: 20px !important;
        padding-left: 3%;
    }

    .peec-page{
        align-items: center;
        margin: 0 auto;
    }
    #uab-nav {
        
        align-items: center;
        justify-content: center;
        align-self: center;
        justify-self: center;
        width: 100%; /* Asegura que ocupe todo el ancho de la pantalla */
        height: auto;
        padding: 10px;
        background-color: #5344b9; /* Fondo púrpura */
        display: block;
        margin-top: 0px;
        position: static; /* Permite posicionar el elemento con respecto a su ubicación normal */
        border-radius: 14px;

        margin-right: 0 ;
        border-radius: 0px;
    }
    
    
    
    

    #uab-menu .menu-items {
        flex-direction: column; /* Cambiar a disposición vertical */
        align-items: stretch;
        justify-content: center;
        width: 80%;
        
    }

    #uab-menu .menu-items .item-menu {
        width: 130%; /* Ocupa todo el ancho */
        height: auto; /* Ajusta la altura automáticamente */
        background-color: #5344b9; /* Mismo color que el contenedor principal */
        margin: 5px 0; /* Espaciado entre bloques */
        border: none; /* Eliminar bordes */
        align-items: center;
        justify-content: center;
        border-top: solid;
        border-radius: 0;
        margin-left: 5px !important;
    }

    #uab-menu .icon-graduate, .icon-languages, .icon-talking, .icon-hand, .icon-phone {
        width: 90px !important;  
        height: 90px !important; 
        
        
    }

    #uab-menu .menu-items .item-menu .item {
        color: #fff !important; /* Texto blanco */
        font-size: 1.2em; /* Tamaño reducido para móviles */
        text-align: left; /* Centrar texto */
        height: 50px;
        
    }

    #uab-menu .menu-items .item-menu .item:hover {
        /*transform: scale(1.1);  Agranda el tamaño del elemento */
        background-color: #5344b9; /* Cambia el color de fondo */
    }

    button, input, optgroup, select, textarea {
        color: #fff;
        font: inherit;
        margin: 0;
    }
    main {
        /*margin: 0 auto; */
        color: #fff;
        font-family: "AncizarSans-Regular", Tahoma, Geneva, sans-serif;
        overflow: hidden !important;
        padding-bottom: 0 !important;
        max-width: 700px;
    }

    .visible-xs {
        display: block !important;
        padding-top: 6px; 
    }
    .navbar-toggle {
        padding: 0px 10px;
        border: none;
        background: transparent;
    }
    
    .navbar-toggle i {
        font-size: 1.2em;
        color: #fff;
        transition: transform 0.3s ease;
    }
    
    .navbar-toggle:hover i {
        transform: scale(1.1);
        color: #f0f0f0;
    }
    
    .navbar-toggle:focus {
        outline: none;
    }
}

@media screen and (max-width: 605px) {
    main {
        max-width: 600px;
    }
}


@media screen and (max-width: 505px) {
    main {
        max-width: 500px;
    }
}


@media screen and (max-width: 425px) {
    main {
        max-width: 420px;
    }
}


@media screen and (max-width: 365px) {
    main {
        max-width: 360px;
    }
}

@media screen and (max-width: 325px) {
    main {
        max-width: 320px;
    }
}




  /* Definición de iconos */
 
/* Definición de iconos ajustados */
.icon-graduate, .icon-languages, .icon-talking, .icon-hand {
    width: 90px;  
    height: 90px; 
     margin-left: -25px;
    display: inline-block;
    background-size: contain; /* Asegura que el ícono ocupe todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    border: solid; /* Elimina bordes adicionales */
}

.icon-question {
    width: 40px;  
    height: 40px;
    border-radius: 50%; 
    border: 5px solid transparent;
     margin-left: -15px;
     margin-right: 5% !important;
    display: inline-block;
    background-size: contain; /* Asegura que el ícono ocupe todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    border: solid; /* Elimina bordes adicionales */
}

/* Ajustes específicos para icon-phone */
.icon-phone {
    width: 65px;  
    height: 65px; 
    margin-left: -25px;
    padding: 10px;
    display: inline-block;
    background-size: contain; /* Asegura que el ícono ocupe todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    border: solid; /* Elimina bordes adicionales */
   
}




/* Iconos individuales con sus respectivas rutas */
.icon-graduate {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Graduate.png');
}

.icon-languages {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Languagues.png');
}

.icon-talking {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Talking.png');
}

.icon-hand {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Hand.png');
}

.icon-phone {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Phone.png');
}

.icon-question {
    background-image: url('/2017/extension/application/themes/sesquicentenario/images/Iconos PEEC nuevo diseno Oct 2024/Gemini-question2.png');
}