// assets/js/theme.js
document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon = document.getElementById('theme-icon');

    const applyTheme = (theme) => {
        if (theme === 'dark') {
            document.documentElement.classList.add('dark-mode');
            if(themeIcon) themeIcon.classList.replace('bi-sun-fill', 'bi-moon-fill');
        } else {
            document.documentElement.classList.remove('dark-mode');
            if(themeIcon) themeIcon.classList.replace('bi-moon-fill', 'bi-sun-fill');
        }
    };

    // Aplica el tema guardado al cargar la página.
    // Esto se hace en el head para evitar FOUC, pero lo mantenemos aquí para el ícono.
    const storedTheme = localStorage.getItem('theme') || 'light';
    applyTheme(storedTheme);


    if(themeToggle) {
        themeToggle.addEventListener('click', () => {
            const isDarkMode = document.documentElement.classList.contains('dark-mode');
            const newTheme = isDarkMode ? 'light' : 'dark';
            
            localStorage.setItem('theme', newTheme);
            applyTheme(newTheme);
        });
    }
});