FASE 1 COMPLETADA: Limpieza de defaults hardcodeados

Eliminados todos los componentes incorrectos y defaults duplicados
preparando el sistema para la implementación correcta con tabla de BD.

ARCHIVOS ELIMINADOS (11 archivos):
- admin/assets/js/component-navbar.js
- admin/assets/css/component-navbar.css
- admin/components/component-top-bar.php
- admin/components/component-navbar.php
- admin/components/component-hero-section.php
- admin/components/component-lets-talk-button.php
- admin/includes/sanitizers/class-topbar-sanitizer.php
- admin/includes/sanitizers/class-navbar-sanitizer.php
- admin/includes/sanitizers/class-herosection-sanitizer.php
- admin/includes/sanitizers/class-letstalkbutton-sanitizer.php
- template-parts/navbar-configurable.php

ARCHIVOS MODIFICADOS (6 archivos):
- admin/includes/class-admin-menu.php: Eliminados enqueues de componentes
- admin/includes/class-settings-manager.php: Limpiados get_defaults() y sanitize_settings()
- admin/includes/class-validator.php: Eliminado validate_top_bar()
- admin/pages/main.php: Reducido de 521 a 37 líneas (93%)
- admin/assets/js/admin-app.js: Reducido de 431 a 219 líneas (49%)
- header.php: Eliminado código de Top Bar (92 líneas)

BASE DE DATOS:
- Eliminada opción 'apus_theme_settings' de wp_options

RESUMEN:
- 11 archivos eliminados
- 6 archivos limpiados
- 1 opción de BD eliminada
- Todos los defaults hardcodeados eliminados
- Sistema preparado para FASE 2 (crear tabla de defaults)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

admin/assets/js/admin-app.js

