From 25e90e7e2880b1a56f1517af28148ca4637b04da Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:54:19 -0500
Subject: [PATCH] Fix: auto-trigger hints while typing

---
 app/templates/queries.html | 853 +++++++++++++++++++------------------
 1 file changed, 427 insertions(+), 426 deletions(-)

diff --git a/app/templates/queries.html b/app/templates/queries.html
index b392061..6cc7236 100644
--- a/app/templates/queries.html
+++ b/app/templates/queries.html
@@ -1,385 +1,385 @@
-{% extends "base.html" %}

-{% block title %}Consultas SQL{% endblock %}

-{% block header %}Consultas SQL{% endblock %}

-{% block content %}

-

-<div class="flex space-x-2 mb-4">

-    <button onclick="mostrarEditor()" class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white" id="btn-editor"><i class="fas fa-code mr-1"></i> Editor SQL</button>

-    <button onclick="mostrarBuilder()" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300" id="btn-builder"><i class="fas fa-wrench mr-1"></i> Constructor Visual</button>

-</div>

-

-<div id="panel-editor">

-<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

-    <div class="lg:col-span-1">

-        <div class="bg-white rounded-xl shadow-sm border border-gray-200">

-            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">

-                <h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Mis Consultas</h3>

-                <button onclick="document.getElementById('modal-new-query').classList.remove('hidden')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>

-            </div>

-            <div class="p-4 space-y-2">

-                {% for q in queries %}

-                <div class="p-3 rounded-lg border border-gray-200 hover:border-blue-300">

-                    <div onclick="editQuery({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`, `{{ q.description|e }}`)" class="cursor-pointer">

-                        <div class="flex items-center justify-between">

-                            <span class="font-medium text-sm text-gray-800">{{ q.name }}</span>

-                            <span class="px-2 py-0.5 rounded text-xs font-medium {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type }}</span>

-                        </div>

-                        <p class="text-xs text-gray-500 mt-1 truncate">{{ q.description or 'Sin descripción' }}</p>

-                    </div>

-                    <button onclick="ejecutarTest(this, {{ q.id }})" class="mt-2 text-xs text-green-600 hover:text-green-800"><i class="fas fa-play mr-1"></i> Probar</button>

-                </div>

-                {% endfor %}

-            </div>

-        </div>

-    </div>

-

-    <div class="lg:col-span-2">

-        <div class="bg-white rounded-xl shadow-sm border border-gray-200">

-            <div class="px-6 py-4 border-b border-gray-200">

-                <h3 class="font-semibold text-gray-800"><i class="fas fa-code mr-2 text-blue-500"></i>Editor SQL</h3>

-            </div>

-            <div class="p-6">

-                <form method="POST" action="/queries/create" class="space-y-4">

-                    <input type="hidden" name="query_id" id="query_id" value="">

-                    <div class="grid grid-cols-2 gap-4">

-                        <div>

-                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>

-                            <input type="text" name="name" id="q_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Nombre descriptivo">

-                        </div>

-                        <div>

-                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>

-                            <select name="query_type" id="q_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">

-                                <option value="terceros">Terceros (datos paciente)</option>

-                                <option value="transaccion">Transacción (procedimientos)</option>

-                            </select>

-                        </div>

-                    </div>

-                    <div>

-                        <label class="block text-sm font-medium text-gray-700 mb-1">Consulta SQL</label>

-                        <textarea name="query_text" id="q_text" rows="10" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50" placeholder="SELECT ... FROM ... WHERE ..." style="display:none"></textarea>

-                        <div id="sql-editor-wrapper"></div>

-                    </div>

-                    <div>

-                        <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>

-                        <input type="text" name="description" id="q_desc" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="¿Qué hace esta consulta?">

-                    </div>

-                    <div class="flex space-x-3">

-                        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"><i class="fas fa-save mr-1"></i> Guardar</button>

-                        <button type="button" onclick="cancelEdit()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>

-                    </div>

-                </form>

-            </div>

-        </div>

-

-        <div class="mt-4 bg-blue-50 rounded-xl border border-blue-200 p-4">

-            <h4 class="text-sm font-medium text-blue-800"><i class="fas fa-info-circle mr-1"></i> Parámetros disponibles</h4>

-            <p class="text-xs text-blue-600 mt-1">

-                Usa <code class="bg-blue-100 px-1 rounded">:doc_num</code> para filtro por documento,

-                <code class="bg-blue-100 px-1 rounded">:factura</code> para filtro por factura,

-                <code class="bg-blue-100 px-1 rounded">:fecha_ini</code> y <code class="bg-blue-100 px-1 rounded">:fecha_fin</code> para rango de fechas.

-            </p>

-            <button onclick="listarTablas(this)" class="mt-3 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-table mr-1"></i> Ver tablas disponibles</button>

-            <div id="tablas-list" class="mt-2 hidden"></div>

-        </div>

-    </div>

-</div>

-</div>

-

-<div id="panel-builder" class="hidden">

-<div class="bg-white rounded-xl shadow-sm border border-gray-200">

-    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">

-        <h3 class="font-semibold text-gray-800"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual de Consultas</h3>

-        <button onclick="cargarEsquema()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-sync mr-1"></i> Cargar esquema</button>

