/* ==========================================
   SUB-SERVICE NAVIGATION STYLES
   ========================================== */

/* 1. Reset de seguridad para el flujo de la página:
   'overflow-x: clip' evita desbordamientos horizontales en móviles sin anular 'position: sticky' */
html, body {
    overflow-x: clip !important;
}

main, 
#soluciones, 
.album {
    overflow: visible !important;
}

/* ==========================================
   BARRA Y DESPLEGABLE FIJO DE CATEGORÍAS
   (Funcional en Móviles e iOS / WebKit)
   ========================================== */
.solutions-category-sticky-bar,
.solutions-category-dropdown {
    position: -webkit-sticky; /* Compatibilidad prioritaria para Safari / iOS */
    position: sticky;
    top: 56px; /* Se ancla justo debajo de la barra superior fija */
    z-index: 1020;
    width: 100%;
    background-color: #f8fafc; /* Fondo sólido para garantizar legibilidad */
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: top 0.2s ease;
    box-sizing: border-box;
}

/* Ajustes específicos para dispositivos móviles (< 992px) */
@media (max-width: 991.98px) {
    .solutions-category-sticky-bar,
    .solutions-category-dropdown {
        top: 56px;
    }

    /* Asegura que la lista desplegable sea scrolleable en pantallas cortas */
    .solutions-category-sticky-bar .dropdown-menu,
    .solutions-category-dropdown .category-menu-list {
        max-height: 55vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Scroll suave e inercial para iOS */
    }
}

/* Botón disparador del desplegable de categorías */
.solutions-category-sticky-bar .btn-primary,
.solutions-category-dropdown .btn-primary {
    background-color: #004981;
    border-color: #004981;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.solutions-category-sticky-bar .btn-primary:hover,
.solutions-category-sticky-bar .btn-primary:focus,
.solutions-category-dropdown .btn-primary:hover,
.solutions-category-dropdown .btn-primary:focus {
    background-color: #003660;
    border-color: #f4a261;
    color: #ffffff;
}

/* Lista del menú desplegable de categorías */
.solutions-category-sticky-bar .dropdown-menu,
.solutions-category-dropdown .category-menu-list {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    margin-top: 6px;
    background-color: #ffffff;
    max-height: 70vh;
    overflow-y: auto;
}

.solutions-category-sticky-bar .dropdown-item,
.solutions-category-dropdown .dropdown-item {
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2b2d42;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: normal;
}

.solutions-category-sticky-bar .dropdown-item:hover,
.solutions-category-sticky-bar .dropdown-item:focus,
.solutions-category-sticky-bar .dropdown-item.active,
.solutions-category-dropdown .dropdown-item:hover,
.solutions-category-dropdown .dropdown-item:focus,
.solutions-category-dropdown .dropdown-item.active {
    background-color: #f0f4f8;
    color: #004981;
    font-weight: 600;
    border-left: 4px solid #f4a261;
}

/* Compensación de desplazamiento para anclas (#cat-yacimientos, etc.) */
#cat-yacimientos,
#cat-transicion,
#cat-digital,
#cat-asesoria {
    scroll-margin-top: 130px;
}

/* ==========================================
   NAVEGACIÓN LATERAL STICKY (PÁGINAS INTERNAS)
   ========================================== */
.list-group.sticky-top {
    top: 95px; 
    z-index: 1010; 
}

.list-group-item {
    border-left: 5px solid transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    color: #2b2d42;
    font-weight: 500;
}

.list-group-item.active,
.list-group-item:hover,
.list-group-item:focus {
    border-left-color: #f4a261;
    background-color: #f0f4f8;
    color: #004981 !important;
    font-weight: 600;
}

/* ==========================================
   NAVEGACIÓN MÓVIL EN PÁGINAS INTERNAS
   ========================================== */
.services-mobile-nav,
.d-lg-none .services-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    z-index: 1015;
    background-color: #004981;
    padding: 10px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
    border-radius: 0 0 8px 8px;
}

.services-mobile-nav .btn-primary,
.d-lg-none .btn-primary {
    background-color: #004981;
    border-color: #264653;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

.services-mobile-nav .btn-primary:hover,
.services-mobile-nav .btn-primary:focus,
.d-lg-none .btn-primary:hover {
    background-color: #003660;
    border-color: #f4a261;
    color: #ffffff;
}

/* ==========================================
   ENLACE DE CHAT EN FOOTER
   ========================================== */
footer a.chatear,
footer a.chatear:link,
footer a.chatear:visited,
footer a.chatear:hover,
footer a.chatear:focus,
footer a.chatear:active {
    color: #ffffff !important;
    text-decoration: none;
}