@@ -30,14 +30,18 @@ const AdminPanel = {
 	 */
 	bindEvents() {
 		// Botón guardar
-		document.getElementById('saveSettings').addEventListener('click', () => {
-			this.saveSettings();
-		});
+		const saveBtn = document.getElementById('saveSettings');
+		if (saveBtn) {
+			saveBtn.addEventListener('click', () => {
+				this.saveSettings();
+			});
+		}
 
 		// Detectar cambios en formularios
 		const enableSaveButton = () => {
 			this.STATE.hasChanges = true;
-			document.getElementById('saveSettings').disabled = false;
+			const btn = document.getElementById('saveSettings');
+			if (btn) btn.disabled = false;
 		};
 
 		document.querySelectorAll('input, select, textarea').forEach(input => {
@@ -55,145 +59,6 @@ const AdminPanel = {
 				this.switchTab(tab);
 			});
 		});
-
-		// Contador de caracteres
-		this.setupCharacterCounter();
-
-		// Vista previa en tiempo real
-		this.setupLivePreview();
-	},
-
-	/**
-	 * Configurar contador de caracteres para textarea
-	 */
-	setupCharacterCounter() {
-		const messageTextarea = document.getElementById('topBarMessageText');
-		if (!messageTextarea) return;
-
-		messageTextarea.addEventListener('input', () => {
-			const count = messageTextarea.value.length;
-			const maxLength = 250;
-			const percentage = (count / maxLength) * 100;
-
-			const counter = document.getElementById('topBarMessageTextCount');
-			const progress = document.getElementById('topBarMessageTextProgress');
-
-			if (counter) {
-				counter.textContent = count;
-
-				// Cambiar color según proximidad al límite
-				counter.classList.remove('text-danger', 'text-warning', 'text-muted');
-
-				if (count > 230) {
-					counter.classList.add('text-danger');
-				} else if (count > 200) {
-					counter.classList.add('text-warning');
-				} else {
-					counter.classList.add('text-muted');
-				}
-			}
-
-			// Actualizar progress bar
-			if (progress) {
-				progress.style.width = percentage + '%';
-				progress.setAttribute('aria-valuenow', count);
-
-				// Cambiar color del progress bar
-				progress.classList.remove('bg-orange-primary', 'bg-warning', 'bg-danger');
-				if (count > 230) {
-					progress.classList.add('bg-danger');
-				} else if (count > 200) {
-					progress.classList.add('bg-warning');
-				} else {
-					progress.classList.add('bg-orange-primary');
-				}
-			}
-		});
-
-		// Trigger inicial para mostrar count actual
-		messageTextarea.dispatchEvent(new Event('input'));
-	},
-
-	/**
-	 * Configurar vista previa en tiempo real
-	 */
-	setupLivePreview() {
-		const preview = document.getElementById('topBarPreview');
-		if (!preview) return;
-
-		// Campos que afectan la vista previa
-		const fields = {
-			iconClass: document.getElementById('topBarIconClass'),
-			showIcon: document.getElementById('topBarShowIcon'),
-			highlightText: document.getElementById('topBarHighlightText'),
-			messageText: document.getElementById('topBarMessageText'),
-			linkText: document.getElementById('topBarLinkText'),
-			showLink: document.getElementById('topBarShowLink'),
-			bgColor: document.getElementById('topBarBgColor'),
-			textColor: document.getElementById('topBarTextColor'),
-			highlightColor: document.getElementById('topBarHighlightColor'),
-			fontSize: document.getElementById('topBarFontSize')
-		};
-
-		// Función para actualizar la vista previa
-		const updatePreview = () => {
-			// Obtener valores
-			const iconClass = fields.iconClass.value || 'bi bi-megaphone-fill';
-			const showIcon = fields.showIcon.checked;
-			const highlightText = fields.highlightText.value;
-			const messageText = fields.messageText.value || 'Tu mensaje aquí...';
-			const linkText = fields.linkText.value || 'Ver más';
-			const showLink = fields.showLink.checked;
-			const bgColor = fields.bgColor.value || '#0E2337';
-			const textColor = fields.textColor.value || '#ffffff';
-			const highlightColor = fields.highlightColor.value || '#FF8600';
-
-			// Mapeo de tamaños de fuente
-			const fontSizeMap = {
-				'small': '0.8rem',
-				'normal': '0.9rem',
-				'large': '1rem'
-			};
-			const fontSize = fontSizeMap[fields.fontSize.value] || '0.9rem';
-
-			// Construir HTML de la vista previa
-			let html = '';
-
-			// Icono
-			if (showIcon && iconClass) {
-				html += `<i class="${iconClass}" style="font-size: 1.2rem; color: ${highlightColor};"></i>`;
-			}
-
-			// Texto destacado
-			if (highlightText) {
-				html += `<span style="font-weight: 700; color: ${highlightColor};">${highlightText}</span>`;
-			}
-
-			// Mensaje principal
-			html += `<span style="flex: 1; min-width: 300px; text-align: center;">${messageText}</span>`;
-
-			// Enlace
-			if (showLink && linkText) {
-				html += `<a href="#" style="color: ${textColor}; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">${linkText}</a>`;
-			}
-
-			// Actualizar la vista previa
-			preview.innerHTML = html;
-			preview.style.backgroundColor = bgColor;
-			preview.style.color = textColor;
-			preview.style.fontSize = fontSize;
-		};
-
-		// Agregar listeners a todos los campos
-		Object.values(fields).forEach(field => {
-			if (field) {
-				field.addEventListener('input', updatePreview);
-				field.addEventListener('change', updatePreview);
-			}
-		});
-
-		// Actualización inicial
-		updatePreview();
 	},
 
 	/**
@@ -282,7 +147,8 @@ const AdminPanel = {
 
 			if (response.data.success) {
 				this.STATE.hasChanges = false;
-				document.getElementById('saveSettings').disabled = true;
+				const btn = document.getElementById('saveSettings');
+				if (btn) btn.disabled = true;
 				this.showNotice('Configuración guardada correctamente', 'success');
 			} else {
 				this.showNotice(response.data.data.message || 'Error al guardar', 'error');
@@ -297,34 +163,12 @@ const AdminPanel = {
 
 	/**
 	 * Recolectar datos del formulario
-	 * Cada componente agregará su sección aquí
+	 * Cada componente agregará su sección aquí cuando se implemente
 	 */
 	collectFormData() {
 		return {
 			components: {
-				top_bar: {
-					enabled: document.getElementById('topBarEnabled').checked,
-					show_on_mobile: document.getElementById('topBarShowOnMobile').checked,
-					show_on_desktop: document.getElementById('topBarShowOnDesktop').checked,
-					icon_class: document.getElementById('topBarIconClass').value.trim(),
-					show_icon: document.getElementById('topBarShowIcon').checked,
-					highlight_text: document.getElementById('topBarHighlightText').value.trim(),
-					message_text: document.getElementById('topBarMessageText').value.trim(),
-					link_text: document.getElementById('topBarLinkText').value.trim(),
-					link_url: document.getElementById('topBarLinkUrl').value.trim(),
-					link_target: document.getElementById('topBarLinkTarget').value,
-					show_link: document.getElementById('topBarShowLink').checked,
-					custom_styles: {
-						background_color: this.getColorValue('topBarBgColor', ''),
-						text_color: this.getColorValue('topBarTextColor', ''),
-						highlight_color: this.getColorValue('topBarHighlightColor', ''),
-						link_hover_color: this.getColorValue('topBarLinkHoverColor', ''),
-						font_size: document.getElementById('topBarFontSize').value
-					}
-				}
-				// Navbar - Pendiente
-				// Hero - Pendiente
-				// Footer - Pendiente
+				// Los componentes se agregarán aquí cuando se ejecute el algoritmo
 			}
 		};
 	},
