From 7fe625b42c3e126d8520d94b009d3cc20a81bb77 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Tue, 4 Nov 2025 13:15:59 -0600
Subject: [PATCH] Modificaciones a vista forgodPassword

---
 .../(Administrador)/forgotPassword/page.tsx   |  14 +-
 src/app/styles/layout/ForgotPasswordPage.scss | 125 ++++++++++++++++++
 2 files changed, 126 insertions(+), 13 deletions(-)
 create mode 100644 src/app/styles/layout/ForgotPasswordPage.scss

diff --git a/src/app/(Administrador)/forgotPassword/page.tsx b/src/app/(Administrador)/forgotPassword/page.tsx
index ff68644..49bb198 100644
--- a/src/app/(Administrador)/forgotPassword/page.tsx
+++ b/src/app/(Administrador)/forgotPassword/page.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
-import "../../styles/base/globales.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
+import "../../styles/layout/ForgotPasswordPage.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
 import Link from "next/link";
 
 export default function ForgotPasswordPage() {
@@ -46,7 +46,6 @@ export default function ForgotPasswordPage() {
   return (
     <main
       className="forgot-password-page"
-      style={{ maxWidth: 520, margin: "4rem auto", padding: "1.5rem" }}
     >
       <h1>¿Olvidaste tu contraseña?</h1>
       <p>
@@ -67,22 +66,11 @@ export default function ForgotPasswordPage() {
           onChange={(e) => setEmail(e.target.value)}
           placeholder="tu@correo.com"
           required
-          style={{
-            padding: "0.6rem",
-            borderRadius: 8,
-            border: "1px solid #ccc",
-          }}
         />
 
         <button
           type="submit"
           disabled={loading}
-          style={{
-            padding: "0.7rem 1rem",
-            borderRadius: 8,
-            border: "none",
-            cursor: loading ? "not-allowed" : "pointer",
-          }}
         >
           {loading ? "Enviando..." : "Enviar instrucciones"}
         </button>
diff --git a/src/app/styles/layout/ForgotPasswordPage.scss b/src/app/styles/layout/ForgotPasswordPage.scss
new file mode 100644
index 0000000..567d813
--- /dev/null
+++ b/src/app/styles/layout/ForgotPasswordPage.scss
@@ -0,0 +1,125 @@
+// =====================================
+// Forgot Password Page Styles (sin variables)
+// =====================================
+
+.forgot-password-page {
+  max-width: 520px;
+  margin: 15rem auto;
+  padding: 2rem;
+  background: #ffffff;
+  border-radius: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: #222;
+  transition: background 0.3s ease, color 0.3s ease;
+
+  @media (max-width: 768px) {
+    margin: 2rem auto;
+    padding: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    text-align: center;
+    color: #1a73e8;
+  }
+
+  p {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    color: #555;
+  }
+
+  // Formulario principal
+  .forgot-form {
+    display: grid;
+    gap: 1rem;
+
+    label {
+      font-weight: 500;
+      color: #222;
+    }
+
+    input[type="email"] {
+      padding: 0.6rem 0.8rem;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      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;
+      }
+    }
+
+    button[type="submit"] {
+      background-color: #1a73e8;
+      color: #fff;
+      font-weight: 600;
+      padding: 0.75rem 1rem;
+      border-radius: 8px;
+      border: none;
+      cursor: pointer;
+      transition: background-color 0.3s ease, transform 0.2s ease;
+
+      &:hover:not(:disabled) {
+        background-color: #155fc0;
+        transform: translateY(-2px);
+      }
+
+      &:disabled {
+        background-color: #b3d0ff;
+        cursor: not-allowed;
+      }
+    }
+
+    a {
+      display: inline-block;
+      font-size: 0.9rem;
+      color: #1a73e8;
+      text-decoration: none;
+      text-align: center;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+// =====================================
+// Modo oscuro (opcional)
+// =====================================
+
+[data-theme="dark"] .forgot-password-page {
+  background: #1e1e1e;
+  color: #eee;
+
+  input[type="email"] {
+    background: #2a2a2a;
+    border-color: #444;
+    color: #f3f3f3;
+
+    &:focus {
+      border-color: #4a90e2;
+      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
+    }
+  }
+
+  button[type="submit"] {
+    background-color: #4a90e2;
+
+    &:hover:not(:disabled) {
+      background-color: #357ab8;
+    }
+  }
+
+  a {
+    color: #82b1ff;
+  }
+}