diff --git a/docker-compose.yml b/docker-compose.yml
index 87578d5..5bb0267 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,7 +13,6 @@ services:
     volumes:
       - ./pagos:/var/www/html
       - ./docker/nginx.conf:/etc/nginx/conf.d/default.conf
-      - ./docker/htpasswd:/etc/nginx/.htpasswd:ro
     depends_on:
       - app
     networks:
diff --git a/docker/htpasswd b/docker/htpasswd
deleted file mode 100644
index f12f6cc..0000000
--- a/docker/htpasswd
+++ /dev/null
@@ -1 +0,0 @@
-root:$apr1$69HFcTHn$9hHiieirPfFe3M.lo87O21
diff --git a/docker/nginx.conf b/docker/nginx.conf
index de7c45a..544634f 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -5,9 +5,6 @@ server {
 
     resolver 127.0.0.11 valid=10s;
 
-    auth_basic "Quiet Wealth";
-    auth_basic_user_file /etc/nginx/.htpasswd;
-
     location / {
         try_files $uri $uri/ =404;
     }
@@ -18,8 +15,6 @@ server {
         fastcgi_index index.php;
         include fastcgi_params;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-        fastcgi_param PHP_AUTH_USER $remote_user;
-        fastcgi_param PHP_AUTH_PW $http_authorization;
     }
 
     location ~ /db/ {
diff --git a/pagos/api/auth.php b/pagos/api/auth.php
index 132ea9f..456552a 100644
--- a/pagos/api/auth.php
+++ b/pagos/api/auth.php
@@ -1,11 +1,10 @@
 <?php
-// pagos/api/auth.php
-// Las credenciales viven en config.php (gitignoreado). Ver config.example.php.
 require_once __DIR__ . '/config.php';
 
-if (!isset($_SERVER['PHP_AUTH_USER']) || $_SERVER['PHP_AUTH_USER'] !== AUTH_USER || $_SERVER['PHP_AUTH_PW'] !== AUTH_PASS) {
-    header('WWW-Authenticate: Basic realm="Sanctuary Finanzas"');
-    header('HTTP/1.0 401 Unauthorized');
-    die("Acceso denegado.");
+session_start();
+
+if (!isset($_SESSION['qw_auth'])) {
+    http_response_code(401);
+    header('Content-Type: application/json');
+    die(json_encode(['status' => 'error', 'message' => 'No autenticado']));
 }
-?>
diff --git a/pagos/api/login.php b/pagos/api/login.php
new file mode 100644
index 0000000..89f3d01
--- /dev/null
+++ b/pagos/api/login.php
@@ -0,0 +1,27 @@
+<?php
+require_once __DIR__ . '/config.php';
+session_start();
+header('Content-Type: application/json');
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $data = json_decode(file_get_contents('php://input'), true);
+    if (isset($data['user'], $data['pass'])
+        && $data['user'] === AUTH_USER
+        && $data['pass'] === AUTH_PASS) {
+        $_SESSION['qw_auth'] = true;
+        echo json_encode(['status' => 'success']);
+    } else {
+        http_response_code(401);
+        echo json_encode(['status' => 'error', 'message' => 'Usuario o contraseña incorrectos']);
+    }
+    exit;
+}
+
+if (($_GET['action'] ?? '') === 'logout') {
+    session_destroy();
+    echo json_encode(['status' => 'success']);
+    exit;
+}
+
+http_response_code(405);
+echo json_encode(['status' => 'error', 'message' => 'Método no permitido']);
diff --git a/pagos/js/add.js b/pagos/js/add.js
index f609b34..4c0f7f9 100644
--- a/pagos/js/add.js
+++ b/pagos/js/add.js
@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
     iptFecha.valueAsDate = new Date();
 
     // Cargar categorías desde la API
-    fetch('api/movimientos.php')
+    apiFetch('api/movimientos.php')
         .then(r => r.json())
         .then(data => {
             if (data.categorias) {
@@ -98,7 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
             btnSave.innerHTML = 'Guardando...';
             btnSave.disabled = true;
 
-            const r = await fetch('api/movimientos.php', {
+            const r = await apiFetch('api/movimientos.php', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload)
diff --git a/pagos/js/dashboard.js b/pagos/js/dashboard.js
index 4883a95..e498614 100644
--- a/pagos/js/dashboard.js
+++ b/pagos/js/dashboard.js
@@ -1,6 +1,6 @@
 document.addEventListener('DOMContentLoaded', async () => {
     try {
-        const response = await fetch('api/movimientos.php');
+        const response = await apiFetch('api/movimientos.php');
         const data = await response.json();
         
         if (data.status === 'success') {
diff --git a/pagos/js/historial.js b/pagos/js/historial.js
index 0816b55..c403b02 100644
--- a/pagos/js/historial.js
+++ b/pagos/js/historial.js
@@ -8,7 +8,7 @@ async function cargarHistorial() {
     const lista   = document.getElementById('ui-lista');
 
     try {
-        const r = await fetch('api/movimientos.php?view=historial');
+        const r = await apiFetch('api/movimientos.php?view=historial');
         const data = await r.json();
 
         loading.classList.add('hidden');
@@ -83,7 +83,7 @@ async function eliminar(id, titulo) {
     if (!ok) return;
 
     try {
-        const r = await fetch('api/movimientos.php', {
+        const r = await apiFetch('api/movimientos.php', {
             method: 'DELETE',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ id: parseInt(id) })
diff --git a/pagos/js/ui.js b/pagos/js/ui.js
index c8a0029..345cd72 100644
--- a/pagos/js/ui.js
+++ b/pagos/js/ui.js
@@ -1,3 +1,13 @@
+// Wrapper de fetch que redirige al login si la sesión expiró
+window.apiFetch = async function (url, options = {}) {
+    const r = await fetch(url, options);
+    if (r.status === 401) {
+        window.location.href = 'login.html';
+        return null;
+    }
+    return r;
+};
+
 (function () {
     const MODAL_HTML = `
     <div id="rm-modal-overlay" class="fixed inset-0 z-[100] flex items-end justify-center p-6 bg-black/50 backdrop-blur-sm hidden">
diff --git a/pagos/login.html b/pagos/login.html
new file mode 100644
index 0000000..623e899
--- /dev/null
+++ b/pagos/login.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Quiet Wealth — Acceso</title>
+<script src="js/tailwind.cdn.js"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+    tailwind.config = {
+        darkMode: "class",
+        theme: {
+            extend: {
+                colors: {
+                    "background": "#f8faf9",
+                    "surface-container-lowest": "#ffffff",
+                    "surface-container-low": "#f2f4f3",
+                    "surface-container": "#eceeed",
+                    "on-surface": "#191c1c",
+                    "on-surface-variant": "#3e4948",
+                    "primary": "#005050",
+                    "primary-container": "#006a6a",
+                    "on-primary": "#ffffff",
+                    "error": "#ba1a1a",
+                    "outline": "#6e7979",
+                    "outline-variant": "#bec9c8",
+                },
+                fontFamily: { headline: ["Manrope"], body: ["Manrope"] }
+            }
+        }
+    }
+</script>
+<style>
+    body { font-family: 'Manrope', sans-serif; }
+    .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+</style>
+</head>
+<body class="bg-background min-h-screen flex items-center justify-center px-6">
+
+<div class="w-full max-w-sm space-y-8">
+    <!-- Logo / título -->
+    <div class="text-center space-y-3">
+        <div class="inline-flex items-center justify-center w-16 h-16 rounded-[1.5rem] bg-gradient-to-br from-primary to-primary-container shadow-lg shadow-primary/20">
+            <span class="material-symbols-outlined text-white text-3xl" style="font-variation-settings:'FILL' 1;">account_balance_wallet</span>
+        </div>
+        <div>
+            <h1 class="text-2xl font-extrabold text-primary tracking-tight">Quiet Wealth</h1>
+            <p class="text-sm text-on-surface-variant mt-1">Ingresá para continuar</p>
+        </div>
+    </div>
+
+    <!-- Formulario -->
+    <div class="bg-surface-container-lowest rounded-[2rem] p-7 shadow-sm space-y-5">
+        <div class="space-y-2">
+            <label class="text-[11px] uppercase tracking-widest font-bold text-on-surface-variant">Usuario</label>
+            <div class="flex items-center gap-3 bg-surface-container-low px-4 py-3.5 rounded-xl">
+                <span class="material-symbols-outlined text-outline text-[20px]">person</span>
+                <input id="inp-user" type="text" autocomplete="username"
+                    class="bg-transparent text-sm font-semibold w-full focus:outline-none text-on-surface placeholder-outline"
+                    placeholder="Usuario"/>
+            </div>
+        </div>
+        <div class="space-y-2">
+            <label class="text-[11px] uppercase tracking-widest font-bold text-on-surface-variant">Contraseña</label>
+            <div class="flex items-center gap-3 bg-surface-container-low px-4 py-3.5 rounded-xl">
+                <span class="material-symbols-outlined text-outline text-[20px]">lock</span>
+                <input id="inp-pass" type="password" autocomplete="current-password"
+                    class="bg-transparent text-sm font-semibold w-full focus:outline-none text-on-surface placeholder-outline"
+                    placeholder="Contraseña"/>
+            </div>
+        </div>
+
+        <p id="ui-error" class="hidden text-sm text-error font-semibold text-center pt-1"></p>
+
+        <button id="btn-login"
+            class="w-full h-14 bg-gradient-to-br from-primary to-primary-container text-white rounded-xl font-bold text-base shadow-lg shadow-primary/20 active:scale-[0.98] transition-transform flex items-center justify-center gap-2 mt-2">
+            <span>Ingresar</span>
+            <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
+        </button>
+    </div>
+</div>
+
+<script>
+    const btnLogin = document.getElementById('btn-login');
+    const inpUser  = document.getElementById('inp-user');
+    const inpPass  = document.getElementById('inp-pass');
+    const uiError  = document.getElementById('ui-error');
+
+    async function login() {
+        uiError.classList.add('hidden');
+        btnLogin.disabled = true;
+        btnLogin.innerHTML = '<span>Verificando...</span>';
+
+        try {
+            const r = await fetch('api/login.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ user: inpUser.value, pass: inpPass.value })
+            });
+            const data = await r.json();
+
+            if (data.status === 'success') {
+                window.location.href = 'index.html';
+            } else {
+                uiError.textContent = data.message;
+                uiError.classList.remove('hidden');
+                btnLogin.disabled = false;
+                btnLogin.innerHTML = '<span>Ingresar</span><span class="material-symbols-outlined text-[20px]">arrow_forward</span>';
+            }
+        } catch {
+            uiError.textContent = 'Error de conexión con el servidor.';
+            uiError.classList.remove('hidden');
+            btnLogin.disabled = false;
+            btnLogin.innerHTML = '<span>Ingresar</span><span class="material-symbols-outlined text-[20px]">arrow_forward</span>';
+        }
+    }
+
+    btnLogin.addEventListener('click', login);
+    document.addEventListener('keydown', (e) => { if (e.key === 'Enter') login(); });
+
+    // Si ya está autenticado, redirigir directo
+    fetch('api/login.php').then(r => {
+        if (r.status === 200) window.location.href = 'index.html';
+    }).catch(() => {});
+</script>
+</body>
+</html>