diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1053e88
--- /dev/null
+++ b/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Acceso Operarios - IntegraRepara</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        body { 
+            background-color: #f8fafc; 
+            -webkit-tap-highlight-color: transparent;
+            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
+            background-size: 24px 24px;
+        }
+        .fade-in { animation: fadeIn 0.4s ease-out forwards; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    </style>
+</head>
+<body class="text-slate-800 font-sans antialiased h-screen flex flex-col items-center justify-center p-6 relative overflow-hidden">
+
+    <div class="absolute top-[-10%] left-[-10%] w-64 h-64 bg-blue-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
+    <div class="absolute bottom-[-10%] right-[-10%] w-64 h-64 bg-emerald-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
+
+    <div class="w-full max-w-sm z-10 fade-in">
+        
+        <div class="text-center mb-10">
+            <div class="w-20 h-20 bg-white rounded-[1.5rem] shadow-xl shadow-blue-500/10 border border-slate-100 flex items-center justify-center mx-auto mb-5">
+                <i data-lucide="wrench" class="w-10 h-10 text-blue-600"></i>
+            </div>
+            <h1 class="text-3xl font-black tracking-tight text-slate-800 uppercase">App Operario</h1>
+            <p class="text-sm font-medium text-slate-500 mt-2">Introduce tus credenciales de acceso</p>
+        </div>
+
+        <form id="loginForm" onsubmit="doLogin(event)" class="bg-white/80 backdrop-blur-xl p-8 rounded-[2rem] shadow-2xl shadow-slate-200/50 border border-white space-y-6">
+            
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Email o Teléfono</label>
+                    <div class="relative">
+                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                            <i data-lucide="user" class="w-5 h-5 text-slate-400"></i>
+                        </div>
+                        <input type="text" id="userInput" required placeholder="Ej: 600123456" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
+                    </div>
+                </div>
+
+                <div>
+                    <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Contraseña</label>
+                    <div class="relative">
+                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+                            <i data-lucide="lock" class="w-5 h-5 text-slate-400"></i>
+                        </div>
+                        <input type="password" id="passInput" required placeholder="••••••••" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
+                    </div>
+                </div>
+            </div>
+
+            <div id="errorMsg" class="hidden bg-rose-50 border border-rose-200 text-rose-600 text-xs font-bold p-3 rounded-xl text-center flex items-center justify-center gap-2">
+                <i data-lucide="alert-circle" class="w-4 h-4"></i> <span>Datos incorrectos</span>
+            </div>
+
+            <button type="submit" id="btnSubmit" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)] hover:bg-blue-700 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-2">
+                Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>
+            </button>
+
+        </form>
+
+        <p class="text-center text-[10px] font-bold text-slate-400 mt-8 uppercase tracking-widest">
+            Tecnología IntegraRepara
+        </p>
+
+    </div>
+
+    <script>
+        const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
+            ? 'http://localhost:3000' 
+            : 'https://integrarepara-api.integrarepara.es';
+
+        document.addEventListener("DOMContentLoaded", () => {
+            lucide.createIcons();
+            // Si ya tiene sesión iniciada, lo mandamos directo dentro de la app
+            if (localStorage.getItem("token") && localStorage.getItem("role") === "operario") {
+                window.location.href = "operario.html";
+            }
+        });
+
+        async function doLogin(e) {
+            e.preventDefault();
+            const btn = document.getElementById('btnSubmit');
+            const err = document.getElementById('errorMsg');
+            
+            const user = document.getElementById('userInput').value.trim();
+            const pass = document.getElementById('passInput').value;
+
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';
+            btn.disabled = true;
+            err.classList.add('hidden');
+            lucide.createIcons();
+
+            try {
+                const res = await fetch(`${API_URL}/auth/login`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email: user, password: pass })
+                });
+                
+                const data = await res.json();
+                
+                if (res.ok && data.ok) {
+                    // Guardamos la llave de acceso
+                    localStorage.setItem('token', data.token);
+                    localStorage.setItem('role', data.role);
+                    localStorage.setItem('userName', data.name);
+                    
+                    // Comprobamos que sea un operario
+                    if(data.role === 'operario') {
+                        btn.innerHTML = '<i data-lucide="check" class="w-5 h-5 mx-auto"></i>';
+                        lucide.createIcons();
+                        btn.classList.replace('bg-blue-600', 'bg-emerald-500');
+                        
+                        // Redirigimos a la app (al archivo que me pasaste antes)
+                        setTimeout(() => { window.location.href = "operario.html"; }, 800);
+                    } else {
+                        // Si se cuela un administrador, le avisamos o lo mandamos a su panel
+                        err.querySelector('span').innerText = "Esta app es solo para operarios";
+                        err.classList.remove('hidden');
+                        localStorage.clear();
+                    }
+                } else {
+                    err.querySelector('span').innerText = data.error || "Credenciales incorrectas";
+                    err.classList.remove('hidden');
+                }
+            } catch (error) {
+                err.querySelector('span').innerText = "Error de conexión con el servidor";
+                err.classList.remove('hidden');
+            } finally {
+                if(!res?.ok || !data?.ok) {
+                    btn.disabled = false;
+                    btn.innerHTML = 'Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>';
+                    lucide.createIcons();
+                }
+            }
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
