Merge branch 'Sarabia' of https://github.com/jls846/front-censo into Lino

src/app/(Administrador)/CambiarPass/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 Page() {
@@ -46,7 +46,6 @@ export default function Page() {
   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 Page() {
           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>

src/app/reporte/page.tsx

@@ -2,22 +2,9 @@ import "./reporte.css";
 
 export default function Reporte() {
   return (
-    <div>
-      <header className="encabezado">
-        <div className="encabezado-sup"></div>
-
-        <div className="pestaña">
-          <span>Escanear código</span>
-          <span>Equipo</span>
-          <span>Reportes</span>
-        </div>
-
-        <nav className="Sesion">
-          <button className="boton-cerrar">Cerrar sesión</button>
-        </nav>
-      </header>
-
-      <div className="contenedor">
+    <div className="reporte-layout">
+      {/* Panel izquierdo: título, buscador y tabla */}
+      <div className="panel-izquierdo">
         <div className="titulo-reporte">
           <p>REPORTE</p>
         </div>
@@ -26,14 +13,17 @@ export default function Reporte() {
           <input type="text" name="q" placeholder="Buscar equipo" />
           <button type="submit">Buscar</button>
         </form>
-      </div>
-      <div className="tabla-rec"></div>
-      <button className="boton-descargar">Descargar</button>
 
-      <div className="filtro-rec">
-        <form className="editar">
-          {/* Columna 1 */}
-          <div className="columna">
+        <div className="tabla-rec">
+          {/* Aquí irá tu tabla real */}
+          <p>Tabla de equipos...</p>
+        </div>
+      </div>
+
+      {/* Panel derecho: filtros + botón descargar */}
+      <div className="panel-derecho">
+        <div className="filtro-rec">
+          <form className="editar">
             <p className="titulo-rec">Filtro</p>
             <div className="linea"></div>
 
@@ -73,17 +63,20 @@ export default function Reporte() {
               <option value="3-5">3 a 5 años</option>
               <option value="mas5">Más de 5 años</option>
             </select>
-          </div>
-          <div className="botones-filtro">
-            <button type="reset" className="limpiar">
-              Limpiar filtros
-            </button>
-            <button type="submit" className="aplicar">
-              Aplicar filtros
-            </button>
-          </div>
-        </form>
+
+            <div className="botones-filtro">
+              <button type="reset" className="limpiar">
+                Limpiar filtros
+              </button>
+              <button type="submit" className="aplicar">
+                Aplicar filtros
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <button className="boton-descargar">Descargar</button>
       </div>
     </div>
   );
-}
+}

src/app/reporte/reporte.css

@@ -3,22 +3,36 @@
   top: 50%;
   left: 62%;
   transform: translate(-50%, -50%);
-
-  display: flex;
-  justify-content: space-around; /* espacio igual entre los tres textos */
-  align-items: center;
-  width: 45%; /* controla el ancho total del bloque central */
-  font-size: 18px;
-  color: #003366;
-  font-weight: bold;
-  z-index: 5; /* por encima del logo */
 }
 
-.pestaña span {
+/* Contenedor principal del reporte */
+.reporte-layout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 50px;
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 20px;
+}
+
+/* Panel izquierdo: contenedor + tabla */
+.panel-izquierdo {
   flex: 1;
+  min-width: 300px; /* evita que se colapse demasiado en móviles */
+}
+
+/* Panel derecho: filtro */
+.panel-derecho {
+  width: 320px; /* ancho fijo razonable para filtros */
+  min-width: 280px;
+}
+
+.titulo-reporte {
+  font-weight: bold;
+  font-size: 24px;
   text-align: center;
-  cursor: pointer;
-  transition: color 0.3s;
+  margin-bottom: 15px;
+  color: #0056b3;
 }
 
 .pestaña span:hover {
@@ -76,29 +90,83 @@ select:focus {
   outline: none;
 }
 
-/* Botón de buscar */
 form[action="/buscar"] {
   display: flex;
   gap: 10px;
-  margin: 20px 0;
+  margin-bottom: 20px;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 form[action="/buscar"] input {
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  width: 300px;
+  font-size: 16px;
+  flex: 1;
+  min-width: 200px;
 }
 
 form[action="/buscar"] button {
-  background-color: #003366;
+  background-color: #0056b3;
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 5px;
   cursor: pointer;
+  font-size: 16px;
 }
 
+form[action="/buscar"] button:hover {
+  background-color: #0056b3;
+}
+
+/* Tabla de reporte */
+.tabla-rec {
+  border: 2px solid #0056b3;
+  border-radius: 10px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  min-height: 400px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Filtro */
+.filtro-rec {
+  border: 2px solid #0056b3;
+  border-radius: 10px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  font-family: Arial, sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filtro-rec .titulo-rec {
+  font-weight: bold;
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #0056b3;
+}
+
+.filtro-rec label {
+  display: block;
+  margin-top: 12px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.filtro-rec select {
+  width: 100%;
+  padding: 8px;
+  margin-top: 4px;
+  border: 1px solid #0056b3;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+/* Botones del filtro */
 .botones-filtro {
   display: flex;
   justify-content: flex-end; /* botones a la derecha */
@@ -106,24 +174,15 @@ form[action="/buscar"] button {
   margin-top: 15px; /* separación del resto del formulario */
 }
 
-.aplicar {
-  background-color: #003366;
-  color: white;
+.botones-filtro .aplicar,
+.botones-filtro .limpiar {
+  flex: 1;
+  padding: 8px;
   border: none;
-  padding: 8px 16px;
   border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.limpiar {
-  background-color: #b8870b;
   color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
   font-size: 14px;
+  cursor: pointer;
 }
 
 .tabla-rec {
@@ -138,12 +197,50 @@ form[action="/buscar"] button {
 
 .boton-descargar {
   padding: 8px 12px;
+}
+.botones-filtro .aplicar {
+  background-color: #0056b3;
+}
+
+.botones-filtro .limpiar {
+  background-color: #ffb700;
+  color: #0056b3;
+  font-weight: bold;
+}
+
+/* Botón descargar */
+.boton-descargar {
+  margin-top: 25px;
+  padding: 10px 20px;
   font-size: 16px;
   border: none;
-  background-color: #003366;
+  background-color: #0056b3;
   color: white;
   border-radius: 4px;
   cursor: pointer;
   right: 30px;
   margin-left: 700px;
+  width: 100%;
+}
+
+/* Responsive: en pantallas pequeñas (iPad portrait, etc.) */
+@media (max-width: 768px) {
+  .reporte-layout {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .panel-derecho {
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .panel-izquierdo {
+    width: 100%;
+    max-width: 500px;
+  }
+
+  .boton-descargar {
+    max-width: 500px;
+  }
 }

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;
+  }
+}

src/components/editar.css

@@ -26,7 +26,7 @@ input {
 }
 
 input:focus {
-  border-color: #003366;
+  border-color: #0056b3;
   box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
 }
 
@@ -59,7 +59,7 @@ input:focus {
   width: 35%; /* ajusta el ancho del bloque de texto */
   font-size: 18px;
   font-weight: bold;
-  color: #003366;
+  color: #0056b3;
   z-index: 5;
 }
 
@@ -89,7 +89,7 @@ input:focus {
   margin-bottom: 8px; /* un poco de espacio debajo del título */
 }
 .linea {
-  border-bottom: 2px solid #003366; /* color y grosor de la línea */
+  border-bottom: 2px solid #0056b3; /* color y grosor de la línea */
   width: 100%; /* ocupa toda la columna */
   margin-bottom: 10px; /* espacio entre línea y los campos */
 }
@@ -102,7 +102,7 @@ input:focus {
 }
 .guardar {
   background-color: #b8870b;
-  color: #003366;
+  color: #0056b3;
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
@@ -110,7 +110,7 @@ input:focus {
   font-size: 14px;
 }
 .cancelar {
-  background-color: #003366;
+  background-color: #0056b3;
   color: white;
   border: none;
   padding: 8px 16px;