-    </div>

-    <div class="p-6">

-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

-            <div class="lg:col-span-1">

-                <h4 class="text-sm font-semibold text-gray-700 mb-2"><i class="fas fa-table mr-1"></i> Tablas</h4>

-                <div id="builder-tablas" class="space-y-1 max-h-96 overflow-y-auto border rounded-lg p-2 bg-gray-50 text-xs">

-                    <p class="text-gray-400 italic">Presiona "Cargar esquema"</p>

-                </div>

-            </div>

-            <div class="lg:col-span-2">

-                <h4 class="text-sm font-semibold text-gray-700 mb-2">Columnas seleccionadas</h4>

-                <div id="builder-columnas" class="border rounded-lg p-3 bg-gray-50 min-h-[80px] text-xs mb-4">

-                    <p class="text-gray-400 italic">Seleccioná tablas y columnas</p>

-                </div>

-

-                <h4 class="text-sm font-semibold text-gray-700 mb-2">Filtros (WHERE)</h4>

-                <div id="builder-where" class="space-y-2 mb-4"></div>

-                <button onclick="agregarFiltro()" class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>

-

-                <div class="mt-4">

-                    <h4 class="text-sm font-semibold text-gray-700 mb-2">SQL Generado</h4>

-                    <textarea id="builder-sql" rows="6" readonly class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs font-mono bg-gray-100"></textarea>

-                    <p id="builder-params" class="text-xs text-blue-600 mt-1"></p>

-                    <div class="flex space-x-2 mt-2">

-                        <button onclick="usarSql()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg"><i class="fas fa-arrow-right mr-1"></i> Usar en editor</button>

-                        <button onclick="copiarSql()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-copy mr-1"></i> Copiar</button>

-                    </div>

-                </div>

-            </div>

-        </div>

-    </div>

-</div>

-</div>

-

-<script>

-let esquema = [];

-let tablasSeleccionadas = {};

-let filtros = [];

-let aliasCounter = 0;

-

-function mostrarEditor() {

-    document.getElementById('panel-editor').classList.remove('hidden');

-    document.getElementById('panel-builder').classList.add('hidden');

-    document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';

-    document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';

-}

-function mostrarBuilder() {

-    document.getElementById('panel-editor').classList.add('hidden');

-    document.getElementById('panel-builder').classList.remove('hidden');

-    document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';

-    document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';

-    if (!esquema.length) cargarEsquema();

-}

-

-async function cargarEsquema() {

-    const btn = document.querySelector('#panel-builder .bg-green-600');

-    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';

-    try {

-        const resp = await fetch('/queries/esquema', { method: 'POST' });

-        const data = await resp.json();

-        if (data.error) { showToast(data.error, 'error'); return; }

-        esquema = data.tablas;

-        renderizarTablas();

-    } catch(e) { showToast('Error: ' + e.message, 'error'); }

-    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-sync mr-1"></i> Cargar esquema'; }

-}

-

-function renderizarTablas() {

-    const div = document.getElementById('builder-tablas');

-    div.innerHTML = '';

-    esquema.forEach(t => {

-        const id = 'tab-' + t.tabla.replace(/[^a-zA-Z0-9]/g, '_');

-        const checked = tablasSeleccionadas[t.tabla] ? 'checked' : '';

-        const card = document.createElement('div');

-        card.className = 'border rounded p-2 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');

-        card.innerHTML = `

-            <label class="flex items-center space-x-2 cursor-pointer">

-                <input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">

-                <span class="font-medium text-sm">${t.tabla}</span>

-                <span class="text-gray-400">(${t.columnas.length} cols)</span>

-            </label>

-            <div id="${id}" class="ml-5 mt-1 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;

-        div.appendChild(card);

-    });

-    actualizarVista();

-}

-

-function renderizarColumnas(tabla, columnas) {

-    let html = '';

-    columnas.forEach(c => {

-        const key = tabla + '.' + c.nombre;

-        const sel = tablasSeleccionadas[tabla]?.columnas?.[c.nombre] ? 'checked' : '';

-        html += `<label class="flex items-center space-x-1 py-0.5 cursor-pointer hover:bg-blue-100 px-1 rounded">

-            <input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">

-            <span>${c.nombre}</span>

-            <span class="text-gray-400 ml-1">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span>

-        </label>`;

-    });

-    return html;

-}

-

-function toggleTabla(tabla, checked) {

-    if (checked) {

-        tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };

-    } else {

-        delete tablasSeleccionadas[tabla];

-    }

-    renderizarTablas();

-    actualizarVista();

-}

-

-function toggleColumna(tabla, columna, checked) {

-    if (!tablasSeleccionadas[tabla]) return;

-    if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;

-    else delete tablasSeleccionadas[tabla].columnas[columna];

-    renderizarTablas();

-    actualizarVista();

-}

-

-function agregarFiltro() {

-    filtros.push({ tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' });

-    renderizarFiltros();

-    actualizarVista();

-}

-

-function renderizarFiltros() {

-    const div = document.getElementById('builder-where');

-    div.innerHTML = '';

-    if (!filtros.length) {

-        div.innerHTML = '<p class="text-xs text-gray-400 italic">Sin filtros (seleccionar todos los registros)</p>';

-        return;

-    }

-    filtros.forEach((f, i) => {

-        const opts = [];

-        Object.entries(tablasSeleccionadas).forEach(([t, info]) => {

-            const tInfo = esquema.find(e => e.tabla === t);

-            if (tInfo) tInfo.columnas.forEach(c => {

-                opts.push({ value: `${t}.${c.nombre}`, label: `${info.alias}.${c.nombre}` });

-            });

-        });

-        const row = document.createElement('div');

-        row.className = 'flex items-center space-x-2 text-xs';

-        row.innerHTML = `

-            <select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-2 py-1 text-xs">

-                <option value="">--campo--</option>

-                ${opts.map(o => `<option value="${o.value}" ${f.campo===o.value?'selected':''}>${o.label}</option>`).join('')}

-            </select>

-            <select onchange="actualizarFiltro(${i},'operador',this.value)" class="border rounded px-2 py-1 text-xs w-20">

-                ${['=','>','<','>=','<=','<>','LIKE','BETWEEN'].map(o => `<option ${f.operador===o?'selected':''}>${o}</option>`).join('')}

-            </select>

-            <input type="text" value="${f.parametro}" onchange="actualizarFiltro(${i},'parametro',this.value)" placeholder=":param" class="border rounded px-2 py-1 text-xs font-mono w-28">

-            <button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarVista();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>

-        `;

-        if (i < filtros.length - 1) {

-            const op = document.createElement('div');

-            op.className = 'flex items-center space-x-2 mt-1';

-            op.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-2 py-1 text-xs w-20">

-                <option value="AND" ${filtros[i+1]?.condicion==='AND'?'selected':''}>AND</option>

-                <option value="OR" ${filtros[i+1]?.condicion==='OR'?'selected':''}>OR</option>

-            </select>`;

-            div.appendChild(row);

-            div.appendChild(op);

-        } else {

-            div.appendChild(row);

-        }

-    });

