renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Activar Hero Section ';
$html .= ' ';
$html .= '
';
$html .= '
';
$showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar en Desktop ';
$html .= ' ';
$html .= '
';
$html .= '
';
$showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar en Mobile ';
$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', false);
$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('heroVisibilityHome', 'Home', 'bi-house', $showOnHome);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('heroVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
$html .= '
';
$html .= '
';
// 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 .= ' ';
$showCategories = $this->renderer->getFieldValue($componentId, 'content', 'show_categories', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar badges de categorías ';
$html .= ' ';
$html .= '
';
$html .= '
';
$showBadgeIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_badge_icon', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar ícono en badges ';
$html .= ' ';
$html .= '
';
$html .= '
';
$badgeIconClass = $this->renderer->getFieldValue($componentId, 'content', 'badge_icon_class', 'bi-folder-fill');
$html .= '
';
$html .= ' ';
$html .= ' ';
$html .= ' Usa clases de Bootstrap Icons ';
$html .= '
';
$titleTag = $this->renderer->getFieldValue($componentId, 'content', 'title_tag', 'h1');
$html .= '
';
$html .= ' ';
$html .= ' ';
$html .= ' ';
$html .= ' H1 (recomendado para SEO) ';
$html .= ' H2 ';
$html .= ' DIV (sin semántica) ';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= '
';
$gradientStart = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_start', '#1e3a5f');
$html .= $this->buildColorPicker('heroGradientStart', 'Degradado (inicio)', 'circle-half', $gradientStart);
$gradientEnd = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_end', '#2c5282');
$html .= $this->buildColorPicker('heroGradientEnd', 'Degradado (fin)', 'circle-fill', $gradientEnd);
$titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#FFFFFF');
$html .= $this->buildColorPicker('heroTitleColor', 'Color título', 'fonts', $titleColor);
$badgeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_bg_color', '#FFFFFF');
$html .= $this->buildColorPicker('heroBadgeBgColor', 'Fondo badges', 'badge', $badgeBgColor);
$html .= '
';
$html .= '
';
$badgeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_text_color', '#FFFFFF');
$html .= $this->buildColorPicker('heroBadgeTextColor', 'Texto badges', 'card-text', $badgeTextColor);
$badgeIconColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_icon_color', '#FFB800');
$html .= $this->buildColorPicker('heroBadgeIconColor', 'Ícono badges', 'star-fill', $badgeIconColor);
$badgeHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'badge_hover_bg', '#FF8600');
$html .= $this->buildColorPicker('heroBadgeHoverBg', 'Badges (hover)', 'hand-index', $badgeHoverBg);
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
$boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 4px 16px rgba(30, 58, 95, 0.25)');
$html .= '
';
$html .= ' ';
$html .= ' Sombra del hero';
$html .= ' ';
$html .= '
';
$titleTextShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'title_text_shadow', '1px 1px 2px rgba(0, 0, 0, 0.2)');
$html .= '
';
$html .= ' ';
$html .= ' Sombra del título';
$html .= ' ';
$html .= '
';
$badgeBackdropBlur = $this->renderer->getFieldValue($componentId, 'visual_effects', 'badge_backdrop_blur', '10px');
$html .= '
';
$html .= ' ';
$html .= ' Blur de fondo badges';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '