'; // Columna izquierda $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildBehaviorGroup($componentId); $html .= '

'; // Columna derecha $html .= '

'; $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('ctaEnabled', 'Activar CTA box', 'bi-power', $enabled); // show_on_desktop $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('ctaShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); // show_on_mobile $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', false); $html .= $this->buildSwitch('ctaShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile); // show_on_pages $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'posts'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Contenido'; $html .= '

'; // title $title = $this->renderer->getFieldValue($componentId, 'content', 'title', '¿Listo para potenciar tus proyectos?'); $html .= '

'; $html .= ' Titulo'; $html .= ' '; $html .= '

'; // description $description = $this->renderer->getFieldValue($componentId, 'content', 'description', 'Accede a nuestra biblioteca completa de APUs y herramientas profesionales.'); $html .= '

'; $html .= ' Descripcion'; $html .= ' '; $html .= '

'; // button_text $buttonText = $this->renderer->getFieldValue($componentId, 'content', 'button_text', 'Solicitar Demo'); $html .= '

'; $html .= ' Texto del boton'; $html .= ' '; $html .= '

'; // button_icon $buttonIcon = $this->renderer->getFieldValue($componentId, 'content', 'button_icon', 'bi bi-calendar-check'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Icono del boton'; $html .= ' '; $html .= ' '; $html .= ' Clase de Bootstrap Icons'; $html .= '

'; // button_action $buttonAction = $this->renderer->getFieldValue($componentId, 'content', 'button_action', 'modal'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Accion del boton'; $html .= ' '; $html .= ' '; $html .= '

'; // button_link $buttonLink = $this->renderer->getFieldValue($componentId, 'content', 'button_link', '#contactModal'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' URL/ID destino'; $html .= ' '; $html .= ' '; $html .= ' Para modal usa #nombreModal, para scroll usa #idSeccion'; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Comportamiento'; $html .= '

'; // text_align $textAlign = $this->renderer->getFieldValue($componentId, 'behavior', 'text_align', 'center'); $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Alineacion del texto'; $html .= ' '; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Tipografia'; $html .= '

'; $html .= '

'; // title_font_size $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '1.25rem'); $html .= '

'; $html .= ' Tamano titulo'; $html .= ' '; $html .= '

'; // title_font_weight $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '700'); $html .= '

'; $html .= ' Peso titulo'; $html .= ' '; $html .= '

'; $html .= '

'; // description_font_size $descFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'description_font_size', '0.9rem'); $html .= '

'; $html .= ' Tamano descripcion'; $html .= ' '; $html .= '

'; // button_font_size $buttonFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'button_font_size', '1rem'); $html .= '

'; $html .= ' Tamano boton'; $html .= ' '; $html .= '

'; $html .= '

'; // button_font_weight $buttonFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'button_font_weight', '700'); $html .= '

'; $html .= ' Peso boton'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Colores'; $html .= '

'; // Colores principales $html .= '

Contenedor

'; $html .= '

'; $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#FF8600'); $html .= $this->buildColorPicker('ctaBackgroundColor', 'Fondo', $bgColor); $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#ffffff'); $html .= $this->buildColorPicker('ctaTitleColor', 'Titulo', $titleColor); $html .= '

'; $html .= '

'; $descColor = $this->renderer->getFieldValue($componentId, 'colors', 'description_color', 'rgba(255, 255, 255, 0.95)'); $html .= $this->buildColorPicker('ctaDescriptionColor', 'Descripcion', $descColor); $html .= '

'; // Colores del boton $html .= '

Boton

'; $html .= '

'; $buttonBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'button_background_color', '#ffffff'); $html .= $this->buildColorPicker('ctaButtonBgColor', 'Fondo', $buttonBgColor); $buttonTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'button_text_color', '#FF8600'); $html .= $this->buildColorPicker('ctaButtonTextColor', 'Texto', $buttonTextColor); $html .= '

'; // Colores hover $html .= '

Boton Hover

'; $html .= '

'; $buttonHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'button_hover_background', '#0E2337'); $html .= $this->buildColorPicker('ctaButtonHoverBg', 'Fondo hover', $buttonHoverBg); $buttonHoverText = $this->renderer->getFieldValue($componentId, 'colors', 'button_hover_text_color', '#ffffff'); $html .= $this->buildColorPicker('ctaButtonHoverText', 'Texto hover', $buttonHoverText); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Espaciado'; $html .= '

'; $html .= '

'; // container_padding $containerPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding', '24px'); $html .= '

'; $html .= ' Padding contenedor'; $html .= ' '; $html .= '

'; // title_margin_bottom $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '1rem'); $html .= '

'; $html .= ' Margen titulo'; $html .= ' '; $html .= '

'; $html .= '

'; // description_margin_bottom $descMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'description_margin_bottom', '1rem'); $html .= '

'; $html .= ' Margen descripcion'; $html .= ' '; $html .= '

'; // button_padding $buttonPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'button_padding', '0.75rem 1.5rem'); $html .= '

'; $html .= ' Padding boton'; $html .= ' '; $html .= '

'; $html .= '

'; // icon_margin_right $iconMarginRight = $this->renderer->getFieldValue($componentId, 'spacing', 'icon_margin_right', '0.5rem'); $html .= '

'; $html .= ' Margen icono'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '

'; $html .= '

'; // border_radius $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px'); $html .= '

'; $html .= ' Radio contenedor'; $html .= ' '; $html .= '

'; // button_border_radius $buttonBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_radius', '8px'); $html .= '

'; $html .= ' Radio boton'; $html .= ' '; $html .= '

'; $html .= '

'; // box_shadow $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 4px 12px rgba(255, 133, 0, 0.2)'); $html .= '

'; $html .= ' Sombra'; $html .= ' '; $html .= '

'; $html .= '

'; // transition_duration $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '

'; $html .= ' Duracion transicion'; $html .= ' '; $html .= '

'; $html .= '