-}

-

-function actualizarFiltro(i, prop, val) {

-    if (!filtros[i]) filtros[i] = { tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' };

-    filtros[i][prop] = val;

-    actualizarVista();

-}

-

-function generarSql() {

-    const tabs = Object.entries(tablasSeleccionadas);

-    if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };

-

-    const selects = [];

-    const froms = [];

-    const allParams = new Set();

-

-    tabs.forEach(([tabla, info]) => {

-        froms.push({ tabla, alias: info.alias });

-        const cols = Object.keys(info.columnas);

-        if (cols.length) {

-            cols.forEach(c => selects.push(`${info.alias}.${c}`));

-        }

-    });

-

-    if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };

-    if (!froms.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };

-

-    let sql = 'SELECT\n    ' + selects.join(',\n    ');

-    sql += '\nFROM ' + froms.map((f, i) => {

-        if (i === 0) return `${f.tabla} ${f.alias}`;

-        return `JOIN ${f.tabla} ${f.alias} ON 1=1`; // basic join, user refines in editor

-    }).join('\n');

-

-    const wheres = [];

-    filtros.forEach(f => {

-        if (f.campo && f.parametro) {

-            const [t, c] = f.campo.split('.');

-            const info = tablasSeleccionadas[t];

-            if (info) {

-                wheres.push(`${info.alias}.${c} ${f.operador} ${f.parametro}`);

-                if (f.parametro.startsWith(':')) allParams.add(f.parametro);

-            }

-        }

-    });

-    if (wheres.length) sql += '\nWHERE ' + wheres.join(' ');

-

-    return { sql, params: Array.from(allParams) };

-}

-

-function actualizarVista() {

-    const { sql, params } = generarSql();

-    document.getElementById('builder-sql').value = sql;

-    document.getElementById('builder-params').textContent = params.length ? 'Parámetros: ' + params.join(', ') : 'Sin parámetros';

-

-    // Actualizar vista de columnas seleccionadas

-    const div = document.getElementById('builder-columnas');

-    const tabs = Object.entries(tablasSeleccionadas);

-    if (!tabs.length) {

-        div.innerHTML = '<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>';

-        return;

-    }

-    let html = '';

-    tabs.forEach(([tabla, info]) => {

-        const cols = Object.keys(info.columnas);

-        if (cols.length) {

-            html += `<div class="mb-1"><span class="font-medium">${info.alias}.${tabla}</span>: `;

-            html += cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ');

-            html += '</div>';

-        }

-    });

-    div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';

-}

-

-function usarSql() {

-    const sql = document.getElementById('builder-sql').value;

-    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }

-    document.getElementById('q_text').value = sql;

-    if (sqlEditor) sqlEditor.setValue(sql);

-    mostrarEditor();

-    showToast('SQL copiado al editor');

-}

-

-function copiarSql() {

-    const sql = document.getElementById('builder-sql').value;

-    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }

-    navigator.clipboard.writeText(sql).then(() => showToast('SQL copiado al portapapeles'));

-}

-

-// Existing functions below

-function editQuery(id, name, type, text, desc) {

-    document.getElementById('query_id').value = id;

-    document.getElementById('q_name').value = name;

-    document.getElementById('q_type').value = type;

-    document.getElementById('q_text').value = text;

-    document.getElementById('q_desc').value = desc;

-    document.getElementById('btn-cancel').classList.remove('hidden');

-    document.querySelector('form').action = '/queries/update/' + id;

-    if (sqlEditor) sqlEditor.setValue(text);

-}

