From 2ea93697f4d7b898d821186555897efb1c874904 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Sat, 25 Oct 2025 20:05:16 -0600
Subject: [PATCH] Vista Escaner y Agregar equipo agregados

---
 public/barcode_scanner.png                    | Bin 0 -> 8092 bytes
 public/photo_camera.png                       | Bin 0 -> 692 bytes
 public/search.png                             | Bin 0 -> 474 bytes
 src/app/AgregarEquipo/page.tsx                | 247 ++++++++++++++++++
 src/app/Escaner/page.tsx                      |  81 +++---
 src/app/layout.tsx                            |   4 +-
 src/app/page.tsx                              |   2 +-
 src/app/styles/base/_variables.scss           |  10 +
 .../base/{_globales.scss => globales.scss}    |  15 +-
 src/app/styles/layout/BarNavigation.scss      |  63 +++--
 src/app/styles/layout/agregarEquipo.scss      | 159 +++++++++++
 src/app/styles/layout/card.scss               |   0
 src/app/styles/layout/dashboard.scss          |  83 ------
 src/app/styles/layout/escaner.scss            | 133 ++++++++++
 src/components/BarNavigation.tsx              |  21 +-
 src/components/BarcodeScanner.tsx             |  42 ---
 src/components/Login.tsx                      |   2 +-
 17 files changed, 647 insertions(+), 215 deletions(-)
 create mode 100644 public/barcode_scanner.png
 create mode 100644 public/photo_camera.png
 create mode 100644 public/search.png
 create mode 100644 src/app/AgregarEquipo/page.tsx
 rename src/app/styles/base/{_globales.scss => globales.scss} (77%)
 create mode 100644 src/app/styles/layout/agregarEquipo.scss
 delete mode 100644 src/app/styles/layout/card.scss
 delete mode 100644 src/app/styles/layout/dashboard.scss
 create mode 100644 src/app/styles/layout/escaner.scss
 delete mode 100644 src/components/BarcodeScanner.tsx

