/************************************************************/
/* BLOQUE 1: OCULTAR ENLACES Y ESTRUCTURA BASE (TU CÓDIGO)  */
/************************************************************/

/* Ocultar enlace específico */
a[href*="cecda.org/revistas/index.php/eciencia/index"] {
    display: none !important;
}

/* Ampliar la cabecera (Ancho y Alto) - Escritorio */
/* AGREGADO: overflow visible para permitir que el menú salga de la caja */
.pkp_structure_head, 
.pkp_head_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 40px !important;    
    padding-bottom: 0px !important; 
    overflow: visible !important; /* NECESARIO para que se vea el submenú */
    z-index: 1000 !important;
}

/* Centrar el menú y moverlo a la izquierda - Escritorio */
.pkp_navigation_primary_wrapper {
    float: none !important; 
    display: flex !important; 
    justify-content: center !important; 
    width: 100% !important; 
    margin: 0 auto !important;
    transform: translateX(-150px) !important; 
}

/* Ajuste de alineación de lista */
ul#navigationPrimary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Obligar a la imagen a ajustarse (Logo responsive) */
.pkp_head_wrapper img,
.pkp_site_name_wrapper img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/************************************************************/
/* BLOQUE 2: DISEÑO MINIMALISTA Y CORRECCIÓN DROPDOWN       */
/************************************************************/

/* CORRECCIÓN: Forzar que el menú se muestre al pasar el mouse */
ul#navigationPrimary li:hover > ul,
ul#navigationPrimary li:hover .dropdown-menu {
    display: block !important;
    margin-top: 0 !important; /* Pegado al botón para no perder el foco */
}

/* Estilo del submenú (El cuadro desplegable) */
ul#navigationPrimary ul,
.dropdown-menu {
    background-color: #263B4C !important; /* Tu color azul oscuro */
    margin-top: 0px !important;
    padding: 10px 0 !important; /* Espacio arriba y abajo */
    border: none !important; 
    border-radius: 0 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    min-width: 220px !important;
    z-index: 9999 !important; /* Asegura que flote sobre todo */
}

/* Estilo de los enlaces dentro del desplegable */
ul#navigationPrimary ul li a,
.dropdown-menu a {
    color: #ffffff !important; /* Texto blanco */
    padding: 12px 20px !important; 
    font-size: 14px !important; 
    border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Línea muy sutil */
    transition: all 0.2s ease !important; 
    text-transform: none !important; /* Texto normal */
    background-color: transparent !important; /* Asegura fondo limpio */
}

/* Efecto Hover (Al pasar el mouse por las opciones del menú) */
/* Se invierten los colores: Fondo blanco, texto azul oscuro */
ul#navigationPrimary ul li a:hover,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background-color: #ffffff !important; /* Fondo blanco */
    color: #263B4C !important; /* Texto azul */
    padding-left: 25px !important; /* Pequeño movimiento */
    text-decoration: none !important;
}

/* Quitar la flecha fea de Bootstrap */
.dropdown-toggle::after {
    display: none !important; 
}

/************************************************************/
/* BLOQUE 3: CORRECCIÓN PARA MÓVILES (TU CÓDIGO)            */
/************************************************************/
@media (max-width: 767px) {
    
    /* Restaurar flujo normal en móviles */
    .pkp_navigation_primary_wrapper {
        transform: none !important; 
        display: block !important; 
        width: 100% !important;
    }

    /* Lista vertical en móviles */
    ul#navigationPrimary {
        display: block !important; 
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Elementos de lista en bloque */
    ul#navigationPrimary li {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important; 
        border-bottom: 1px solid #eee !important; /* Separación en móvil */
    }

    /* Enlaces en móvil */
    ul#navigationPrimary li a {
        padding: 15px !important;
        display: block !important;
    }

    /* El submenú en móvil no debe flotar */
    ul#navigationPrimary li:hover > ul,
    ul#navigationPrimary li:hover .dropdown-menu {
        display: none !important; /* Evita conflicto táctil */
    }

    /* Ajuste de cabecera en móvil */
    .pkp_structure_head, 
    .pkp_head_wrapper {
        padding-top: 10px !important; 
        padding-bottom: 10px !important;
    }
}