-function cancelEdit() {

-    document.getElementById('query_id').value = '';

-    document.getElementById('q_name').value = '';

-    document.getElementById('q_text').value = '';

-    document.getElementById('q_desc').value = '';

-    document.getElementById('btn-cancel').classList.add('hidden');

-    document.querySelector('form').action = '/queries/create';

-    if (sqlEditor) sqlEditor.setValue('');

-}

-async function listarTablas(btn) {

-    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';

-    try {

-        const resp = await fetch('/queries/tablas', { method: 'POST' });

-        const data = await resp.json();

-        if (data.error) { showToast(data.error, 'error'); return; }

-        const div = document.getElementById('tablas-list');

-        div.innerHTML = '<div class="max-h-40 overflow-y-auto mt-2"><div class="grid grid-cols-3 gap-1">' +

-            data.tablas.map(t => '<code class="bg-white px-2 py-1 rounded border text-xs">' + t + '</code>').join('') +

-            '</div></div>';

-        div.classList.remove('hidden');

-    } catch(e) { showToast('Error: ' + e.message, 'error'); }

-    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-table mr-1"></i> Ver tablas disponibles'; }

-}

-let sqlEditor = null;

-

+{% extends "base.html" %}


+{% block title %}Consultas SQL{% endblock %}


+{% block header %}Consultas SQL{% endblock %}


+{% block content %}


+


+<div class="flex space-x-2 mb-4">


+    <button onclick="mostrarEditor()" class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white" id="btn-editor"><i class="fas fa-code mr-1"></i> Editor SQL</button>


+    <button onclick="mostrarBuilder()" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300" id="btn-builder"><i class="fas fa-wrench mr-1"></i> Constructor Visual</button>


+</div>


+


+<div id="panel-editor">


+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">


+    <div class="lg:col-span-1">


+        <div class="bg-white rounded-xl shadow-sm border border-gray-200">


+            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">


+                <h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-blue-500"></i>Mis Consultas</h3>


+                <button onclick="document.getElementById('modal-new-query').classList.remove('hidden')" class="text-blue-600 hover:text-blue-800"><i class="fas fa-plus"></i></button>


+            </div>


+            <div class="p-4 space-y-2">


+                {% for q in queries %}


+                <div class="p-3 rounded-lg border border-gray-200 hover:border-blue-300">


+                    <div onclick="editQuery({{ q.id }}, '{{ q.name }}', '{{ q.query_type }}', `{{ q.query_text|e }}`, `{{ q.description|e }}`)" class="cursor-pointer">


+                        <div class="flex items-center justify-between">


+                            <span class="font-medium text-sm text-gray-800">{{ q.name }}</span>


+                            <span class="px-2 py-0.5 rounded text-xs font-medium {% if q.query_type == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">{{ q.query_type }}</span>


+                        </div>


+                        <p class="text-xs text-gray-500 mt-1 truncate">{{ q.description or 'Sin descripción' }}</p>


+                    </div>


+                    <button onclick="ejecutarTest(this, {{ q.id }})" class="mt-2 text-xs text-green-600 hover:text-green-800"><i class="fas fa-play mr-1"></i> Probar</button>


+                </div>


+                {% endfor %}


+            </div>


+        </div>


+    </div>


+


+    <div class="lg:col-span-2">


+        <div class="bg-white rounded-xl shadow-sm border border-gray-200">


+            <div class="px-6 py-4 border-b border-gray-200">


+                <h3 class="font-semibold text-gray-800"><i class="fas fa-code mr-2 text-blue-500"></i>Editor SQL</h3>


+            </div>


+            <div class="p-6">


+                <form method="POST" action="/queries/create" class="space-y-4">


+                    <input type="hidden" name="query_id" id="query_id" value="">


+                    <div class="grid grid-cols-2 gap-4">


+                        <div>


+                            <label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>


+                            <input type="text" name="name" id="q_name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Nombre descriptivo">


+                        </div>


+                        <div>


+                            <label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>


+                            <select name="query_type" id="q_type" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">


+                                <option value="terceros">Terceros (datos paciente)</option>


+                                <option value="transaccion">Transacción (procedimientos)</option>


+                            </select>


+                        </div>


+                    </div>


+                    <div>


+                        <label class="block text-sm font-medium text-gray-700 mb-1">Consulta SQL</label>


+                        <textarea name="query_text" id="q_text" rows="10" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono bg-gray-50" placeholder="SELECT ... FROM ... WHERE ..." style="display:none"></textarea>


+                        <div id="sql-editor-wrapper"></div>


+                    </div>


+                    <div>


+                        <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>


+                        <input type="text" name="description" id="q_desc" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="¿Qué hace esta consulta?">


+                    </div>


+                    <div class="flex space-x-3">


+                        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium"><i class="fas fa-save mr-1"></i> Guardar</button>


+                        <button type="button" onclick="cancelEdit()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 hidden" id="btn-cancel"><i class="fas fa-times mr-1"></i> Cancelar</button>


+                    </div>


+                </form>


+            </div>


+        </div>


+


