From 23bd32110424dab72538afafe81783e59be805e6 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Tue, 4 Nov 2025 14:01:00 -0600
Subject: [PATCH] Modificaciones a .scss media forgodPassword

---
 src/app/styles/layout/ForgotPasswordPage.scss | 72 ++++++++++++++-----
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/app/styles/layout/ForgotPasswordPage.scss b/src/app/styles/layout/ForgotPasswordPage.scss
index 3c78959..58baa87 100644
--- a/src/app/styles/layout/ForgotPasswordPage.scss
+++ b/src/app/styles/layout/ForgotPasswordPage.scss
@@ -1,10 +1,11 @@
 // =====================================
-// Forgot Password Page Styles (sin variables)
+// Forgot Password Page Styles (Responsive)
 // =====================================
 
 .forgot-password-page {
+  width: 90%;
   max-width: 520px;
-  margin: 15rem auto;
+  margin: 10rem auto;
   padding: 2rem;
   background: #ffffff;
   border-radius: 1rem;
@@ -12,15 +13,10 @@
   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-size: 2rem;
     font-weight: 600;
-    margin-bottom: 0.75rem;
+    margin-bottom: 1rem;
     text-align: center;
     color: #1a73e8;
   }
@@ -33,7 +29,6 @@
     color: #555;
   }
 
-  // Formulario principal
   .forgot-form {
     display: grid;
     gap: 1rem;
@@ -44,7 +39,7 @@
     }
 
     input[type="email"] {
-      padding: 0.6rem 0.8rem;
+      padding: 1rem 0.8rem;
       border: 1px solid #ccc;
       border-radius: 8px;
       font-size: 1rem;
@@ -61,7 +56,7 @@
       background-color: #1a73e8;
       color: #fff;
       font-weight: 600;
-      padding: 0.75rem 1rem;
+      padding: 1rem;
       border-radius: 8px;
       border: none;
       cursor: pointer;
@@ -93,7 +88,7 @@
 }
 
 // =====================================
-// Modo oscuro (opcional)
+// Modo oscuro
 // =====================================
 
 [data-theme="dark"] .forgot-password-page {
@@ -125,18 +120,50 @@
 }
 
 // =====================================
-// Estilos específicos para iPad
+// Responsividad
 // =====================================
 
+// --- Teléfonos pequeños ---
+@media (max-width: 480px) {
+  .forgot-password-page {
+    margin: 15rem auto;
+    padding: 1.5rem;
+    width: 92%;
+    box-shadow: none; // para evitar saturar pantallas pequeñas
+
+    h1 {
+      font-size: 1.6rem;
+    }
+
+    p {
+      font-size: 0.95rem;
+      margin-bottom: 1.2rem;
+    }
+
+    .forgot-form {
+      input[type="email"] {
+        font-size: 0.95rem;
+        padding: 0.9rem;
+      }
+
+      button[type="submit"] {
+        font-size: 0.95rem;
+        padding: 0.9rem;
+      }
+    }
+  }
+}
+
+// --- Tablets (iPad y similares) ---
 @media (min-width: 768px) and (max-width: 1024px) {
   .forgot-password-page {
     margin: 8rem auto;
-    padding: 2rem 2.5rem;
+    padding: 3rem 2.5rem;
     max-width: 600px;
     font-size: 1.05rem;
 
     h1 {
-      font-size: 2rem;
+      font-size: 2.1rem;
     }
 
     p {
@@ -149,14 +176,21 @@
 
       input[type="email"] {
         font-size: 1.05rem;
-        padding: 0.75rem 1rem;
+        padding: 1rem;
       }
 
       button[type="submit"] {
-        padding: 0.85rem 1.2rem;
-        font-size: 1.05rem;
+        padding: 1.2rem;
       }
     }
   }
 }
 
+// --- Escritorio grande ---
+@media (min-width: 1280px) {
+  .forgot-password-page {
+    margin: 12rem auto;
+    padding: 3rem;
+    max-width: 520px;
+  }
+}