diff --git a/app/templates/base.html b/app/templates/base.html
index c7ab7cc..fab8e57 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,127 +1,136 @@
-<!DOCTYPE html>
-<html lang="es" class="h-full bg-gray-50">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RIPS Manager - {% block title %}Dashboard{% endblock %}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: {'50': '#eff6ff','100': '#dbeafe','200': '#bfdbfe','300': '#93c5fd','400': '#60a5fa','500': '#3b82f6','600': '#2563eb','700': '#1d4ed8','800': '#1e40af','900': '#1e3a8a'}
-                    }
-                }
-            }
-        }
-    </script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-</head>
-<body class="h-full">
-    <div class="min-h-full">
-        {% if user %}
-        <!-- Sidebar -->
-        <div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white z-30">
-            <div class="flex items-center h-16 px-6 border-b border-gray-700">
-                <i class="fas fa-file-medical text-blue-400 text-xl mr-3"></i>
-                <span class="font-bold text-lg">RIPS Manager</span>
-            </div>
-            <nav class="mt-4 px-3 space-y-1">
-                <a href="/dashboard" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/dashboard' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-chart-pie w-5 mr-2"></i> Dashboard
-                </a>
-                <a href="/config" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/config' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-cog w-5 mr-2"></i> Configuración
-                </a>
-                <a href="/queries" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/queries' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-database w-5 mr-2"></i> Consultas SQL
-                </a>
-                <hr class="my-3 border-gray-700">
-                <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Envíos</p>
-                <a href="/terceros" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/terceros' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-user w-5 mr-2"></i> Terceros
-                </a>
-                <a href="/transaccion" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/transaccion' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-exchange-alt w-5 mr-2"></i> Transacción RIPS
-                </a>
-                <a href="/automation" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/automation' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-robot w-5 mr-2"></i> Automatización
-                </a>
-                <hr class="my-3 border-gray-700">
-                <a href="/logs" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/logs' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
-                    <i class="fas fa-history w-5 mr-2"></i> Historial
-                </a>
-                <a href="/auth/logout" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:bg-gray-700">
-                    <i class="fas fa-sign-out-alt w-5 mr-2"></i> Salir
-                </a>
-            </nav>
-            <div class="absolute bottom-0 left-0 right-0 px-4 py-3 border-t border-gray-700">
-                <div class="flex items-center">
-                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-sm font-bold">
-                        {{ user.username[0]|upper }}
-                    </div>
-                    <div class="ml-3">
-                        <p class="text-sm font-medium text-white">{{ user.username }}</p>
-                        <p class="text-xs text-gray-400">Sesión activa</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Main content -->
-        <div class="pl-64">
-            <header class="bg-white shadow-sm border-b border-gray-200">
-                <div class="flex items-center justify-between h-16 px-8">
-                    <h1 class="text-xl font-semibold text-gray-800">{% block header %}Dashboard{% endblock %}</h1>
-                    <div class="flex items-center space-x-4">
-                        <span class="text-sm text-gray-500">
-                            <i class="far fa-calendar-alt mr-1"></i>
-                            <script>document.write(new Date().toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}))</script>
-                        </span>
-                    </div>
-                </div>
-            </header>
-            <main class="p-8">
-                {% block content %}{% endblock %}
-            </main>
-        </div>
-        {% else %}
-        <main>
-            {% block auth_content %}{% endblock %}
-        </main>
-        {% endif %}
-    </div>
-
-    <script>
-        console.log('%c RIPS Manager v1.0 ', 'background:#1e3a8a;color:white;font-size:18px;font-weight:bold;padding:8px 12px;border-radius:4px;');
-        console.log('%c Desarrollado por U-SITE SAS BIC', 'font-size:14px;');
-        console.log('%c https://u-site.app/', 'color:#2563eb;font-size:12px;');
-        console.log('%c Sistema de generacion y envio de RIPS (Res. 2275/2023)', 'font-style:italic;font-size:12px;');
-
-        async function fetchJSON(url, options = {}) {
-            const resp = await fetch(url, options);
-            return await resp.json();
-        }
-
-        function showToast(message, type = 'success') {
-            const colors = {success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500'};
-            const toast = document.createElement('div');
-            toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-500`;
-            toast.textContent = message;
-            document.body.appendChild(toast);
-            setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 4000);
-        }
-
-        function showLoading(btn) {
-            btn.disabled = true;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';
-        }
-
-        function hideLoading(btn, text) {
-            btn.disabled = false;
-            btn.innerHTML = text;
-        }
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es" class="h-full bg-gray-50">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RIPS Manager - {% block title %}Dashboard{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/sql/sql.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/show-hint.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/hint/sql-hint.min.js"></script>
+    <style>
+        .CodeMirror { border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 13px; height: auto; min-height: 200px; }
+        .CodeMirror-hints { font-size: 12px; }
+    </style>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {'50': '#eff6ff','100': '#dbeafe','200': '#bfdbfe','300': '#93c5fd','400': '#60a5fa','500': '#3b82f6','600': '#2563eb','700': '#1d4ed8','800': '#1e40af','900': '#1e3a8a'}
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+</head>
+<body class="h-full">
+    <div class="min-h-full">
+        {% if user %}
+        <!-- Sidebar -->
+        <div class="fixed inset-y-0 left-0 w-64 bg-gray-900 text-white z-30">
+            <div class="flex items-center h-16 px-6 border-b border-gray-700">
+                <i class="fas fa-file-medical text-blue-400 text-xl mr-3"></i>
+                <span class="font-bold text-lg">RIPS Manager</span>
+            </div>
+            <nav class="mt-4 px-3 space-y-1">
+                <a href="/dashboard" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/dashboard' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-chart-pie w-5 mr-2"></i> Dashboard
+                </a>
+                <a href="/config" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/config' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-cog w-5 mr-2"></i> Configuración
+                </a>
+                <a href="/queries" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/queries' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-database w-5 mr-2"></i> Consultas SQL
+                </a>
+                <hr class="my-3 border-gray-700">
+                <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Envíos</p>
+                <a href="/terceros" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/terceros' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-user w-5 mr-2"></i> Terceros
+                </a>
+                <a href="/transaccion" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/transaccion' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-exchange-alt w-5 mr-2"></i> Transacción RIPS
+                </a>
+                <a href="/automation" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/automation' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-robot w-5 mr-2"></i> Automatización
+                </a>
+                <hr class="my-3 border-gray-700">
+                <a href="/logs" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium {% if request.url.path == '/logs' %}bg-blue-600 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
+                    <i class="fas fa-history w-5 mr-2"></i> Historial
+                </a>
+                <a href="/auth/logout" class="flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-300 hover:bg-gray-700">
+                    <i class="fas fa-sign-out-alt w-5 mr-2"></i> Salir
+                </a>
+            </nav>
+            <div class="absolute bottom-0 left-0 right-0 px-4 py-3 border-t border-gray-700">
+                <div class="flex items-center">
+                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-sm font-bold">
+                        {{ user.username[0]|upper }}
+                    </div>
+                    <div class="ml-3">
+                        <p class="text-sm font-medium text-white">{{ user.username }}</p>
+                        <p class="text-xs text-gray-400">Sesión activa</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main content -->
+        <div class="pl-64">
+            <header class="bg-white shadow-sm border-b border-gray-200">
+                <div class="flex items-center justify-between h-16 px-8">
+                    <h1 class="text-xl font-semibold text-gray-800">{% block header %}Dashboard{% endblock %}</h1>
+                    <div class="flex items-center space-x-4">
+                        <span class="text-sm text-gray-500">
+                            <i class="far fa-calendar-alt mr-1"></i>
+                            <script>document.write(new Date().toLocaleDateString('es-CO', {year:'numeric',month:'long',day:'numeric'}))</script>
+                        </span>
+                    </div>
+                </div>
+            </header>
+            <main class="p-8">
+                {% block content %}{% endblock %}
+            </main>
+        </div>
+        {% else %}
+        <main>
+            {% block auth_content %}{% endblock %}
+        </main>
+        {% endif %}
+    </div>
+
+    <script>
+        console.log('%c RIPS Manager v1.0 ', 'background:#1e3a8a;color:white;font-size:18px;font-weight:bold;padding:8px 12px;border-radius:4px;');
+        console.log('%c Desarrollado por U-SITE SAS BIC', 'font-size:14px;');
+        console.log('%c https://u-site.app/', 'color:#2563eb;font-size:12px;');
+        console.log('%c Sistema de generacion y envio de RIPS (Res. 2275/2023)', 'font-style:italic;font-size:12px;');
+
+        async function fetchJSON(url, options = {}) {
+            const resp = await fetch(url, options);
+            return await resp.json();
+        }
+
+        function showToast(message, type = 'success') {
+            const colors = {success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500', warning: 'bg-yellow-500'};
+            const toast = document.createElement('div');
+            toast.className = `fixed top-4 right-4 z-50 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-500`;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 500); }, 4000);
+        }
+
+        function showLoading(btn) {
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';
+        }
+
+        function hideLoading(btn, text) {
+            btn.disabled = false;
+            btn.innerHTML = text;
+        }
+    </script>
+</body>
+</html>
diff --git a/app/templates/queries.html b/app/templates/queries.html
index de5f1d6..b392061 100644
--- a/app/templates/queries.html
+++ b/app/templates/queries.html
@@ -1,402 +1,450 @@
-{% 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 ..."></textarea>
-                    </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;
-    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;
-}
-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';
-}
-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'; }
-}
-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 %}
+{% 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,
+        mode: 'text/x-sql',
+        lineNumbers: true,
+        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']
+        }
+    });
+
+    sqlEditor.on('change', function() {
+        document.getElementById('q_text').value = sqlEditor.getValue();
+    });
+
+    // Cargar esquema para autocomplete
+    try {
+        const resp = await fetch('/queries/esquema', { method: 'POST' });
+        const data = await resp.json();
+        if (!data.error && data.tablas) {
+            const tables = {};
+            data.tablas.forEach(t => {
+                tables[t.tabla] = t.columnas.map(c => c.nombre);
+            });
+            sqlEditor.setOption('hintOptions', { tables });
+        }
+    } 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 %}