+        <div class="mt-4 bg-blue-50 rounded-xl border border-blue-200 p-4">


+            <h4 class="text-sm font-medium text-blue-800"><i class="fas fa-info-circle mr-1"></i> Parámetros disponibles</h4>


+            <p class="text-xs text-blue-600 mt-1">


+                Usa <code class="bg-blue-100 px-1 rounded">:doc_num</code> para filtro por documento,


+                <code class="bg-blue-100 px-1 rounded">:factura</code> para filtro por factura,


+                <code class="bg-blue-100 px-1 rounded">:fecha_ini</code> y <code class="bg-blue-100 px-1 rounded">:fecha_fin</code> para rango de fechas.


+            </p>


+            <button onclick="listarTablas(this)" class="mt-3 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-table mr-1"></i> Ver tablas disponibles</button>


+            <div id="tablas-list" class="mt-2 hidden"></div>


+        </div>


+    </div>


+</div>


+</div>


+


+<div id="panel-builder" class="hidden">


+<div class="bg-white rounded-xl shadow-sm border border-gray-200">


+    <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">


+        <h3 class="font-semibold text-gray-800"><i class="fas fa-wrench mr-2 text-blue-500"></i>Constructor Visual de Consultas</h3>


+        <button onclick="cargarEsquema()" class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs rounded-lg"><i class="fas fa-sync mr-1"></i> Cargar esquema</button>


+    </div>


+    <div class="p-6">


+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">


+            <div class="lg:col-span-1">


+                <h4 class="text-sm font-semibold text-gray-700 mb-2"><i class="fas fa-table mr-1"></i> Tablas</h4>


+                <div id="builder-tablas" class="space-y-1 max-h-96 overflow-y-auto border rounded-lg p-2 bg-gray-50 text-xs">


+                    <p class="text-gray-400 italic">Presiona "Cargar esquema"</p>


+                </div>


+            </div>


+            <div class="lg:col-span-2">


+                <h4 class="text-sm font-semibold text-gray-700 mb-2">Columnas seleccionadas</h4>


+                <div id="builder-columnas" class="border rounded-lg p-3 bg-gray-50 min-h-[80px] text-xs mb-4">


+                    <p class="text-gray-400 italic">Seleccioná tablas y columnas</p>


+                </div>


+


+                <h4 class="text-sm font-semibold text-gray-700 mb-2">Filtros (WHERE)</h4>


+                <div id="builder-where" class="space-y-2 mb-4"></div>


+                <button onclick="agregarFiltro()" class="text-xs text-blue-600 hover:text-blue-800"><i class="fas fa-plus mr-1"></i> Agregar filtro</button>


+


+                <div class="mt-4">


+                    <h4 class="text-sm font-semibold text-gray-700 mb-2">SQL Generado</h4>


+                    <textarea id="builder-sql" rows="6" readonly class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs font-mono bg-gray-100"></textarea>


+                    <p id="builder-params" class="text-xs text-blue-600 mt-1"></p>


+                    <div class="flex space-x-2 mt-2">


+                        <button onclick="usarSql()" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded-lg"><i class="fas fa-arrow-right mr-1"></i> Usar en editor</button>


+                        <button onclick="copiarSql()" class="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs rounded-lg"><i class="fas fa-copy mr-1"></i> Copiar</button>


+                    </div>


+                </div>


+            </div>


+        </div>


+    </div>


+</div>


+</div>


+


+<script>


+let esquema = [];


+let tablasSeleccionadas = {};


+let filtros = [];


+let aliasCounter = 0;


+


+function mostrarEditor() {


+    document.getElementById('panel-editor').classList.remove('hidden');


+    document.getElementById('panel-builder').classList.add('hidden');


+    document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';


+    document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';


+}


+function mostrarBuilder() {


+    document.getElementById('panel-editor').classList.add('hidden');


+    document.getElementById('panel-builder').classList.remove('hidden');


+    document.getElementById('btn-editor').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300';


+    document.getElementById('btn-builder').className = 'px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white';


+    if (!esquema.length) cargarEsquema();


+}


+


+async function cargarEsquema() {


+    const btn = document.querySelector('#panel-builder .bg-green-600');


+    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';


+    try {


+        const resp = await fetch('/queries/esquema', { method: 'POST' });


+        const data = await resp.json();


+        if (data.error) { showToast(data.error, 'error'); return; }


+        esquema = data.tablas;


+        renderizarTablas();


+    } catch(e) { showToast('Error: ' + e.message, 'error'); }


+    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-sync mr-1"></i> Cargar esquema'; }


+}


+


+function renderizarTablas() {


+    const div = document.getElementById('builder-tablas');


+    div.innerHTML = '';


+    esquema.forEach(t => {


+        const id = 'tab-' + t.tabla.replace(/[^a-zA-Z0-9]/g, '_');


+        const checked = tablasSeleccionadas[t.tabla] ? 'checked' : '';


+        const card = document.createElement('div');


+        card.className = 'border rounded p-2 ' + (checked ? 'border-blue-300 bg-blue-50' : 'border-gray-200 bg-white');


+        card.innerHTML = `


+            <label class="flex items-center space-x-2 cursor-pointer">


+                <input type="checkbox" ${checked} onchange="toggleTabla('${t.tabla}', this.checked)" class="rounded">


+                <span class="font-medium text-sm">${t.tabla}</span>


+                <span class="text-gray-400">(${t.columnas.length} cols)</span>


+            </label>


+            <div id="${id}" class="ml-5 mt-1 ${checked ? '' : 'hidden'}">${renderizarColumnas(t.tabla, t.columnas)}</div>`;


+        div.appendChild(card);


+    });


+    actualizarVista();


+}


