Añadido Login/Register, Preferencias

.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(Get-ChildItem -Path \"c:\\\\Users\\\\usuario\\\\Desktop\\\\ValorSentimental\" -Recurse -Directory)",
+      "Bash(Select-Object -ExpandProperty FullName)",
+      "Bash(Sort-Object)",
+      "Bash(Get-ChildItem -Path \"c:\\\\Users\\\\usuario\\\\Desktop\\\\ValorSentimental\" -Recurse -Force)",
+      "Bash(Select-Object -Property FullName, Name)",
+      "Bash(ConvertTo-Json)",
+      "Bash(Out-String)"
+    ]
+  }
+}

backend/app_factory.py

@@ -10,6 +10,13 @@ from flask import Flask, jsonify, request
 from flask_cors import CORS
 
 from db import iniciar_historial_usuario
+from repositories.auth_repository import (
+    cambiar_contraseña,
+    cerrar_sesion,
+    eliminar_cuenta,
+    iniciar_sesion,
+    registrar_usuario,
+)
 from repositories.history_repository import (
     añadir_evento_emocional,
     borrar_historial_usuario,
@@ -39,6 +46,67 @@ def create_app() -> Flask:
 
     analysis_service = AnalysisService(modelo, movies_df, media_rating_global)
 
+    @app.route("/auth/register", methods=["POST"])
+    def register():
+        payload = request.json or {}
+        username = str(payload.get("username", "")).strip()
+        password = str(payload.get("password", "")).strip()
+        email = str(payload.get("email", "")).strip()
+        if not username or not password:
+            return jsonify({"error": "username y password son obligatorios"}), 400
+        if len(username) < 3:
+            return jsonify({"error": "El usuario debe tener al menos 3 caracteres"}), 400
+        if len(password) < 6:
+            return jsonify({"error": "La contraseña debe tener al menos 6 caracteres"}), 400
+        result = registrar_usuario(username, password, email)
+        if not result:
+            return jsonify({"error": "El nombre de usuario ya existe"}), 409
+        return jsonify(result), 201
+
+    @app.route("/auth/login", methods=["POST"])
+    def login():
+        payload = request.json or {}
+        username = str(payload.get("username", "")).strip()
+        password = str(payload.get("password", "")).strip()
+        if not username or not password:
+            return jsonify({"error": "username y password son obligatorios"}), 400
+        result = iniciar_sesion(username, password)
+        if not result:
+            return jsonify({"error": "Credenciales incorrectas"}), 401
+        return jsonify(result)
+
+    @app.route("/auth/logout", methods=["POST"])
+    def logout():
+        payload = request.json or {}
+        token = str(payload.get("token", "")).strip()
+        cerrar_sesion(token)
+        return jsonify({"ok": True})
+
+    @app.route("/auth/password", methods=["POST"])
+    def change_password():
+        payload      = request.json or {}
+        token        = str(payload.get("token",        "")).strip()
+        old_password = str(payload.get("old_password", "")).strip()
+        new_password = str(payload.get("new_password", "")).strip()
+        if not token or not old_password or not new_password:
+            return jsonify({"error": "token, old_password y new_password son obligatorios"}), 400
+        if len(new_password) < 6:
+            return jsonify({"error": "La nueva contraseña debe tener al menos 6 caracteres"}), 400
+        if not cambiar_contraseña(token, old_password, new_password):
+            return jsonify({"error": "Contraseña actual incorrecta o sesión inválida"}), 401
+        return jsonify({"ok": True})
+
+    @app.route("/auth/account", methods=["DELETE"])
+    def delete_account():
+        payload = request.json or {}
+        token = str(payload.get("token", "")).strip()
+        if not token:
+            return jsonify({"error": "token es obligatorio"}), 400
+        result = eliminar_cuenta(token)
+        if not result:
+            return jsonify({"error": "Token inválido o cuenta no encontrada"}), 401
+        return jsonify({"ok": True, "deleted_user": result["username"]})
+
     @app.route("/analizar", methods=["POST"])
     def analizar():
         payload = request.json or {}

backend/db.py

@@ -97,4 +97,16 @@ def iniciar_historial_usuario() -> None:
             ON ciclos_recomendaciones (user_id, created_at DESC)
             """
         )
+        conn.execute(
+            """
+            CREATE TABLE IF NOT EXISTS usuarios (
+                id TEXT PRIMARY KEY,
+                username TEXT UNIQUE NOT NULL,
+                email TEXT,
+                password_hash TEXT NOT NULL,
+                session_token TEXT,
+                created_at TEXT NOT NULL
+            )
+            """
+        )
         conn.commit()

backend/repositories/auth_repository.py

@@ -0,0 +1,91 @@
+import uuid
+from datetime import datetime, timezone
+
+from werkzeug.security import check_password_hash, generate_password_hash
+
+from db import obtener_conexion_bd
+
+
+def registrar_usuario(username: str, password: str, email: str = "") -> dict | None:
+    user_id = str(uuid.uuid4())
+    created_at = datetime.now(timezone.utc).isoformat()
+    password_hash = generate_password_hash(password)
+    token = str(uuid.uuid4())
+    try:
+        with obtener_conexion_bd() as conn:
+            conn.execute(
+                """INSERT INTO usuarios (id, username, email, password_hash, session_token, created_at)
+                   VALUES (?, ?, ?, ?, ?, ?)""",
+                (user_id, username, email, password_hash, token, created_at),
+            )
+            conn.commit()
+        return {"user_id": user_id, "username": username, "token": token}
+    except Exception:
+        return None
+
+
+def iniciar_sesion(username: str, password: str) -> dict | None:
+    with obtener_conexion_bd() as conn:
+        row = conn.execute(
+            "SELECT id, username, password_hash FROM usuarios WHERE username = ?",
+            (username,),
+        ).fetchone()
+    if not row or not check_password_hash(row["password_hash"], password):
+        return None
+    token = str(uuid.uuid4())
+    with obtener_conexion_bd() as conn:
+        conn.execute("UPDATE usuarios SET session_token = ? WHERE id = ?", (token, row["id"]))
+        conn.commit()
+    return {"user_id": row["id"], "username": row["username"], "token": token}
+
+
+def obtener_usuario_por_token(token: str) -> dict | None:
+    if not token:
+        return None
+    with obtener_conexion_bd() as conn:
+        row = conn.execute(
+            "SELECT id, username FROM usuarios WHERE session_token = ?",
+            (token,),
+        ).fetchone()
+    return dict(row) if row else None
+
+
+def cerrar_sesion(token: str) -> None:
+    if not token:
+        return
+    with obtener_conexion_bd() as conn:
+        conn.execute("UPDATE usuarios SET session_token = NULL WHERE session_token = ?", (token,))
+        conn.commit()
+
+
+def cambiar_contraseña(token: str, old_password: str, new_password: str) -> bool:
+    user = obtener_usuario_por_token(token)
+    if not user:
+        return False
+    with obtener_conexion_bd() as conn:
+        row = conn.execute(
+            "SELECT password_hash FROM usuarios WHERE id = ?", (user["id"],)
+        ).fetchone()
+    if not row or not check_password_hash(row["password_hash"], old_password):
+        return False
+    with obtener_conexion_bd() as conn:
+        conn.execute(
+            "UPDATE usuarios SET password_hash = ? WHERE id = ?",
+            (generate_password_hash(new_password), user["id"]),
+        )
+        conn.commit()
+    return True
+
+
+def eliminar_cuenta(token: str) -> dict | None:
+    user = obtener_usuario_por_token(token)
+    if not user:
+        return None
+    user_id = user["id"]
+    with obtener_conexion_bd() as conn:
+        conn.execute("DELETE FROM historial_peliculas WHERE user_id = ?", (user_id,))
+        conn.execute("DELETE FROM eventos_emociones WHERE user_id = ?", (user_id,))
+        conn.execute("DELETE FROM ciclos_recomendaciones WHERE user_id = ?", (user_id,))
+        conn.execute("DELETE FROM usuarios WHERE id = ?", (user_id,))
+        conn.commit()
+    return user

backend/services/recommender_service.py

@@ -68,6 +68,15 @@ def cargar_dataset_movies() -> tuple[list[dict], float]:
 
         return rows, global_mean
 
+    fallback_path = ROOT_DIR / "data" / "procesado" / "peliculas_100_emociones.csv"
+    if fallback_path.exists():
+        with open(fallback_path, "r", encoding="utf-8", newline="") as f:
+            rows = list(csv.DictReader(f))
+        total_w = sum(float(r.get("rating_mean", 0) or 0) * int(r.get("rating_count", 0) or 0) for r in rows)
+        total_n = sum(int(r.get("rating_count", 0) or 0) for r in rows)
+        fallback_mean = (total_w / total_n) if total_n else 3.5
+        return rows, fallback_mean
+
     return [], global_mean
 
 

chatbot/src/components/AppHero.vue

@@ -12,10 +12,29 @@
       </div>
 
       <div class="hero-controls">
-        <v-chip size="small" class="user-chip">
-          <v-icon start size="13">mdi-account-circle-outline</v-icon>
-          {{ userIdLabel }}
-        </v-chip>
+        <v-menu :close-on-content-click="true">
+          <template #activator="{ props: menuProps }">
+            <v-chip v-bind="menuProps" size="small" class="user-chip" style="cursor:pointer">
+              <v-icon start size="13">mdi-account-circle-outline</v-icon>
+              {{ username || 'Usuario' }}
+              <v-icon end size="13">mdi-chevron-down</v-icon>
+            </v-chip>
+          </template>
+          <v-list density="compact" rounded="lg" min-width="180">
+            <v-list-item prepend-icon="mdi-cog-outline" @click="router.push('/preferences')">
+              <v-list-item-title>Preferencias</v-list-item-title>
+            </v-list-item>
+            <v-divider class="my-1" />
+            <v-list-item prepend-icon="mdi-logout" @click="logout">
+              <v-list-item-title>Cerrar sesión</v-list-item-title>
+            </v-list-item>
+            <v-divider class="my-1" />
+            <v-list-item prepend-icon="mdi-account-remove-outline" @click="deleteDialog = true">
+              <v-list-item-title class="text-error">Eliminar cuenta</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+
         <v-btn
           icon
           size="small"
@@ -28,6 +47,26 @@
       </div>
     </div>
 
+    <!-- Delete account confirmation dialog -->
+    <v-dialog v-model="deleteDialog" max-width="380">
+      <v-card rounded="xl" elevation="24" style="background: var(--vs-panel); border: 1.5px solid var(--vs-border);">
+        <v-card-title class="pa-5 pb-3" style="font-family:'Fraunces',serif; font-size:1.1rem;">
+          <v-icon color="error" size="20" class="mr-2">mdi-account-remove-outline</v-icon>
+          Eliminar cuenta
+        </v-card-title>
+        <v-card-text class="px-5" style="color: var(--vs-muted); font-size:0.9rem; line-height:1.6;">
+          Se eliminarán tu cuenta y todos tus datos permanentemente. Esta acción no se puede deshacer.
+        </v-card-text>
+        <v-card-actions class="px-5 pb-4 pt-2">
+          <v-spacer />
+          <v-btn variant="text" color="blue-grey" @click="deleteDialog = false">Cancelar</v-btn>
+          <v-btn color="error" variant="flat" rounded="lg" :loading="deleteLoading" @click="confirmDelete">
+            Eliminar todo
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <p class="hero-subtitle">
       Cuéntame cómo te sientes y te recomendaré la película perfecta para tu estado de ánimo.
     </p>
@@ -35,20 +74,52 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useTheme } from "vuetify";
 
 defineProps({
-  userIdLabel: { type: String, default: "anon" },
+  username: { type: String, default: "" },
 });
 
-const router = useRouter();
-const theme  = useTheme();
-const isDark = computed(() => theme.global.current.value.dark);
+const router      = useRouter();
+const theme       = useTheme();
+const isDark      = computed(() => theme.global.current.value.dark);
+const deleteDialog  = ref(false);
+const deleteLoading = ref(false);
+
 function toggleTheme() {
   theme.global.name.value = isDark.value ? "vsLight" : "vsDark";
 }
+
+async function logout() {
+  const token = localStorage.getItem("vs_token") || "";
+  try {
+    await fetch("http://localhost:5000/auth/logout", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token }),
+    });
+  } catch { /* ignore */ }
+  ["vs_token", "vs_user_id", "vs_username"].forEach(k => localStorage.removeItem(k));
+  router.push("/login");
+}
+
+async function confirmDelete() {
+  deleteLoading.value = true;
+  const token = localStorage.getItem("vs_token") || "";
+  try {
+    await fetch("http://localhost:5000/auth/account", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token }),
+    });
+  } catch { /* ignore */ }
+  ["vs_token", "vs_user_id", "vs_username"].forEach(k => localStorage.removeItem(k));
+  deleteDialog.value  = false;
+  deleteLoading.value = false;
+  router.push("/login");
+}
 </script>
 
 <style scoped>

chatbot/src/router/index.js

@@ -1,11 +1,23 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import LandingPage from "../views/LandingPage.vue";
 import ChatView from "../views/ChatView.vue";
+import AuthView        from "../views/AuthView.vue";
+import PreferencesView from "../views/PreferencesView.vue";
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(),
   routes: [
-    { path: "/",     component: LandingPage },
-    { path: "/chat", component: ChatView },
+    { path: "/",            component: LandingPage },
+    { path: "/login",       component: AuthView },
+    { path: "/chat",        component: ChatView,        meta: { requiresAuth: true } },
+    { path: "/preferences", component: PreferencesView, meta: { requiresAuth: true } },
   ],
 });
+
+router.beforeEach((to) => {
+  const loggedIn = !!localStorage.getItem("vs_token");
+  if (to.meta.requiresAuth && !loggedIn) return "/login";
+  if (to.path === "/login" && loggedIn) return "/chat";
+});
+
+export default router;

chatbot/src/views/AuthView.vue

@@ -0,0 +1,374 @@
+<template>
+  <v-main class="auth-main">
+    <div class="auth-blobs">
+      <div class="blob-1" />
+      <div class="blob-2" />
+    </div>
+
+    <div class="auth-wrapper">
+      <!-- Brand -->
+      <div class="auth-brand" role="button" @click="router.push('/')">
+        <div class="brand-icon">
+          <v-icon color="amber-darken-1" size="22">mdi-movie-open-play-outline</v-icon>
+        </div>
+        <div>
+          <p class="brand-kicker">Recomendador emocional de cine</p>
+          <h1 class="brand-title">Valor Sentimental</h1>
+        </div>
+      </div>
+
+      <!-- Card -->
+      <div class="auth-card-wrap">
+        <v-card class="auth-card" rounded="xl" elevation="0">
+          <div class="auth-card-header">
+            <h2 class="card-title">
+              {{ activeTab === 'login' ? 'Bienvenido de vuelta' : 'Crear cuenta' }}
+            </h2>
+            <p class="card-subtitle">
+              {{ activeTab === 'login'
+                ? 'Inicia sesión para acceder al chat'
+                : 'Regístrate para guardar tu historial' }}
+            </p>
+          </div>
+
+          <v-tabs v-model="activeTab" color="primary" density="compact" class="auth-tabs">
+            <v-tab value="login">Iniciar sesión</v-tab>
+            <v-tab value="register">Registrarse</v-tab>
+          </v-tabs>
+
+          <v-divider />
+
+          <div class="form-wrap">
+            <!-- Login -->
+            <form v-if="activeTab === 'login'" class="auth-form" @submit.prevent="submitLogin">
+              <v-text-field
+                v-model="loginForm.username"
+                label="Nombre de usuario"
+                variant="outlined"
+                density="comfortable"
+                prepend-inner-icon="mdi-account-outline"
+                autocomplete="username"
+                hide-details="auto"
+                class="mb-4"
+              />
+              <v-text-field
+                v-model="loginForm.password"
+                label="Contraseña"
+                :type="showLoginPwd ? 'text' : 'password'"
+                variant="outlined"
+                density="comfortable"
+                prepend-inner-icon="mdi-lock-outline"
+                :append-inner-icon="showLoginPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                autocomplete="current-password"
+                hide-details="auto"
+                class="mb-4"
+                @click:append-inner="showLoginPwd = !showLoginPwd"
+              />
+              <v-alert
+                v-if="loginError"
+                type="error"
+                variant="tonal"
+                rounded="lg"
+                density="compact"
+                class="mb-4"
+              >
+                {{ loginError }}
+              </v-alert>
+              <v-btn
+                type="submit"
+                color="primary"
+                variant="flat"
+                block
+                rounded="lg"
+                size="large"
+                :loading="loginLoading"
+              >
+                Iniciar sesión
+              </v-btn>
+            </form>
+
+            <!-- Register -->
+            <form v-else class="auth-form" @submit.prevent="submitRegister">
+              <v-text-field
+                v-model="registerForm.username"
+                label="Nombre de usuario"
+                variant="outlined"
+                density="comfortable"
+                prepend-inner-icon="mdi-account-outline"
+                autocomplete="username"
+                hide-details="auto"
+                class="mb-4"
+              />
+              <v-text-field
+                v-model="registerForm.email"
+                label="Email (opcional)"
+                type="email"
+                variant="outlined"
+                density="comfortable"
+                prepend-inner-icon="mdi-email-outline"
+                autocomplete="email"
+                hide-details="auto"
+                class="mb-4"
+              />
+              <v-text-field
+                v-model="registerForm.password"
+                label="Contraseña"
+                :type="showRegPwd ? 'text' : 'password'"
+                variant="outlined"
+                density="comfortable"
+                prepend-inner-icon="mdi-lock-outline"
+                :append-inner-icon="showRegPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+                autocomplete="new-password"
+                hide-details="auto"
+                class="mb-4"
+                @click:append-inner="showRegPwd = !showRegPwd"
+              />
+              <v-alert
+                v-if="registerError"
+                type="error"
+                variant="tonal"
+                rounded="lg"
+                density="compact"
+                class="mb-4"
+              >
+                {{ registerError }}
+              </v-alert>
+              <v-btn
+                type="submit"
+                color="primary"
+                variant="flat"
+                block
+                rounded="lg"
+                size="large"
+                :loading="registerLoading"
+              >
+                Crear cuenta
+              </v-btn>
+            </form>
+          </div>
+        </v-card>
+      </div>
+    </div>
+  </v-main>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const activeTab = ref("login");
+
+const loginForm = ref({ username: "", password: "" });
+const loginError = ref("");
+const loginLoading = ref(false);
+const showLoginPwd = ref(false);
+
+const registerForm = ref({ username: "", email: "", password: "" });
+const registerError = ref("");
+const registerLoading = ref(false);
+const showRegPwd = ref(false);
+
+async function submitLogin() {
+  loginError.value = "";
+  if (!loginForm.value.username || !loginForm.value.password) {
+    loginError.value = "Completa todos los campos.";
+    return;
+  }
+  loginLoading.value = true;
+  try {
+    const res = await fetch("http://localhost:5000/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username: loginForm.value.username, password: loginForm.value.password }),
+    });
+    const data = await res.json();
+    if (!res.ok) { loginError.value = data.error || "Credenciales incorrectas."; return; }
+    localStorage.setItem("vs_token", data.token);
+    localStorage.setItem("vs_user_id", data.user_id);
+    localStorage.setItem("vs_username", data.username);
+    router.push("/chat");
+  } catch {
+    loginError.value = "Error de conexión con el servidor.";
+  } finally {
+    loginLoading.value = false;
+  }
+}
+
+async function submitRegister() {
+  registerError.value = "";
+  if (!registerForm.value.username || !registerForm.value.password) {
+    registerError.value = "Usuario y contraseña son obligatorios.";
+    return;
+  }
+  if (registerForm.value.username.length < 3) {
+    registerError.value = "El usuario debe tener al menos 3 caracteres.";
+    return;
+  }
+  if (registerForm.value.password.length < 6) {
+    registerError.value = "La contraseña debe tener al menos 6 caracteres.";
+    return;
+  }
+  registerLoading.value = true;
+  try {
+    const res = await fetch("http://localhost:5000/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        username: registerForm.value.username,
+        email: registerForm.value.email,
+        password: registerForm.value.password,
+      }),
+    });
+    const data = await res.json();
+    if (!res.ok) { registerError.value = data.error || "Error al crear la cuenta."; return; }
+    localStorage.setItem("vs_token", data.token);
+    localStorage.setItem("vs_user_id", data.user_id);
+    localStorage.setItem("vs_username", data.username);
+    router.push("/chat");
+  } catch {
+    registerError.value = "Error de conexión con el servidor.";
+  } finally {
+    registerLoading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.auth-main {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.auth-blobs {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.blob-1 {
+  position: absolute;
+  top: -15%;
+  right: -8%;
+  width: 520px;
+  height: 520px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(102,126,234,0.11) 0%, transparent 70%);
+  animation: liquidFloat 12s ease-in-out infinite;
+}
+
+.blob-2 {
+  position: absolute;
+  bottom: -18%;
+  left: -6%;
+  width: 440px;
+  height: 440px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(118,75,162,0.08) 0%, transparent 70%);
+  animation: liquidFloat 15s ease-in-out infinite reverse;
+}
+
+.auth-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 440px;
+  padding: 24px 16px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 28px;
+}
+
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.auth-brand:hover { opacity: 0.8; }
+
+.brand-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(212,175,55,0.1);
+  border: 1px solid rgba(212,175,55,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.brand-kicker {
+  margin: 0;
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--vs-gold, #d4af37);
+  opacity: 0.9;
+}
+
+.brand-title {
+  margin: 3px 0 0;
+  font-family: "Fraunces", serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--vs-text, #1a1a2e);
+  letter-spacing: -0.01em;
+}
+
+.auth-card-wrap { width: 100%; }
+
+.auth-card {
+  border: 1.5px solid var(--vs-border, rgba(102,126,234,0.15)) !important;
+  background: var(--vs-panel, rgba(255,255,255,0.85)) !important;
+  backdrop-filter: blur(16px) saturate(150%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
+  box-shadow: 0 8px 40px rgba(102,126,234,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
+}
+
+.auth-card-header {
+  padding: 28px 28px 16px;
+}
+
+.card-title {
+  font-family: "Fraunces", serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--vs-text, #1a1a2e);
+  margin: 0 0 6px;
+  letter-spacing: -0.01em;
+}
+
+.card-subtitle {
+  font-size: 0.875rem;
+  color: var(--vs-muted, #6b7280);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.auth-tabs {
+  padding: 0 16px;
+}
+
+.form-wrap {
+  padding: 24px 28px 28px;
+}
+
+.auth-form { display: flex; flex-direction: column; }
+
+@media (max-width: 480px) {
+  .auth-card-header { padding: 20px 20px 12px; }
+  .form-wrap { padding: 20px 20px 24px; }
+}
+</style>

chatbot/src/views/ChatView.vue

@@ -1,7 +1,7 @@
 <template>
   <v-main class="chat-main">
     <v-container fluid class="chat-container">
-      <AppHero :user-id-label="userIdLabel" />
+      <AppHero :username="username" />
 
       <v-row align="start" class="mt-0">
         <SidePanel
@@ -155,6 +155,7 @@ const messages    = ref([]);
 const input       = ref("");
 const loading     = ref(false);
 const userId      = ref("");
+const username    = ref("");
 const history     = ref([]);
 const estrategia  = ref(localStorage.getItem("vs_estrategia") || "v1");
 const followupByCycle    = ref({});
@@ -167,20 +168,14 @@ const confirmClearDialog = ref(false);
 const snackbar       = ref({ show: false, text: "", color: "success" });
 
 const viewedMovieIds = computed(() => new Set(history.value.map(i => String(i.movie_id))));
-const userIdLabel    = computed(() => userId.value ? userId.value.slice(0, 8) : "anon");
 
 function showSnack(text, color = "success") {
   snackbar.value = { show: true, text, color };
 }
 
 onMounted(() => {
-  const existing = localStorage.getItem("vs_user_id");
-  if (existing) { userId.value = existing; return; }
-  const generated = typeof crypto !== "undefined" && crypto.randomUUID
-    ? crypto.randomUUID()
-    : `anon_${Date.now()}_${Math.random().toString(16).slice(2)}`;
-  localStorage.setItem("vs_user_id", generated);
-  userId.value = generated;
+  userId.value   = localStorage.getItem("vs_user_id") || "";
+  username.value = localStorage.getItem("vs_username") || "";
 });
 
 watch(estrategia, v => localStorage.setItem("vs_estrategia", v));

chatbot/src/views/PreferencesView.vue

@@ -0,0 +1,184 @@
+<template>
+  <v-main class="pref-main">
+    <v-container class="pref-container" style="max-width:680px">
+
+      <!-- Topbar nav -->
+      <div class="pref-topbar">
+        <v-btn variant="text" size="small" prepend-icon="mdi-arrow-left" @click="router.back()">Volver</v-btn>
+        <div class="pref-brand">
+          <v-icon color="amber-darken-1" size="16" class="mr-1">mdi-cog-outline</v-icon>
+          <span class="pref-brand-text">Preferencias</span>
+        </div>
+        <v-btn variant="text" size="small" append-icon="mdi-chat-outline" to="/chat">Chat</v-btn>
+      </div>
+
+      <!-- Apariencia -->
+      <v-card class="pref-card mb-3" rounded="xl" elevation="0">
+        <v-card-item>
+          <template #prepend><v-icon color="primary" size="20">mdi-palette-outline</v-icon></template>
+          <v-card-title class="pref-stitle">Apariencia</v-card-title>
+        </v-card-item>
+        <v-card-text>
+          <v-btn-toggle v-model="themeName" mandatory color="primary" rounded="lg" density="comfortable">
+            <v-btn value="vsLight" prepend-icon="mdi-weather-sunny" size="small">Claro</v-btn>
+            <v-btn value="vsDark"  prepend-icon="mdi-weather-night" size="small">Oscuro</v-btn>
+          </v-btn-toggle>
+        </v-card-text>
+      </v-card>
+
+      <!-- Idioma -->
+      <v-card class="pref-card mb-3" rounded="xl" elevation="0">
+        <v-card-item>
+          <template #prepend><v-icon color="primary" size="20">mdi-translate</v-icon></template>
+          <v-card-title class="pref-stitle">Idioma</v-card-title>
+        </v-card-item>
+        <v-card-text>
+          <v-select
+            v-model="language"
+            :items="LANGS"
+            item-title="label"
+            item-value="value"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            style="max-width:220px"
+            @update:model-value="v => localStorage.setItem('vs_lang', v)"
+          />
+          <p class="hint mt-2">Los cambios de idioma se aplicarán al recargar.</p>
+        </v-card-text>
+      </v-card>
+
+      <!-- Contraseña -->
+      <v-card class="pref-card" rounded="xl" elevation="0">
+        <v-card-item>
+          <template #prepend><v-icon color="primary" size="20">mdi-lock-outline</v-icon></template>
+          <v-card-title class="pref-stitle">Contraseña</v-card-title>
+        </v-card-item>
+        <v-card-text>
+          <div class="pwd-grid">
+            <v-text-field
+              v-model="oldPwd"
+              label="Contraseña actual"
+              :type="showOld ? 'text' : 'password'"
+              variant="outlined"
+              density="comfortable"
+              :append-inner-icon="showOld ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+              hide-details
+              @click:append-inner="showOld = !showOld"
+            />
+            <v-text-field
+              v-model="newPwd"
+              label="Nueva contraseña"
+              :type="showNew ? 'text' : 'password'"
+              variant="outlined"
+              density="comfortable"
+              :append-inner-icon="showNew ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+              hide-details
+              @click:append-inner="showNew = !showNew"
+            />
+          </div>
+          <v-alert v-if="pwdMsg.text" :type="pwdMsg.type" variant="tonal" density="compact" rounded="lg" class="mt-3">
+            {{ pwdMsg.text }}
+          </v-alert>
+          <v-btn
+            color="primary"
+            variant="flat"
+            rounded="lg"
+            class="mt-3"
+            :loading="pwdLoading"
+            :disabled="!oldPwd || !newPwd"
+            @click="changePassword"
+          >
+            Actualizar contraseña
+          </v-btn>
+        </v-card-text>
+      </v-card>
+
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useRouter }      from "vue-router";
+import { useTheme }       from "vuetify";
+
+const router = useRouter();
+const theme  = useTheme();
+
+const LANGS = [
+  { label: "Castellano", value: "es" },
+  { label: "English",    value: "en" },
+  { label: "Galego",     value: "gl" },
+];
+
+const themeName = computed({
+  get: () => theme.global.name.value,
+  set: v  => { theme.global.name.value = v; },
+});
+
+const language = ref(localStorage.getItem("vs_lang") || "es");
+
+const oldPwd     = ref("");
+const newPwd     = ref("");
+const showOld    = ref(false);
+const showNew    = ref(false);
+const pwdLoading = ref(false);
+const pwdMsg     = ref({ text: "", type: "success" });
+
+async function changePassword() {
+  pwdMsg.value = { text: "", type: "success" };
+  if (newPwd.value.length < 6) {
+    pwdMsg.value = { text: "La nueva contraseña debe tener al menos 6 caracteres.", type: "error" };
+    return;
+  }
+  pwdLoading.value = true;
+  try {
+    const res  = await fetch("http://localhost:5000/auth/password", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        token:        localStorage.getItem("vs_token") || "",
+        old_password: oldPwd.value,
+        new_password: newPwd.value,
+      }),
+    });
+    const data = await res.json();
+    if (!res.ok) { pwdMsg.value = { text: data.error || "Error al actualizar.", type: "error" }; return; }
+    pwdMsg.value = { text: "Contraseña actualizada correctamente.", type: "success" };
+    oldPwd.value = newPwd.value = "";
+  } catch {
+    pwdMsg.value = { text: "Error de conexión.", type: "error" };
+  } finally {
+    pwdLoading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.pref-main      { min-height: 100vh; }
+.pref-container { padding: 24px 20px 48px; }
+
+.pref-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 28px;
+}
+
+.pref-brand      { display: flex; align-items: center; }
+.pref-brand-text { font-family: "Fraunces", serif; font-size: 1rem; font-weight: 700; color: var(--vs-text); }
+
+.pref-card {
+  border: 1.5px solid var(--vs-border) !important;
+  background: var(--vs-panel) !important;
+  backdrop-filter: blur(12px);
+}
+
+.pref-stitle { font-size: 0.9rem !important; font-weight: 700 !important; color: var(--vs-text) !important; }
+
+.pwd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.hint     { font-size: 0.78rem; color: var(--vs-muted); margin: 0; }
+
+@media (max-width: 540px) { .pwd-grid { grid-template-columns: 1fr; } }
+</style>