renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Activar TopBar ';
$html .= ' ';
$html .= '
';
$html .= '
';
// Switch: Show on Mobile
$showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar en Mobile (<768px) ';
$html .= ' ';
$html .= '
';
$html .= '
';
// Switch: Show on Desktop
$showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar en Desktop (≥768px) ';
$html .= ' ';
$html .= '
';
$html .= '
';
// =============================================
// Checkboxes de visibilidad por tipo de página
// Grupo especial: _page_visibility
// =============================================
$html .= '
';
$html .= '
';
$html .= '
';
$showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true);
$showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true);
$showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true);
$showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false);
$showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityHome', 'Home', 'bi-house', $showOnHome);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
$html .= '
';
$html .= '
';
// =============================================
// Reglas de exclusion avanzadas
// Grupo especial: _exclusions (Plan 99.11)
// =============================================
$exclusionPartial = new ExclusionFormPartial($this->renderer);
$html .= $exclusionPartial->render($componentId, 'topBar');
// Switch: CSS Crítico
$isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' CSS Crítico ';
$html .= ' Inyectar CSS en <head> para optimizar LCP ';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
// Grid 2x3 de color pickers
$html .= '
';
// Background Color
$bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#0E2337');
$html .= $this->buildColorPicker('topBarBackgroundColor', 'Color de fondo', 'paint-bucket', $bgColor);
// Text Color
$textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF');
$html .= $this->buildColorPicker('topBarTextColor', 'Color de texto', 'fonts', $textColor);
// Label Color
$labelColor = $this->renderer->getFieldValue($componentId, 'colors', 'label_color', '#FF8600');
$html .= $this->buildColorPicker('topBarLabelColor', 'Color etiqueta', 'tag-fill', $labelColor);
// Icon Color
$iconColor = $this->renderer->getFieldValue($componentId, 'colors', 'icon_color', '#FF8600');
$html .= $this->buildColorPicker('topBarIconColor', 'Color ícono', 'star', $iconColor);
$html .= '
';
// Row 2 de color pickers
$html .= '
';
// Link Color
$linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#FFFFFF');
$html .= $this->buildColorPicker('topBarLinkColor', 'Color enlace', 'link', $linkColor);
// Link Hover Color
$linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#FF8600');
$html .= $this->buildColorPicker('topBarLinkHoverColor', 'Color enlace (hover)', 'hand-index', $linkHoverColor);
$html .= '
';
$html .= '
';
$html .= '