{"id":46,"date":"2025-11-26T02:26:02","date_gmt":"2025-11-26T02:26:02","guid":{"rendered":"https:\/\/mascota-sos.com\/?page_id=46"},"modified":"2025-11-29T02:54:26","modified_gmt":"2025-11-29T02:54:26","slug":"registro","status":"publish","type":"page","link":"https:\/\/mascota-sos.com\/?page_id=46","title":{"rendered":"Registro"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]        <style>\r\n            .mascota-auth-container {\r\n                max-width: 600px;\r\n                margin: 40px auto;\r\n                background: #fff;\r\n                border-radius: 16px;\r\n                box-shadow: 0 10px 25px rgba(0,0,0,0.05);\r\n                overflow: hidden;\r\n                font-family: 'Inter', sans-serif;\r\n            }\r\n            .auth-step { display: none; padding: 40px; }\r\n            .auth-step.active { display: block; animation: fadeIn 0.5s ease; }\r\n            @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n            \r\n            .step-title { font-size: 1.8rem; color: #1a202c; margin-bottom: 10px; text-align: center; }\r\n            .step-subtitle { color: #718096; text-align: center; margin-bottom: 30px; }\r\n            \r\n            .form-group { margin-bottom: 20px; }\r\n            .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #4a5568; }\r\n            .form-control {\r\n                width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px;\r\n                font-size: 1rem; transition: border-color 0.2s;\r\n            }\r\n            .form-control:focus { border-color: #3182ce; outline: none; }\r\n            \r\n            .role-cards { \r\n                display: grid; \r\n                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); \r\n                gap: 15px; \r\n            }\r\n            .role-card {\r\n                border: 2px solid #e2e8f0; border-radius: 12px; padding: 15px; text-align: center;\r\n                cursor: pointer; transition: all 0.2s;\r\n                display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n            }\r\n            .role-card:hover { border-color: #3182ce; background: #ebf8ff; }\r\n            .role-card.selected { border-color: #3182ce; background: #ebf8ff; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2); }\r\n            .role-icon { font-size: 2rem; margin-bottom: 8px; display: block; }\r\n            .role-name { font-weight: bold; color: #2d3748; font-size: 0.9rem; }\r\n            \r\n            @media (max-width: 480px) {\r\n                .mascota-auth-container { margin: 20px 10px; }\r\n                .auth-step { padding: 25px; }\r\n                .role-cards { grid-template-columns: 1fr; }\r\n                .role-card { flex-direction: row; justify-content: flex-start; gap: 15px; padding: 15px 20px; }\r\n                .role-icon { margin-bottom: 0; font-size: 1.5rem; }\r\n                .role-name { font-size: 1rem; }\r\n            }\r\n            \r\n            .btn-next, .btn-submit {\r\n                width: 100%; background: #3182ce; color: white; border: none; padding: 15px;\r\n                border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer;\r\n                transition: background 0.2s; margin-top: 20px;\r\n            }\r\n            .btn-next:hover, .btn-submit:hover { background: #2b6cb0; }\r\n            .btn-prev { background: transparent; color: #718096; border: none; cursor: pointer; margin-top: 15px; display: block; width: 100%; }\r\n            \r\n            .upload-area {\r\n                border: 2px dashed #cbd5e0; border-radius: 12px; padding: 30px; text-align: center;\r\n                cursor: pointer; transition: border-color 0.2s;\r\n            }\r\n            .upload-area:hover { border-color: #3182ce; }\r\n            .upload-preview { max-width: 150px; max-height: 150px; border-radius: 50%; margin-top: 15px; display: none; object-fit: cover; }\r\n        <\/style>\r\n\r\n        <div class=\"mascota-auth-container\">\r\n            <form id=\"mascota-dynamic-form\">\r\n                <!-- Step 1: Role Selection -->\r\n                <div class=\"auth-step active\" data-step=\"1\">\r\n                    <h2 class=\"step-title\">\u00bfC\u00f3mo quieres unirte?<\/h2>\r\n                    <p class=\"step-subtitle\">Elige el tipo de cuenta que mejor te describa.<\/p>\r\n                    \r\n                    <div class=\"role-cards\">\r\n                        <div class=\"role-card\" onclick=\"selectRole('subscriber', this)\">\r\n                            <span class=\"role-icon\">\ud83d\udc36<\/span>\r\n                            <span class=\"role-name\">Due\u00f1o<\/span>\r\n                        <\/div>\r\n                        <div class=\"role-card\" onclick=\"selectRole('mascota_vet', this)\">\r\n                            <span class=\"role-icon\">\ud83d\udc68\u200d\u2695\ufe0f<\/span>\r\n                            <span class=\"role-name\">Veterinario<\/span>\r\n                        <\/div>\r\n                        <div class=\"role-card\" onclick=\"selectRole('mascota_vendor', this)\">\r\n                            <span class=\"role-icon\">\ud83c\udfea<\/span>\r\n                            <span class=\"role-name\">Vendedor<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <input type=\"hidden\" name=\"role\" id=\"selected-role\">\r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(1)\">Continuar<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 2: Credentials -->\r\n                <div class=\"auth-step\" data-step=\"2\">\r\n                    <h2 class=\"step-title\">Tus Datos de Acceso<\/h2>\r\n                    <p class=\"step-subtitle\">Crea tu usuario y contrase\u00f1a.<\/p>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>Nombre de Usuario<\/label>\r\n                        <input type=\"text\" name=\"username\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Correo Electr\u00f3nico<\/label>\r\n                        <input type=\"email\" name=\"email\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Contrase\u00f1a<\/label>\r\n                        <input type=\"password\" name=\"password\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    \r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(2)\">Siguiente<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(2)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 3: Vet Details (Conditional) -->\r\n                <div class=\"auth-step\" data-step=\"3\" id=\"step-vet-details\">\r\n                    <h2 class=\"step-title\">Perfil Profesional<\/h2>\r\n                    <p class=\"step-subtitle\">Cu\u00e9ntanos sobre tu pr\u00e1ctica.<\/p>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>C\u00e9dula Profesional<\/label>\r\n                        <input type=\"text\" name=\"vet_license\" class=\"form-control\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Tel\u00e9fono \/ WhatsApp<\/label>\r\n                        <input type=\"text\" name=\"vet_phone\" class=\"form-control\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Direcci\u00f3n del Consultorio<\/label>\r\n                        <textarea name=\"vet_address\" class=\"form-control\" rows=\"3\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(3)\">Siguiente<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(3)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 4: Profile Image -->\r\n                <div class=\"auth-step\" data-step=\"4\">\r\n                    <h2 class=\"step-title\">Foto de Perfil<\/h2>\r\n                    <p class=\"step-subtitle\">Sube una foto para que te reconozcan.<\/p>\r\n                    \r\n                    <div class=\"upload-area\" onclick=\"document.getElementById('profile-upload').click()\">\r\n                        <p>\ud83d\udcf8 Haz clic para subir imagen<\/p>\r\n                        <input type=\"file\" name=\"profile_image\" id=\"profile-upload\" style=\"display: none;\" accept=\"image\/*\" onchange=\"previewImage(this)\">\r\n                        <img id=\"image-preview\" class=\"upload-preview\">\r\n                    <\/div>\r\n\r\n                    <button type=\"button\" class=\"btn-submit\" onclick=\"submitForm()\">Crear Cuenta<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(4)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <script>\r\n        var currentStep = 1;\r\n        var selectedRole = '';\r\n\r\n        function selectRole(role, element) {\r\n            selectedRole = role;\r\n            document.getElementById('selected-role').value = role;\r\n            \r\n            \/\/ Visual feedback\r\n            document.querySelectorAll('.role-card').forEach(el => el.classList.remove('selected'));\r\n            element.classList.add('selected');\r\n        }\r\n\r\n        function nextStep(step) {\r\n            if (step === 1 && !selectedRole) {\r\n                alert('Por favor selecciona un tipo de cuenta.');\r\n                return;\r\n            }\r\n\r\n            \/\/ Skip vet details if not vet\r\n            var next = step + 1;\r\n            if (step === 2 && selectedRole !== 'mascota_vet') {\r\n                next = 4;\r\n            }\r\n\r\n            showStep(next);\r\n        }\r\n\r\n        function prevStep(step) {\r\n            var prev = step - 1;\r\n            if (step === 4 && selectedRole !== 'mascota_vet') {\r\n                prev = 2;\r\n            }\r\n            showStep(prev);\r\n        }\r\n\r\n        function showStep(step) {\r\n            document.querySelectorAll('.auth-step').forEach(el => el.classList.remove('active'));\r\n            \r\n            \/\/ Find the correct step div (handle conditional skipping logic in selector if needed, but data-step is simple)\r\n            var target = document.querySelector('.auth-step[data-step=\"' + step + '\"]');\r\n            if (target) {\r\n                target.classList.add('active');\r\n                currentStep = step;\r\n            }\r\n        }\r\n\r\n        function previewImage(input) {\r\n            if (input.files && input.files[0]) {\r\n                var reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    var img = document.getElementById('image-preview');\r\n                    img.src = e.target.result;\r\n                    img.style.display = 'inline-block';\r\n                }\r\n                reader.readAsDataURL(input.files[0]);\r\n            }\r\n        }\r\n\r\n        function submitForm() {\r\n            var form = document.getElementById('mascota-dynamic-form');\r\n            var formData = new FormData(form);\r\n            formData.append('action', 'mascota_register_ajax');\r\n            formData.append('nonce', 'ee15d9b37e');\r\n\r\n            var btn = document.querySelector('.btn-submit');\r\n            btn.innerHTML = 'Creando cuenta...';\r\n            btn.disabled = true;\r\n\r\n            fetch('https:\/\/mascota-sos.com\/wp-admin\/admin-ajax.php', {\r\n                method: 'POST',\r\n                body: formData\r\n            })\r\n            .then(response => {\r\n                return response.text().then(text => {\r\n                    try {\r\n                        return JSON.parse(text);\r\n                    } catch (e) {\r\n                        throw new Error('Server Error: ' + text);\r\n                    }\r\n                });\r\n            })\r\n            .then(data => {\r\n                \/\/ Si data es un n\u00famero (ej: -1 por fallo de nonce) o no es objeto\r\n                if (typeof data !== 'object' || data === null) {\r\n                    throw new Error('Respuesta inesperada del servidor: ' + data);\r\n                }\r\n\r\n                if (data.success) {\r\n                    window.location.href = data.data.redirect;\r\n                } else {\r\n                    var msg = (data.data && data.data.message) ? data.data.message : 'Error desconocido';\r\n                    alert('Error: ' + msg);\r\n                    btn.innerHTML = 'Crear Cuenta';\r\n                    btn.disabled = false;\r\n                }\r\n            })\r\n            .catch(error => {\r\n                console.error('Error:', error);\r\n                alert('Error del Sistema: ' + error.message);\r\n                btn.innerHTML = 'Crear Cuenta';\r\n                btn.disabled = false;\r\n            });\r\n        }\r\n        <\/script>\r\n        [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"        <style>\r\n            .mascota-auth-container {\r\n                max-width: 600px;\r\n                margin: 40px auto;\r\n                background: #fff;\r\n                border-radius: 16px;\r\n                box-shadow: 0 10px 25px rgba(0,0,0,0.05);\r\n                overflow: hidden;\r\n                font-family: 'Inter', sans-serif;\r\n            }\r\n            .auth-step { display: none; padding: 40px; }\r\n            .auth-step.active { display: block; animation: fadeIn 0.5s ease; }\r\n            @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n            \r\n            .step-title { font-size: 1.8rem; color: #1a202c; margin-bottom: 10px; text-align: center; }\r\n            .step-subtitle { color: #718096; text-align: center; margin-bottom: 30px; }\r\n            \r\n            .form-group { margin-bottom: 20px; }\r\n            .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #4a5568; }\r\n            .form-control {\r\n                width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px;\r\n                font-size: 1rem; transition: border-color 0.2s;\r\n            }\r\n            .form-control:focus { border-color: #3182ce; outline: none; }\r\n            \r\n            .role-cards { \r\n                display: grid; \r\n                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); \r\n                gap: 15px; \r\n            }\r\n            .role-card {\r\n                border: 2px solid #e2e8f0; border-radius: 12px; padding: 15px; text-align: center;\r\n                cursor: pointer; transition: all 0.2s;\r\n                display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n            }\r\n            .role-card:hover { border-color: #3182ce; background: #ebf8ff; }\r\n            .role-card.selected { border-color: #3182ce; background: #ebf8ff; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2); }\r\n            .role-icon { font-size: 2rem; margin-bottom: 8px; display: block; }\r\n            .role-name { font-weight: bold; color: #2d3748; font-size: 0.9rem; }\r\n            \r\n            @media (max-width: 480px) {\r\n                .mascota-auth-container { margin: 20px 10px; }\r\n                .auth-step { padding: 25px; }\r\n                .role-cards { grid-template-columns: 1fr; }\r\n                .role-card { flex-direction: row; justify-content: flex-start; gap: 15px; padding: 15px 20px; }\r\n                .role-icon { margin-bottom: 0; font-size: 1.5rem; }\r\n                .role-name { font-size: 1rem; }\r\n            }\r\n            \r\n            .btn-next, .btn-submit {\r\n                width: 100%; background: #3182ce; color: white; border: none; padding: 15px;\r\n                border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer;\r\n                transition: background 0.2s; margin-top: 20px;\r\n            }\r\n            .btn-next:hover, .btn-submit:hover { background: #2b6cb0; }\r\n            .btn-prev { background: transparent; color: #718096; border: none; cursor: pointer; margin-top: 15px; display: block; width: 100%; }\r\n            \r\n            .upload-area {\r\n                border: 2px dashed #cbd5e0; border-radius: 12px; padding: 30px; text-align: center;\r\n                cursor: pointer; transition: border-color 0.2s;\r\n            }\r\n            .upload-area:hover { border-color: #3182ce; }\r\n            .upload-preview { max-width: 150px; max-height: 150px; border-radius: 50%; margin-top: 15px; display: none; object-fit: cover; }\r\n        <\/style>\r\n\r\n        <div class=\"mascota-auth-container\">\r\n            <form id=\"mascota-dynamic-form\">\r\n                <!-- Step 1: Role Selection -->\r\n                <div class=\"auth-step active\" data-step=\"1\">\r\n                    <h2 class=\"step-title\">\u00bfC\u00f3mo quieres unirte?<\/h2>\r\n                    <p class=\"step-subtitle\">Elige el tipo de cuenta que mejor te describa.<\/p>\r\n                    \r\n                    <div class=\"role-cards\">\r\n                        <div class=\"role-card\" onclick=\"selectRole('subscriber', this)\">\r\n                            <span class=\"role-icon\">\ud83d\udc36<\/span>\r\n                            <span class=\"role-name\">Due\u00f1o<\/span>\r\n                        <\/div>\r\n                        <div class=\"role-card\" onclick=\"selectRole('mascota_vet', this)\">\r\n                            <span class=\"role-icon\">\ud83d\udc68\u200d\u2695\ufe0f<\/span>\r\n                            <span class=\"role-name\">Veterinario<\/span>\r\n                        <\/div>\r\n                        <div class=\"role-card\" onclick=\"selectRole('mascota_vendor', this)\">\r\n                            <span class=\"role-icon\">\ud83c\udfea<\/span>\r\n                            <span class=\"role-name\">Vendedor<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <input type=\"hidden\" name=\"role\" id=\"selected-role\">\r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(1)\">Continuar<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 2: Credentials -->\r\n                <div class=\"auth-step\" data-step=\"2\">\r\n                    <h2 class=\"step-title\">Tus Datos de Acceso<\/h2>\r\n                    <p class=\"step-subtitle\">Crea tu usuario y contrase\u00f1a.<\/p>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>Nombre de Usuario<\/label>\r\n                        <input type=\"text\" name=\"username\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Correo Electr\u00f3nico<\/label>\r\n                        <input type=\"email\" name=\"email\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Contrase\u00f1a<\/label>\r\n                        <input type=\"password\" name=\"password\" class=\"form-control\" required>\r\n                    <\/div>\r\n                    \r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(2)\">Siguiente<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(2)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 3: Vet Details (Conditional) -->\r\n                <div class=\"auth-step\" data-step=\"3\" id=\"step-vet-details\">\r\n                    <h2 class=\"step-title\">Perfil Profesional<\/h2>\r\n                    <p class=\"step-subtitle\">Cu\u00e9ntanos sobre tu pr\u00e1ctica.<\/p>\r\n                    \r\n                    <div class=\"form-group\">\r\n                        <label>C\u00e9dula Profesional<\/label>\r\n                        <input type=\"text\" name=\"vet_license\" class=\"form-control\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Tel\u00e9fono \/ WhatsApp<\/label>\r\n                        <input type=\"text\" name=\"vet_phone\" class=\"form-control\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label>Direcci\u00f3n del Consultorio<\/label>\r\n                        <textarea name=\"vet_address\" class=\"form-control\" rows=\"3\"><\/textarea>\r\n                    <\/div>\r\n\r\n                    <button type=\"button\" class=\"btn-next\" onclick=\"nextStep(3)\">Siguiente<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(3)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n\r\n                <!-- Step 4: Profile Image -->\r\n                <div class=\"auth-step\" data-step=\"4\">\r\n                    <h2 class=\"step-title\">Foto de Perfil<\/h2>\r\n                    <p class=\"step-subtitle\">Sube una foto para que te reconozcan.<\/p>\r\n                    \r\n                    <div class=\"upload-area\" onclick=\"document.getElementById('profile-upload').click()\">\r\n                        <p>\ud83d\udcf8 Haz clic para subir imagen<\/p>\r\n                        <input type=\"file\" name=\"profile_image\" id=\"profile-upload\" style=\"display: none;\" accept=\"image\/*\" onchange=\"previewImage(this)\">\r\n                        <img id=\"image-preview\" class=\"upload-preview\">\r\n                    <\/div>\r\n\r\n                    <button type=\"button\" class=\"btn-submit\" onclick=\"submitForm()\">Crear Cuenta<\/button>\r\n                    <button type=\"button\" class=\"btn-prev\" onclick=\"prevStep(4)\">Atr\u00e1s<\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <script>\r\n        var currentStep = 1;\r\n        var selectedRole = '';\r\n\r\n        function selectRole(role, element) {\r\n            selectedRole = role;\r\n            document.getElementById('selected-role').value = role;\r\n            \r\n            \/\/ Visual feedback\r\n            document.querySelectorAll('.role-card').forEach(el => el.classList.remove('selected'));\r\n            element.classList.add('selected');\r\n        }\r\n\r\n        function nextStep(step) {\r\n            if (step === 1 && !selectedRole) {\r\n                alert('Por favor selecciona un tipo de cuenta.');\r\n                return;\r\n            }\r\n\r\n            \/\/ Skip vet details if not vet\r\n            var next = step + 1;\r\n            if (step === 2 && selectedRole !== 'mascota_vet') {\r\n                next = 4;\r\n            }\r\n\r\n            showStep(next);\r\n        }\r\n\r\n        function prevStep(step) {\r\n            var prev = step - 1;\r\n            if (step === 4 && selectedRole !== 'mascota_vet') {\r\n                prev = 2;\r\n            }\r\n            showStep(prev);\r\n        }\r\n\r\n        function showStep(step) {\r\n            document.querySelectorAll('.auth-step').forEach(el => el.classList.remove('active'));\r\n            \r\n            \/\/ Find the correct step div (handle conditional skipping logic in selector if needed, but data-step is simple)\r\n            var target = document.querySelector('.auth-step[data-step=\"' + step + '\"]');\r\n            if (target) {\r\n                target.classList.add('active');\r\n                currentStep = step;\r\n            }\r\n        }\r\n\r\n        function previewImage(input) {\r\n            if (input.files && input.files[0]) {\r\n                var reader = new FileReader();\r\n                reader.onload = function(e) {\r\n                    var img = document.getElementById('image-preview');\r\n                    img.src = e.target.result;\r\n                    img.style.display = 'inline-block';\r\n                }\r\n                reader.readAsDataURL(input.files[0]);\r\n            }\r\n        }\r\n\r\n        function submitForm() {\r\n            var form = document.getElementById('mascota-dynamic-form');\r\n            var formData = new FormData(form);\r\n            formData.append('action', 'mascota_register_ajax');\r\n            formData.append('nonce', 'ee15d9b37e');\r\n\r\n            var btn = document.querySelector('.btn-submit');\r\n            btn.innerHTML = 'Creando cuenta...';\r\n            btn.disabled = true;\r\n\r\n            fetch('https:\/\/mascota-sos.com\/wp-admin\/admin-ajax.php', {\r\n                method: 'POST',\r\n                body: formData\r\n            })\r\n            .then(response => {\r\n                return response.text().then(text => {\r\n                    try {\r\n                        return JSON.parse(text);\r\n                    } catch (e) {\r\n                        throw new Error('Server Error: ' + text);\r\n                    }\r\n                });\r\n            })\r\n            .then(data => {\r\n                \/\/ Si data es un n\u00famero (ej: -1 por fallo de nonce) o no es objeto\r\n                if (typeof data !== 'object' || data === null) {\r\n                    throw new Error('Respuesta inesperada del servidor: ' + data);\r\n                }\r\n\r\n                if (data.success) {\r\n                    window.location.href = data.data.redirect;\r\n                } else {\r\n                    var msg = (data.data && data.data.message) ? data.data.message : 'Error desconocido';\r\n                    alert('Error: ' + msg);\r\n                    btn.innerHTML = 'Crear Cuenta';\r\n                    btn.disabled = false;\r\n                }\r\n            })\r\n            .catch(error => {\r\n                console.error('Error:', error);\r\n                alert('Error del Sistema: ' + error.message);\r\n                btn.innerHTML = 'Crear Cuenta';\r\n                btn.disabled = false;\r\n            });\r\n        }\r\n        <\/script>\r\n        \n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mascota-sos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":4,"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/mascota-sos.com\/index.php?rest_route=\/wp\/v2\/pages\/46\/revisions\/128"}],"wp:attachment":[{"href":"https:\/\/mascota-sos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}