/* ==========================================================================
   1. COLOR DE TEXTOS Y ENLACES (DE AZUL A VERDE INSTITUCIONAL)
   ========================================================================== */

/* Textos en verde para el centro, barra lateral y menú desplegable */
.pkp_structure_main a,
.pkp_structure_sidebar a,
.dropdown-menu > li > a {
    color: #007142 !important;
    text-decoration: none !important;
}

/* Hover verde más oscuro para el centro y barra lateral */
.pkp_structure_main a:hover,
.pkp_structure_sidebar a:hover {
    color: #004d2c !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   2. RECUADRO DEL MENÚ DESPLEGABLE (DE AZUL A DORADO UABC)
   ========================================================================== */

/* Cambia exclusivamente el recuadro azul al pasar el mouse por el dorado */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #E3A835 !important; /* Dorado institucional */
    color: #ffffff !important;            /* Texto blanco para contrastar mejor */
    text-decoration: none !important;
}

/* ==========================================================================
   3. BOTONES INTERACTIVOS (BARRA LATERAL)
   ========================================================================== */

/* Centrar el botón de la barra */
#customBlock-BotonVerMas {
    width: 100% !important;
    clear: both !important;
    display: block !important;
    float: none !important;
}

/* Hover gris para los botones de la barra lateral */
.ver-mas-numeros-container a:hover,
#sidebar .pkp_block a[href*="indexaciones"]:hover {
    background-color: #e9e9e9 !important;
    border-color: #8c8c8c !important;
    color: #004d2c !important;
    text-decoration: none !important;
}

/* ==========================================================================
   4. OPTIMIZACIÓN MÓVIL: BOTONES DE PDF (RESPONSIVE Y TÁCTIL)
   ========================================================================== */

/* Contenedor flexible para que los botones fluyan dinámicamente */
ul.galleys_links,
.item.galleys ul,
.obj_article_details .galleys_links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    list-style: none !important;
}

/* Área táctil accesible (mínimo 44x44px) para smartphones */
ul.galleys_links li a,
.obj_galley_link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important; /* Estándar de accesibilidad táctil */
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Regla estricta para apilar botones en pantallas de celulares (menores a 576px) */
@media (max-width: 576px) {
    ul.galleys_links,
    .item.galleys ul {
        flex-direction: column !important; /* Pone un botón debajo del otro */
    }
    
    ul.galleys_links li,
    .item.galleys ul li {
        width: 100% !important; /* Toma todo el ancho disponible */
        margin: 0 !important;
    }
    
    ul.galleys_links li a,
    .obj_galley_link {
        width: 100% !important; /* Expande el botón para que sea más fácil tocarlo */
    }
}