diff --git a/mapeador2.html b/mapeador2.html
index 0c881ba..a337390 100644
--- a/mapeador2.html
+++ b/mapeador2.html
@@ -1,19 +1,177 @@
-<div class="card shadow-sm p-4">
-    <h2 class="mb-4">🎯 Configuración Maestra de Variables</h2>
-    <div class="table-responsive">
-        <table class="table table-hover align-middle">
-            <thead class="table-dark">
-                <tr>
-                    <th>Campo en tu CRM (Fijo)</th>
-                    <th>Variable Detectada en la Web</th>
-                    <th>Estado</th>
-                </tr>
-            </thead>
-            <tbody id="mappingBody">
-                </tbody>
-        </table>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mapeador Maestro - Integra Repara</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+        .card { border: none; border-radius: 15px; }
+        .table-fixed-header thead { position: sticky; top: 0; background: white; z-index: 10; }
+        .internal-label { font-weight: 600; color: #2c3e50; }
+        .sample-text { font-size: 0.85rem; color: #7f8c8d; font-style: italic; }
+        .badge-mapped { background-color: #27ae60; }
+        .badge-pending { background-color: #f39c12; }
+    </style>
+</head>
+<body>
+
+<div class="container py-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+            <h1 class="h3 mb-1"><i class="fas fa-map-signs text-primary me-2"></i>Mapeador Maestro</h1>
+            <p class="text-muted">Asocia los datos de la web con tus campos internos.</p>
+        </div>
+        <div class="d-flex gap-2">
+            <select id="providerSelect" class="form-select w-auto" onchange="loadMappingData()">
+                <option value="multiasistencia">Multiasistencia</option>
+                <option value="homeserve">HomeServe</option>
+            </select>
+            <button onclick="saveMapping()" class="btn btn-primary px-4">
+                <i class="fas fa-save me-2"></i>Guardar Configuración
+            </button>
+        </div>
     </div>
-    <div class="text-end mt-3">
-        <button onclick="saveFinalMapping()" class="btn btn-success btn-lg">🚀 Guardar y Activar Robot</button>
+
+    <div class="card shadow-sm">
+        <div class="card-body p-0">
+            <table class="table table-hover mb-0 align-middle">
+                <thead class="table-light">
+                    <tr>
+                        <th style="width: 30%;">Campo Interno (Tu CRM)</th>
+                        <th style="width: 40%;">Variable en la Web del Proveedor</th>
+                        <th style="width: 30%;">Ejemplo de Valor Actual</th>
+                    </tr>
+                </thead>
+                <tbody id="mappingBody">
+                    </tbody>
+            </table>
+        </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script src="./js/layout.js"></script>
+<script>
+    // LISTA DE VARIABLES QUE TÚ NECESITAS (Fijas)
+    const INTERNAL_FIELDS = [
+        { id: 'expediente', label: 'Número de Expediente' },
+        { id: 'compania', label: 'Compañía Aseguradora' },
+        { id: 'clientName', label: 'Nombre del Cliente' },
+        { id: 'phone', label: 'Teléfono Principal' },
+        { id: 'phone2', label: 'Teléfono Secundario' },
+        { id: 'address', label: 'Dirección Completa' },
+        { id: 'poblacion', label: 'Población / Localidad' },
+        { id: 'cp', label: 'Código Postal' },
+        { id: 'descripcion', label: 'Descripción de la Avería' },
+        { id: 'urgencia', label: 'Nivel de Urgencia' },
+        { id: 'tramitador', label: 'Nombre del Tramitador' },
+        { id: 'fecha_cita', label: 'Fecha de Realización' },
+        { id: 'notas', label: 'Observaciones / Notas' }
+    ];
+
+    let detectedKeys = []; // Aquí guardaremos lo que el robot ha encontrado
+
+    async function loadMappingData() {
+        const provider = document.getElementById('providerSelect').value;
+        const body = document.getElementById('mappingBody');
+        body.innerHTML = '<tr><td colspan="3" class="text-center py-5"><div class="spinner-border text-primary"></div></td></tr>';
+
+        try {
+            // 1. Pedimos al servidor TODAS las llaves que el robot ha detectado
+            const response = await fetch(`${API_URL}/discovery/keys/${provider}`, {
+                headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` }
+            });
+            const data = await response.json();
+            
+            if (!data.ok) throw new Error(data.error);
+            
+            detectedKeys = data.keys; // Guardamos las llaves detectadas por el robot
+            renderTable();
+        } catch (err) {
+            body.innerHTML = `<tr><td colspan="3" class="text-center text-danger">Error: ${err.message}</td></tr>`;
+        }
+    }
+
+    function renderTable() {
+        const body = document.getElementById('mappingBody');
+        body.innerHTML = '';
+
+        INTERNAL_FIELDS.forEach(field => {
+            // Buscamos si este campo ya tiene algo mapeado en la base de datos
+            const currentMapping = detectedKeys.find(k => k.mappedTo === field.id);
+            
+            let optionsHtml = `<option value="">-- No mapeado (Ignorar) --</option>`;
+            
+            detectedKeys.forEach(dk => {
+                const selected = dk.mappedTo === field.id ? 'selected' : '';
+                optionsHtml += `<option value="${dk.original}" ${selected}>${dk.original}</option>`;
+            });
+
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>
+                    <span class="internal-label">${field.label}</span><br>
+                    <code>${field.id}</code>
+                </td>
+                <td>
+                    <select class="form-select mapping-select" data-internal="${field.id}">
+                        ${optionsHtml}
+                    </select>
+                </td>
+                <td>
+                    <div class="sample-text" id="sample-${field.id}">
+                        ${currentMapping ? currentMapping.sample : 'Selecciona una variable...'}
+                    </div>
+                </td>
+            `;
+            body.appendChild(row);
+        });
+
+        // Escuchar cambios en los selects para actualizar el ejemplo de valor
+        document.querySelectorAll('.mapping-select').forEach(select => {
+            select.addEventListener('change', (e) => {
+                const internalId = e.target.dataset.internal;
+                const originalKey = e.target.value;
+                const sampleDiv = document.getElementById(`sample-${internalId}`);
+                
+                const found = detectedKeys.find(k => k.original === originalKey);
+                sampleDiv.innerText = found ? found.sample : '---';
+            });
+        });
+    }
+
+    async function saveMapping() {
+        const provider = document.getElementById('providerSelect').value;
+        const selects = document.querySelectorAll('.mapping-select');
+        
+        const mappings = Array.from(selects).map(s => ({
+            original: s.value,
+            target: s.dataset.internal,
+            ignored: s.value === ""
+        })).filter(m => m.original !== "");
+
+        try {
+            const res = await fetch(`${API_URL}/discovery/save`, {
+                method: 'POST',
+                headers: { 
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${localStorage.getItem('token')}` 
+                },
+                body: JSON.stringify({ provider, mappings })
+            });
+
+            if (await res.json()) {
+                alert("✅ Configuración guardada. El robot usará estos campos ahora.");
+            }
+        } catch (err) {
+            alert("❌ Error al guardar.");
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', loadMappingData);
+</script>
+
+</body>
+</html>
\ No newline at end of file
