Finalizar implementación completa de UI responsive y sistema de navegación

• Logo optimizado: 'REFS' con tipografía bold y interletrado amplio
• Sistema de favoritos: Contador eliminado, filtro integrado en menú principal
• Menú hamburguesa: Breakpoint unificado a 1024px para mejor UX
• Scroll navigation: Diseño consistente entre indicator y scroll-to-top
• Console limpia: Eliminados todos los console.log y warnings
• Accesibilidad: Corregidos problemas de aria-hidden y focus management
• Toast notifications: Eliminadas para experiencia más discreta
• Diseño unificado: Ambos elementos de scroll comparten estilo y posición

🔖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: t0t

proyectos/referencias-diseno/assets/css/style.css

@@ -16,9 +16,6 @@ class FavoritesSystem {
         this.addFavoriteButtons();
         this.setupStyles();
         this.updateAllButtons();
-        this.updateHeaderCounter();
-        
-        console.log('🎯 Sistema de favoritos inicializado:', this.favorites.length, 'favoritos');
     }
 
     // ===== GESTIÓN DE ESTADO =====
@@ -37,7 +34,6 @@ class FavoritesSystem {
         try {
             localStorage.setItem(this.storageKey, JSON.stringify(this.favorites));
             this.notifySubscribers();
-            this.updateHeaderCounter();
             return true;
         } catch (error) {
             console.error('Error guardando favoritos:', error);
@@ -71,15 +67,6 @@ class FavoritesSystem {
             this.saveFavorites();
             this.updateButton(id);
 
-            // Usar el nuevo sistema de notificaciones si está disponible
-            if (window.toast) {
-                window.toast.success('Referencia añadida a favoritos', {
-                    duration: 2000,
-                    title: '❤️ Favorito añadido'
-                });
-            } else {
-                this.showNotification(`Añadido a favoritos`, 'success');
-            }
             return true;
         }
         return false;
@@ -92,15 +79,6 @@ class FavoritesSystem {
             this.saveFavorites();
             this.updateButton(id);
 
-            // Usar el nuevo sistema de notificaciones si está disponible
-            if (window.toast) {
-                window.toast.info('Referencia quitada de favoritos', {
-                    duration: 2000,
-                    title: '🗑️ Favorito eliminado'
-                });
-            } else {
-                this.showNotification(`Quitado de favoritos`, 'info');
-            }
             return true;
         }
         return false;
@@ -312,17 +290,20 @@ class FavoritesSystem {
         });
     }
 
-    updateHeaderCounter() {
-        const counter = document.getElementById('favorites-count');
-        const favoritesCount = document.querySelector('.favorites-count');
-        
-        if (counter) {
-            counter.textContent = this.favorites.length;
+
+    getCardIdFromCard(card) {
+        // Obtener ID de la card (similar a getCardId pero desde la card directamente)
+        const link = card.querySelector('.reference-link');
+        if (link && link.href) {
+            return this.urlToId(link.href);
         }
 
-        if (favoritesCount) {
-            favoritesCount.classList.toggle('has-favorites', this.favorites.length > 0);
+        const title = card.querySelector('.reference-title');
+        if (title) {
+            return this.titleToId(title.textContent);
         }
+        
+        return `ref-${Array.from(document.querySelectorAll('.reference-card')).indexOf(card)}`;
     }
 
     // ===== ESTILOS =====
@@ -441,7 +422,7 @@ class FavoritesSystem {
             }
 
             /* Responsive Mobile */
-            @media (max-width: 768px) {
+            @media (max-width: 1024px) {
                 .favorite-btn {
                     width: 36px;
                     height: 36px;

proyectos/referencias-diseno/assets/js/favorites.js

@@ -22,8 +22,6 @@ class HeaderScrollBehavior {
 
         this.bindEvents();
         this.updateHeaderHeight();
-        
-        console.log('🎯 Header scroll behavior inicializado');
     }
 
     bindEvents() {

proyectos/referencias-diseno/assets/js/header-scroll.js

@@ -13,8 +13,6 @@ class ImageLoader {
 
     init() {
         this.enhanceExistingImages();
-        
-        console.log('🖼️ Sistema de carga de imágenes inicializado');
     }
 
     enhanceExistingImages() {

proyectos/referencias-diseno/assets/js/image-loader.js

@@ -19,8 +19,20 @@ document.addEventListener('DOMContentLoaded', function() {
             const cards = document.querySelectorAll('.reference-card');
 
             cards.forEach(card => {
-                const cardCategories = card.dataset.category || '';
-                const shouldShow = category === 'all' || cardCategories.includes(category);
+                let shouldShow = false;
+                
+                if (category === 'all') {
+                    shouldShow = true;
+                } else if (category === 'favorites') {
+                    // Usar el sistema de favoritos para determinar si mostrar
+                    if (window.favorites) {
+                        const cardId = window.favorites.getCardIdFromCard(card);
+                        shouldShow = window.favorites.isFavorite(cardId);
+                    }
+                } else {
+                    const cardCategories = card.dataset.category || '';
+                    shouldShow = cardCategories.includes(category);
+                }
 
                 if (shouldShow) {
                     card.style.display = 'block';

proyectos/referencias-diseno/assets/js/main.js

@@ -17,8 +17,6 @@ class MobileMenu {
         this.createElements();
         this.setupEventListeners();
         this.setupMediaQuery();
-        
-        console.log('📱 Sistema de menú móvil inicializado');
     }
 
     createElements() {
@@ -73,15 +71,15 @@ class MobileMenu {
 
         // Resize handler
         window.addEventListener('resize', () => {
-            if (window.innerWidth > 768 && this.isOpen) {
+            if (window.innerWidth > 1024 && this.isOpen) {
                 this.closeMenu();
             }
         });
 
         // Scroll para cerrar en móvil
         let scrollTimeout;
         window.addEventListener('scroll', () => {
-            if (this.isOpen && window.innerWidth <= 768) {
+            if (this.isOpen && window.innerWidth <= 1024) {
                 clearTimeout(scrollTimeout);
                 scrollTimeout = setTimeout(() => {
                     this.closeMenu();
@@ -92,7 +90,7 @@ class MobileMenu {
 
     setupMediaQuery() {
         // Media query listener para cambios de viewport
-        const mediaQuery = window.matchMedia('(max-width: 768px)');
+        const mediaQuery = window.matchMedia('(max-width: 1024px)');
 
         const handleMediaChange = (e) => {
             if (!e.matches && this.isOpen) {
@@ -132,8 +130,6 @@ class MobileMenu {
 
         // Focus management
         this.trapFocus();
-        
-        console.log('📱 Menú móvil abierto');
     }
 
     closeMenu() {
@@ -155,8 +151,6 @@ class MobileMenu {
 
         // Devolver focus al toggle
         this.menuToggle?.focus();
-        
-        console.log('📱 Menú móvil cerrado');
     }
 
     trapFocus() {
@@ -230,8 +224,6 @@ class MobileMenu {
         }
 
         document.body.style.overflow = '';
-        
-        console.log('📱 Sistema de menú móvil destruído');
     }
 }