:root {
    /* Cambia este código hexadecimal por el azul exacto de la Universidad */
    --cassiopeia-color-primary: #fa7217; 
    
    /* También puedes cambiar el color secundario (hover) si lo deseas */
    --cassiopeia-color-hover: #72a331;
    
    /* O el color de los enlaces */
    --cassiopeia-color-link: #004a99;
}




/* 1. Contenedor del menú: Activa Flexbox y el salto de línea */
.menu-custom.mod-menu {
    display: flex !important;
    flex-wrap: wrap !important; /* Salto de línea automático */
	justify-content: center !important; /* ESTA LÍNEA CENTRA TODO EL MENÚ */
    gap: 0px !important;       /* Espacio entre botones */
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Estilo de los Botones Principales */
.menu-custom.mod-menu > li > a, 
.menu-custom.mod-menu > li > span {
    background-color: cassiopeia-color-primary !important; /* Verde similar al logo */
    color: #ffffff !important;
    padding: 5px 15px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: block !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
}


/* Efecto al pasar el mouse por el botón */
.menu-custom.mod-menu > li > a:hover {
    background-color: cassiopeia-color-hover !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* 3. Lógica del Dropdown (Submenús) */
.menu-custom.mod-menu li {
    position: relative !important;
}

/* Ocultar submenús inicialmente */
.menu-custom.mod-menu li ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    min-width: 220px !important;
    padding: 10px 0 !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
}

/* Mostrar submenú al pasar el mouse */
.menu-custom.mod-menu li:hover > ul {
    display: block !important;
}

/* Estilo de los enlaces dentro del submenú */
.menu-custom.mod-menu li ul li a {
    color: #333 !important;
    padding: 10px 20px !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;

}

.menu-custom.mod-menu li ul li a:hover {
    background-color: #f8f9fa !important;
    color: #72a331 !important;
}








/* 1. Ajuste del contenedor para que crezca según el texto más largo */
.menu-custom.mod-menu li ul {
    border-radius: 5px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
    padding: 5px 0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    
    /* CAMBIOS AQUÍ: */
    width: max-content !important;  /* El cuadro se estira al ancho del texto */
    min-width: 100% !important;     /* Asegura que sea al menos tan ancho como el botón principal */
}

/* 2. Forzar que el texto de cada item no salte de línea */
.menu-custom.mod-menu li ul li a {
    white-space: nowrap !important; /* CLAVE: Impide que el texto se divida en dos líneas */
    padding: 5px 10px !important;
    display: block !important;
    text-decoration: none !important;
    color: #444 !important;
    transition: all 0.2s ease !important;
}

/* 3. Efecto de resaltado al pasar el mouse */
.menu-custom.mod-menu li ul li a:hover {
    background-color: #098735 !important; /* Azul oscuro */
    color: #ffffff !important;
}