modified editar

src/app/AgregarEquipo/page.tsx

@@ -232,22 +232,24 @@ export default function page() {
                 className="textAreaLarge"
               />
             </div>
+            <div className="formActions">
+              <button
+                type="button"
+                className="btnGuardar"
+                onClick={handleGuardar}
+              >
+                Guardar
+              </button>
+              <button
+                type="button"
+                className="btnCancelar"
+                onClick={handleCancelar}
+              >
+                Cancelar
+              </button>
+            </div>
           </div>
         </form>
-
-        {/* Botones */}
-        <div className="formActions">
-          <button type="button" className="btnGuardar" onClick={handleGuardar}>
-            Guardar
-          </button>
-          <button
-            type="button"
-            className="btnCancelar"
-            onClick={handleCancelar}
-          >
-            Cancelar
-          </button>
-        </div>
       </div>
     </div>
   );

src/app/Editar/editar.css

@@ -1,5 +1,3 @@
-
-
 /* ====== FORMULARIO ====== */
 .editar {
   max-width: 1000px;
@@ -32,7 +30,6 @@ input:focus {
   box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
 }
 
-
 /* Botón cerrar sesión */
 .boton-cerrar {
   background-color: #e60000;
@@ -55,7 +52,7 @@ input:focus {
   top: 50%;
   left: 50%; /* centra horizontalmente */
   transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
-  
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -78,34 +75,32 @@ input:focus {
   color: #b8870b;
 }
 
-.recuadro{
-  box-shadow: 0 0 7px 0px black;
-  border-radius: 10px;       /* Bordes redondeados */
-  padding: 10px;             /* Espacio interno */
-  margin: 85px 350px;            /* Separación del resto del contenido */
-  background-color: #f9f9f9; /* Color de fondo */
+.recuadro {
+  border-radius: 10px; /* Bordes redondeados */
+  padding: 10px; /* Espacio interno */
+  margin: 85px 350px; /* Separación del resto del contenido */
 }
 
 .titulo-rec {
   font-size: 20px;
   font-weight: bold;
-  margin-left: 0;       /* alinea el texto con el resto de la columna */
-  text-align: left;     /* asegura que esté alineado a la izquierda */
-  margin-bottom: 8px;   /* un poco de espacio debajo del título */
+  margin-left: 0; /* alinea el texto con el resto de la columna */
+  text-align: left; /* asegura que esté alineado a la izquierda */
+  margin-bottom: 8px; /* un poco de espacio debajo del título */
 }
-.linea{
+.linea {
   border-bottom: 2px solid #003366; /* color y grosor de la línea */
-  width: 100%;                       /* ocupa toda la columna */
-  margin-bottom: 10px;               /* espacio entre línea y los campos */
+  width: 100%; /* ocupa toda la columna */
+  margin-bottom: 10px; /* espacio entre línea y los campos */
 }
 
 .botones {
   display: flex;
-  justify-content: flex-end;  /* Alinea los botones a la derecha */
-  gap: 10px;                  /* Espacio entre ellos */
-  margin-top: 15px;           /* Separación del formulario */
+  justify-content: flex-end; /* Alinea los botones a la derecha */
+  gap: 10px; /* Espacio entre ellos */
+  margin-top: 15px; /* Separación del formulario */
 }
-.guardar{
+.guardar {
   background-color: #b8870b;
   color: #003366;
   border: none;
@@ -113,9 +108,8 @@ input:focus {
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-
 }
-.cancelar{
+.cancelar {
   background-color: #003366;
   color: white;
   border: none;
@@ -123,4 +117,4 @@ input:focus {
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-}
+}

src/app/Editar/page.tsx

@@ -1,67 +1,225 @@
-import './editar.css';
+"use client";
+import { useState } from "react";
+import "../styles/layout/agregarEquipo.scss";
+import "./editar.css";
 export default function Home() {
+  const [formData, setFormData] = useState({
+    serie: "",
+    marca: "",
+    modelo: "",
+    tipoEquipo: "", // Nuevo campo
+    estado: "",
+    sistemaOperativo: "",
+    procesador: "",
+    tipoUso: "",
+    observaciones: "",
+    adscripcion: "",
+    lugar: "",
+    responsable: "",
+  });
+
+  // Estado para saber si mostramos los campos de SO y Procesador
+  const mostrarCamposComputadora = formData.tipoEquipo !== "Impresora";
+
+  const handleGuardar = () => {
+    console.log("Formulario enviado:", formData);
+    alert("Equipo guardado (vista solo)");
+  };
+
+  const handleCancelar = () => {
+    alert("Acción cancelada");
+  };
+
   return (
-    <div>
-      
-
-
-      <div className="recuadro">
-        <form className="editar">
+    <div className="agregarEquipoContainer">
+      <div className="innerContainer">
+        <h2 className="information"></h2>
+        <form className="equipoForm">
           {/* Columna 1 */}
-          <div className="columna">
-            <p className="titulo-rec">CPU</p>
-            <div className="linea"></div>
+          <div className="column">
+            <div className="formGroup">
+              <label>Serie</label>
+              <input
+                type="text"
+                placeholder="Ingresa serie"
+                value={formData.serie}
+                onChange={(e) =>
+                  setFormData({ ...formData, serie: e.target.value })
+                }
+              />
+            </div>
+            <div className="formGroup">
+              <label>Marca</label>
+              <select
+                value={formData.marca}
+                onChange={(e) =>
+                  setFormData({ ...formData, marca: e.target.value })
+                }
+              >
+                <option value="">Ingresa marca</option>
+                <option value="Dell">Dell</option>
+                <option value="HP">HP</option>
+                <option value="Lenovo">Lenovo</option>
+              </select>
+            </div>
+            <div className="formGroup">
+              <label>Modelo</label>
+              <select
+                value={formData.modelo}
+                onChange={(e) =>
+                  setFormData({ ...formData, modelo: e.target.value })
+                }
+              >
+                <option value="">Ingresa modelo</option>
+                <option value="XPS 15">XPS 15</option>
+                <option value="EliteBook">EliteBook</option>
+                <option value="ThinkPad">ThinkPad</option>
+              </select>
+            </div>
+            <div className="formGroup">
+              <label>Estado</label>
+              <select
+                value={formData.estado}
+                onChange={(e) =>
+                  setFormData({ ...formData, estado: e.target.value })
+                }
+              >
+                <option value="">Selecciona estado</option>
+                <option value="Activado">Activado</option>
+                <option value="Desactivado">Desactivado</option>
+                <option value="En reparación">En reparación</option>
+              </select>
+            </div>
 
-            <label htmlFor="serie">Serie</label>
-            <input type="text" id="serie" />
-
-            <label htmlFor="marca">Marca</label>
-            <input type="text" id="marca" />
-
-            <label htmlFor="modelo">Modelo</label>
-            <input type="text" id="modelo" />
-
-            <label htmlFor="estado">Estado</label>
-            <input type="text" id="estado" />
+            <div className="formGroup">
+              <label>Tipo uso</label>
+              <select
+                value={formData.tipoUso}
+                onChange={(e) =>
+                  setFormData({ ...formData, tipoUso: e.target.value })
+                }
+              >
+                <option value="">Ingresa tipo de uso</option>
+                <option value="administrativo">administrativo</option>
+                <option value="educacional">educacional</option>
+                <option value="laboratorio">laboratorio</option>
+              </select>
+            </div>
           </div>
 
           {/* Columna 2 */}
-          <div className="columna">
-            <p className="titulo-rec">Inventario:</p>
-            <div className="linea"></div>
+          <div className="column">
+            <div className="formGroup">
+              <label>Procesador</label>
+              <select
+                value={formData.procesador}
+                onChange={(e) =>
+                  setFormData({ ...formData, procesador: e.target.value })
+                }
+              >
+                <option value="">Selecciona procesador</option>
+                <option value="Ryzen 3">Ryzen 3</option>
+                <option value="Intel i5">Intel i5</option>
+                <option value="AMD Ryzen 5">AMD Ryzen 5</option>
+              </select>
+            </div>
 
-            <label htmlFor="sistema">Sistema Operativo</label>
-            <input type="text" id="sistema" />
+            <div className="formGroup">
+              <label>Sistema operativo</label>
+              <select
+                value={formData.sistemaOperativo}
+                onChange={(e) =>
+                  setFormData({
+                    ...formData,
+                    sistemaOperativo: e.target.value,
+                  })
+                }
+              >
+                <option value="">Selecciona sistema operativo</option>
+                <option value="Windows 10">Windows 10</option>
+                <option value="Windows 11">Windows 11</option>
+                <option value="Linux">Linux</option>
+                <option value="macOS">macOS</option>
+              </select>
+            </div>
 
-            <label htmlFor="procesador">Procesador</label>
-            <input type="text" id="procesador" />
+            <div className="formGroup">
+              <label>Adscripción</label>
+              <select
+                value={formData.adscripcion}
+                onChange={(e) =>
+                  setFormData({ ...formData, adscripcion: e.target.value })
+                }
+              >
+                <option value="">Selecciona adscripción</option>
+                <option value="Cedetec">Cedetec</option>
+                <option value="Laboratorio">Laboratorio</option>
+                <option value="Administración">Administración</option>
+              </select>
+            </div>
 
-            <label htmlFor="uso">Tipo de uso</label>
-            <input type="text" id="uso" />
-
-            <label htmlFor="observaciones">Observaciones</label>
-            <input type="text" id="observaciones" />
+            <div className="formGroup">
+              <label>Responsable</label>
+              <select
+                value={formData.responsable}
+                onChange={(e) =>
+                  setFormData({ ...formData, responsable: e.target.value })
+                }
+              >
+                <option value="">Selecciona responsable</option>
+                <option value="Lino">Lino</option>
+                <option value="Ana">Ana</option>
+                <option value="Carlos">Carlos</option>
+              </select>
+            </div>
           </div>
 
           {/* Columna 3 */}
-          <div className="columna">
-            <p className="titulo-rec">Fecha Censo:</p>
-            <div className="linea"></div>
-            
-            <label htmlFor="adscripcion">Adscripción</label>
-            <input type="text" id="adscripcion" />
+          <div className="column">
+            <div className="formGroup">
+              <label>Lugar</label>
+              <textarea
+                placeholder="Ingresa lugar"
+                value={formData.lugar}
+                onChange={(e) =>
+                  setFormData({ ...formData, lugar: e.target.value })
+                }
+                rows={4}
+                className="textAreaLarge"
+              />
+            </div>
 
-            <label htmlFor="responsable">Responsable</label>
-            <input type="text" id="responsable" />
+            <div className="formGroup">
+              <label>Observaciones</label>
+              <textarea
+                placeholder="Ingresa observaciones"
+                value={formData.observaciones}
+                onChange={(e) =>
+                  setFormData({ ...formData, observaciones: e.target.value })
+                }
+                rows={4}
+                className="textAreaLarge"
+              />
+            </div>
 
-            <label htmlFor="lugar">Lugar</label>
-            <input type="text" id="lugar" />
+            <div className="formActions">
+              <button
+                type="button"
+                className="btnGuardar"
+                onClick={handleGuardar}
+              >
+                Guardar
+              </button>
+              <button
+                type="button"
+                className="btnCancelar"
+                onClick={handleCancelar}
+              >
+                Cancelar
+              </button>
+            </div>
           </div>
         </form>
-        <div className="botones">
-          <button className="guardar">Guardar</button>
-          <button className="cancelar">Cancelar</button>
-        </div>
       </div>
     </div>
   );

src/app/styles/base/globales.scss

@@ -74,3 +74,11 @@ label {
 img {
   object-fit: cover;
 }
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}

src/app/styles/layout/BarNavigation.scss

@@ -25,11 +25,6 @@
   font-size: 1.5rem;
 }
 
-.barNavigation ul.active {
-  display: flex;
-  width: 100%;
-}
-
 .menuToggle {
   display: none;
   flex-direction: column;
@@ -157,7 +152,9 @@
   }
 
   .barNavigation ul.active {
+    left: 0;
     display: flex;
+    width: 100vw;
   }
 
   .barNavigation li:hover {
@@ -185,4 +182,8 @@
   tbody {
     font-size: 1rem;
   }
+
+  .subMenu a span {
+    color: #fff;
+  }
 }

src/app/styles/layout/agregarEquipo.scss

@@ -38,32 +38,6 @@
       flex-direction: column;
       min-width: 0;
 
-      label {
-        display: block;
-        margin-bottom: 5px;
-        font-weight: bold;
-        color: #333;
-        font-size: 14px;
-      }
-
-      input,
-      select,
-      textarea {
-        width: 100%;
-        padding: 10px;
-        border: 1px solid #ccc; /* Borde azul como en la imagen */
-        border-radius: 6px;
-        font-size: 15px;
-        transition: border-color 0.2s ease;
-        height: 40px;
-
-        &:focus {
-          outline: none;
-          border-color: #007bff;
-          box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
-        }
-      }
-
       textarea.textAreaLarge {
         height: auto;
         min-height: 80px;
@@ -87,10 +61,31 @@
   }
 }
 
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc; /* Borde azul como en la imagen */
+  border-radius: 6px;
+  font-size: 15px;
+  transition: border-color 0.2s ease;
+  height: 40px;
+
+  &:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
+  }
+}
+
 .formActions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-evenly;
+  align-items: end;
   gap: 30px;
+  width: 100%;
+  height: 100%;
   .btnGuardar {
     background-color: #ffb700;
     color: #000;
@@ -126,6 +121,7 @@
 @media (max-width: 768px) {
   .agregarEquipoContainer .innerContainer {
     padding: 15px;
+    max-width: 90vw;
   }
 
   .equipoForm {
@@ -157,3 +153,7 @@
     }
   }
 }
+
+.information {
+  border-bottom: 1px solid;
+}

src/app/styles/layout/escaner.scss

@@ -3,7 +3,6 @@
   flex-direction: column;
   padding: 0;
   margin: 0;
-  background-color: #ffffff;
 }
 
 .header {
@@ -22,8 +21,6 @@
     font-size: 1.5rem;
     color: #0056b3;
   }
-
-  
 }
 
 .scanView {
@@ -39,7 +36,7 @@
 
   h3 {
     font-size: 16px;
-    font-weight:500;
+    font-weight: 500;
     margin: 0;
   }
 }
@@ -56,7 +53,7 @@
   background-color: #f9f9f9;
   font-size: 80px;
   color: #000;
-  img{
+  img {
     width: 150px;
     height: auto;
   }
@@ -82,7 +79,7 @@
   align-items: center;
   gap: 8px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  color:#003E79 ;
+  color: #003e79;
   &:hover {
     background-color: #ffcc33;
   }
@@ -108,28 +105,28 @@
   }
 
   .searchButton {
-  background-color: #0056b3;
-  color: white;
-  border-radius: 10px;
-  border: none;
-  padding: 0 5px;
-  cursor: pointer;
-  font-size: 18px;
-  margin-right: 10px;
-  display: flex;           // ← Activa Flexbox
-  align-items: center;     // ← Centra verticalmente
-  justify-content: center; // ← Centra horizontalmente
-  width: 36px;             // ← Opcional: da un ancho fijo para que sea cuadrado
-  height: 36px;            // ← Opcional: altura igual al ancho
+    background-color: #0056b3;
+    color: white;
+    border-radius: 10px;
+    border: none;
+    padding: 0 5px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-right: 10px;
+    display: flex; // ← Activa Flexbox
+    align-items: center; // ← Centra verticalmente
+    justify-content: center; // ← Centra horizontalmente
+    width: 36px; // ← Opcional: da un ancho fijo para que sea cuadrado
+    height: 36px; // ← Opcional: altura igual al ancho
 
-  &:hover {
-    background-color: #004494;
-  }
+    &:hover {
+      background-color: #004494;
+    }
 
-  img {
-    display: block;
-    width: 20px;           // ← Ajusta el tamaño del icono
-    height: auto;          // ← Mantiene proporción
+    img {
+      display: block;
+      width: 20px; // ← Ajusta el tamaño del icono
+      height: auto; // ← Mantiene proporción
+    }
   }
 }
-}