+


+function renderizarColumnas(tabla, columnas) {


+    let html = '';


+    columnas.forEach(c => {


+        const key = tabla + '.' + c.nombre;


+        const sel = tablasSeleccionadas[tabla]?.columnas?.[c.nombre] ? 'checked' : '';


+        html += `<label class="flex items-center space-x-1 py-0.5 cursor-pointer hover:bg-blue-100 px-1 rounded">


+            <input type="checkbox" ${sel} onchange="toggleColumna('${tabla}','${c.nombre}',this.checked)" class="rounded">


+            <span>${c.nombre}</span>


+            <span class="text-gray-400 ml-1">(${c.tipo}${c.longitud ? ','+c.longitud : ''})</span>


+        </label>`;


+    });


+    return html;


+}


+


+function toggleTabla(tabla, checked) {


+    if (checked) {


+        tablasSeleccionadas[tabla] = { alias: 't' + (++aliasCounter), columnas: {} };


+    } else {


+        delete tablasSeleccionadas[tabla];


+    }


+    renderizarTablas();


+    actualizarVista();


+}


+


+function toggleColumna(tabla, columna, checked) {


+    if (!tablasSeleccionadas[tabla]) return;


+    if (checked) tablasSeleccionadas[tabla].columnas[columna] = true;


+    else delete tablasSeleccionadas[tabla].columnas[columna];


+    renderizarTablas();


+    actualizarVista();


+}


+