@@ -335,62 +179,7 @@ const AdminPanel = {
 	renderAllComponents() {
 		const components = this.STATE.settings.components || {};
 
-		// Top Bar
-		if (components.top_bar) {
-			this.renderTopBar(components.top_bar);
-		}
-		// Navbar - Pendiente
-		// Hero - Pendiente
-		// Footer - Pendiente
-	},
-
-	/**
-	 * Renderizar Top Bar
-	 */
-	renderTopBar(topBar) {
-		document.getElementById('topBarEnabled').checked = topBar.enabled !== undefined ? topBar.enabled : true;
-		document.getElementById('topBarShowOnMobile').checked = topBar.show_on_mobile !== undefined ? topBar.show_on_mobile : true;
-		document.getElementById('topBarShowOnDesktop').checked = topBar.show_on_desktop !== undefined ? topBar.show_on_desktop : true;
-		document.getElementById('topBarIconClass').value = topBar.icon_class || 'bi bi-megaphone-fill';
-		document.getElementById('topBarShowIcon').checked = topBar.show_icon !== undefined ? topBar.show_icon : true;
-		document.getElementById('topBarHighlightText').value = topBar.highlight_text || 'Nuevo:';
-		document.getElementById('topBarMessageText').value = topBar.message_text || 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.';
-		document.getElementById('topBarLinkText').value = topBar.link_text || 'Ver Catálogo';
-		document.getElementById('topBarLinkUrl').value = topBar.link_url || '/catalogo';
-		document.getElementById('topBarLinkTarget').value = topBar.link_target || '_self';
-		document.getElementById('topBarShowLink').checked = topBar.show_link !== undefined ? topBar.show_link : true;
-
-		// Estilos personalizados
-		if (topBar.custom_styles) {
-			if (topBar.custom_styles.background_color) {
-				document.getElementById('topBarBgColor').value = topBar.custom_styles.background_color;
-			}
-			if (topBar.custom_styles.text_color) {
-				document.getElementById('topBarTextColor').value = topBar.custom_styles.text_color;
-			}
-			if (topBar.custom_styles.highlight_color) {
-				document.getElementById('topBarHighlightColor').value = topBar.custom_styles.highlight_color;
-			}
-			if (topBar.custom_styles.link_hover_color) {
-				document.getElementById('topBarLinkHoverColor').value = topBar.custom_styles.link_hover_color;
-			}
-			document.getElementById('topBarFontSize').value = topBar.custom_styles.font_size || 'normal';
-		}
-
-		// Trigger contador de caracteres
-		const messageTextarea = document.getElementById('topBarMessageText');
-		if (messageTextarea) {
-			messageTextarea.dispatchEvent(new Event('input'));
-		}
-	},
-
-	/**
-	 * Utilidad: Obtener valor de color con fallback
-	 */
-	getColorValue(inputId, defaultValue) {
-		const input = document.getElementById(inputId);
-		const value = input ? input.value.trim() : '';
-		return value || defaultValue;
+		// Los métodos render de componentes se llamarán aquí cuando se implementen
 	},
 
 	/**