diff --git a/public/barcode_scanner.png b/public/barcode_scanner.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e09c481f2871895975cf1b0643abcbe9cdca6ab
GIT binary patch
literal 8092
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
ZHrzh4WXIPnyWtMaV!gFVwh`~>{{hc~0uBHG

literal 0
HcmV?d00001

diff --git a/public/photo_camera.png b/public/photo_camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce7b9f95c9dc81aad36222191e272c9c170c5bb5
GIT binary patch
literal 692
zcmV;l0!#ggP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007MNkl<Zcmd>9
zy>1gh5S~2~B*agPk}?!L1HzclP=JI470{(1Phg?5LJ2;L@C49MAu5oNNI{cehZmru
z2xTHsA$|l>a$dgqcJFrAJ_AKk<#e+%^Ud6Tv*X=$CWrhS1%ghmYdSqEl-vfJSodEY
z{(Fns`5jEK2Jx>EtCrD$)|y;kjslGm2-**pLUp;TxMf}lrnJ^9%djxDyoYVGWzpw2
za<IDO+jhRBA(cRol^d){(MlAsrZ1!Z^9rgpu*^yy{59kZEH5(~&K3y-6~amfq1sWg
zT7@R{SYymDjP+VqY@)=7K+BCHljiyRr{z-b9_4EH<Yai39}&d7X*&A5EoWQb#K=?1
z@3|k?RXb@`<@t@^-H2eu3Oc<VL>66swvHCOcDBreWZT<`ic5_MV%X=i6?UE;d;I9S
z3<tNko7}IvC>PN>CR78;sZ8jIK(KmApI>u##i4Ix>M`pq=~(M_8X{Ul2|<k}hE`<D
z1fpa1H6mj=$w1sA5rK7!_5rFBdpKxXk-14f8SD+ZU&@!%(V$;cZbT5nKK$;<PguJU
z!4Hblz4}%<`761Mdk7%D_$;3ue}|d8Gggq~1ZP+*a3TyM<uwtkhBMe*9IkWH@G#Zm
z(F#1$pg7Tfc}A>R5i2Y5b?+2*(?UZkA@b9bhO5E{rql<tVpKd6m5*%QREh)Q=_d$`
zW@vvq{x-!eDgPyT_@8jwT4$n!7L8k1h_C=s(Z$L2S`~w8K)lUVgU$h}-m!Ia!4Cvm
z4>!^4aEtQf;@%%dH*1rv{|$An=0mmyo0yw#AfS8j!=V%W0RRC1|JzOsjsO4v21!Ig
aR09BOo#!#{Z&ls^0000<MNUMnLSTZGZ#@A3

literal 0
HcmV?d00001

diff --git a/public/search.png b/public/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..04a34dab490eedeef366ac294a8ce0bc39a46101
GIT binary patch
literal 474
zcmV<00VV#4P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004xNkl<Zcmdp$
zJz4@W5I|>WwXv}R@1Z>w7I+RR@GMx!IkePXJ%?}r3$Zl5Np@tjY!>~1hJ2aH&rIee
zGb}yXb30%_2%(R>BjMXr5?lBGlhxJ~5$lN{b7UYAM46->Sj)V!r>zZo4Zw9D2s#Yu
z;8?Y%-b8dPsSSbPmlj<*18}G>DkDKvVP{fnfM$q4XcYZx_O@vTz~Ke4eru{j-0uEG
z*9<^f2BciL<z4XvhML`K!cMtofcW;P$_G}KV0T$93$qMR@F{GoXu(q7ZUXG5DHQLf
z?$n$oI|&teZQ7daCg37Dg!?oWHTHP_tD;9`$N&^?!TvL1ui&C#VsjTZCWt40iT{V&
zN@E5vCk|bT=wnQP$kYP5@BvQ6n#z*-5&NIE?2<KrIRm*S0rnH5CVt^)c|)IIKNe9S
zvJuh>5E?-i$eHq2QGL}c^&Az`!U)7((hVsBU~KGvfouh^8#siTwWe!pfJ3NRYfW|n
za0sJ8P8omu&HxtC(uI84+-0W#4_Y7h4)_580RR8Up9Y5j000I_L_t&o0Imd>G4z?O
QtN;K207*qoM6N<$f`6jNi~s-t

literal 0
HcmV?d00001

diff --git a/src/app/AgregarEquipo/page.tsx b/src/app/AgregarEquipo/page.tsx
new file mode 100644
index 0000000..250c092
--- /dev/null
+++ b/src/app/AgregarEquipo/page.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { useState } from "react";
+import "../styles/layout/agregarEquipo.scss"; // Asegúrate de crear este archivo
+
+export default function page() {
+  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");
+  };
+
+  // Función para actualizar el estado y limpiar campos si es impresora
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => {
+      let updated = { ...prev, [name]: value };
+
+      // Si es impresora, limpiamos SO y Procesador
+      if (value === "Impresora") {
+        updated.sistemaOperativo = "";
+        updated.procesador = "";
+      }
+
+      return updated;
+    });
+  };
+
+  return (
+    <div className="agregarEquipoContainer">
+      <div className="innerContainer">
+        <h2>Agregar Nuevo Equipo</h2>
+        <form className="equipoForm">
+          {/* Columna Izquierda */}
+          <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>Tipo de equipo</label>
+              <select
+                name="tipoEquipo"
+                value={formData.tipoEquipo}
+                onChange={handleChange}
+              >
+                <option value="">Selecciona tipo</option>
+                <option value="PC">PC</option>
+                <option value="Laptop">Laptop</option>
+                <option value="Impresora">Impresora</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>
+            <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 Centro */}
+          <div className="column">
+            {/* Mostrar SO y Procesador solo si NO es impresora */}
+            {mostrarCamposComputadora && (
+              <>
+                <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>
+                <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>
+              </>
+            )}
+
+            <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>
+            <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 Derecha */}
+          <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>
+            <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>
+          </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>
+  );
+}
\ No newline at end of file
diff --git a/src/app/Escaner/page.tsx b/src/app/Escaner/page.tsx
index 40b30f7..dcdd707 100644
--- a/src/app/Escaner/page.tsx
+++ b/src/app/Escaner/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
-import BarcodeScanner from "../../components/BarcodeScanner";
-import "../styles/layout/dashboard.scss";
+import "../styles/layout/escaner.scss"; // Importación global
 
+// Tipos
 type Equipo = {
   id: string;
   nombre: string;
@@ -38,70 +38,49 @@ export default function Dashboard() {
 
   const handleScan = (code: string) => {
     setLastScan(code);
-
     const encontrado = equipos.find((e) => e.id === code);
     if (encontrado) {
       alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
     } else {
-      const nombre = prompt("Equipo no registrado. Ingresa el nombre:");
-      if (nombre) {
-        setEquipos([...equipos, { id: code, nombre, estado: "Disponible" }]);
+      const codigo = prompt("Equipo no registrado. Ingresa el codigo:");
+      if (codigo) {
+        setEquipos([...equipos, { id: code, nombre: codigo, estado: "Disponible" }]);
         alert("Equipo agregado al inventario");
       }
     }
   };
 
   return (
-    <div className="dashboard-container">
-      <div className="header">
-        <h2>Dashboard Inventario Escolar</h2>
-        <button onClick={cerrarSesion}>Cerrar sesión</button>
-      </div>
+    <div className="dashboardContainer">
 
-      <div className="search-section">
-        <h3>Buscar equipo</h3>
-        <div style={{ display: "flex", marginTop: "10px" }}>
+      {/* VISTA DE ESCANEO */}
+      <main className="scanView">
+        <h3>Escanear Inventario</h3>
+
+        <div className="scannerFrame">
+          <img src="/barcode_scanner.png" alt="Marco de escaneo" />
+        </div>
+
+        <p className="instructions">
+          Enfoca el código de barras dentro del marco
+        </p>
+
+        <button className="scanButton">
+          <img src="/photo_camera.png" alt="camara" /> Escanear
+        </button>
+
+        <div className="searchBox">
           <input
             type="text"
-            placeholder="ID o nombre"
+            placeholder="Buscar por inventario..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
-          <button onClick={buscarEquipo}>Buscar</button>
+          <button onClick={buscarEquipo} className="searchButton">
+            <img src="/search.png" alt="Buscar" />
+          </button>
         </div>
-      </div>
-
-      <div className="scanner-section">
-        <h3>Escanear código de barras</h3>
-        <BarcodeScanner onDetected={handleScan} />
-        {lastScan && (
-          <p>
-            Último código escaneado: <strong>{lastScan}</strong>
-          </p>
-        )}
-      </div>
-
-      <div className="equipos-section">
-        <h3>Equipos</h3>
-        <ul>
-          {equipos.map((e) => (
-            <li key={e.id}>
-              <span>
-                {e.id} - {e.nombre}
-              </span>
-              <span
-                className={
-                  e.estado === "Disponible"
-                    ? "estado-disponible"
-                    : "estado-reparacion"
-                }
-              >
-                {e.estado}
-              </span>
-            </li>
-          ))}
-        </ul>
-      </div>
+      </main>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 14938eb..3d26f97 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import Header from "../components/header";
 import { Inter, Montserrat } from "next/font/google";
-import "../app/styles/base/_globales.scss"; // si tienes estilos globales
+import "../app/styles/base/globales.scss"; // si tienes estilos globales
 
 // Carga optimizada de fuentes
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400", "500", "700"],
+  weight: ["400", "500", "600", "700"],
   variable: "--font-inter",
 });
 const montserrat = Montserrat({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 92aca92..0f8bd8c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Login from "@/components/Login";
-import "../app/styles/base/_globales.scss";
+import "../app/styles/base/globales.scss";
 
 export default function page() {
   return <Login />;
diff --git a/src/app/styles/base/_variables.scss b/src/app/styles/base/_variables.scss
index e69de29..0390a47 100644
--- a/src/app/styles/base/_variables.scss
+++ b/src/app/styles/base/_variables.scss
@@ -0,0 +1,10 @@
+
+// Colores
+$color-primary: #003e79;
+$color-secondary: #fab403;
+$color-background: #f5f5f7;
+$color-text: #000000;
+
+// Tipografía
+$font-primary: "Inter", sans-serif;
+$font-titles: "Montserrat", sans-serif;
diff --git a/src/app/styles/base/_globales.scss b/src/app/styles/base/globales.scss
similarity index 77%
rename from src/app/styles/base/_globales.scss
rename to src/app/styles/base/globales.scss
index 235e55f..4146e15 100644
--- a/src/app/styles/base/_globales.scss
+++ b/src/app/styles/base/globales.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 html {
   font-size: 62.5%;
   box-sizing: border-box;
@@ -16,13 +18,14 @@ html {
 body {
   display: grid;
   grid-template-rows: auto 1fr;
-  background-color: #f5f5f7;
-  font-family: "Inter", sans-serif;
+  background-color: $color-background;
+  font-family: $font-primary;
   font-style: normal;
   font-size: 2rem;
   font-optical-sizing: auto;
   min-height: 100dvh;
   width: 100vw;
+  color: $color-text;
 }
 
 p {
@@ -31,10 +34,14 @@ p {
 }
 
 a {
-  color: #003e79;
+  color: $color-primary;
   display: block;
   text-decoration: none;
   margin: 10px 5px;
+
+  &:hover {
+    color: $color-secondary;
+  }
 }
 
 h1,
@@ -42,7 +49,7 @@ h2,
 h3 {
   margin: 0 0 5rem 0;
   font-weight: 600;
-  font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */
+  font-family: $font-titles;
 }
 
 h1 {
diff --git a/src/app/styles/layout/BarNavigation.scss b/src/app/styles/layout/BarNavigation.scss
index b84e042..4e45e38 100644
--- a/src/app/styles/layout/BarNavigation.scss
+++ b/src/app/styles/layout/BarNavigation.scss
@@ -63,10 +63,9 @@
   position: absolute;
   flex-direction: column;
   min-width: 200px;
-  max-width: 300px; /* Ajusta según tu diseño */
+  max-width: 300px;
   left: 0;
   background-color: #003e79;
-  transition: color 0.3s ease;
   transition: opacity 0.4s ease, max-height 0.4s ease;
 }
 
@@ -74,15 +73,6 @@
   display: none;
 }
 
-.subMenu.open ul {
-  display: flex;
-  color: rgba(0, 61, 121, 1);
-}
-
-.subMenu ul:hover {
-  color: #5b8cc9;
-}
-
 .subMenu:hover ul {
   opacity: 1;
   max-height: 500px;
@@ -106,11 +96,6 @@
   font-size: 1.5rem;
 }
 
-.containerLinks {
-  padding: 0 !important;
-  border-radius: 0 0 4px 4px;
-}
-
 .links {
   display: flex;
   justify-content: center;
@@ -121,11 +106,28 @@
   font-size: 1.5rem;
 }
 
-thead,
-tbody {
-  font-size: 1.25rem;
+/* Estilo del botón de cierre de sesión */
+.logout-button {
+  background-color: #ff4d4d;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 200px;
+
+  &:hover {
+    background-color: #e63939;
+  }
 }
 
+/* ✅ Ajustes para móvil */
 @media (max-width: 800px) {
   .menuToggle {
     display: flex;
@@ -133,18 +135,12 @@ tbody {
     align-items: end;
     transition: transform 0.3s ease;
   }
-  .barNavigation {
-    width: 100%;
-  }
-
-  .menuToggle.center {
-    align-items: center;
-    margin: 0;
-  }
 
   .barNavigation {
     font-size: 15px;
     display: block;
+    padding: 0;
+    width: 100%;
   }
 
   .barNavigation ul {
@@ -156,10 +152,11 @@ tbody {
     display: none;
     z-index: 1;
     height: auto;
+    width: 100%;
   }
 
-  .barNavigation {
-    padding: 0;
+  .barNavigation ul.active {
+    display: flex;
   }
 
   .barNavigation li:hover {
@@ -176,6 +173,14 @@ tbody {
     background-color: rgb(1, 92, 184);
   }
 
+
+  .logout-button {
+    margin-top: 10px;
+    font-size: 1rem;
+    padding: 6px 12px;
+    max-width: 180px;
+  }
+
   thead,
   tbody {
     font-size: 1rem;
diff --git a/src/app/styles/layout/agregarEquipo.scss b/src/app/styles/layout/agregarEquipo.scss
new file mode 100644
index 0000000..f098e1b
--- /dev/null
+++ b/src/app/styles/layout/agregarEquipo.scss
@@ -0,0 +1,159 @@
+.agregarEquipoContainer {
+  background-color: #ffffff;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+
+  .innerContainer {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  h2 {
+    margin-top: 1rem;
+    text-align: center;
+    color: #0056b3;
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+  }
+}
+
+.equipoForm {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 20px;
+
+  .column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    .formGroup {
+      display: flex;
+      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: 14px;
+        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;
+        max-height: 150px;
+        resize: none;
+        padding: 12px;
+        font-family: inherit;
+      }
+
+      select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 10px center;
+        background-size: 12px;
+        padding-right: 30px;
+      }
+    }
+  }
+}
+
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+
+  .btnGuardar {
+    background-color: #ffb700;
+    color: #000;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #ffcc33;
+    }
+  }
+
+  .btnCancelar {
+    background-color: #0056b3;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:hover {
+      background-color: #004494;
+    }
+  }
+}
+
+/* Responsive: en móvil, una columna */
+@media (max-width: 768px) {
+  .agregarEquipoContainer .innerContainer {
+    padding: 15px;
+  }
+
+  .equipoForm {
+    flex-direction: column;
+    gap: 20px;
+
+    .column {
+      flex: 1 1 100%;
+      min-width: auto;
+
+      .formGroup {
+        input,
+        select {
+          width: 100%;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  .formActions {
+    flex-direction: column;
+    align-items: stretch;
+
+    button {
+      width: 100%;
+      font-size: 18px;
+      padding: 12px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/styles/layout/card.scss b/src/app/styles/layout/card.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/styles/layout/dashboard.scss b/src/app/styles/layout/dashboard.scss
deleted file mode 100644
index 86331ee..0000000
--- a/src/app/styles/layout/dashboard.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.dashboard-container {
-  max-width: 900px;
-  margin: 50px auto;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 15px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-  font-family: Arial, sans-serif;
-}
-
-h2 {
-  color: #004aad; // azul marino
-  font-size: 2rem;
-  margin-bottom: 15px;
-}
-
-button {
-  background-color: #d4af37; // dorado
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: background 0.3s;
-}
-
-button:hover {
-  background-color: #b5952e;
-}
-
-input {
-  padding: 8px 12px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  flex: 1;
-  font-size: 1rem;
-}
-
-.search-section, .scanner-section, .equipos-section {
-  margin-top: 30px;
-}
-
-.search-section input, .search-section button {
-  margin-right: 10px;
-}
-
-.scanner-section video {
-  border: 2px solid #004aad;
-  border-radius: 10px;
-  max-width: 400px;
-  width: 100%;
-}
-
-.equipos-section ul {
-  list-style: none;
-  padding: 0;
-}
-
-.equipos-section li {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 15px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  margin-bottom: 10px;
-  background: white;
-  transition: background 0.3s;
-}
-
-.equipos-section li:hover {
-  background: #e6f0ff;
-}
-
-.estado-disponible {
-  color: green;
-  font-weight: bold;
-}
-
-.estado-reparacion {
-  color: red;
-  font-weight: bold;
-}
diff --git a/src/app/styles/layout/escaner.scss b/src/app/styles/layout/escaner.scss
new file mode 100644
index 0000000..52d3eee
--- /dev/null
+++ b/src/app/styles/layout/escaner.scss
@@ -0,0 +1,133 @@
+.dashboardContainer {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  background-color: #ffffff;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #0056b3;
+  }
+
+  
+}
+
+.scanView {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 20px;
+  gap: 20px;
+
+  h3 {
+    font-size: 16px;
+    font-weight:500;
+    margin: 0;
+  }
+}
+
+.scannerFrame {
+  width: 90%;
+  max-width: 500px;
+  height: 300px;
+  border: 2px solid #0056b3;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9f9f9;
+  font-size: 80px;
+  color: #000;
+  img{
+    width: 150px;
+    height: auto;
+  }
+}
+
+.instructions {
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.scanButton {
+  background-color: #ffb700;
+  color: #000;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 20px;
+  font-weight: bold;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  color:#003E79 ;
+  &:hover {
+    background-color: #ffcc33;
+  }
+}
+
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 80%;
+  max-width: 400px;
+  border: 2px solid #0056b3;
+  border-radius: 20px;
+  overflow: hidden;
+
+  input {
+    flex: 1;
+    padding: 12px 16px;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    background: transparent;
+  }
+
+  .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
+
+  &:hover {
+    background-color: #004494;
+  }
+
+  img {
+    display: block;
+    width: 20px;           // ← Ajusta el tamaño del icono
+    height: auto;          // ← Mantiene proporción
+  }
+}
+}
\ No newline at end of file
diff --git a/src/components/BarNavigation.tsx b/src/components/BarNavigation.tsx
index 4198cb8..88d3ed0 100644
--- a/src/components/BarNavigation.tsx
+++ b/src/components/BarNavigation.tsx
@@ -1,9 +1,12 @@
 "use client";
+
 import { useState } from "react";
+import { useRouter } from "next/navigation"; // ✅ Importa useRouter
 import "../app/styles/layout/BarNavigation.scss";
 import Link from "next/link";
 
 function BarNavigation() {
+  const router = useRouter(); // ✅ Para redirigir
   const [openMenu, setOpenMenu] = useState(false);
   const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
 
@@ -14,9 +17,17 @@ function BarNavigation() {
     }
   };
 
+  const cerrarSesion = () => {
+    if (typeof window !== "undefined") {
+      localStorage.removeItem("loggedIn");
+      router.push("/"); // ✅ Redirige al inicio
+    }
+    setOpenMenu(false); // Cierra menú móvil
+  };
+
   return (
     <nav className="barNavigation">
-      <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
+      <div className="menuToggle" onClick={toggleMenu}>
         <div></div>
         <div></div>
         <div></div>
@@ -33,9 +44,15 @@ function BarNavigation() {
             <span>Agregar equipo</span>
           </Link>
         </li>
+        {/* ✅ Botón directo, sin onClick en el <li> */}
+        <li>
+          <button className="logout-button" onClick={cerrarSesion}>
+            Cerrar sesión
+          </button>
+        </li>
       </ul>
     </nav>
   );
 }
 
-export default BarNavigation;
+export default BarNavigation;
\ No newline at end of file
diff --git a/src/components/BarcodeScanner.tsx b/src/components/BarcodeScanner.tsx
deleted file mode 100644
index d324592..0000000
--- a/src/components/BarcodeScanner.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { BrowserMultiFormatReader } from "@zxing/library";
-
-type Props = { onDetected: (code: string) => void; };
-
-export default function BarcodeScanner({ onDetected }: Props) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    const codeReader = new BrowserMultiFormatReader();
-    if (!videoRef.current) return;
-
-    // Obtener la cámara trasera si existe
-    codeReader.listVideoInputDevices().then((devices) => {
-      const backDevice = devices.find(d => d.label.toLowerCase().includes("back"));
-      const deviceId = backDevice ? backDevice.deviceId : devices[0].deviceId;
-
-      // Inicia la cámara inmediatamente
-      codeReader.decodeFromVideoDevice(deviceId, videoRef.current!, (result) => {
-        if (result) onDetected(result.getText());
-      });
-    }).catch(console.error);
-
-    return () => { codeReader.reset(); };
-  }, [onDetected]);
-
-  return (
-    <video
-      ref={videoRef}
-      style={{
-        width: "100%",
-        maxWidth: "600px", // Más grande
-        border: "2px solid #004aad",
-        borderRadius: "10px"
-      }}
-      autoPlay
-      muted
-    />
-  );
-}
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index f19cb71..2d5406b 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import "../app/styles/layout/login.scss";
-import "../app/styles/base/_globales.scss"; // si tienes estilos globales
+import "../app/styles/base/globales.scss"; 
 import Image from "next/image";
 import Link from "next/link";