document.addEventListener('DOMContentLoaded', () => {
    
    // 1. CARGA DE SESIÓN 
    const nombres = localStorage.getItem('nombres') || 'Usuario';
    const area = localStorage.getItem('area') || 'Sin Área';
    const usuario_id = localStorage.getItem('usuario_id') || localStorage.getItem('id');

    if (!usuario_id) {
        window.location.href = 'login.html'; 
        return;
    }

    const txtNombre = document.getElementById('nombreUsuario');
    if (txtNombre) {
        txtNombre.textContent = `${nombres} (${area})`;
    }

    const btnLogout = document.getElementById('btnCerrarSesion');
    if (btnLogout) {
        btnLogout.addEventListener('click', () => {
            localStorage.clear();
            window.location.href = 'login.html';
        });
    }

    // 2. LÓGICA DE LOS ACORDEONES 
    const faqButtons = document.querySelectorAll('.faq-question');
    
    faqButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Cerramos cualquier otro abierto 
            const currentItem = button.parentElement;
            
            // Alternamos el estado activo en el clickeado
            currentItem.classList.toggle('active');
        });
    });

    // 3. LÓGICA DEL BUSCADOR EN TIEMPO REAL
    const searchInput = document.getElementById('kbBusqueda');
    
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            const termino = e.target.value.toLowerCase();
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                
                const textoPregunta = item.querySelector('.faq-question').innerText.toLowerCase();
                const textoRespuesta = item.querySelector('.faq-answer').innerText.toLowerCase();
                
                if (textoPregunta.includes(termino) || textoRespuesta.includes(termino)) {
                    item.classList.remove('hidden-item');
                } else {
                    item.classList.add('hidden-item');
                }
            });
        });
    }
});