+function agregarFiltro() {


+    filtros.push({ tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' });


+    renderizarFiltros();


+    actualizarVista();


+}


+


+function renderizarFiltros() {


+    const div = document.getElementById('builder-where');


+    div.innerHTML = '';


+    if (!filtros.length) {


+        div.innerHTML = '<p class="text-xs text-gray-400 italic">Sin filtros (seleccionar todos los registros)</p>';


+        return;


+    }


+    filtros.forEach((f, i) => {


+        const opts = [];


+        Object.entries(tablasSeleccionadas).forEach(([t, info]) => {


+            const tInfo = esquema.find(e => e.tabla === t);


+            if (tInfo) tInfo.columnas.forEach(c => {


+                opts.push({ value: `${t}.${c.nombre}`, label: `${info.alias}.${c.nombre}` });


+            });


+        });


+        const row = document.createElement('div');


+        row.className = 'flex items-center space-x-2 text-xs';


+        row.innerHTML = `


+            <select onchange="actualizarFiltro(${i},'campo',this.value)" class="border rounded px-2 py-1 text-xs">


+                <option value="">--campo--</option>


+                ${opts.map(o => `<option value="${o.value}" ${f.campo===o.value?'selected':''}>${o.label}</option>`).join('')}


+            </select>


+            <select onchange="actualizarFiltro(${i},'operador',this.value)" class="border rounded px-2 py-1 text-xs w-20">


+                ${['=','>','<','>=','<=','<>','LIKE','BETWEEN'].map(o => `<option ${f.operador===o?'selected':''}>${o}</option>`).join('')}


+            </select>


+            <input type="text" value="${f.parametro}" onchange="actualizarFiltro(${i},'parametro',this.value)" placeholder=":param" class="border rounded px-2 py-1 text-xs font-mono w-28">


+            <button onclick="filtros.splice(${i},1);renderizarFiltros();actualizarVista();" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>


+        `;


+        if (i < filtros.length - 1) {


+            const op = document.createElement('div');


+            op.className = 'flex items-center space-x-2 mt-1';


+            op.innerHTML = `<select onchange="actualizarFiltro(${i+1},'condicion',this.value)" class="border rounded px-2 py-1 text-xs w-20">


+                <option value="AND" ${filtros[i+1]?.condicion==='AND'?'selected':''}>AND</option>


+                <option value="OR" ${filtros[i+1]?.condicion==='OR'?'selected':''}>OR</option>


+            </select>`;


+            div.appendChild(row);


+            div.appendChild(op);


+        } else {


+            div.appendChild(row);


+        }


+    });


+}


+


+function actualizarFiltro(i, prop, val) {


+    if (!filtros[i]) filtros[i] = { tabla: '', campo: '', operador: '=', parametro: '', condicion: 'AND' };


+    filtros[i][prop] = val;


+    actualizarVista();


+}


+


+function generarSql() {


+    const tabs = Object.entries(tablasSeleccionadas);


+    if (!tabs.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };


+


+    const selects = [];


+    const froms = [];


+    const allParams = new Set();


+


+    tabs.forEach(([tabla, info]) => {


+        froms.push({ tabla, alias: info.alias });


+        const cols = Object.keys(info.columnas);


+        if (cols.length) {


+            cols.forEach(c => selects.push(`${info.alias}.${c}`));


+        }


+    });


+


+    if (!selects.length) return { sql: '-- Seleccioná al menos una columna', params: [] };


+    if (!froms.length) return { sql: '-- Seleccioná al menos una tabla', params: [] };


+


+    let sql = 'SELECT\n    ' + selects.join(',\n    ');


+    sql += '\nFROM ' + froms.map((f, i) => {


+        if (i === 0) return `${f.tabla} ${f.alias}`;


+        return `JOIN ${f.tabla} ${f.alias} ON 1=1`; // basic join, user refines in editor


+    }).join('\n');


+


+    const wheres = [];


+    filtros.forEach(f => {


+        if (f.campo && f.parametro) {


+            const [t, c] = f.campo.split('.');


+            const info = tablasSeleccionadas[t];


+            if (info) {


+                wheres.push(`${info.alias}.${c} ${f.operador} ${f.parametro}`);


+                if (f.parametro.startsWith(':')) allParams.add(f.parametro);


+            }


+        }


+    });


+    if (wheres.length) sql += '\nWHERE ' + wheres.join(' ');


+


+    return { sql, params: Array.from(allParams) };


+}


+


+function actualizarVista() {


+    const { sql, params } = generarSql();


+    document.getElementById('builder-sql').value = sql;


+    document.getElementById('builder-params').textContent = params.length ? 'Parámetros: ' + params.join(', ') : 'Sin parámetros';


+


+    // Actualizar vista de columnas seleccionadas


+    const div = document.getElementById('builder-columnas');


+    const tabs = Object.entries(tablasSeleccionadas);


+    if (!tabs.length) {


+        div.innerHTML = '<p class="text-gray-400 italic">Seleccioná tablas y columnas</p>';


+        return;


+    }


+    let html = '';


+    tabs.forEach(([tabla, info]) => {


+        const cols = Object.keys(info.columnas);


+        if (cols.length) {


+            html += `<div class="mb-1"><span class="font-medium">${info.alias}.${tabla}</span>: `;


+            html += cols.map(c => `<code class="bg-blue-100 px-1 rounded">${c}</code>`).join(' ');


+            html += '</div>';


+        }


+    });


+    div.innerHTML = html || '<p class="text-gray-400 italic">Seleccioná columnas</p>';


+}


+


+function usarSql() {


+    const sql = document.getElementById('builder-sql').value;


+    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }


+    document.getElementById('q_text').value = sql;


+    if (sqlEditor) sqlEditor.setValue(sql);


+    mostrarEditor();


+    showToast('SQL copiado al editor');


+}


+


+function copiarSql() {


+    const sql = document.getElementById('builder-sql').value;


+    if (!sql || sql.startsWith('--')) { showToast('No hay SQL generado', 'warning'); return; }


+    navigator.clipboard.writeText(sql).then(() => showToast('SQL copiado al portapapeles'));


+}


+


+// Existing functions below


+function editQuery(id, name, type, text, desc) {


+    document.getElementById('query_id').value = id;


+    document.getElementById('q_name').value = name;


+    document.getElementById('q_type').value = type;


+    document.getElementById('q_text').value = text;


+    document.getElementById('q_desc').value = desc;


+    document.getElementById('btn-cancel').classList.remove('hidden');


+    document.querySelector('form').action = '/queries/update/' + id;


+    if (sqlEditor) sqlEditor.setValue(text);


+}


+function cancelEdit() {


+    document.getElementById('query_id').value = '';


+    document.getElementById('q_name').value = '';


+    document.getElementById('q_text').value = '';


+    document.getElementById('q_desc').value = '';


+    document.getElementById('btn-cancel').classList.add('hidden');


+    document.querySelector('form').action = '/queries/create';


+    if (sqlEditor) sqlEditor.setValue('');


+}


+async function listarTablas(btn) {


+    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Cargando...';


+    try {


+        const resp = await fetch('/queries/tablas', { method: 'POST' });


+        const data = await resp.json();


+        if (data.error) { showToast(data.error, 'error'); return; }


+        const div = document.getElementById('tablas-list');


+        div.innerHTML = '<div class="max-h-40 overflow-y-auto mt-2"><div class="grid grid-cols-3 gap-1">' +


+            data.tablas.map(t => '<code class="bg-white px-2 py-1 rounded border text-xs">' + t + '</code>').join('') +


+            '</div></div>';


+        div.classList.remove('hidden');


+    } catch(e) { showToast('Error: ' + e.message, 'error'); }


+    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-table mr-1"></i> Ver tablas disponibles'; }


+}


+let sqlEditor = null;


+


 async function initSqlEditor() {

     sqlEditor = CodeMirror(document.getElementById('sql-editor-wrapper'), {

         value: document.getElementById('q_text').value,

@@ -388,20 +388,19 @@ async function initSqlEditor() {
         indentWithTabs: true,

         smartIndent: true,

         lineWrapping: true,

-        extraKeys: {

-            'Ctrl-Space': 'autocomplete'

-        },

-        hintOptions: {

-            tables: {},

-            words: ['SELECT','FROM','WHERE','AND','OR','JOIN','LEFT','RIGHT','INNER','OUTER','ON','AS','IN','NOT','NULL','IS','LIKE','BETWEEN','INTO','VALUES','SET','UPDATE','DELETE','INSERT','CREATE','ALTER','DROP','TABLE','INDEX','VIEW','ORDER','BY','GROUP','HAVING','DISTINCT','COUNT','SUM','AVG','MIN','MAX','BETWEEN','EXISTS','UNION','ALL','ANY','CASE','WHEN','THEN','ELSE','END','CAST','COALESCE','NULLIF','DESC','ASC']

-        }

+        extraKeys: {'Ctrl-Space': 'autocomplete'}

     });

 

     sqlEditor.on('change', function() {

         document.getElementById('q_text').value = sqlEditor.getValue();

     });

 

-    // Cargar esquema para autocomplete

+    sqlEditor.on('inputRead', function(cm, change) {

+        if (change.text.length && /\w/.test(change.text[0])) {

+            cm.showHint({hint: CodeMirror.hint.sql, completeSingle: false});

+        }

+    });

+

     try {

         const resp = await fetch('/queries/esquema', { method: 'POST' });

         const data = await resp.json();

@@ -410,41 +409,43 @@ async function initSqlEditor() {
             data.tablas.forEach(t => {

                 tables[t.tabla] = t.columnas.map(c => c.nombre);

             });

-            sqlEditor.setOption('hintOptions', { tables });

+            sqlEditor.setOption('hintOptions', { tables,

+                words: ['SELECT','FROM','WHERE','AND','OR','JOIN','LEFT','RIGHT','INNER','OUTER','ON','AS','IN','NOT','NULL','IS','LIKE','BETWEEN','ORDER','BY','GROUP','HAVING','DISTINCT','COUNT','SUM','AVG','MIN','MAX','UNION','ALL','CASE','WHEN','THEN','ELSE','END','CAST','COALESCE','NULLIF','DESC','ASC']

+            });

         }

     } catch(e) {}

-}

-

-document.addEventListener('DOMContentLoaded', function() {

-    document.querySelector('form').addEventListener('submit', function() {

-        document.getElementById('q_text').value = sqlEditor ? sqlEditor.getValue() : document.getElementById('q_text').value;

-    });

-    initSqlEditor();

-});

-

-async function ejecutarTest(btn, queryId) {

-    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Probando...';

-    try {

-        const form = new FormData(); form.append('query_id', queryId);

-        const resp = await fetch('/queries/test', { method: 'POST', body: form });

-        const data = await resp.json();

-        if (data.error) { showToast(data.error, 'error'); return; }

-        let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';

-        data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold">' + c + '</th>'; });

-        html += '</tr></thead><tbody>';

-        data.rows.forEach(r => {

-            html += '<tr class="hover:bg-gray-50">';

-            data.columns.forEach(c => { html += '<td class="p-2 border">' + (r[c] ?? '') + '</td>'; });

-            html += '</tr>';

-        });

-        html += '</tbody></table>';

-        html += '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + data.rows.length + ')</p>';

-        const modal = document.createElement('div');

-        modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';

-        modal.innerHTML = '<div class="bg-white rounded-xl shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-auto p-6"><div class="flex justify-between items-center mb-4"><h3 class="font-semibold text-lg">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div>' + html + '</div>';

-        document.body.appendChild(modal);

-    } catch(e) { showToast('Error: ' + e.message, 'error'); }

-    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-play mr-1"></i> Probar'; }

-}

-</script>

-{% endblock %}

+}
+


