
    <style>
    :root {
        --netelip-bg-primary: #0a0a0a;
        --netelip-bg-secondary: #1a1a1a;
        --netelip-bg-tertiary: #2a2a2a;
        --netelip-accent: #ff6b35;
        --netelip-text-primary: #ffffff;
        --netelip-text-secondary: #cccccc;
        --netelip-text-muted: #888888;
        --netelip-border: #333333;
        --netelip-success: #00ff88;
        --netelip-error: #ff4757;
        --netelip-gradient: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
        --netelip-border-radius: 8px;
        --netelip-transition: all 0.3s ease;
    }

    .netelip-sms-container {
        max-width: 400px;
        margin: 0 auto;
        background: var(--netelip-bg-secondary);
        border-radius: var(--netelip-border-radius);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .netelip-sms-header {
        background: var(--netelip-gradient);
        padding: 16px;
        text-align: center;
    }

    .netelip-sms-header h3 {
        margin: 0;
        color: var(--netelip-text-primary);
        font-size: 18px;
        font-weight: 600;
    }

    .netelip-sms-form {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        display: block;
        margin-bottom: 6px;
        color: var(--netelip-text-primary);
        font-weight: 500;
        font-size: 14px;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px 16px;
        background: var(--netelip-bg-tertiary);
        border: 1px solid var(--netelip-border);
        border-radius: var(--netelip-border-radius);
        color: var(--netelip-text-primary);
        font-size: 14px;
        transition: var(--netelip-transition);
        box-sizing: border-box;
    }

    .form-group input:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: var(--netelip-accent);
        box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: var(--netelip-text-muted);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
        font-family: inherit;
    }

    .char-counter {
        text-align: right;
        margin-top: 4px;
        font-size: 11px;
        color: var(--netelip-text-muted);
    }

    #char-count {
        color: var(--netelip-accent);
        font-weight: 600;
    }

    .netelip-btn-primary {
        width: 100%;
        padding: 14px;
        background: var(--netelip-gradient);
        color: var(--netelip-text-primary);
        border: none;
        border-radius: var(--netelip-border-radius);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--netelip-transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .netelip-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }

    .netelip-btn-primary:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-loader {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .form-group.error input,
    .form-group.error textarea {
        border-color: var(--netelip-error);
    }

    .error-message {
        color: var(--netelip-error);
        font-size: 12px;
        margin-top: 4px;
    }

    /* Modal de confirmación */
    .netelip-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .netelip-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(4px);
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .netelip-modal-overlay.show {
        opacity: 1;
    }

    .netelip-modal-content {
        background: var(--netelip-bg-secondary);
        border-radius: var(--netelip-border-radius);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        max-width: 400px;
        width: 100%;
        transform: scale(0.9) translateY(20px);
        transition: var(--netelip-transition);
        border: 1px solid var(--netelip-border);
    }

    .netelip-modal.show .netelip-modal-content {
        transform: scale(1) translateY(0);
    }

    .netelip-modal-header {
        padding: 20px;
        background: var(--netelip-gradient);
        border-radius: var(--netelip-border-radius) var(--netelip-border-radius) 0 0;
        text-align: center;
    }

    .netelip-modal-header h4 {
        margin: 0;
        color: var(--netelip-text-primary);
        font-size: 18px;
        font-weight: 600;
    }

    .netelip-modal-body {
        padding: 24px;
        text-align: center;
        color: var(--netelip-text-primary);
    }

    .result-success {
        color: var(--netelip-success);
    }

    .result-error {
        color: var(--netelip-error);
    }

    .result-icon {
        font-size: 48px;
        margin-bottom: 16px;
        display: block;
    }

    .result-message {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .netelip-modal-footer {
        padding: 20px;
        text-align: center;
        background: var(--netelip-bg-primary);
        border-radius: 0 0 var(--netelip-border-radius) var(--netelip-border-radius);
    }

    .netelip-btn-accept {
        background: var(--netelip-gradient);
        color: var(--netelip-text-primary);
        border: none;
        border-radius: var(--netelip-border-radius);
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--netelip-transition);
    }

    .netelip-btn-accept:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }

    @media (max-width: 480px) {
        .netelip-sms-container {
            margin: 10px;
            max-width: none;
        }
        
        .netelip-sms-form {
            padding: 16px;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        .netelip-modal {
            padding: 10px;
        }
        
        .netelip-modal-content {
            max-width: none;
        }
    }
    </style>

    <script>
    jQuery(document).ready(function($) {
        let isSubmitting = false;
        const $form = $('#netelip-sms-form');
        const $submitBtn = $('#send-sms-btn');
        const $charCount = $('#char-count');
        const $messageField = $('#sms_message');
        const $modal = $('#netelip-result-modal');
        const $overlay = $('#netelip-modal-overlay');

        // Contador de caracteres
        $messageField.on('input', function() {
            const length = $(this).val().length;
            $charCount.text(length);
            
            if (length > 160) {
                $charCount.css('color', 'var(--netelip-error)');
                $(this).closest('.form-group').addClass('error');
            } else {
                $charCount.css('color', 'var(--netelip-accent)');
                $(this).closest('.form-group').removeClass('error');
            }
        });

        // Formatear teléfono (solo números, máx 9)
        $('#sms_to').on('input', function() {
            let value = $(this).val().replace(/\D/g, '');
            if (value.length > 9) {
                value = value.substring(0, 9);
            }
            $(this).val(value);
        });

        // Envío del formulario
        $form.on('submit', function(e) {
            e.preventDefault();
            
            if (isSubmitting) return;

            const formData = {
                sms_to: $('#sms_to').val().trim(),
                sms_message: $('#sms_message').val().trim(),
                sms_from: $('#sms_from').val().trim() || 'anonymous'
            };

            // Validación básica
            if (!formData.sms_to || !formData.sms_message) {
                showResultModal(false, 'Completa todos los campos obligatorios');
                return;
            }

            if (formData.sms_to.length !== 9) {
                showResultModal(false, 'El teléfono debe tener 9 dígitos');
                return;
            }

            if (formData.sms_message.length > 160) {
                showResultModal(false, 'El mensaje es demasiado largo');
                return;
            }

            // Enviar SMS directamente
            sendSMS(formData);
        });

        function sendSMS(formData) {
            isSubmitting = true;
            showLoadingState();

            const ajaxData = {
                action: 'netelip_send_sms',
                nonce: netelip_ajax.nonce,
                sms_to: formData.sms_to,
                sms_message: formData.sms_message,
                sms_from: formData.sms_from
            };

            $.ajax({
                url: netelip_ajax.ajax_url,
                type: 'POST',
                data: ajaxData,
                timeout: 30000,
                success: function(response) {
                    hideLoadingState();
                    
                    if (response.success) {
                        showResultModal(true, response.data.message);
                        resetForm();
                    } else {
                        showResultModal(false, response.data.message);
                    }
                },
                error: function() {
                    hideLoadingState();
                    showResultModal(false, 'Error de conexión');
                },
                complete: function() {
                    isSubmitting = false;
                }
            });
        }

        function showLoadingState() {
            $submitBtn.prop('disabled', true);
            $submitBtn.find('.btn-text').hide();
            $submitBtn.find('.btn-loader').show();
        }

        function hideLoadingState() {
            $submitBtn.prop('disabled', false);
            $submitBtn.find('.btn-text').show();
            $submitBtn.find('.btn-loader').hide();
        }

        function resetForm() {
            $form[0].reset();
            $('.form-group').removeClass('error');
            $('.error-message').remove();
            $charCount.text('0').css('color', 'var(--netelip-accent)');
        }

        function showResultModal(success, message) {
            const $title = $('#result-title');
            const $content = $('#result-content');
            const $icon = $('#result-icon');

            if (success) {
                $title.text('SMS Enviado');
                $content.html('<div class="result-success"><div class="result-message">' + message + '</div></div>');
                $icon.text('✅');
            } else {
                $title.text('Error');
                $content.html('<div class="result-error"><div class="result-message">' + message + '</div></div>');
                $icon.text('❌');
            }

            showModal();
        }

        function showModal() {
            $overlay.show().addClass('show');
            $modal.show().addClass('show');
            $('body').css('overflow', 'hidden');
        }

        function closeModal() {
            $modal.removeClass('show');
            $overlay.removeClass('show');
            
            setTimeout(function() {
                $modal.hide();
                $overlay.hide();
                $('body').css('overflow', '');
            }, 300);
        }

        // Cerrar modal
        $('#close-result').on('click', closeModal);
        $overlay.on('click', closeModal);

        // Cerrar modal con ESC
        $(document).on('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });

        // Inicializar contador
        $charCount.text('0');
    });
    </script>
    {"id":7146,"date":"2025-07-26T22:39:16","date_gmt":"2025-07-26T20:39:16","guid":{"rendered":"https:\/\/syf.es\/?page_id=7146"},"modified":"2025-07-26T22:39:16","modified_gmt":"2025-07-26T20:39:16","slug":"eseemeese","status":"publish","type":"page","link":"https:\/\/syf.es\/?page_id=7146","title":{"rendered":"eseemeese"},"content":{"rendered":"    <div class=\"netelip-sms-container\">\n        <div class=\"netelip-sms-header\">\n            <h3>\ud83d\udcf1 Enviar SMS<\/h3>\n        <\/div>\n        \n        <form id=\"netelip-sms-form\" class=\"netelip-sms-form\">\n            <div class=\"form-group\">\n                <label for=\"sms_to\">\ud83d\udcde Tel\u00e9fono<\/label>\n                <input type=\"tel\" id=\"sms_to\" name=\"sms_to\" placeholder=\"600123456\" required maxlength=\"9\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"sms_message\">\ud83d\udcac Mensaje<\/label>\n                <textarea id=\"sms_message\" name=\"sms_message\" placeholder=\"Tu mensaje...\" required maxlength=\"160\"><\/textarea>\n                <div class=\"char-counter\">\n                    <span id=\"char-count\">0<\/span>\/160\n                <\/div>\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"sms_from\">\ud83d\udc64 Remitente<\/label>\n                <input type=\"text\" id=\"sms_from\" name=\"sms_from\" placeholder=\"Opcional\" maxlength=\"11\">\n            <\/div>\n\n            <button type=\"submit\" class=\"netelip-btn-primary\" id=\"send-sms-btn\">\n                <span class=\"btn-text\">\ud83d\ude80 Enviar<\/span>\n                <span class=\"btn-loader\" style=\"display: none;\">\u23f3<\/span>\n            <\/button>\n        <\/form>\n\n        <!-- Modal de resultado -->\n        <div id=\"netelip-result-modal\" class=\"netelip-modal\" style=\"display: none;\">\n            <div class=\"netelip-modal-content\">\n                <div class=\"netelip-modal-header\">\n                    <h4 id=\"result-title\">Resultado<\/h4>\n                <\/div>\n                <div class=\"netelip-modal-body\">\n                    <span class=\"result-icon\" id=\"result-icon\"><\/span>\n                    <div id=\"result-content\"><\/div>\n                <\/div>\n                <div class=\"netelip-modal-footer\">\n                    <button type=\"button\" class=\"netelip-btn-accept\" id=\"close-result\">\u2705 Aceptar<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Overlay -->\n        <div id=\"netelip-modal-overlay\" class=\"netelip-modal-overlay\" style=\"display: none;\"><\/div>\n    <\/div>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/syf.es\/index.php?rest_route=\/wp\/v2\/pages\/7146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/syf.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/syf.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/syf.es\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/syf.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7146"}],"version-history":[{"count":0,"href":"https:\/\/syf.es\/index.php?rest_route=\/wp\/v2\/pages\/7146\/revisions"}],"wp:attachment":[{"href":"https:\/\/syf.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}