fixed style to history

src/components/History.tsx

@@ -10,6 +10,8 @@ import "../app/styles/layout/history.scss";
 
 export default function History() {
   const [historial, setHistorial] = useState<any[]>([]);
+  const [selected, setSelected] = useState<any | null>(null);
+
   const api_url = process.env.NEXT_PUBLIC_API_URL;
   const router = useRouter();
 
@@ -33,12 +35,18 @@ export default function History() {
   }, []);
 
   const handleClick = (item: any) => {
-    const inventario = item.inventario;
+    setSelected(item); // <-- abrir modal con datos del equipo
+  };
+
+  const handleBuscar = () => {
+    if (!selected) return;
+    const inventario = selected.inventario;
     router.push(`/editar?equipoId=${inventario}`);
   };
 
   return (
     <div className="history-table-container">
+      {/* TABLA */}
       <table className="history-table">
         <thead>
           <tr className="rowTotal">
@@ -49,6 +57,7 @@ export default function History() {
               {historial.length}
             </td>
           </tr>
+
           <tr>
             <th>Inventario</th>
             <th>Tipo de Equipo</th>
@@ -86,6 +95,57 @@ export default function History() {
           )}
         </tbody>
       </table>
+      
+      {selected && (
+        <div className="modal-overlay">
+          <div className="modal-content fade-in">
+            <h2>Detalles del Equipo</h2>
+
+            <div className="modal-body">
+              {/* Encabezado limpio */}
+              <div className="headerSelected">
+                <div className="headerCard">
+                  <span className="label">Inventario</span>
+                  <span className="value">{selected.inventario}</span>
+                </div>
+
+                <div className="headerCard">
+                  <span className="label">Equipo</span>
+                  <span className="value">
+                    {selected.tipo_equipo === "PERIFÉRICO"
+                      ? selected.periferico
+                      : selected.tipo_equipo}
+                  </span>
+                </div>
+              </div>
+
+              {/* Lugar */}
+              <div className="sectionCard">
+                <span className="sectionLabel">Lugar</span>
+                <p className="sectionText">
+                  {selected.lugar || "Sin especificar"}
+                </p>
+              </div>
+
+              {/* Observaciones */}
+              <div className="sectionCard">
+                <span className="sectionLabel">Observaciones</span>
+                <p className="sectionText">{selected.observaciones || "—"}</p>
+              </div>
+            </div>
+
+            <div className="modal-buttons">
+              <button className="btn cancel" onClick={() => setSelected(null)}>
+                Cancelar
+              </button>
+
+              <button className="btn search" onClick={handleBuscar}>
+                Editar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }