<t t-name="website.user-apps-documentmanager">
    <t t-call="website.layout">
        <div id="wrap" class="oe_structure oe_empty"><section class="s_process_steps pt72 o_colored_level pb0" data-vcss="002" data-vxml="002" data-snippet="s_process_steps" data-name="Pasos">
        <svg class="s_process_step_svg_defs position-absolute">
            <defs>
                <marker class="s_process_steps_arrow_head" markerwidth="15" markerheight="10" refx="6" refy="6" orient="auto" id="s_process_steps_arrow_head1737994193080">
                    <path d="M 2,2 L10,6 L2,10 L6,6 L2,2" vector-effect="non-scaling-size" style="fill: rgb(183, 59, 35);"/>
                </marker>
            </defs>
        </svg>
        <div class="container">
            <h2 class="mb-4 text-center h3-fs">Proceso de Generación de&amp;nbsp;Propuesta</h2>
            <div class="row g-0">
                
                <div class="col-lg-3 s_process_step position-relative pt24 pb24 o_colored_level" style="box-shadow: none;">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewbox="0 0 210.5 80" preserveaspectratio="none" style="left: calc(50% + 56px); height: 80px; width: calc(100% - 112px);">
                        <path d="" vector-effect="non-scaling-stroke" marker-end="" style="stroke: rgb(183, 59, 35);"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center o_default_snippet_text">1</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Cargar información</h3>
                        <p>Cargue los detalles de la propuesta a realizar</p>
                    </div>
                </div><div class="col-lg-3 s_process_step position-relative pt24 pb24 o_colored_level" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px;">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewbox="0 0 210.5 80" preserveaspectratio="none" style="left: calc(50% + 56px); height: 80px; width: calc(100% - 112px);">
                        <path d="" vector-effect="non-scaling-stroke" marker-end="" style="stroke: rgb(183, 59, 35);"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center o_default_snippet_text">2</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Analisis de propuesta</h3>
                        <p>Analice la información previa a la generación de la propuesta</p>
                    </div>
                </div>
                <div class="col-lg-3 s_process_step position-relative pt24 pb24 o_colored_level box-shadow" style="box-shadow: none;">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewbox="0 0 210.5 80" preserveaspectratio="none" style="left: calc(50% + 56px); height: 80px; width: calc(100% - 112px);">
                        <path d="" vector-effect="non-scaling-stroke" marker-end="" style="stroke: rgb(183, 59, 35);"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center o_default_snippet_text">3</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Generación de propuesta</h3>
                        <p>Procesado de información y generación de propesta definitiva</p>
                    </div>
                </div>
                <div class="col-lg-3 s_process_step position-relative pt24 pb24 o_colored_level" style="box-shadow: none;">
                    <svg class="s_process_step_connector position-absolute z-index-1" viewbox="0 0 100 20" preserveaspectratio="none">
                        <path d="M 0 10 L 100 10" vector-effect="non-scaling-stroke" marker-end="" style="stroke: rgb(183, 59, 35);"/>
                    </svg>
                    <div class="s_process_step_number d-flex align-items-center justify-content-center mx-auto rounded-circle bg-primary-light" data-name="Step Number">
                        <h3 class="mb-0 text-primary text-center o_default_snippet_text">4</h3>
                    </div>
                    <div class="s_process_step_content mt-3 px-3 text-center">
                        <h3 class="h4-fs">Resultado final</h3>
                        <p>Descargue la información generada de acuerdo a sus especificaciones</p>
                    </div>
                </div>
            </div>
        </div>
    </section><section class="s_embed_code pt64 pb64 o_colored_level text-center" data-snippet="s_embed_code" data-name="Incrustar código">
        <template class="s_embed_code_saved"><div id="process-steps">
    
    <div id="step1-view">
        <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form" data-name="Formulario">
            <div class="container-fluid">
                <form action="/website/form/" id="customForm" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                    <div class="s_website_form_rows row s_col_no_bgcolor">
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="company_name">
                                    Nombre de empresa<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="company_name" required="1" data-fill-with="company_name" id="company_name"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="social">
                                    Razón Social
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="social" data-fill-with="social" id="social"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="template_pdf">
                                    Plantilla PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="template_file_name" name="template_file_name" readonly="" placeholder="Nombre del archivo"/>
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('template_pdf').click();">
                                        Subir Archivo
                                    </button>
                                    <input type="file" id="template_pdf" name="Plantilla" class="hidden-file-input" onchange="handleFileChange('template_pdf', 'template_file_name')" required=""/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="specification_pdf">
                                    Pliego PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="specification_file_name" name="specification_file_name" readonly="" placeholder="Nombre del archivo"/>
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('specification_pdf').click();">
                                    Subir Archivo
                                    </button>
                                    <input type="file" id="specification_pdf" name="Pliego" class="hidden-file-input" onchange="handleFileChange('specification_pdf', 'specification_file_name')" required=""/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="procesamiento">
                                    Tipo de procesamiento
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="procesamiento" data-fill-with="procesamiento" id="procesamiento"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="aditional">
                                    Detalles adicionales
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input resizable-textarea align-left" name="aditional" id="aditional" rows="4" placeholder="Escriba los detalles aquí..."/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div class="col-12 text-end">
                            <button type="button" class="custom-submit-button" onclick="submitCustomForm()">Cargar</button>
                        </div>
                       
                    </div>
                </form>
            </div>
        </section>
        
        <style>
            /* Alinear las etiquetas y los campos a la izquierda */
            .align-left {
                text-align: left;
            }
        
            /* Hacer textarea más grande y ajustable */
            .resizable-textarea {
                min-height: 150px;
                resize: vertical; /* Permitir redimensionamiento vertical */
            }
        
            /* Botón personalizado para cargar archivos */
            .custom-file-button {
                display: inline-block;
                padding: 10px 20px;
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                line-height: 24px;
                white-space: nowrap;
                background-color: rgb(231, 233, 237);
                color: rgb(33, 37, 41);
                border: 1px solid rgba(33, 37, 41, 0.15);
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.05s ease-in-out, border-color 0.05s ease-in-out;
            }
        
            .custom-file-button:hover {
                background-color: rgb(200, 200, 200);
            }
        
            /* Ocultar elementos generados automáticamente por Odoo */
            .o_files_zone, .o_file_block, .o_add_files_button {
                display: none !important;
            }
        
            /* Ocultar el input de tipo archivo */
            .hidden-file-input {
                position: absolute;
                left: -9999px;
            }
        
            /* Botón personalizado para enviar formulario */
            .custom-submit-button {
                padding: 12px 30px;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                background-color: #007bff;
                border: 1px solid #007bff;
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            }
        
            .custom-submit-button:hover {
                background-color: #0056b3;
                border-color: #0056b3;
            }
            /* Asegura que todas las vistas tengan la misma altura */
            #process-steps {
                display: flex;
                flex-direction: column; /* Coloca las vistas una debajo de la otra */
                min-height: 500px; /* Altura mínima para todas las vistas */
                justify-content: space-between; /* Distribuye las vistas uniformemente */
            }

            #process-steps &gt; div {
                flex: 1; /* Cada vista ocupará el mismo espacio vertical */
                display: flex;
                flex-direction: column;
                justify-content: center; /* Centra el contenido verticalmente */
                align-items: center; /* Centra el contenido horizontalmente */
            }
        </style>
    </div>

    
    <div id="step2-view" style="display: none;">
        <!--<div id="spinner-container">
            <p>Procesando...</p>
            <div class="spinner"></div>
        </div>
       <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form" data-name="Formulario">
            <div class="container-fluid">
                <form action="/website/form/" id="customForm" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                    <div class="s_website_form_rows row s_col_no_bgcolor">
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="executive_summary">
                                    Resumen Ejecutivo
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input align-left no-resize" name="executive_summary" id="executive_summary" rows="9" >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        
                        <style>
                            /* Desactivar la redimensión del textarea */
                            .no-resize {
                                resize: none;
                            }
                        </style>
                        
                        
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="objectives">
                                    Objetivos
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input align-left no-resize" name="executive_summary" id="executive_summary" rows="8" readonly>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        
                        <style>
                            /* Desactivar la redimensión del textarea */
                            .no-resize {
                                resize: none;
                            }
                        </style>
                    </div>
                </form>
            </div>
        </section>

        <style>
            /* Spinner y contenedor inicial */
            #spinner-container {
                display: flex;
                align-items: center;
                gap: 20px;
                justify-content: center;
                margin-top: 20px;
            }

            .spinner {
                border: 4px solid #f3f3f3;
                border-top: 4px solid #3498db;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>-->
        <section class="s_timeline_list pb88 o_colored_level pt88">
            <div class="o_container_flex">
                <div class="row">
                    <div class="col-lg-12 o_colored_level">
                        <div class="s_timeline_list_wrapper pt-3">
                            <!-- Campo 1 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Resumen Ejecutivo</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
                                </textarea>
                            </div>
        
                            <!-- Campo 2 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Objetivos</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Pellentesque nibh.
                                </textarea>
                            </div>
        
                            <!-- Campo 3 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Preguntas y aclaraciones</strong>
                                <div class="accordion" id="questionsAccordion">
                                    <!-- Pregunta 1 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                <span class="flex-grow-1">¿Cuáles son los servicios que ofrece la compañía?</span>
                                                <span class="status-label ms-3 pending" id="statusOne">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusOne"/>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Pregunta 2 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <span class="flex-grow-1">¿Cómo puedo contactar a soporte al cliente?</span>
                                                <span class="status-label ms-3 pending" id="statusTwo">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusTwo"/>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Pregunta 3 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                <span class="flex-grow-1">¿Cuál es su política de devoluciones?</span>
                                                <span class="status-label ms-3 pending" id="statusThree">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusThree"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <script>
                                    // Función para actualizar el estado de una etiqueta
                                    function updateStatusLabel(textarea) {
                                        const statusId = textarea.getAttribute("data-status-id");
                                        const statusElement = document.getElementById(statusId);
                                
                                        if (textarea.value.trim() === "") {
                                            statusElement.textContent = "Pendiente"; // Mostrar "Pendiente" si no hay texto
                                            statusElement.classList.remove("responded");
                                            statusElement.classList.add("pending");
                                        } else {
                                            statusElement.textContent = "Respondida"; // Mostrar "Respondida" si hay texto
                                            statusElement.classList.remove("pending");
                                            statusElement.classList.add("responded");
                                        }
                                    }
                                
                                    // Inicializar el estado al cargar la página
                                    document.addEventListener("DOMContentLoaded", function () {
                                        document.querySelectorAll(".answer-text").forEach((textarea) =&gt; {
                                            // Actualizar el estado basado en el contenido inicial
                                            updateStatusLabel(textarea);
                                
                                            // Agregar el evento de entrada para actualizar dinámicamente
                                            textarea.addEventListener("input", function () {
                                                updateStatusLabel(this);
                                            });
                                        });
                                    });
                                </script>
                                
                                <style>
                                    /* Estilo del botón del acordeón */
                                    .accordion-button {
                                        background-color: #f8f9fa;
                                        color: #333;
                                        font-weight: bold;
                                        border: none;
                                        border-radius: 0;
                                        box-shadow: none;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    }
                                
                                    .accordion-button:not(.collapsed) {
                                        color: #0056b3;
                                        background-color: #e9ecef;
                                    }
                                
                                    /* Etiquetas de estado */
                                    .status-label {
                                        font-size: 0.9rem;
                                        font-weight: 600;
                                        padding: 4px 10px;
                                        border-radius: 20px;
                                        margin-right: 10px; /* Margen derecho */
                                        text-align: center;
                                        min-width: 80px;
                                        transition: all 0.2s ease-in-out;
                                    }
                                
                                    /* Estado "Pendiente" */
                                    .status-label.pending {
                                        background-color: #ffc107; /* Amarillo */
                                        color: #856404; /* Texto oscuro */
                                        border: 1px solid #ffecb5;
                                    }
                                
                                    /* Estado "Respondida" */
                                    .status-label.responded {
                                        background-color: #28a745; /* Verde */
                                        color: #fff;
                                        border: 1px solid #1e7e34;
                                    }
                                
                                    /* Estilo del textarea */
                                    .accordion-body textarea {
                                        width: 100%;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        padding: 8px;
                                        font-size: 14px;
                                        line-height: 1.5;
                                        resize: none; /* Evita redimensionamiento */
                                    }
                                
                                    .accordion-body textarea::placeholder {
                                        color: #aaa;
                                    }

                                    /* Evitar el cambio de estilo al seleccionar o enfocar un campo */

                                </style>
                            
                            </div>
                            
                            <!-- Campo 4 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Detalles Adicionales</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Fusce nec tellus sed augue semper porta.
                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <style>
            /* General */
            body, html {
                margin: 0;
                padding: 0;
            }
        
            .s_timeline_list {
                padding-top: 0 !important; /* Eliminar padding superior */
                padding-bottom: 0 !important; /* Opcional: Eliminar padding inferior */
            }
        
            .o_container_small {
                margin-top: 0 !important; /* Eliminar margen superior */
                padding-top: 0 !important; /* Ajustar el padding superior */
            }
        
            .s_timeline_list_wrapper {
                padding-top: 0; /* Asegurar que no haya espacio superior */
                margin-top: 0; /* Asegurar que esté alineado */
            }
        
            .s_timeline_list_row {
                padding-top: 10px; /* Opcional: espacio entre filas */
                margin-top: 0; /* Eliminar espacio adicional */
            }
        
            /* Línea vertical y puntos */
            .o_dot_line {
                left: 0; /* Línea alineada al borde izquierdo */
                border-left: 2px solid #ccc;
            }
        
            .o_dot {
                width: 12px;
                height: 12px;
                background-color: #3498db;
                left: 0;
                top: 8px;
            }
        
            /* Títulos */
            .s_timeline_list_row strong {
                display: block;
                margin-bottom: 10px;
                font-size: 16px;
                color: #333;
                font-weight: 600;
                text-align: left;
            }
        
            /* Campos de texto */
            textarea {
                width: 100%;
                min-height: 80px;
                padding: 10px;
                font-size: 14px;
                line-height: 1.5;
                border: 1px solid #ccc;
                border-radius: 4px;
                resize: none;
                overflow: hidden;
                background-color: #f9f9f9;
            }
        
            textarea[readonly] {
                color: #555;
                background-color: #f9f9f9;
            }

        </style>
       
        <button type="button" onclick="goToNextStep(3)">Siguiente</button>
    </div>

    
    <div id="step3-view" style="display: none;">
        <h3>Paso 3: Generación de propuesta</h3>
        <p>Estamos generando la propuesta.</p>
        <button type="button" onclick="goToNextStep(4)">Siguiente</button>
    </div>

    
    <div id="step4-view" style="display: none;">
        <h3>Paso 4: Resultado Final</h3>
        <p>Propuesta generada exitosamente. Descárgala aquí:</p>
        <a href="#" class="btn btn-success">Descargar Propuesta</a>
    </div>
</div>
<script>
    // Función para mostrar el paso siguiente y ocultar el anterior
    function showStep(stepNumber) {
        // Ocultar todas las vistas
        document.querySelectorAll('#process-steps &gt; div').forEach(view =&gt; {
            view.style.display = 'none';
        });

        // Mostrar la vista del paso actual
        document.getElementById(`step${stepNumber}-view`).style.display = 'block';

        // Actualizar la sombra en los pasos de la barra de progreso
        updateProcessStep(stepNumber);
    }

    // Actualiza la sombra del paso actual en la barra de progreso
    function updateProcessStep(activeStep) {
        document.querySelectorAll('.s_process_step').forEach((step, index) =&gt; {
            if (index + 1 === activeStep) {
                // Añadir el estilo box-shadow al paso activo
                step.style.boxShadow = "rgba(0, 0, 0, 0.15) 0px 8px 16px 0px";
            } else {
                // Eliminar el box-shadow del resto de pasos
                step.style.boxShadow = "none";
            }
        });
    }


    function handleFileChange(inputId, fileNameId) {
        const fileInput = document.getElementById(inputId);
        const fileNameField = document.getElementById(fileNameId);

        if (fileInput.files.length &gt; 0) {
            fileNameField.value = fileInput.files[0].name; // Mostrar el nombre del archivo
        } else {
            fileNameField.value = ''; // Limpiar si no hay archivo
        }
    }

    async function submitCustomForm() {
        const form = document.getElementById("customForm");
        const formData = new FormData(form); // Crear un objeto FormData con los datos del formulario

        try {
            /*const response = await fetch("https://y0ffvtoa30.execute-api.eu-west-1.amazonaws.com/PRO/request", {
                method: "POST",
                body: formData,
            });

            if (response.ok) {*/
                //alert("Formulario enviado exitosamente.");
                form.reset(); // Limpiar el formulario después del envío exitoso
                document.getElementById("template_file_name").value = ""; // Limpiar nombre de archivo
                document.getElementById("specification_file_name").value = ""; // Limpiar nombre de archivo
                showStep(2);
           /* } else {
                alert("Hubo un error al enviar el formulario.");
            }*/
        } catch (error) {
            console.error("Error al enviar el formulario:", error);
            alert("Hubo un error al enviar el formulario.");
        }
    }

    // Ir al siguiente paso manualmente
    function goToNextStep(step) {
        showStep(step);
    }

    document.addEventListener("DOMContentLoaded", function () {
    // Establecer el paso inicial
        updateProcessStep(1);

    });
</script></template>
        <div class="s_embed_code_embedded o_not_editable container"><div id="process-steps">
    
    <div id="step1-view">
        <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form" data-name="Formulario">
            <div class="container-fluid">
                <form action="/website/form/" id="customForm" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                    <div class="s_website_form_rows row s_col_no_bgcolor">
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="company_name">
                                    Nombre de empresa<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="company_name" required="1" data-fill-with="company_name" id="company_name"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="social">
                                    Razón Social
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="social" data-fill-with="social" id="social"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="template_pdf">
                                    Plantilla PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="template_file_name" name="template_file_name" readonly="" placeholder="Nombre del archivo"/>
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('template_pdf').click();">
                                        Subir Archivo
                                    </button>
                                    <input type="file" id="template_pdf" name="Plantilla" class="hidden-file-input" onchange="handleFileChange('template_pdf', 'template_file_name')" required=""/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom">
                            <div class="row s_col_no_resize s_col_no_bgcolor align-items-center">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="specification_pdf">
                                    Pliego PDF<span class="s_website_form_mark">*</span>
                                </label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <input type="text" class="form-control me-3 align-left" id="specification_file_name" name="specification_file_name" readonly="" placeholder="Nombre del archivo"/>
                                    <button type="button" class="custom-file-button" onclick="document.getElementById('specification_pdf').click();">
                                    Subir Archivo
                                    </button>
                                    <input type="file" id="specification_pdf" name="Pliego" class="hidden-file-input" onchange="handleFileChange('specification_pdf', 'specification_file_name')" required=""/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="procesamiento">
                                    Tipo de procesamiento
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control s_website_form_input align-left" type="text" name="procesamiento" data-fill-with="procesamiento" id="procesamiento"/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="aditional">
                                    Detalles adicionales
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input resizable-textarea align-left" name="aditional" id="aditional" rows="4" placeholder="Escriba los detalles aquí..."/>
                                </div>
                            </div>
                        </div>
        
                        
                        <div class="col-12 text-end">
                            <button type="button" class="custom-submit-button" onclick="submitCustomForm()">Cargar</button>
                        </div>
                       
                    </div>
                </form>
            </div>
        </section>
        
        <style>
            /* Alinear las etiquetas y los campos a la izquierda */
            .align-left {
                text-align: left;
            }
        
            /* Hacer textarea más grande y ajustable */
            .resizable-textarea {
                min-height: 150px;
                resize: vertical; /* Permitir redimensionamiento vertical */
            }
        
            /* Botón personalizado para cargar archivos */
            .custom-file-button {
                display: inline-block;
                padding: 10px 20px;
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                line-height: 24px;
                white-space: nowrap;
                background-color: rgb(231, 233, 237);
                color: rgb(33, 37, 41);
                border: 1px solid rgba(33, 37, 41, 0.15);
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.05s ease-in-out, border-color 0.05s ease-in-out;
            }
        
            .custom-file-button:hover {
                background-color: rgb(200, 200, 200);
            }
        
            /* Ocultar elementos generados automáticamente por Odoo */
            .o_files_zone, .o_file_block, .o_add_files_button {
                display: none !important;
            }
        
            /* Ocultar el input de tipo archivo */
            .hidden-file-input {
                position: absolute;
                left: -9999px;
            }
        
            /* Botón personalizado para enviar formulario */
            .custom-submit-button {
                padding: 12px 30px;
                font-size: 18px;
                font-weight: 600;
                color: #fff;
                background-color: #007bff;
                border: 1px solid #007bff;
                border-radius: 6.4px;
                cursor: pointer;
                transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            }
        
            .custom-submit-button:hover {
                background-color: #0056b3;
                border-color: #0056b3;
            }
            /* Asegura que todas las vistas tengan la misma altura */
            #process-steps {
                display: flex;
                flex-direction: column; /* Coloca las vistas una debajo de la otra */
                min-height: 500px; /* Altura mínima para todas las vistas */
                justify-content: space-between; /* Distribuye las vistas uniformemente */
            }

            #process-steps &gt; div {
                flex: 1; /* Cada vista ocupará el mismo espacio vertical */
                display: flex;
                flex-direction: column;
                justify-content: center; /* Centra el contenido verticalmente */
                align-items: center; /* Centra el contenido horizontalmente */
            }
        </style>
    </div>

    
    <div id="step2-view" style="display: none;">
        <!--<div id="spinner-container">
            <p>Procesando...</p>
            <div class="spinner"></div>
        </div>
       <section class="s_website_form pt16 pb16" data-vcss="001" data-snippet="s_website_form" data-name="Formulario">
            <div class="container-fluid">
                <form action="/website/form/" id="customForm" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-pre-fill="true" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                    <div class="s_website_form_rows row s_col_no_bgcolor">
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="executive_summary">
                                    Resumen Ejecutivo
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input align-left no-resize" name="executive_summary" id="executive_summary" rows="9" >
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        
                        <style>
                            /* Desactivar la redimensión del textarea */
                            .no-resize {
                                resize: none;
                            }
                        </style>
                        
                        
        
                        
                        <div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="textarea">
                            <div class="row s_col_no_resize s_col_no_bgcolor">
                                <label class="col-form-label col-sm-3 s_website_form_label align-left" for="objectives">
                                    Objetivos
                                </label>
                                <div class="col-sm-9">
                                    <textarea class="form-control s_website_form_input align-left no-resize" name="executive_summary" id="executive_summary" rows="8" readonly>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. 
                        
                        Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh.
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        
                        <style>
                            /* Desactivar la redimensión del textarea */
                            .no-resize {
                                resize: none;
                            }
                        </style>
                    </div>
                </form>
            </div>
        </section>

        <style>
            /* Spinner y contenedor inicial */
            #spinner-container {
                display: flex;
                align-items: center;
                gap: 20px;
                justify-content: center;
                margin-top: 20px;
            }

            .spinner {
                border: 4px solid #f3f3f3;
                border-top: 4px solid #3498db;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>-->
        <section class="s_timeline_list pb88 o_colored_level pt88">
            <div class="o_container_flex">
                <div class="row">
                    <div class="col-lg-12 o_colored_level">
                        <div class="s_timeline_list_wrapper pt-3">
                            <!-- Campo 1 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Resumen Ejecutivo</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
                                </textarea>
                            </div>
        
                            <!-- Campo 2 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Objetivos</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Pellentesque nibh.
                                </textarea>
                            </div>
        
                            <!-- Campo 3 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Preguntas y aclaraciones</strong>
                                <div class="accordion" id="questionsAccordion">
                                    <!-- Pregunta 1 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                                <span class="flex-grow-1">¿Cuáles son los servicios que ofrece la compañía?</span>
                                                <span class="status-label ms-3 pending" id="statusOne">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusOne"/>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Pregunta 2 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <span class="flex-grow-1">¿Cómo puedo contactar a soporte al cliente?</span>
                                                <span class="status-label ms-3 pending" id="statusTwo">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusTwo"/>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- Pregunta 3 -->
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingThree">
                                            <button class="accordion-button collapsed d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                <span class="flex-grow-1">¿Cuál es su política de devoluciones?</span>
                                                <span class="status-label ms-3 pending" id="statusThree">Pendiente</span>
                                            </button>
                                        </h2>
                                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#questionsAccordion">
                                            <div class="accordion-body">
                                                <textarea class="form-control answer-text" rows="3" placeholder="Escribe tu respuesta aquí..." data-status-id="statusThree"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <script>
                                    // Función para actualizar el estado de una etiqueta
                                    function updateStatusLabel(textarea) {
                                        const statusId = textarea.getAttribute("data-status-id");
                                        const statusElement = document.getElementById(statusId);
                                
                                        if (textarea.value.trim() === "") {
                                            statusElement.textContent = "Pendiente"; // Mostrar "Pendiente" si no hay texto
                                            statusElement.classList.remove("responded");
                                            statusElement.classList.add("pending");
                                        } else {
                                            statusElement.textContent = "Respondida"; // Mostrar "Respondida" si hay texto
                                            statusElement.classList.remove("pending");
                                            statusElement.classList.add("responded");
                                        }
                                    }
                                
                                    // Inicializar el estado al cargar la página
                                    document.addEventListener("DOMContentLoaded", function () {
                                        document.querySelectorAll(".answer-text").forEach((textarea) =&gt; {
                                            // Actualizar el estado basado en el contenido inicial
                                            updateStatusLabel(textarea);
                                
                                            // Agregar el evento de entrada para actualizar dinámicamente
                                            textarea.addEventListener("input", function () {
                                                updateStatusLabel(this);
                                            });
                                        });
                                    });
                                </script>
                                
                                <style>
                                    /* Estilo del botón del acordeón */
                                    .accordion-button {
                                        background-color: #f8f9fa;
                                        color: #333;
                                        font-weight: bold;
                                        border: none;
                                        border-radius: 0;
                                        box-shadow: none;
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    }
                                
                                    .accordion-button:not(.collapsed) {
                                        color: #0056b3;
                                        background-color: #e9ecef;
                                    }
                                
                                    /* Etiquetas de estado */
                                    .status-label {
                                        font-size: 0.9rem;
                                        font-weight: 600;
                                        padding: 4px 10px;
                                        border-radius: 20px;
                                        margin-right: 10px; /* Margen derecho */
                                        text-align: center;
                                        min-width: 80px;
                                        transition: all 0.2s ease-in-out;
                                    }
                                
                                    /* Estado "Pendiente" */
                                    .status-label.pending {
                                        background-color: #ffc107; /* Amarillo */
                                        color: #856404; /* Texto oscuro */
                                        border: 1px solid #ffecb5;
                                    }
                                
                                    /* Estado "Respondida" */
                                    .status-label.responded {
                                        background-color: #28a745; /* Verde */
                                        color: #fff;
                                        border: 1px solid #1e7e34;
                                    }
                                
                                    /* Estilo del textarea */
                                    .accordion-body textarea {
                                        width: 100%;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        padding: 8px;
                                        font-size: 14px;
                                        line-height: 1.5;
                                        resize: none; /* Evita redimensionamiento */
                                    }
                                
                                    .accordion-body textarea::placeholder {
                                        color: #aaa;
                                    }

                                    /* Evitar el cambio de estilo al seleccionar o enfocar un campo */

                                </style>
                            
                            </div>
                            
                            <!-- Campo 4 -->
                            <div class="s_timeline_list_row position-relative pb-4">
                                <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                                <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none text-o-color-1"/>
                                <strong class="o_default_snippet_text">Detalles Adicionales</strong>
                                <textarea class="form-control s_website_form_input align-left no-resize" readonly="">        Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Fusce nec tellus sed augue semper porta.
                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <style>
            /* General */
            body, html {
                margin: 0;
                padding: 0;
            }
        
            .s_timeline_list {
                padding-top: 0 !important; /* Eliminar padding superior */
                padding-bottom: 0 !important; /* Opcional: Eliminar padding inferior */
            }
        
            .o_container_small {
                margin-top: 0 !important; /* Eliminar margen superior */
                padding-top: 0 !important; /* Ajustar el padding superior */
            }
        
            .s_timeline_list_wrapper {
                padding-top: 0; /* Asegurar que no haya espacio superior */
                margin-top: 0; /* Asegurar que esté alineado */
            }
        
            .s_timeline_list_row {
                padding-top: 10px; /* Opcional: espacio entre filas */
                margin-top: 0; /* Eliminar espacio adicional */
            }
        
            /* Línea vertical y puntos */
            .o_dot_line {
                left: 0; /* Línea alineada al borde izquierdo */
                border-left: 2px solid #ccc;
            }
        
            .o_dot {
                width: 12px;
                height: 12px;
                background-color: #3498db;
                left: 0;
                top: 8px;
            }
        
            /* Títulos */
            .s_timeline_list_row strong {
                display: block;
                margin-bottom: 10px;
                font-size: 16px;
                color: #333;
                font-weight: 600;
                text-align: left;
            }
        
            /* Campos de texto */
            textarea {
                width: 100%;
                min-height: 80px;
                padding: 10px;
                font-size: 14px;
                line-height: 1.5;
                border: 1px solid #ccc;
                border-radius: 4px;
                resize: none;
                overflow: hidden;
                background-color: #f9f9f9;
            }
        
            textarea[readonly] {
                color: #555;
                background-color: #f9f9f9;
            }

        </style>
       
        <button type="button" onclick="goToNextStep(3)">Siguiente</button>
    </div>

    
    <div id="step3-view" style="display: none;">
        <h3>Paso 3: Generación de propuesta</h3>
        <p>Estamos generando la propuesta.</p>
        <button type="button" onclick="goToNextStep(4)">Siguiente</button>
    </div>

    
    <div id="step4-view" style="display: none;">
        <h3>Paso 4: Resultado Final</h3>
        <p>Propuesta generada exitosamente. Descárgala aquí:</p>
        <a href="#" class="btn btn-success">Descargar Propuesta</a>
    </div>
</div><script>
    // Función para mostrar el paso siguiente y ocultar el anterior
    function showStep(stepNumber) {
        // Ocultar todas las vistas
        document.querySelectorAll('#process-steps &gt; div').forEach(view =&gt; {
            view.style.display = 'none';
        });

        // Mostrar la vista del paso actual
        document.getElementById(`step${stepNumber}-view`).style.display = 'block';

        // Actualizar la sombra en los pasos de la barra de progreso
        updateProcessStep(stepNumber);
    }

    // Actualiza la sombra del paso actual en la barra de progreso
    function updateProcessStep(activeStep) {
        document.querySelectorAll('.s_process_step').forEach((step, index) =&gt; {
            if (index + 1 === activeStep) {
                // Añadir el estilo box-shadow al paso activo
                step.style.boxShadow = "rgba(0, 0, 0, 0.15) 0px 8px 16px 0px";
            } else {
                // Eliminar el box-shadow del resto de pasos
                step.style.boxShadow = "none";
            }
        });
    }


    function handleFileChange(inputId, fileNameId) {
        const fileInput = document.getElementById(inputId);
        const fileNameField = document.getElementById(fileNameId);

        if (fileInput.files.length &gt; 0) {
            fileNameField.value = fileInput.files[0].name; // Mostrar el nombre del archivo
        } else {
            fileNameField.value = ''; // Limpiar si no hay archivo
        }
    }

    async function submitCustomForm() {
        const form = document.getElementById("customForm");
        const formData = new FormData(form); // Crear un objeto FormData con los datos del formulario

        try {
            /*const response = await fetch("https://y0ffvtoa30.execute-api.eu-west-1.amazonaws.com/PRO/request", {
                method: "POST",
                body: formData,
            });

            if (response.ok) {*/
                //alert("Formulario enviado exitosamente.");
                form.reset(); // Limpiar el formulario después del envío exitoso
                document.getElementById("template_file_name").value = ""; // Limpiar nombre de archivo
                document.getElementById("specification_file_name").value = ""; // Limpiar nombre de archivo
                showStep(2);
           /* } else {
                alert("Hubo un error al enviar el formulario.");
            }*/
        } catch (error) {
            console.error("Error al enviar el formulario:", error);
            alert("Hubo un error al enviar el formulario.");
        }
    }

    // Ir al siguiente paso manualmente
    function goToNextStep(step) {
        showStep(step);
    }

    document.addEventListener("DOMContentLoaded", function () {
    // Establecer el paso inicial
        updateProcessStep(1);

    });
</script></div>
    </section></div>
    </t>
</t>