feat/styles_PasswordReset

frontend/src/pages/PasswordResetPage.jsx

@@ -1,25 +1,28 @@
-// src/pages/PasswordResetPage.jsx
-
 import { useState } from "react";
 import BasePageLayout from "../components/layout/BasePageLayout";
 import PasswordResetRequest from "../components/auth/passwordreset/PasswordResetMail";
 import PasswordResetForm from "../components/auth/passwordreset/PasswordResetForm";
 import { getTemperatureColor } from "../styles/temperatureColors";
+import "../styles/password_reset.css";
 
 function PasswordResetPage() {
   const temperatureC = 7;
   const containerColor = getTemperatureColor(temperatureC);
-  const [recoveryMethod, setRecoveryMethod] = useState("link"); // "link" o "form"
+  const [recoveryMethod, setRecoveryMethod] = useState("link"); // "link" | "form"
 
   return (
-    <BasePageLayout title="Recuperar contraseña" description="" containerColor={containerColor}>
+    <BasePageLayout
+      title="Recuperar contraseña"
+      description=""
+      containerColor={containerColor}
+    >
       <section className="auth-card auth-password-reset-card">
         <div className="auth-login-inner">
           <div className="auth-login-content">
             <header className="auth-card-header">
               <h1 className="auth-card-title">Recuperar contraseña</h1>
               <p className="auth-card-subtitle">
-                {recoveryMethod === "link" 
+                {recoveryMethod === "link"
                   ? "Te enviaremos un enlace para restablecerla."
                   : "Ingresa tu correo y nueva contraseña para recuperar tu cuenta."}
               </p>
@@ -28,25 +31,34 @@ function PasswordResetPage() {
             {/* Selector de método de recuperación */}
             <div className="auth-recovery-method-selector">
               <button
-                className={`auth-method-btn ${recoveryMethod === "link" ? "active" : ""}`}
+                type="button"
+                className={`auth-method-btn ${
+                  recoveryMethod === "link" ? "active" : ""
+                }`}
                 onClick={() => setRecoveryMethod("link")}
               >
                 📧 Enlace de recuperación
               </button>
+
               <button
-                className={`auth-method-btn ${recoveryMethod === "form" ? "active" : ""}`}
+                type="button"
+                className={`auth-method-btn ${
+                  recoveryMethod === "form" ? "active" : ""
+                }`}
                 onClick={() => setRecoveryMethod("form")}
               >
                 🔑 Formulario directo
               </button>
             </div>
 
-            {/* Mostrar componente según la opción seleccionada */}
-            {recoveryMethod === "link" ? (
-              <PasswordResetRequest />
-            ) : (
-              <PasswordResetForm />
-            )}
+            {/* Contenido dinámico */}
+            <div className="auth-password-reset-content">
+              {recoveryMethod === "link" ? (
+                <PasswordResetRequest />
+              ) : (
+                <PasswordResetForm />
+              )}
+            </div>
           </div>
         </div>
       </section>

frontend/src/styles/password_reset.css

@@ -0,0 +1,94 @@
+/* ======================================================
+   VARIABLES TEMA CLARO
+====================================================== */
+
+:root {
+  --card-background: #ffffff;
+  --border-color: #e5e7eb;
+
+  --text-color: #1f2937;
+
+  --button-bg: #f2f4f7;
+  --button-bg-hover: #e6e9ee;
+
+  --accent-color: #4f46e5;
+  --accent-shadow: rgba(79, 70, 229, 0.15);
+}
+
+/* ======================================================
+   TEMA OSCURO AUTOMÁTICO
+====================================================== */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --card-background: #0f172a;
+    --border-color: #334155;
+
+    --text-color: #f8fafc;
+
+    --button-bg: #1e293b;
+    --button-bg-hover: #334155;
+
+    --accent-color: #818cf8;
+    --accent-shadow: rgba(129, 140, 248, 0.25);
+  }
+}
+
+/* ======================================================
+   SELECTOR MÉTODO DE RECUPERACIÓN
+====================================================== */
+
+.auth-recovery-method-selector {
+  display: flex;
+  gap: 12px;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
+
+.auth-method-btn {
+  flex: 1;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-color: var(--button-bg);
+  color: var(--text-color);
+  font-size: 0.95rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
+
+/* Hover */
+.auth-method-btn:hover {
+  background-color: var(--button-bg-hover);
+}
+
+/* Activo */
+.auth-method-btn.active {
+  background-color: var(--card-background);
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  box-shadow: 0 4px 12px var(--accent-shadow);
+}
+
+/* Focus accesible */
+.auth-method-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-shadow);
+}
+
+/* ======================================================
+   RESPONSIVE
+====================================================== */
+
+@media (max-width: 480px) {
+  .auth-recovery-method-selector {
+    flex-direction: column;
+  }
+}