<div class="bg-white p-6 rounded-lg shadow-lg w-3/4 max-h-screen overflow-auto">
    <h3 class="text-xl font-bold mb-4">Editor de Esquema</h3>
    
    <!-- Pestañas -->
    <div class="border-b border-gray-200 mb-4">
        <div class="flex">
            <button onclick="switchEditorMode('visual')" 
                    id="visual-tab"
                    class="px-4 py-2 border-b-2 border-transparent hover:border-blue-500">
                Editor Visual
            </button>
            <button onclick="switchEditorMode('json')" 
                    id="json-tab"
                    class="px-4 py-2 border-b-2 border-transparent hover:border-blue-500">
                Editor JSON
            </button>
        </div>
    </div>

    <!-- Editor Visual -->
    <div id="visual-editor" class="mb-4">
        <div id="schema-fields"></div>
        <button onclick="addSchemaField()" class="mt-4 bg-green-500 text-white px-4 py-2 rounded">
            Agregar Campo
        </button>
    </div>

    <!-- Editor JSON -->
    <div id="json-editor" class="hidden">
        <textarea id="schema-content" class="w-full h-96 font-mono p-2 border rounded mb-4"></textarea>
    </div>

    <input type="hidden" id="schema-level">
    <div class="flex justify-end gap-4">
        <button onclick="document.getElementById('schema-editor').classList.add('hidden')"
            class="bg-gray-500 text-white px-4 py-2 rounded">
            Cancelar
        </button>
        <button onclick="saveSchema()"
            class="bg-blue-500 text-white px-4 py-2 rounded">
            Guardar
        </button>
    </div>
</div>
