/* ==========================================================================
   ANIMACIONES (KEYFRAMES)
   ========================================================================== */
@keyframes fadeInUp { 
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==========================================================================
   MEGA MENÚ: DISTRIBUCIÓN 2 COLUMNAS (CORRECCIÓN DE ALINEACIÓN IZQUIERDA)
   ========================================================================== */
.mega-menu-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Asegura que las columnas empiecen a la izquierda */
    align-items: stretch !important;
    text-align: left !important;
    direction: ltr !important; /* Fuerza dirección de izquierda a derecha */
    padding: 0 !important;
    min-width: 75rem !important;
}


/* COLUMNA IZQUIERDA: Pestañas */
.mega-menu__tabs {
    width: 25rem !important;
    min-width: 25rem !important;
    background-color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid #333 !important;
}



.mega-menu__tabs .tab-link {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #222;
    color: #fff;
    cursor: pointer;
    text-align: left !important; /* Forzamos texto a la izquierda */
    font-size: 1rem;
    transition: background-color 0.2s;
}

.mega-menu__tabs .tab-link.active,
.mega-menu__tabs .tab-link:hover {
    background-color: var(--accent-red);
}

/* COLUMNA DERECHA: Resultados (DONDE ESTABA EL ERROR) */
.mega-menu__results {
    flex: 1 !important;
    background-color: #0d0d0d !important;
    padding: 2.5rem !important;
    margin: 0 !important;
    

}

/* Contenido de cada categoría */
.tab-content { 
    display: none; 
    width: 100%; 
}

.tab-content.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;    /* Forzado para los programas */
    width: 100% !important;
    animation: fadeIn 300ms ease forwards;
}

/* Estilo para los enlaces o elementos de programa */
.tab-content a,
.tab-content li,
.tab-content p {
    display: block !important;
    width: auto;
    text-align: left !important;
    margin-left: 0 !important;   /* Eliminamos cualquier margen que lo centre */
    margin-right: auto !important; 
    padding-left: 0 !important;
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    padding: 0.8rem 0;
}

.tab-content a:hover {
    color: var(--accent-red);
}

/* Reset por si get_menu_programas() devuelve una lista <ul> */
.tab-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

/* Asegurar que el contenedor padre sea el punto de referencia */
.menu-item-has-mega-menu {
    position: relative;
}

/* Ocultar por defecto y mostrar en Hover */
.mega-menu-container {
    display: none !important; /* Sobrescribimos el flex por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.menu-item-has-mega-menu:hover .mega-menu-container {
    display: flex !important; /* Activamos el flex que ya definiste */
}

/* Estilo adicional para el link "Ver más" que agregué en el PHP */
.ver-mas {
    margin-top: 1.5rem !important;
    font-weight: bold;
    font-size: 1.1rem !important;
    color: var(--accent-red) !important;
    border-bottom: 1px solid transparent;
}
.ver-mas:hover {
    border-bottom-color: var(--accent-red);
}



/* ==========================================================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media (width >= 768px){
    .menu__nav{
        width: 50rem; 
    }
   .main-layout{
        grid-template-columns: 1fr 34rem;
   }
   .post__author, .post__date{
        font-size: 1.8rem;
    }
    .post__body p{
        font-size: 1.8rem;
    }
}

@media (width >= 1280px){
    .container{
        width: min(95%, 180rem);
    }
    .menu__container{
        gap: 1rem;
    }
    .menu__nav {
        padding: 0;
        width: auto;
        height: auto;
        border-left: none;
        position: static;
        overflow-y: visible;

        & ul{
            flex-direction: row;
            gap: 1.5rem;
            align-items: center;
        }
        & li{
            border-bottom: none;
        }
        & a{
            font-size: clamp(1.2rem, 0.5vw, 1.2rem);
        }
    }
    .menu__toggle, .menu__close { 
        display: none; 
    }
    .dropdown__content{
        top: 4rem;
        min-width: 22rem;
        position: absolute;

        & a{
            transition: color 300ms ease, background-color 300ms ease;
            
            &:hover{
                color: var(--white);
                background-color: var(--accent-red);
            }
        }
    }
    .post {
        & h1 {
            font-size: 4.4rem;
        }
    }
}

/* Fuerza alineación izquierda en mega menú resultados */
.mega-menu-container {
    left: 0 !important;
    right: auto !important;
    text-align: left !important;
    direction: ltr !important;
    justify-content: flex-start !important;
}

.mega-menuresults,
.tab-content {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
}

.tab-content ul,
.tab-content li {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ajuste específico solicitado para pantallas medianas/grandes */
@media (min-width: 1360px) and (max-width: 1680px) {
    .mega-menu__tabs .tab-link {
        padding: 1px 6px !important;
    }
}

@media (max-width: 1024px) {
    /* 1. Ajuste del contenedor padre para permitir el despliegue */
    .menu-item-has-mega-menu {
        position: relative !important;
    }

    /* 2. Forzamos que el contenedor ocupe el ancho visual y sea desplazable */
    .mega-menu-container {
        display: none !important; /* Se controla con la clase .active-mobile */
        position: relative !important; /* Cambia de absolute a relativo para empujar el contenido hacia abajo */
        top: 0 !important;
        left: 0 !important;
        min-width: 100% !important;
        width: 100% !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: none !important;
        background-color: #1a1a1a !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Clase para mostrar el menú al hacer click en el padre (JS necesario abajo) */
    .menu-item-has-mega-menu.open-mobile .mega-menu-container {
        display: flex !important;
    }

    /* 3. TABS: Fila horizontal con scroll lateral */
    .mega-menu__tabs {
        width: 100% !important;
        min-width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        border-right: none !important;
        border-bottom: 1px solid #333 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .mega-menu__tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */

    .mega-menu__tabs .tab-link {
        flex: 0 0 auto !important; /* Evita que las pestañas se encojan */
        padding: 1.2rem 1.5rem !important;
        font-size: 1.2rem !important;
        border-bottom: 2px solid transparent !important;
    }

    .mega-menu__tabs .tab-link.active {
        border-bottom: 2px solid var(--accent-red) !important;
        background-color: transparent !important;
    }

    /* 4. RESULTADOS: Ajuste de espaciado */
    .mega-menu__results {
        width: 100% !important;
        padding: 1.5rem !important;
        background-color: #0d0d0d !important;
        min-height: 200px;
    }

    /* 5. CONTENIDO INTERNO: Forzado de legibilidad */
    .tab-content.active {
        display: block !important; /* En móvil es mejor bloque que flex para listas largas */
    }

    .tab-content a, 
    .tab-content li {
        width: 100% !important;
        padding: 1.2rem 0 !important;
        border-bottom: 1px solid #222 !important;
        font-size: 1.3rem !important;
    }
}