added loading and fixed little styles

src/app/styles/layout/reporte.scss

@@ -89,7 +89,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  justify-content: center;
+  justify-content: start;
   padding: 20px;
   background-color: #f5f5f7;
 

src/components/Equipo_Computo/Pregunta2.tsx

@@ -55,6 +55,7 @@ function transformPlatform(raw: RawOsEntry[]): OsEntry[] {
 export default function Pregunta2() {
   const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
   const [data, setData] = useState<PlatformData | null>(null);
+  const [loading, setLoading] = useState(true);
 
   // ✔ GET AXIOS PROFESIONAL
   useEffect(() => {
@@ -79,10 +80,41 @@ export default function Pregunta2() {
 
         setData(formatted);
       })
-      .catch((err) => console.error("Error cargando datos", err));
+      .catch((err) => console.error("Error cargando datos", err))
+      .finally(() => {
+        setLoading(false);
+      });
   }, []);
 
-  if (!data) return <div>Cargando datos...</div>;
+  if (loading)
+    return (
+      <div className={styles.container_P1}>
+        <div className={styles["contenedor-censo_p1"]}>
+          Censo de equipos de cómputo - Sitema Operativo
+        </div>
+
+        <div className={styles["pregunta-cuadro_p1"]}>
+          Número de equipos de cómputo por cada categoría y perfil de usuario.
+          <ToggleButton />
+        </div>
+        <div>Cargando datos...</div>
+      </div>
+    );
+
+  if (!data)
+    return (
+      <div className={styles.container_P1}>
+        <div className={styles["contenedor-censo_p1"]}>
+          Censo de equipos de cómputo - Sitema Operativo
+        </div>
+
+        <div className={styles["pregunta-cuadro_p1"]}>
+          Número de equipos de cómputo por cada categoría y perfil de usuario.
+          <ToggleButton />
+        </div>
+        <div className={styles.scanView_P3}>Error al cargar los datos.</div>
+      </div>
+    );
 
   const currentData = data[activeTab];
 

src/components/Equipo_Computo/Pregunta2_1.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import Link from "next/link";
 import "./pregunta2_1.module.scss"; // 👈 Importamos los estilos
 

src/components/Equipo_Computo/Pregunta3.tsx

@@ -156,10 +156,32 @@ export default function Pregunta3_2() {
   }, []);
 
   if (loading)
-    return <div className={styles.scanView_P3}>Cargando datos...</div>;
+    return (
+      <div className={styles.container_P3}>
+        <div className={styles["contenedor-censo_P3"]}>
+          Censo de equipos de cómputo - Plataforma y tipo procesador
+        </div>
+        <div className={styles["pregunta-cuadro_P3"]}>
+          Cantidad de población beneficiada por plataforma y tipo de procesador.
+          <ToggleButton />
+        </div>
+        <div className={styles.scanView_P3}>Cargando datos...</div>
+      </div>
+    );
 
   if (!data)
-    return <div className={styles.scanView_P3}>Error al cargar los datos.</div>;
+    return (
+      <div className={styles.container_P3}>
+        <div className={styles["contenedor-censo_P3"]}>
+          Censo de equipos de cómputo - Plataforma y tipo procesador
+        </div>
+        <div className={styles["pregunta-cuadro_P3"]}>
+          Cantidad de población beneficiada por plataforma y tipo de procesador.
+          <ToggleButton />
+        </div>
+        <div className={styles.scanView_P3}>Error al cargar los datos.</div>
+      </div>
+    );
 
   const currentData = data[activeTab];
 

src/components/Equipo_Computo/pregunta2.module.scss

@@ -34,6 +34,13 @@
   gap: 10px;
 }
 
+.scanView_P3 {
+  padding: 20px;
+  width: 100%;
+  background-color: white;
+  border-radius: 10px;
+}
+
 .scanView_P1 {
   background-color: #fff;
   border-radius: 10px;