{# Override de django_recaptcha: carga reCAPTCHA on-demand (al primer foco/toque en el formulario) #}
{# para no bloquear la carga inicial ni sumar ~1.5 MB de JS al arranque. #}
{# La validación no cambia: al renderizarse, reCAPTCHA crea el campo g-recaptcha-response dentro del form. #}
{# Ubicado en amtracApp/templates porque los widgets de formulario usan el FORM_RENDERER, #}
{# que resuelve por app_directories segun el orden de INSTALLED_APPS (amtracApp va antes que django_recaptcha). #}
<script type="text/javascript">
    // Callback requerido por data-callback del widget.
    var onSubmit_{{ widget_uuid }} = function(token) {};

    (function () {
        var loaded = false;

        function loadRecaptcha() {
            if (loaded) return;
            loaded = true;
            var s = document.createElement('script');
            // Sin render=explicit: al cargarse, api.js autorenderiza los .g-recaptcha del DOM.
            s.src = "https://{{ recaptcha_domain }}/recaptcha/api.js{% if api_params %}?{{ api_params }}{% endif %}";
            s.async = true;
            s.defer = true;
            document.head.appendChild(s);
        }

        function attach() {
            var el = document.querySelector('.g-recaptcha[data-widget-uuid="{{ widget_uuid }}"]');
            var form = el ? el.closest('form') : null;
            var target = form || document;
            // Cargar cuando el usuario empieza a interactuar con el formulario.
            ['focusin', 'pointerdown', 'touchstart'].forEach(function (ev) {
                target.addEventListener(ev, loadRecaptcha, { once: true, passive: true });
            });
        }

        if (document.readyState !== 'loading') {
            attach();
        } else {
            document.addEventListener('DOMContentLoaded', attach);
        }
    })();
</script>