/**
 * Overflow Horizontal Fix
 * Previene el scroll horizontal no deseado en el body
 * 
 * @package FlyntChild
 * @version 1.0.0
 */

/* ========================================================================
   FIX GLOBAL - Prevenir scroll horizontal
   ======================================================================== */

html {
    overflow-x: hidden !important;
    max-width: 100%;
}

body {
    overflow-x: hidden !important;
    max-width: 100%;
    /* position: relative; ← REMOVIDO: Rompe position: sticky en NavigationHeader */
}

/* ========================================================================
   FIX ESPECÍFICO - Mega Menú usando 100% en vez de 100vw
   ======================================================================== */

.navigationHeader-megamenu-content {
    /* Cambiar de 100vw a 100% para evitar problemas con scrollbar */
    width: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    max-width: 100vw;
}

/* ========================================================================
   CONTENEDORES PRINCIPALES - Prevenir overflow
   ======================================================================== */

.container,
.container-fluid,
.row {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================================================
   ELEMENTOS QUE PUEDEN CAUSAR OVERFLOW
   ======================================================================== */

/* Prevenir que imágenes grandes causen overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Prevenir que tablas causen overflow */
table {
    max-width: 100%;
}

/* Prevenir que pre y code causen overflow */
pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ========================================================================
   RESPONSIVE - Asegurar en todos los breakpoints
   ======================================================================== */

@media (max-width: 1280px) {
    html, body {
        overflow-x: hidden !important;
    }
}

@media (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }
}

/**
 * NOTAS TÉCNICAS:
 * 
 * El problema del scroll horizontal suele estar causado por:
 * 1. Uso de 100vw cuando hay scrollbar vertical (100vw incluye scrollbar, 100% no)
 * 2. Elementos con width fijo mayor que el viewport
 * 3. Elementos posicionados absolutamente fuera del viewport
 * 4. Margins o paddings negativos que empujan contenido fuera
 * 5. Grid o flex items que se expanden más allá del contenedor
 * 
 * Esta solución:
 * ✅ Previene overflow horizontal en html y body
 * ✅ Reemplaza 100vw por 100% en mega menús
 * ✅ Limita el ancho máximo de contenedores
 * ✅ Previene overflow de elementos comunes (img, table, pre)
 * ✅ Aplica en todos los breakpoints responsive
 */