{"id":16,"date":"2026-03-06T09:47:32","date_gmt":"2026-03-06T09:47:32","guid":{"rendered":"https:\/\/www.solucioneselectorales.com\/?page_id=16"},"modified":"2026-03-06T09:48:09","modified_gmt":"2026-03-06T09:48:09","slug":"formato-8","status":"publish","type":"page","link":"https:\/\/www.solucioneselectorales.com\/index.php\/formato-8\/","title":{"rendered":""},"content":{"rendered":"<div class=\"se-app-root\" data-se-view=\"formato-8\">\n<!-- Modal de validaci\u00f3n -->\n<div id=\"val-modal-overlay\" class=\"val-modal-overlay\" style=\"display: none;\">\n    <div class=\"val-modal-container\">\n        <div class=\"val-modal-header\">\n            <h3>\u26a0\ufe0f Campos obligatorios<\/h3>\n            <button type=\"button\" onclick=\"cerrarValModal()\" class=\"val-modal-close\">&times;<\/button>\n        <\/div>\n        <div class=\"val-modal-body\">\n            <p id=\"val-modal-message\">Completa los siguientes campos antes de exportar:<\/p>\n            <ul id=\"val-modal-list\" class=\"val-modal-list\"><\/ul>\n        <\/div>\n        <div class=\"val-modal-footer\">\n            <button type=\"button\" class=\"btn btn-primary\" onclick=\"cerrarValModal()\">Entendido<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* ... mismos estilos que antes ... *\/\n<\/style>\n\n<script>\n    \/\/ Funciones de validaci\u00f3n (ya existen, pero aseguramos)\n    function cerrarValModal() {\n        const modal = document.getElementById('val-modal-overlay');\n        if (modal) modal.classList.remove('show');\n    }\n\n    \/\/ function mostrarValModal(errores, ids) {\n    \/\/     \/\/ Quitar clases de error previas\n    \/\/     document.querySelectorAll(\".field-error\").forEach(e => e.classList.remove(\"field-error\"));\n\n\n    \/\/     \/\/ Marcar campos con error\n    \/\/     ids.forEach(id => {\n    \/\/         const el = document.getElementById(id);\n    \/\/         if (el) {\n    \/\/             el.classList.add(\"field-error\");\n    \/\/             el.addEventListener(\"input\", () => el.classList.remove(\"field-error\"), {\n    \/\/                 once: true\n    \/\/             });\n    \/\/         }\n    \/\/     });\n\n    \/\/     console.log(\"mostrarValModal : \" + errores);\n\n    \/\/     \/\/ Mostrar modal\n    \/\/     const modal = document.getElementById(\"val-modal-overlay\");\n    \/\/     const lista = document.getElementById(\"val-modal-list\");\n\n    \/\/     if (modal && lista) {\n    \/\/         lista.innerHTML = errores.map(e => `<li>${e}<\/li>`).join(\"\");\n    \/\/         modal.classList.add(\"show\");\n    \/\/     } else {\n    \/\/         alert(\"Campos incompletos:\\n\" + errores.join(\"\\n\"));\n    \/\/     }\n    \/\/ }\n    function cargarSweetAlert2(callback) {\n        if (typeof Swal !== \"undefined\") {\n            callback();\n            return;\n        }\n\n        \/\/ Cargar CSS\n        const link = document.createElement('link');\n        link.rel = 'stylesheet';\n        link.href = 'https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\/dist\/sweetalert2.min.css';\n        document.head.appendChild(link);\n\n        \/\/ Cargar JS\n        const script = document.createElement('script');\n        script.src = 'https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11';\n        script.onload = callback;\n        document.head.appendChild(script);\n    }\n\n    function mostrarValModal(errores, ids) {\n        \/\/ Quitar clases de error previas\n        document.querySelectorAll(\".field-error\").forEach((e) => {\n            e.classList.remove(\"field-error\");\n        });\n\n        \/\/ Marcar campos con error\n        ids.forEach((id) => {\n            const el = document.getElementById(id);\n            if (el) {\n                el.classList.add(\"field-error\");\n                el.addEventListener(\"input\", () => el.classList.remove(\"field-error\"), {\n                    once: true\n                });\n            }\n        });\n\n        \/\/ Mostrar modal\n        cargarSweetAlert2(() => {\n            Swal.fire({\n                icon: 'warning',\n                title: 'Soluciones Electorales App <br> <p style=\"font-size: 1.4rem; margin-top: 5px; color: #666;\">Campos obligatorios<\/p>',\n                html: `\n                <p class=\"mb-3\">Los siguientes campos son necesarios antes de exportar:<\/p>\n                <ul class=\"text-start text-info\">\n                    ${errores.map(e => `<li class=\"mb-1\">${e}<\/li>`).join('')}\n                <\/ul>\n            `,\n                confirmButtonText: 'Entendido'\n            });\n        });\n    }\n\n    function validarCampos(campos) {\n        const errores = [];\n        const ids = [];\n\n        campos.forEach(campo => {\n            const el = document.getElementById(campo.id);\n            if (!el || !el.value.trim()) {\n                errores.push(campo.label + \" es obligatorio\");\n                ids.push(campo.id);\n            }\n        });\n\n        return {\n            errores,\n            ids\n        };\n    }\n<\/script>\r\n<section class=\"f7-wrap container py-5\">\r\n    <div class=\"row justify-content-center\">\r\n        <div class=\"col-12 col-xl-11\">\r\n\r\n            <!-- Title -->\r\n            <div class=\"f7-head mb-4 text-center\">\r\n                <p class=\"f7-eyebrow se-eyebrow mb-2\">FORMATO 8<\/p>\r\n            <\/div>\r\n\r\n            <!-- Top bar -->\r\n            <div class=\"f7-top d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3\">\r\n                <a class=\"f7-back btn btn-outline-secondary rounded-4\" href=\"https:\/\/www.solucioneselectorales.com\/index.php\/selector\/\">\u2190 Cambiar formato<\/a>\r\n\r\n                <div class=\"f7-top-actions d-flex gap-2\">\r\n                    <button class=\"btn btn-success rounded-4\" id=\"f8SaveDraftBtn\">\ud83d\udcbe Guardar Borrador<\/button>\r\n                    <button class=\"btn btn-outline-secondary rounded-4\" id=\"f8ClearAllBtn\">\ud83d\uddd1\ufe0f Limpiar Todo<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n\r\n            <!-- Accordion -->\r\n            <div class=\"accordion f7-acc\" id=\"f8Accordion\">\r\n\r\n                <!-- Proceso electoral -->\r\n                \n<div class=\"accordion-item f7-acc-item se-card\">\n    <h2 class=\"accordion-header\" id=\"f8HeadProcess\">\n        <button class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#f8ColProcess\" aria-expanded=\"true\" aria-controls=\"f8ColProcess\">\n            INFORMACI\u00d3N DEL PROCESO ELECTORAL\n        <\/button>\n    <\/h2>\n    <div id=\"f8ColProcess\" class=\"accordion-collapse collapse show\" aria-labelledby=\"f8HeadProcess\" data-bs-parent=\"#f8Accordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Mensaje de ayuda (actualizado con clase se-help) -->\n            <div class=\"se-help alert alert-light border rounded-4 mb-4\">\n                <strong>\ud83d\udccc \u00bfQu\u00e9 lleno aqu\u00ed?<\/strong> Nombre del proceso electoral y rango de fechas del reporte de gastos.\n            <\/div>\n\n            <div class=\"row g-3\">\n                <div class=\"col-12 col-lg-6\">\n                    <label class=\"se-label\" for=\"f8ProcessName\">\n                        PROCESO ELECTORAL *\n                        <!-- Popover con informaci\u00f3n detallada -->\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udccb Proceso Electoral<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Nombre oficial del proceso electoral seg\u00fan la ONPE.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplo:<\/strong> Elecciones Generales 2026<\/li>\n                                      <li><strong>Ejemplo:<\/strong> Elecciones Regionales 2026<\/li>\n                                      <li><strong>Ejemplo:<\/strong> Elecciones Municipales 2026<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Debe coincidir exactamente con el registro oficial.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8ProcessName (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8ProcessName\"\n                        placeholder=\"Ej: Elecciones Generales 2026\"\n                        required>\n                    <div class=\"se-field-hint\">Nombre oficial del proceso electoral<\/div>\n                <\/div>\n\n                <div class=\"col-12 col-sm-6 col-lg-3\">\n                    <label class=\"se-label\" for=\"f8PeriodFrom\">\n                        PER\u00cdODO DESDE\n                        <!-- Popover con informaci\u00f3n -->\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udcc5 Fecha de Inicio<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Fecha desde la cual comienzas a reportar gastos.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>1.\u00aa entrega:<\/strong> Desde la convocatoria oficial<\/li>\n                                      <li><strong>Ejemplo:<\/strong> 26\/07\/2025<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>No puede ser anterior a la convocatoria.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8PeriodFrom (NO CAMBIAR) -->\n                    <input type=\"date\" class=\"form-control rounded-4\"\n                        id=\"f8PeriodFrom\">\n                <\/div>\n\n                <div class=\"col-12 col-sm-6 col-lg-3\">\n                    <label class=\"se-label\" for=\"f8PeriodTo\">\n                        PER\u00cdODO HASTA\n                        <!-- Popover con informaci\u00f3n -->\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udcc5 Fecha de Fin<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Fecha de cierre del per\u00edodo reportado.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>1.\u00aa entrega:<\/strong> 30 d\u00edas antes de la elecci\u00f3n<\/li>\n                                      <li><strong>L\u00edmite:<\/strong> 20\/03\/2026<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>No puede ser posterior a la fecha actual.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8PeriodTo (NO CAMBIAR) -->\n                    <input type=\"date\" class=\"form-control rounded-4\"\n                        id=\"f8PeriodTo\">\n                <\/div>\n            <\/div>\n\n            <!-- Nota adicional sobre per\u00edodos -->\n            <div class=\"mt-4 small text-muted border-top pt-3\">\n                <span class=\"fw-bold text-dark\">\ud83d\udccc Importante:<\/span> El per\u00edodo debe estar dentro del cronograma electoral oficial de la ONPE.\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\r\n                <!-- Candidato y organizaci\u00f3n -->\r\n                \n<div class=\"accordion-item f7-acc-item se-card\">\n    <h2 class=\"accordion-header\" id=\"f8HeadCandidate\">\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#f8ColCandidate\" aria-expanded=\"false\" aria-controls=\"f8ColCandidate\">\n            INFORMACI\u00d3N DEL CANDIDATO(A) Y ORGANIZACI\u00d3N POL\u00cdTICA\n        <\/button>\n    <\/h2>\n    <div id=\"f8ColCandidate\" class=\"accordion-collapse collapse\" aria-labelledby=\"f8HeadCandidate\" data-bs-parent=\"#f8Accordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Mensaje de ayuda con estilo se- -->\n            <div class=\"se-help alert alert-light border rounded-4 mb-4\">\n                <strong>\ud83d\udccc Informaci\u00f3n requerida:<\/strong> Datos del candidato y la organizaci\u00f3n pol\u00edtica seg\u00fan registro oficial de la ONPE.\n            <\/div>\n\n            <div class=\"row g-3\">\n\n                <!-- DNI -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8Dni\">\n                        DNI *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83c\udd94 Documento de Identidad<\/strong>\"\n                            data-bs-content=\"\n                                  <p>N\u00famero de DNI del candidato (8 d\u00edgitos).<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Formato:<\/strong> 8 d\u00edgitos sin puntos ni guiones<\/li>\n                                      <li><strong>Ejemplo:<\/strong> 12345678<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Debe coincidir con el registro en el RENIEC.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8Dni (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8Dni\"\n                        maxlength=\"8\"\n                        placeholder=\"8 d\u00edgitos\"\n                        required>\n                    <div class=\"se-field-hint\">DNI del candidato (8 d\u00edgitos)<\/div>\n                <\/div>\n\n                <!-- Nombres y apellidos -->\n                <div class=\"col-md-8\">\n                    <label class=\"se-label\" for=\"f8FullName\">\n                        NOMBRES Y APELLIDOS *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udc64 Nombre completo<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Apellido paterno, apellido materno y nombres completos.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Formato:<\/strong> Apellido paterno + apellido materno + nombres<\/li>\n                                      <li><strong>Ejemplo:<\/strong> P\u00e9rez Garc\u00eda Juan Carlos<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Tal como aparece en el DNI.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8FullName (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8FullName\"\n                        placeholder=\"Apellido paterno apellido materno nombres\"\n                        required>\n                    <div class=\"se-field-hint\">Apellidos y nombres completos<\/div>\n                <\/div>\n\n                <!-- Cargo al que postula -->\n                <div class=\"col-md-6\">\n                    <label class=\"se-label\" for=\"f8Role\">\n                        CARGO AL QUE POSTULA *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udccb Cargo electoral<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Cargo al cual el candidato se postula en este proceso electoral.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplos:<\/strong> Alcalde, Regidor, Gobernador, Congresista<\/li>\n                                      <li><strong>Ejemplo:<\/strong> Alcalde<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Debe coincidir con la inscripci\u00f3n en el JNE.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <select class=\"form-select rounded-4\" id=\"f8Role\">\n                        <option value=\"\">Seleccione...<\/option>\n                        <option>Senador<\/option>\n                        <option>Diputado<\/option>\n                    <\/select>\n                    <!-- ID ORIGINAL: f8Role (NO CAMBIAR) -->\n                    <!-- <input class=\"form-control rounded-4\"\n                        id=\"f8Role\"\n                        placeholder=\"Ej: Alcalde, Regidor\"\n                        required> -->\n                <\/div>\n\n                <!-- N\u00famero de lista -->\n                <div class=\"col-md-6\">\n                    <label class=\"se-label\" for=\"f8ListNumber\">\n                        N\u00b0 CON EL QUE POSTULA\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udd22 N\u00famero de lista<\/strong>\"\n                            data-bs-content=\"\n                                  <p>N\u00famero de orden con el que aparece el candidato en la lista electoral.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplo:<\/strong> 3<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Seg\u00fan la lista presentada al JNE.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8ListNumber (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8ListNumber\"\n                        placeholder=\"Ej: 3\">\n                <\/div>\n\n                <!-- Tipo de organizaci\u00f3n pol\u00edtica -->\n                <div class=\"col-md-6\">\n                    <label class=\"se-label\" for=\"f8OrgType\">\n                        TIPO DE ORGANIZACI\u00d3N POL\u00cdTICA\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83c\udfdb\ufe0f Tipo de organizaci\u00f3n<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Naturaleza jur\u00eddica de la organizaci\u00f3n pol\u00edtica.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Partido Pol\u00edtico:<\/strong> Alcance nacional<\/li>\n                                      <li><strong>Movimiento Regional:<\/strong> Alcance regional<\/li>\n                                      <li><strong>Organizaci\u00f3n Local:<\/strong> Alcance provincial o distrital<\/li>\n                                      <li><strong>Alianza Electoral:<\/strong> Coalici\u00f3n de organizaciones<\/li>\n                                  <\/ul>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8OrgType (NO CAMBIAR) -->\n                    <select class=\"form-select rounded-4\" id=\"f8OrgType\">\n                        <option value=\"\">Seleccione...<\/option>\n                        <option>Partido Pol\u00edtico<\/option>\n                        <option>Movimiento Regional<\/option>\n                        <option>Organizaci\u00f3n Local<\/option>\n                        <option>Alianza Electoral<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Denominaci\u00f3n de la organizaci\u00f3n -->\n                <div class=\"col-md-6\">\n                    <label class=\"se-label\" for=\"f8OrgName\">\n                        DENOMINACI\u00d3N DE LA ORGANIZACI\u00d3N\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udcdb Nombre de la organizaci\u00f3n<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Nombre oficial de la organizaci\u00f3n pol\u00edtica que presenta al candidato.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplo:<\/strong> Partido Democr\u00e1tico Somos Per\u00fa<\/li>\n                                      <li><strong>Ejemplo:<\/strong> Movimiento Regional Fuerza Lima<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 small text-muted'>Seg\u00fan registro oficial del JNE.<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8OrgName (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8OrgName\"\n                        placeholder=\"Nombre del partido o movimiento\">\n                <\/div>\n\n                <!-- Departamento -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8Dept\">\n                        DEPARTAMENTO\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\uddfa\ufe0f Departamento<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Departamento donde se realiza la elecci\u00f3n.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplos:<\/strong> Lima, Callao, Arequipa, Cusco<\/li>\n                                  <\/ul>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8Dept (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8Dept\"\n                        placeholder=\"Ej: Lima\">\n                <\/div>\n\n                <!-- Provincia -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8Prov\">\n                        PROVINCIA\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\uddfa\ufe0f Provincia<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Provincia dentro del departamento.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplos:<\/strong> Lima, Callao, Arequipa<\/li>\n                                  <\/ul>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8Prov (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8Prov\"\n                        placeholder=\"Ej: Lima\">\n                <\/div>\n\n                <!-- Distrito -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8Dist\">\n                        DISTRITO\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\uddfa\ufe0f Distrito<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Distrito espec\u00edfico de la elecci\u00f3n.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Ejemplos:<\/strong> Miraflores, San Isidro, Barranco, Santiago<\/li>\n                                  <\/ul>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8Dist (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8Dist\"\n                        placeholder=\"Ej: Miraflores\">\n                <\/div>\n            <\/div>\n\n            <!-- Nota informativa sobre campos obligatorios -->\n            <div class=\"mt-4 p-3 bg-light rounded-3 small text-muted border\">\n                <span class=\"fw-bold text-dark\">\ud83d\udccc Importante:<\/span> Los campos marcados con * son obligatorios para el reporte ante la ONPE.\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\r\n                <!-- Tabla de gastos -->\r\n                <div class=\"accordion-item f7-acc-item se-card\">\n    <h2 class=\"accordion-header\" id=\"f8HeadRegistry\">\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#f8ColRegistry\" aria-expanded=\"false\" aria-controls=\"f8ColRegistry\">\n            REGISTRO DETALLADO DE GASTOS DE CAMPA\u00d1A\n        <\/button>\n    <\/h2>\n    <div id=\"f8ColRegistry\" class=\"accordion-collapse collapse\" aria-labelledby=\"f8HeadRegistry\" data-bs-parent=\"#f8Accordion\">\n        <div class=\"accordion-body\">\n            <div class=\"alert alert-info border rounded-4 small\">\n                <strong>\u00bfQu\u00e9 registrar?<\/strong> Cada gasto con su comprobante de pago. Los comprobantes deben cumplir normas SUNAT.\n            <\/div>\n            <div class=\"alert alert-warning border rounded-4 small\">\n                <strong>\ud83d\udccb Tabla 2 \u2014 Tipos de Gasto:<\/strong> 1=Prensa, 2=Publicidad exterior, 3=Internet, 4=Cines, 5=Producci\u00f3n, 6=Impresiones, 7=Otros.\n            <\/div>\n\n            <div class=\"f7-reg-actions d-flex flex-wrap gap-2 mb-3\">\n                <button type=\"button\" class=\"btn btn-outline-primary rounded-4\" onclick=\"agregarFilaGasto()\">\u2795 Agregar Gasto<\/button>\n            <\/div>\n\n            <div class=\"table-responsive f7-table-wrap\" style=\"max-height:500px; overflow-y:auto; border:1px solid #dee2e6; border-radius:4px;\">\n                <table class=\"table align-middle f7-table\" style=\"min-width:1600px;\">\n                    <thead class=\"f7-thead\" style=\"position:sticky; top:0; background:var(--navy-md); color:white; z-index:10;\">\n                        <tr>\n                            <th style=\"width:40px;\">N\u00b0<\/th>\n                            <th style=\"min-width:110px;\">FECHA GASTO<br><small class=\"th-help\">dd\/mm\/aaaa \u00b7 Ej: 10\/02\/2026<\/small><\/th>\n                            <th style=\"min-width:130px;\">TIPO (Tabla 2)<br><small class=\"th-help\">1=Prensa 2=Exterior 3=Internet 4=Cines 5=Producci\u00f3n 6=Impresiones 7=Otros<\/small><\/th>\n                            <th style=\"min-width:110px;\">DNI \/ RUC<br><small class=\"th-help\">Proveedor \u00b7 Ej: 20123456789<\/small><\/th>\n                            <th style=\"min-width:220px;\">PROVEEDOR<br><small class=\"th-help\">Apellidos\/Nombres o Raz\u00f3n Social<\/small><\/th>\n                            <th style=\"min-width:130px;\">TIPO COMPROBANTE<br><small class=\"th-help\">1=Factura 2=Boleta 3=Rec.Hon. 4=Otros<\/small><\/th>\n                            <th style=\"min-width:120px;\">ELECTR.\/MANUAL<br><small class=\"th-help\">1=Electr\u00f3nico 2=Manual<\/small><\/th>\n                            <th style=\"min-width:120px;\">N\u00b0 COMPROBANTE<br><small class=\"th-help\">Ej: F001-0001234<\/small><\/th>\n                            <th style=\"min-width:100px;\">MONTO S\/<br><small class=\"th-help\">Total \u00b7 Ej: 850.00<\/small><\/th>\n                            <th style=\"min-width:240px;\">ESPECIFICACI\u00d3N<br><small class=\"th-help\">Detalle del gasto<\/small><\/th>\n                            <th style=\"width:58px;\">ACCI\u00d3N<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"f8Tbody\"><\/tbody>\n                    <tfoot style=\"background:var(--crim-lt); position:sticky; bottom:0;\">\n                        <tr>\n                            <td colspan=\"8\" class=\"text-end fw-bold\">TOTAL S\/:<\/td>\n                            <td id=\"f8Total\" class=\"fw-bold text-danger\">S\/ 0.00<\/td>\n                            <td colspan=\"2\"><\/td>\n                        <\/tr>\n                    <\/tfoot>\n                <\/table>\n            <\/div>\n\n            <div class=\"alert alert-info small mt-3\">\n                \ud83d\udca1 <strong>Publicidad digital:<\/strong> Si contratas influencers o anuncios en redes, reg\u00edstralos como Tipo 3 (Internet). Para gastos sin RUC peruano, usa Tipo 7 (Otros).\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\r\n                <!-- Firma -->\r\n                \n<div class=\"accordion-item f7-acc-item se-card\">\n    <h2 class=\"accordion-header\" id=\"f8HeadSign\">\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#f8ColSign\" aria-expanded=\"false\" aria-controls=\"f8ColSign\">\n            FIRMA DEL CANDIDATO(A) O RESPONSABLE\n        <\/button>\n    <\/h2>\n    <div id=\"f8ColSign\" class=\"accordion-collapse collapse\" aria-labelledby=\"f8HeadSign\" data-bs-parent=\"#f8Accordion\">\n        <div class=\"accordion-body\">\n\n            <!-- Mensaje de advertencia con estilo se- -->\n            <div class=\"se-help alert alert-warning border rounded-4 mb-4 d-flex align-items-start gap-3\">\n                <span class=\"fs-4\">\u26a0\ufe0f<\/span>\n                <div>\n                    <strong>Importante:<\/strong> Esta informaci\u00f3n aparecer\u00e1 en el PDF\/Excel generado. El documento f\u00edsico debe ser firmado de manera presencial por el candidato(a) o responsable de campa\u00f1a.\n                <\/div>\n                <span class=\"se-help-icon ms-auto\"\n                    data-bs-toggle=\"popover\"\n                    data-bs-trigger=\"hover focus\"\n                    data-bs-placement=\"left\"\n                    data-bs-html=\"true\"\n                    data-bs-title=\"<strong>\ud83d\udcc4 Firma f\u00edsica requerida<\/strong>\"\n                    data-bs-content=\"\n                          <p>El documento digital generado debe ser:<\/p>\n                          <ul class='mb-0 small'>\n                              <li>Impreso en papel membretado<\/li>\n                              <li>Firmado a mano por el responsable<\/li>\n                              <li>Presentado ante la ONPE<\/li>\n                          <\/ul>\n                      \">?<\/span>\n            <\/div>\n\n            <div class=\"row g-3\">\n\n                <!-- FIRMA COMO (rol) -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8SignerRole\">\n                        FIRMA COMO *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udc64 Rol del firmante<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Indica la calidad en la que se firma el documento:<\/p>\n                                  <ul class='mb-0 small'>\n                                      <li><strong>Candidato(a):<\/strong> El propio candidato firma el reporte<\/li>\n                                      <li><strong>Responsable de campa\u00f1a:<\/strong> Persona designada para la gesti\u00f3n de gastos<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 text-muted'>Campo obligatorio<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8SignerRole (NO CAMBIAR) -->\n                    <select class=\"form-select rounded-4\" id=\"f8SignerRole\" required>\n                        <option value=\"\">Seleccione...<\/option>\n                        <option value=\"candidate\">Candidato(a)<\/option>\n                        <option value=\"responsible\">Responsable de campa\u00f1a<\/option>\n                    <\/select>\n                    <div class=\"se-field-hint\">Selecciona el rol del firmante<\/div>\n                <\/div>\n\n                <!-- NOMBRES Y APELLIDOS -->\n                <div class=\"col-md-5\">\n                    <label class=\"se-label\" for=\"f8SignerName\">\n                        NOMBRES Y APELLIDOS *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udc64 Nombre del firmante<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Nombres y apellidos completos de la persona que firma.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Formato:<\/strong> Apellido paterno, apellido materno, nombres<\/li>\n                                      <li><strong>Ejemplo:<\/strong> P\u00e9rez Garc\u00eda Juan Carlos<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 text-muted'>Tal como aparece en el DNI<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8SignerName (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8SignerName\"\n                        placeholder=\"Ej: P\u00e9rez Garc\u00eda Juan Carlos\"\n                        required>\n                    <div class=\"se-field-hint\">Nombres y apellidos completos<\/div>\n                <\/div>\n\n                <!-- DNI -->\n                <div class=\"col-md-3\">\n                    <label class=\"se-label\" for=\"f8SignerDni\">\n                        DNI *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83c\udd94 Documento de identidad<\/strong>\"\n                            data-bs-content=\"\n                                  <p>N\u00famero de DNI del firmante (8 d\u00edgitos).<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Formato:<\/strong> 8 d\u00edgitos sin puntos ni guiones<\/li>\n                                      <li><strong>Ejemplo:<\/strong> 12345678<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 text-muted'>Debe coincidir con el DNI del firmante<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8SignerDni (NO CAMBIAR) -->\n                    <input class=\"form-control rounded-4\"\n                        id=\"f8SignerDni\"\n                        maxlength=\"8\"\n                        placeholder=\"8 d\u00edgitos\"\n                        required>\n                    <div class=\"se-field-hint\">DNI del firmante<\/div>\n                <\/div>\n\n                <!-- FECHA -->\n                <div class=\"col-md-4\">\n                    <label class=\"se-label\" for=\"f8SignerDate\">\n                        FECHA *\n                        <span class=\"se-help-icon\"\n                            data-bs-toggle=\"popover\"\n                            data-bs-trigger=\"hover focus\"\n                            data-bs-placement=\"top\"\n                            data-bs-html=\"true\"\n                            data-bs-title=\"<strong>\ud83d\udcc5 Fecha de firma<\/strong>\"\n                            data-bs-content=\"\n                                  <p>Fecha en que se firma el documento.<\/p>\n                                  <ul class='mb-2 small'>\n                                      <li><strong>Formato:<\/strong> dd\/mm\/aaaa<\/li>\n                                      <li><strong>Ejemplo:<\/strong> 15\/03\/2026<\/li>\n                                  <\/ul>\n                                  <hr class='my-2'>\n                                  <p class='mb-0 text-muted'>No puede ser posterior a la fecha de presentaci\u00f3n<\/p>\n                              \">?<\/span>\n                    <\/label>\n                    <!-- ID ORIGINAL: f8SignerDate (NO CAMBIAR) -->\n                    <input type=\"date\" class=\"form-control rounded-4\"\n                        id=\"f8SignerDate\"\n                        required>\n                    <div class=\"se-field-hint\">Fecha de firma del documento<\/div>\n                <\/div>\n\n            <\/div>\n\n            <!-- Nota legal -->\n            <div class=\"mt-4 p-3 bg-light rounded-3 small text-muted border\">\n                <div class=\"d-flex align-items-start gap-3\">\n                    <span class=\"text-warning fs-5\">\u2696\ufe0f<\/span>\n                    <div>\n                        <span class=\"fw-bold text-dark\">Declaraci\u00f3n jurada:<\/span> La informaci\u00f3n proporcionada es veraz y corresponde a los gastos reales de campa\u00f1a. El firmante asume responsabilidad legal ante la ONPE y el Jurado Electoral.\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\r\n            <\/div>\r\n\r\n            <!-- Botones finales -->\r\n            <div class=\"d-flex justify-content-center gap-3 mt-4 pt-3 border-top\">\r\n                <!-- <button class=\"btn btn-primary rounded-4\" id=\"f8DownloadPdfBtn\">\ud83d\udcc4 Descargar PDF<\/button> -->\r\n                <div class=\"\">\n            <a class=\"fs-card-cta w-100\"\n            href=\"https:\/\/www.solucioneselectorales.com\/index.php\/plans-checkout\/\">\n            <span>Pagar para descargar Formato<\/span>\n            <span aria-hidden=\"true\">\u2192<\/span>\n        <\/a>\n    <\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const modal = document.getElementById(\"paymentModal\");\n\n        if (!modal) return;\n\n        modal.addEventListener(\"shown.bs.modal\", function() {\n            const container = document.getElementById(\"ec-payment-container\");\n            if (!container) return;\n\n            container.innerHTML = '<div class=\"text-center p-4\">Cargando formulario de pago...<\/div>';\n\n            const formData = new FormData();\n            formData.append(\"action\", \"ec_load_payment\");\n            formData.append(\"form_id\", \"formato8\");\n            formData.append(\"amount\", \"10\");\n            formData.append(\"currency\", \"PEN\");\n\n            fetch(window.ecPaymentAjax.ajaxUrl, {\n                    method: \"POST\",\n                    body: formData\n                })\n                .then(response => response.text())\n                .then(html => {\n                    container.innerHTML = html;\n                })\n                .catch(() => {\n                    container.innerHTML = '<div class=\"alert alert-danger\">No se pudo cargar el formulario de pago.<\/div>';\n                });\n        });\n    });\n<\/script>                <!-- <button class=\"btn btn-success rounded-4\" id=\"f8SaveDraftBtn\">\ud83d\udcbe Guardar Borrador<\/button>\r\n                <button class=\"btn btn-outline-secondary rounded-4\" id=\"f8ClearAllBtn\">\ud83d\uddd1\ufe0f Limpiar Todo<\/button> -->\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- Script para inicializar popovers -->\r\n<script>\r\n    (function() {\r\n        'use strict';\r\n\r\n        function initPopovers() {\r\n            \/\/ Verificar que Bootstrap est\u00e9 disponible\r\n            if (typeof bootstrap === 'undefined') {\r\n                console.warn('\u26a0\ufe0f Bootstrap no est\u00e1 disponible. Reintentando en 500ms...');\r\n                setTimeout(initPopovers, 500);\r\n                return;\r\n            }\r\n\r\n            try {\r\n                \/\/ Seleccionar todos los elementos con data-bs-toggle=\"popover\"\r\n                const popoverTriggerList = document.querySelectorAll('[data-bs-toggle=\"popover\"]');\r\n\r\n                if (popoverTriggerList.length === 0) {\r\n                    console.log('\u2139\ufe0f No hay popovers para inicializar');\r\n                    return;\r\n                }\r\n\r\n                \/\/ Inicializar cada popover\r\n                popoverTriggerList.forEach(function(element) {\r\n                    \/\/ Destruir popover existente si lo hay (para evitar duplicados)\r\n                    const existingPopover = bootstrap.Popover.getInstance(element);\r\n                    if (existingPopover) {\r\n                        existingPopover.dispose();\r\n                    }\r\n\r\n                    \/\/ Crear nuevo popover con configuraci\u00f3n personalizada\r\n                    new bootstrap.Popover(element, {\r\n                        container: 'body', \/\/ Evita problemas con contenedores con overflow\r\n                        boundary: 'viewport', \/\/ Ajusta al viewport\r\n                        trigger: 'hover focus', \/\/ Hover + click (focus) y tap en m\u00f3viles\r\n                        html: true, \/\/ Permitir HTML en el contenido\r\n                        placement: 'top', \/\/ Posici\u00f3n preferida\r\n                        customClass: 'se-popover', \/\/ Clase personalizada para estilos\r\n                        delay: {\r\n                            show: 100,\r\n                            hide: 200\r\n                        }, \/\/ Peque\u00f1o retraso para mejor UX\r\n                        sanitize: true, \/\/ Sanitizar HTML por seguridad\r\n                        animation: true \/\/ Animaci\u00f3n suave\r\n                    });\r\n\r\n                    \/\/ Agregar evento para cerrar con scroll (opcional)\r\n                    element.addEventListener('scroll', function() {\r\n                        const popover = bootstrap.Popover.getInstance(element);\r\n                        if (popover) popover.hide();\r\n                    }, {\r\n                        passive: true\r\n                    });\r\n                });\r\n\r\n                console.log(`\u2705 ${popoverTriggerList.length} popovers inicializados correctamente`);\r\n\r\n                \/\/ Tambi\u00e9n inicializar tooltips por si acaso\r\n                const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle=\"tooltip\"]');\r\n                tooltipTriggerList.forEach(function(element) {\r\n                    new bootstrap.Tooltip(element, {\r\n                        container: 'body',\r\n                        trigger: 'hover focus'\r\n                    });\r\n                });\r\n\r\n                if (tooltipTriggerList.length > 0) {\r\n                    \/\/ console.log(`\u2705 ${tooltipTriggerList.length} tooltips inicializados`);\r\n                }\r\n\r\n            } catch (error) {\r\n                console.error('\u274c Error al inicializar popovers:', error);\r\n            }\r\n        }\r\n\r\n        \/\/ Inicializar cuando el DOM est\u00e9 listo\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', initPopovers);\r\n        } else {\r\n            initPopovers();\r\n        }\r\n\r\n        \/\/ Re-inicializar despu\u00e9s de cargar contenido din\u00e1mico (opcional)\r\n        \/\/ \u00datil si agregas popovers din\u00e1micamente despu\u00e9s\r\n        document.addEventListener('ajaxComplete', initPopovers);\r\n\r\n    })();\r\n<\/script><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":2,"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/www.solucioneselectorales.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}