pregunta4

src/app/(Administrador)/reporte/page.tsx

@@ -17,6 +17,7 @@ import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
 import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
 import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
 import "../../styles/layout/reporte.scss";
+import Pregunta_4 from "@/components/Equipo_Computo/Pregunta_4";
 
 type PreguntaKey =
   | "pregunta1"
@@ -63,7 +64,7 @@ const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
   pregunta3: "bg-gray",
   pregunta3_1: "bg-gray",
   pregunta3_2: "bg-gray",
-  pregunta3_3: "bg-gray", 
+  pregunta3_3: "bg-gray",
   pregunta3_4: "bg-gray",
   pregunta3_5: "bg-gray",
   pregunta4EP: "bg-gray",
@@ -86,7 +87,7 @@ export default function Page() {
       case "pregunta2_1":
         return <Pregunta2_1 />;
       case "pregunta2EP":
-        return <Pregunta2EP />;  
+        return <Pregunta2EP />;
       case "pregunta3":
         return <Pregunta3 />;
       case "pregunta3_1":
@@ -95,6 +96,7 @@ export default function Page() {
         return <Pregunta3_2 />;
       case "pregunta3_3":
         return <Pregunta3_3 />;
+
       case "pregunta3_4":
         return <Pregunta3_4 />;
       case "pregunta3_5":
@@ -120,10 +122,7 @@ export default function Page() {
 
   return (
     <div className="scanView_reporte">
-      
       <div className="container_reporte">
-          
-        
         <div className="main-content_reporte">
           <div className="tabs_reporte">
             {Object.entries(LABELS).map(([key, label]) => (
@@ -142,7 +141,8 @@ export default function Page() {
             {renderPregunta()}
           </div>
         </div>
+        <Pregunta_4 />
       </div>
     </div>
   );
-}
+}

src/components/Equipo_Computo/Pregunta_4.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from "react";
+
+import "./pregunta_4.css";
+
+export default function Pregunta4() {
+  return (
+    <main className="pregunta-page">
+      <header className="brand"></header>
+
+      <section className="card">
+        <h2>Generales</h2>
+
+        <label className="question-label">
+          ¿Cuántos servidores son ocupados en producción?
+        </label>
+
+        <input type="number" defaultValue={34} className="single-input" />
+
+        <p className="hint">Servidor y Uso</p>
+      </section>
+    </main>
+  );
+}

src/components/Equipo_Computo/pregunta_4.css

@@ -0,0 +1,52 @@
+.pregunta-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #f7f8f9;
+  padding: 40px 20px;
+  font-family: Arial, sans-serif;
+}
+
+.brand img {
+  width: 320px;
+  margin-bottom: 20px;
+}
+
+.card {
+  width: 700px;
+  max-width: 95%;
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
+  text-align: left;
+}
+
+.card h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  font-weight: 600;
+}
+
+.question-label {
+  font-size: 15px;
+  margin-bottom: 8px;
+  display: block;
+  color: #333;
+}
+
+.single-input {
+  width: 110px;
+  padding: 10px 12px;
+  font-size: 18px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+.hint {
+  font-size: 13px;
+  color: #777;
+}

tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {