</div> <footer class="mt-20 border-t border-slate-200 py-6 px-10">
                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                    <p class="text-[11px] text-slate-400 font-medium uppercase tracking-widest">
                        © <?php echo date('Y'); ?> Unidad Educativa "Capitán Giovanni Calles"
                    </p>
                    <div class="flex items-center gap-4 text-slate-300">
                        <span class="text-[10px] font-bold uppercase">Soporte Tecnológico Coca</span>
                        <div class="h-4 w-px bg-slate-200"></div>
                        <i class="fas fa-location-dot"></i>
                    </div>
                </div>
            </footer>
        </main>
    </div> <script>
        const btnToggle = document.getElementById('btn-toggle');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');

        // Función para abrir/cerrar el menú en móviles
        function toggleSidebar() {
            sidebar.classList.toggle('-translate-x-full');
            overlay.classList.toggle('hidden');
            // Bloquea el scroll del body cuando el menú está abierto
            document.body.classList.toggle('overflow-hidden');
        }

        btnToggle.addEventListener('click', toggleSidebar);
        overlay.addEventListener('click', toggleSidebar);

        // Cerrar menú si se cambia de tamaño de pantalla a desktop
        window.addEventListener('resize', () => {
            if (window.innerWidth >= 1024) {
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            } else {
                sidebar.classList.add('-translate-x-full');
            }
        });
    </script>
</body>
</html>