+document.addEventListener('DOMContentLoaded', function() {


+    document.querySelector('form').addEventListener('submit', function() {


+        document.getElementById('q_text').value = sqlEditor ? sqlEditor.getValue() : document.getElementById('q_text').value;


+    });


+    initSqlEditor();


+});


+


+async function ejecutarTest(btn, queryId) {


+    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Probando...';


+    try {


+        const form = new FormData(); form.append('query_id', queryId);


+        const resp = await fetch('/queries/test', { method: 'POST', body: form });


+        const data = await resp.json();


+        if (data.error) { showToast(data.error, 'error'); return; }


+        let html = '<table class="w-full text-xs border-collapse"><thead><tr class="bg-gray-100">';


+        data.columns.forEach(c => { html += '<th class="p-2 border text-left font-semibold">' + c + '</th>'; });


+        html += '</tr></thead><tbody>';


+        data.rows.forEach(r => {


+            html += '<tr class="hover:bg-gray-50">';


+            data.columns.forEach(c => { html += '<td class="p-2 border">' + (r[c] ?? '') + '</td>'; });


+            html += '</tr>';


+        });


+        html += '</tbody></table>';


+        html += '<p class="text-xs text-gray-500 mt-2">Total: ' + data.total + ' registros (mostrando ' + data.rows.length + ')</p>';


+        const modal = document.createElement('div');


+        modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50';


+        modal.innerHTML = '<div class="bg-white rounded-xl shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-auto p-6"><div class="flex justify-between items-center mb-4"><h3 class="font-semibold text-lg">Resultado</h3><button onclick="this.closest(\'.fixed\').remove()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button></div>' + html + '</div>';


+        document.body.appendChild(modal);


+    } catch(e) { showToast('Error: ' + e.message, 'error'); }


+    finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-play mr-1"></i> Probar'; }


+}


+</script>


+{% endblock %}