feat: sesión 1 año + validación sintaxis plantilla en tiempo real

resources/views/renovaciones/plantillas.html

@@ -110,7 +110,9 @@
                         <label class="text-xs font-medium text-gray-600 block mb-1">HTML del correo *</label>
                         <textarea x-model="form.cuerpo_html" rows="16"
                             @input.debounce.600ms="previewInline()"
+                            :class="templateError ? 'border-red-400' : ''"
                             class="w-full border rounded px-3 py-2 text-xs font-mono" required></textarea>
+                        <p x-show="templateError" x-text="templateError" class="text-red-500 text-xs mt-1"></p>
                     </div>
                     <div>
                         <label class="text-xs font-medium text-gray-600 block mb-1">Vista previa</label>
@@ -177,7 +179,7 @@ document.addEventListener('alpine:init', () => {
         loading: false,
         datos: [], total: 0, totalPages: 1, page: 1, limit: 10, search: '',
         addModal: false, editModal: false, deleteModal: false, previewModal: false, testModal: false,
-        selectedId: null, testEmail: '',
+        selectedId: null, testEmail: '', templateError: '',
         form: { nombre:'', asunto:'', cuerpo_html:'', tipo:'renovacion' },
         toast: { show:false, msg:'', type:'ok' },
 
@@ -211,18 +213,25 @@ document.addEventListener('alpine:init', () => {
             });
         },
 
-        previewInline() {
+        async previewInline() {
             const frame = this.$refs.previewFrame;
             if (frame) frame.srcdoc = this.form.cuerpo_html || '<p style="color:#999;padding:1rem">Sin contenido</p>';
+            if (!this.form.cuerpo_html) { this.templateError = ''; return; }
+            try {
+                const { data } = await axios.post('/app/api/plantillas-correo/validate', { html: this.form.cuerpo_html });
+                this.templateError = data.ok ? '' : (data.error || 'Sintaxis inválida');
+            } catch { this.templateError = ''; }
         },
 
         closeModals() {
             this.addModal = this.editModal = this.deleteModal = this.previewModal = this.testModal = false;
             this.selectedId = null;
+            this.templateError = '';
             this.form = { nombre:'', asunto:'', cuerpo_html:'', tipo:'renovacion' };
         },
 
         async save() {
+            if (this.templateError) { this.showToast('Corrige los errores de sintaxis antes de guardar', 'error'); return; }
             this.loading = true;
             try {
                 if (this.editModal) {