diff --git a/src/app/(Administrador)/cambiarPass/page.tsx b/src/app/(Administrador)/cambiarPass/page.tsx
index 089183d..94529fa 100644
--- a/src/app/(Administrador)/cambiarPass/page.tsx
+++ b/src/app/(Administrador)/cambiarPass/page.tsx
@@ -4,80 +4,124 @@ import { useState } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
 import "../../styles/layout/ForgotPasswordPage.scss";
-import Link from "next/link";
 
-export default function Page() {
+export default function UpdateUserPage() {
+  const [id_User, setId_User] = useState("");
   const [nombre, setNombre] = useState("");
-  const [contraseña, setContraseña] = useState("");
+  const [contrasena, setContrasena] = useState("");
+  const [tipoUsuario, setTipoUsuario] = useState("");
   const [loading, setLoading] = useState(false);
 
-  const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
-    ev.preventDefault();
+  const userIdList = [1, 2, 3, 10, 11, 12, 100, 101, 150];
 
-    if (nombre.trim().length < 3) {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!id_User || isNaN(Number(id_User))) {
+      toast.error("El ID de usuario es obligatorio y debe ser un número.");
+      return;
+    }
+
+    if (nombre && nombre.trim().length < 3) {
       toast.error("El nombre debe tener al menos 3 caracteres.");
       return;
     }
 
-    if (contraseña.trim().length < 6) {
+    if (contrasena && contrasena.length < 6) {
       toast.error("La contraseña debe tener al menos 6 caracteres.");
       return;
     }
 
-    try {
-      setLoading(true);
-      const res = await axios.post("/api/admin/change-password", {
-        nombre,
-        contraseña,
-      });
+    if (tipoUsuario && isNaN(Number(tipoUsuario))) {
+      toast.error("El tipo de usuario debe ser un número.");
+      return;
+    }
 
-      if (res.status === 200) {
-        toast.success("Contraseña actualizada correctamente.");
-        setNombre("");
-        setContraseña("");
-      } else {
-        toast.error("No se pudo cambiar la contraseña.");
-      }
-    } catch (error) {
-      console.error(error);
-      toast.error("Ocurrió un error al cambiar la contraseña.");
+    // 🔒 Tu backend (dejado comentado)
+    /*
+    setLoading(true);
+
+    try {
+      const body = { id_User: Number(id_User) };
+      if (nombre) body.nombre = nombre;
+      if (contrasena) body.contrasena = contrasena;
+      if (tipoUsuario) body.tipoUsuario = Number(tipoUsuario);
+
+      await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/rauth/update`,
+        body
+      );
+
+      toast.success("Usuario actualizado correctamente.");
+      setId_User("");
+      setNombre("");
+      setContrasena("");
+      setTipoUsuario("");
+    } catch (err) {
+      ...
     } finally {
       setLoading(false);
     }
+    */
+
+    toast.success("✅ Listo para enviar. Backend aún en desarrollo.");
   };
 
   return (
     <section className="forgot-password-page">
-      <div>
-
-        <h1>Cambiar contraseña  de operador</h1>
-        <p>Ingresa el nombre del usuario y su nueva contraseña.</p>
+      <div className="forgot-form-container">
+        <h1>Actualizar contraseña</h1>
+        <p>Ingresa el ID y los campos que deseas modificar.</p>
 
         <form onSubmit={handleSubmit} className="forgot-form">
-          <label htmlFor="nombre">Nombre de usuario</label>
-          <input
-            id="nombre"
-            type="text"
-            value={nombre}
-            onChange={(e) => setNombre(e.target.value)}
-            placeholder="Nombre de usuario"
-            required
-          />
+          {/* Input con autocompletar */}
+          <div>
+            <label>ID de usuario *</label>
+            <input
+              type="text"
+              list="id_suggestions"
+              placeholder="ID del usuario"
+              value={id_User}
+              onChange={(e) => setId_User(e.target.value)}
+              required
+            />
+          </div>
 
-          <label htmlFor="contraseña">Nueva contraseña</label>
-          <input
-            id="contraseña"
-            type="password"
-            value={contraseña}
-            onChange={(e) => setContraseña(e.target.value)}
-            placeholder="Nueva contraseña"
-            required
-          />
+          <div>
+            <label>Nombre (opcional)</label>
+            <input
+              type="text"
+              placeholder="Nuevo nombre"
+              value={nombre}
+              onChange={(e) => setNombre(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label>Nueva contraseña (opcional)</label>
+            <input
+              type="password"
+              placeholder="Nueva contraseña"
+              value={contrasena}
+              onChange={(e) => setContrasena(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label>Tipo de usuario (opcional)</label>
+            <select
+              value={tipoUsuario}
+              onChange={(e) => setTipoUsuario(e.target.value)}
+            >
+              <option value="">Seleccionar tipo</option>
+              <option value="1">1 - Administrador</option>
+              <option value="2">2 - Operador</option>
+            </select>
+          </div>
 
           <button type="submit" disabled={loading}>
-            {loading ? "Actualizando..." : "Cambiar contraseña"}
+            {loading ? "Actualizando..." : "Actualizar contraseña"}
           </button>
-
         </form>
       </div>
     </section>
diff --git a/src/app/styles/layout/ForgotPasswordPage.scss b/src/app/styles/layout/ForgotPasswordPage.scss
index c32595e..b97bb9e 100644
--- a/src/app/styles/layout/ForgotPasswordPage.scss
+++ b/src/app/styles/layout/ForgotPasswordPage.scss
@@ -1,106 +1,132 @@
 // =====================================
-// Forgot Password Page Styles (Responsive)
+// Forgot Password / Update User Page
+// Estilo igual al LOGIN (bordes azules,
+// contenedor blanco, título amarillo)
 // =====================================
 
 .forgot-password-page {
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   width: 100%;
+  min-height: 100vh;
   padding: 2rem;
-  border-radius: 1rem;
   color: #222;
-  transition: background 0.3s ease, color 0.3s ease;
 
-  h1 {
-    font-size: 2rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
+  .forgot-form-container {
+    width: 100%;
+    max-width: 420px;
+    padding: 2rem 1.5rem;
+    border-radius: 14px;
+    display: flex;
+    flex-direction: column;
     text-align: center;
-    color: #1a73e8;
-  }
 
-  p {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-bottom: 1.5rem;
-    text-align: center;
-    color: #555;
-  }
-
-  .forgot-form {
-    display: grid;
-    gap: 1rem;
-
-    label {
-      font-weight: 500;
-      color: #222;
+    h1 {
+      font-size: 3rem;
+      font-weight: 700;
+      margin-bottom: 1.5rem;
+      color: #bd8c01; // Amarillo tipo login
     }
 
-    input[type="text"],
-    input[type="password"] {
-      padding: 1rem 0.8rem;
-      border: 1px solid #ccc;
-      border-radius: 8px;
+    p {
       font-size: 1rem;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-      &:focus {
-        border-color: #1a73e8;
-        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
-        outline: none;
-      }
+      color: #444;
+      margin-bottom: 1.5rem;
     }
 
-    button[type="submit"] {
-      background-color: #1a73e8;
-      color: #fff;
-      font-weight: 600;
-      padding: 1rem;
-      border-radius: 8px;
-      border: none;
-      cursor: pointer;
-      transition: background-color 0.3s ease, transform 0.2s ease;
+    .forgot-form {
+      display: grid;
+      gap: 1rem;
 
-      &:hover:not(:disabled) {
-        background-color: #155fc0;
-        transform: translateY(-2px);
+      label {
+        font-weight: 600;
+        color: #333;
+        text-align: left;
+        margin-bottom: 0.4rem;
+        display: block;
       }
 
-      &:disabled {
-        background-color: #b3d0ff;
-        cursor: not-allowed;
+      // === INPUTS Y SELECT (mismo estilo)
+      input[type="text"],
+      input[type="password"],
+      select {
+        width: 100%;
+        padding: 1.2rem 1.5rem;
+        border: 2px solid #003e79; // borde azul login
+        border-radius: 10px;
+        font-size: 1rem;
+        background: white;
+        appearance: none;
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+        &:focus {
+          outline: none;
+          border-color: #004aad;
+          box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.15);
+        }
       }
-    }
 
-    a {
-      display: inline-block;
-      font-size: 0.9rem;
-      color: #1a73e8;
-      text-decoration: none;
-      text-align: center;
+      button[type="submit"] {
+        width: 100%;
+        padding: 1.2rem;
+        font-size: 1rem;
+        font-weight: 700;
+        background-color: #004aad;
+        color: white;
+        border: none;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: background 0.25s ease, transform 0.15s ease;
 
-      &:hover {
-        text-decoration: underline;
+        &:hover:not(:disabled) {
+          background-color: #003e79;
+          transform: translateY(-2px);
+        }
+
+        &:disabled {
+          background-color: #9fbce8;
+          cursor: not-allowed;
+        }
+      }
+
+      a {
+        text-align: center;
+        color: #004aad;
+        font-size: 0.9rem;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
       }
     }
   }
 }
 
 // =====================================
-// Modo oscuro
+// MODO OSCURO
 // =====================================
 
 [data-theme="dark"] .forgot-password-page {
   background: #1e1e1e;
-  color: #eee;
 
-  input[type="text"],
-  input[type="password"] {
+  .forgot-form-container {
     background: #2a2a2a;
-    border-color: #444;
-    color: #f3f3f3;
+    box-shadow: none;
+  }
+
+  label {
+    color: #ddd;
+  }
+
+  // === INPUTS Y SELECT en modo oscuro ===
+  input[type="text"],
+  input[type="password"],
+  select {
+    background: #333;
+    border-color: #555;
+    color: #fff;
 
     &:focus {
       border-color: #4a90e2;
@@ -122,73 +148,52 @@
 }
 
 // =====================================
-// Responsividad
+// RESPONSIVE
 // =====================================
 
-// --- Teléfonos pequeños ---
+// Teléfonos
 @media (max-width: 480px) {
   .forgot-password-page {
-    padding: 1.5rem;
-    width: 92%;
+    padding: 1.2rem;
+
+    .forgot-form-container {
+      padding: 1.5rem;
+    }
 
     h1 {
       font-size: 1.6rem;
     }
 
-    p {
-      font-size: 0.95rem;
-      margin-bottom: 1.2rem;
+    .forgot-form input {
+      font-size: 1rem;
+      padding: 0.75rem 0.9rem;
     }
 
-    .forgot-form {
-      input[type="text"],
-      input[type="password"] {
-        font-size: 0.95rem;
-        padding: 0.9rem;
-      }
-
-      button[type="submit"] {
-        font-size: 0.95rem;
-        padding: 0.9rem;
-      }
+    button {
+      padding: 0.9rem !important;
     }
   }
 }
 
-// --- Tablets (iPad y similares) ---
+// Tablets
 @media (min-width: 768px) and (max-width: 1024px) {
   .forgot-password-page {
-    padding: 3rem 2.5rem;
-    font-size: 1.05rem;
+    padding: 2.5rem;
+
+    .forgot-form-container {
+      max-width: 470px;
+    }
 
     h1 {
       font-size: 2.1rem;
     }
 
     p {
+      font-size: 1.1rem;
+    }
+
+    .forgot-form input {
       font-size: 1.05rem;
-      margin-bottom: 2rem;
-    }
-
-    .forgot-form {
-      gap: 1.2rem;
-
-      input[type="text"],
-      input[type="password"] {
-        font-size: 1.05rem;
-        padding: 1rem;
-      }
-
-      button[type="submit"] {
-        padding: 1.2rem;
-      }
     }
   }
 }
-
-// --- Escritorio grande ---
-@media (min-width: 1280px) {
-  .forgot-password-page {
-    padding: 3rem;
-  }
-}