diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 17dfc54..05de249 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-fde070c5'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "/offline.html",
-    "revision": "0.tp82avot2f"
+    "revision": "0.qs3c8mesmbo"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/offline.html"), {
diff --git a/src/img/3d.jpg b/src/img/3d.jpg
new file mode 100644
index 0000000..4fb6028
Binary files /dev/null and b/src/img/3d.jpg differ
diff --git a/src/views/Admin/reportes.jsx b/src/views/Admin/reportes.jsx
index ceb2faf..add8a60 100644
--- a/src/views/Admin/reportes.jsx
+++ b/src/views/Admin/reportes.jsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Bar } from "react-chartjs-2"; // Importamos el componente de gráfico de barras
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
+import { Pie } from "react-chartjs-2"; // Importamos el componente de gráfico de pastel
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from 'chart.js';
 
-// Registramos los componentes necesarios de Chart.js para el gráfico de barras
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
+// Registramos los componentes necesarios de Chart.js para el gráfico de pastel
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
 
 function ResultadosEncuestas() {
   const [resultados, setResultados] = useState([]);
@@ -48,39 +48,40 @@ function ResultadosEncuestas() {
 
   // Procesar las respuestas para construir los datos de la gráfica
   const procesarDatos = () => {
-    const respuestasPorCalificacion = { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 };
+    const respuestasPorPregunta = {};
 
-    // Contamos las respuestas por calificación
+    // Contamos las respuestas por pregunta
     resultados.forEach((encuesta) => {
-      const { respuestas } = encuesta;
+      const { pregunta, respuestas } = encuesta;
 
-      // Contamos las respuestas de cada calificación
+      // Si la pregunta no existe en el objeto, la inicializamos
+      if (!respuestasPorPregunta[pregunta]) {
+        respuestasPorPregunta[pregunta] = { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 };
+      }
+
+      // Contamos las respuestas de la calificación para cada pregunta
       Object.entries(respuestas).forEach(([calificacion, cantidad]) => {
-        respuestasPorCalificacion[calificacion] += cantidad; // Incrementamos el contador
+        respuestasPorPregunta[pregunta][calificacion] += cantidad; // Incrementamos el contador
       });
     });
 
-    // Asignamos colores diferentes a cada calificación
-    const colores = ["#FF6F61", "#FF9F40", "#FFCD44", "#4BC0C0", "#36A2EB"]; // Colores para las barras
+    // Creamos los datos para el gráfico de pastel
+    const labels = Object.keys(respuestasPorPregunta); // Las preguntas
+    const datasets = labels.map((pregunta) => {
+      const totalRespuestas = Object.values(respuestasPorPregunta[pregunta]).reduce((a, b) => a + b, 0); // Total de respuestas por pregunta
+      return {
+        label: pregunta,
+        data: Object.values(respuestasPorPregunta[pregunta]), // Los valores de cada calificación
+        backgroundColor: ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1'], // Colores para el gráfico
+      };
+    });
 
-    // Creamos los datos para el gráfico de barras
     return {
-      labels: ["1", "2", "3", "4", "5"], // Las respuestas posibles
-      datasets: [
-        {
-          label: "Distribución de Respuestas",
-          data: Object.values(respuestasPorCalificacion), // Datos de cada calificación
-          backgroundColor: colores, // Asignamos los colores diferentes a cada barra
-          borderColor: '#D66F58', // Color de los bordes de las barras
-          borderWidth: 1,
-        },
-      ],
+      labels: ['1', '2', '3', '4', '5'], // Respuestas posibles
+      datasets,
     };
   };
 
-  // Contamos el total de encuestas
-  const totalEncuestas = resultados.reduce((total, encuesta) => total + Object.values(encuesta.respuestas).reduce((sum, cantidad) => sum + cantidad, 0), 0);
-
   const data = procesarDatos();
 
   return (
@@ -89,44 +90,29 @@ function ResultadosEncuestas() {
       {resultados.length === 0 ? (
         <p>No se han completado encuestas aún.</p>
       ) : (
-        <div>
-          {/* Mostrar el total de encuestas */}
-          <p className="text-xl mb-4">Total de Encuestas Completadas: {totalEncuestas}</p>
-
-          <Bar
-            data={data}
-            options={{
-              responsive: true,
-              plugins: {
-                title: {
-                  display: true,
-                  text: "Distribución Total de Respuestas de sitio web", // Título del gráfico
-                },
-                tooltip: {
-                  callbacks: {
-                    label: function (context) {
-                      const label = context.dataset.label || '';
-                      return `${label}: ${context.raw}`; // Mostrar valor de cada barra en el tooltip
+        <div className="flex flex-wrap gap-4 justify-center">
+          {data.datasets.map((dataset, index) => (
+            <div key={index} className="flex-1 max-w-sm p-6 bg-white rounded-lg shadow">
+              <h3 className="text-xl font-semibold mb-2">{`Pregunta: ${dataset.label}`}</h3>
+              <div className="w-full h-[400px]"> {/* Altura ajustada */}
+                <Pie
+                  data={{
+                    labels: data.labels, // Respuestas posibles
+                    datasets: [dataset],
+                  }}
+                  options={{
+                    responsive: true,
+                    plugins: {
+                      title: {
+                        display: true,
+                        text: "Distribución de Respuestas",
+                      },
                     },
-                  },
-                },
-              },
-              scales: {
-                x: {
-                  title: {
-                    display: true,
-                    text: 'Calificación', // Título de la escala X
-                  },
-                },
-                y: {
-                  title: {
-                    display: true,
-                    text: 'Cantidad de Respuestas', // Título de la escala Y
-                  },
-                },
-              },
-            }}
-          />
+                  }}
+                />
+              </div>
+            </div>
+          ))}
         </div>
       )}
     </div>
diff --git a/src/views/Lente/DetalleProducto.jsx b/src/views/Lente/DetalleProducto.jsx
index 56c759d..a5b66e4 100644
--- a/src/views/Lente/DetalleProducto.jsx
+++ b/src/views/Lente/DetalleProducto.jsx
@@ -7,6 +7,7 @@ import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useNavigate } from "react-router-dom"; // Importa useHistory para manejar la redirección
 import Barra from "../../components/Navegacion/barra";
+import lente from "../../img/3d.jpg"
 
 
 function parseJwt(token) {
@@ -409,8 +410,14 @@ const DetalleProducto = () => {
                 </button>
               </div>
             </div>
+
+
           </div>
+          <div className="flex justify-center items-center h-screen bg-gray-100">
+  <img src={lente} alt="Código QR" className="w-96 h-96 object-contain shadow-lg rounded-md" />
+</div>
         </div>
+        
       )}
       
       
diff --git a/src/views/inicio.jsx b/src/views/inicio.jsx
index c2d6e23..f55f556 100644
--- a/src/views/inicio.jsx
+++ b/src/views/inicio.jsx
@@ -6,6 +6,8 @@ import imagen from "../img/Venta.png";
 import imagen2 from "../img/lentes2.png";
 import Scrool from '../components/scroll';
 import Barra from "../components/Navegacion/barra";
+import lente from "../img/3d.jpg";
+
 
 
 function App() {
@@ -203,8 +205,12 @@ function App() {
                 </button>
               </div>
             </div>
+
           </div>
           <br />
+          <div>
+              <img className="flex justify-center" src={lente} alt="" />
+            </div>
         </div>
         
       </div>