IO/front-Censo
2
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

modificaciones a Pregunata3

Browse Source
This commit is contained in:
jls846
2025-11-18 18:11:09 -06:00
parent addbd88916
commit 28ae122bed
22 changed files with 910 additions and 3381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(Administrador)/reporte/page.tsx
+6 -33
View File
@@ -2,39 +2,26 @@
import { useState } from "react";
import Pregunta1 from "@/components/Equipo_Computo/Pregunta1";
import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1";
import Pregutna2 from "@/components/Equipo_Computo/Pregunta2";
import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1";
import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1";
import Pregunta3_2 from "@/components/Equipo_Computo/Pregunta3_2";
import Pregunta3_3 from "@/components/Equipo_Computo/Pregunta3_3";
import Pregunta3_4 from "@/components/Equipo_Computo/Pregunta3_4";
import Pregunta3_5 from "@/components/Equipo_Computo/Pregunta3_5";
import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
import "../../styles/layout/reporte.scss";
type PreguntaKey =
| "pregunta1"
| "pregunta2"
| "pregunta2_1"
| "pregunta3"
| "pregunta3_1"
| "pregunta3_2"
| "pregunta3_3"
| "pregunta3_4"
| "pregunta3_5"
| "pregunta7EP"
| "pregunta9";
const LABELS: Record<PreguntaKey, string> = {
pregunta1: "Pregunta 1 ",
pregunta2: "Pregunta 2",
pregunta2_1: "Pregunta 2.1",
pregunta3: "Pregunta 3",
pregunta3_1: "Pregunta 3.1",
pregunta3_2: "Pregunta 3.2",
pregunta3_3: "Pregunta 3.3",
pregunta3_4: "Pregunta 3.4",
pregunta3_5: "Pregunta 3.5",
pregunta7EP: "Pregunta 7 EP",
pregunta9: "Pregunta 9",
};
@@ -42,13 +29,9 @@ const LABELS: Record<PreguntaKey, string> = {
// Mapeo de fondo por pregunta (puedes personalizarlo)
const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
pregunta1: "bg-gray",
pregunta2: "bg-gray",
pregunta2_1: "bg-gray",
pregunta3: "bg-gray",
pregunta3_1: "bg-gray",
pregunta3_2: "bg-gray",
pregunta3_3: "bg-gray",
pregunta3_4: "bg-gray",
pregunta3_5: "bg-gray",
pregunta7EP: "bg-gray",
pregunta9: "bg-blue",
};
@@ -60,22 +43,12 @@ export default function Page() {
switch (activeTab) {
case "pregunta1":
return <Pregunta1 />;
case "pregunta1":
return <Pregunta1 />;
case "pregunta2":
return <Pregutna2 />;
case "pregunta2_1":
return <Pregunta2_1 />;
case "pregunta3":
return <Pregunta3 />;
case "pregunta3_1":
return <Pregunta3_1 />;
case "pregunta3_2":
return <Pregunta3_2 />;
case "pregunta3_3":
return <Pregunta3_3 />;
case "pregunta3_4":
return <Pregunta3_4 />;
case "pregunta3_5":
return <Pregunta3_5 />;
case "pregunta7EP":
return <Pregunta7EP />;
case "pregunta9":
src/app/styles/layout/reporte.scss
+1 -1
View File
@@ -88,7 +88,7 @@
.data-table_reporte {
padding: 20px;
background-color: #f5f5f7;
border: none;
min-height: 300px;
animation: fadein 0.2s ease;
src/components/Equipo_Computo/Pregunta1.tsx
+231 -118
View File
@@ -1,129 +1,242 @@
"use client";
import "./pregunta1.module.scss"
import { useState } from "react";
import styles from "./pregunta1.module.scss";
type OsEntry = {
os: string;
count: number;
isTotal?: boolean;
};
type PlatformKey =
| "pc-desktop"
| "apple-desktop"
| "pc-laptop"
| "apple-laptop"
| "servers";
type PlatformData = Record<PlatformKey, OsEntry[]>;
const MOCK_DATA: PlatformData = {
"pc-desktop": [
{ os: "Windows 11", count: 408 },
{ os: "Windows 10", count: 1171 },
{ os: "Windows 7/8", count: 177 },
{ os: "Windows XP/Vista", count: 43 },
{ os: "Linux", count: 45 },
{ os: "Total", count: 1844, isTotal: true },
],
"apple-desktop": [
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
{
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
count: 180,
},
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
{ os: "Total", count: 480, isTotal: true },
],
"pc-laptop": [
{ os: "Windows 11", count: 40 },
{ os: "Windows 10", count: 171 },
{ os: "Windows 7/8", count: 17 },
{ os: "Windows XP/Vista", count: 3 },
{ os: "Linux", count: 5 },
{ os: "Total", count: 236, isTotal: true },
],
"apple-laptop": [
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
{
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
count: 180,
},
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
{ os: "Total", count: 480, isTotal: true },
],
servers: [
{
os: "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
count: 120,
},
{ os: "Unix (AIX, Mac OS Server, Solaris, etc.)", count: 80 },
{ os: "Windows Server 2022/2023", count: 50 },
{ os: "Windows Server 2016/2019", count: 80 },
{ os: "Windows Server 2008/2012", count: 50 },
{ os: "Windows Server 2000/2003", count: 12 },
{ os: "Total", count: 392, isTotal: true },
],
};
const PLATFORM_LABELS: Record<PlatformKey, string> = {
"pc-desktop": "Computadoras de escritorio Plataforma PC",
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
"pc-laptop": "Computadoras portátiles Plataforma PC",
"apple-laptop": "Computadoras portátiles Plataforma Apple",
servers: "Servidores de alto rendimiento",
};
export default function Pregunta1() {
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
const currentData = MOCK_DATA[activeTab];
export default function Pregunta1_1() {
return (
<div className={styles.scanView_P1}>
<div className={styles.container_P1}>
<div className={styles.header_P1}>
Presione cada pestaña para ver la información de las plataformas.
</div>
<section>
<div>
<h1>Censo Equipos de computo</h1>
<p className="instructions">
Desglosa en cada renglon el número de equipos de cómputo dedicado por
cada categoría enlistada, de acuerdo con el perfil del usuario al que
se destina su uso primordialmente.
</p>
<div className={styles["main-content_P1"]}>
{/* Tabs */}
<div className={styles.tabs_P1}>
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
<button
key={key}
className={`${styles.tab_P1} ${
activeTab === key ? styles.active_P1 : ""
}`}
onClick={() => setActiveTab(key as PlatformKey)}
aria-selected={activeTab === key}
>
{label}
</button>
))}
<div className="container">
{/* ===================== */}
{/* 1. COMPUTADORAS DE ESCRITORIO */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Computadoras de escritorio</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Windows */}
<tr>
<th>Windows</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Linux */}
<tr>
<th>Linux</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Mac OS */}
<tr>
<th>Mac OS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* Data Table */}
<div className={styles["data-table-wrapper_P1"]}>
<div className={styles["data-table_P1"]}>
{currentData.map((item, index) => (
<div
key={index}
className={`${styles["data-row_P1"]} ${
item.isTotal ? styles["total-row_P1"] : ""
}`}
>
<div className={styles["os-name_P1"]}>{item.os}</div>
<div className={styles["count-box_P1"]}>{item.count}</div>
</div>
))}
</div>
{/* ===================== */}
{/* 2. COMPUTADORAS PORTÁTILES */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Computadoras portátiles</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Windows */}
<tr>
<th>Windows</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Chromebook */}
<tr>
<th>Chromebook</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Mac OS */}
<tr>
<th>Mac OS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* ===================== */}
{/* 3. TABLETAS */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Tabletas</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Android */}
<tr>
<th>Android</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* iPad IOS */}
<tr>
<th>iPad iOS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* ===================== */}
{/* 4. ALTO RENDIMIENTO */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Alto Rendimiento</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Servidores</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
);
}
src/components/Equipo_Computo/Pregunta1_1.tsx
-242
View File
@@ -1,242 +0,0 @@
"use client";
import "./pregunta1_1.module.scss"
export default function Pregunta1_1() {
return (
<section>
<div>
<h1>Censo Equipos de computo</h1>
<p className="instructions">
Desglosa en cada renglon el número de equipos de cómputo dedicado por
cada categoría enlistada, de acuerdo con el perfil del usuario al que
se destina su uso primordialmente.
</p>
<div className="container">
{/* ===================== */}
{/* 1. COMPUTADORAS DE ESCRITORIO */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Computadoras de escritorio</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Windows */}
<tr>
<th>Windows</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Linux */}
<tr>
<th>Linux</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Mac OS */}
<tr>
<th>Mac OS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* ===================== */}
{/* 2. COMPUTADORAS PORTÁTILES */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Computadoras portátiles</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Windows */}
<tr>
<th>Windows</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Chromebook */}
<tr>
<th>Chromebook</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Mac OS */}
<tr>
<th>Mac OS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* ===================== */}
{/* 3. TABLETAS */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Tabletas</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{/* Android */}
<tr>
<th>Android</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* iPad IOS */}
<tr>
<th>iPad iOS</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
{/* Totales */}
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
{/* ===================== */}
{/* 4. ALTO RENDIMIENTO */}
{/* ===================== */}
<div className="table-container">
<table>
<thead>
<tr>
<th>Alto Rendimiento</th>
<th>Alumnos</th>
<th>Profesores</th>
<th>Tecnicos Academicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>Servidores</th>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<td><input type="number" className="numero" /></td>
<th>10</th>
</tr>
<tr>
<th>Total</th>
<th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
<th>10</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
);
}
src/components/Equipo_Computo/Pregunta2.tsx
+84 -114
View File
@@ -1,158 +1,128 @@
"use client";
import { useState, useEffect } from "react";
import "./pregunta2.scss";
import { useState } from "react";
import styles from "./pregunta2.module.scss";
// Tipos
type OsEntry = {
os: string;
count: string; // o number si la API devuelve números
count: number;
isTotal?: boolean;
};
type PlatformData = {
[key: string]: OsEntry[];
};
type PlatformKey =
| "pc-desktop"
| "apple-desktop"
| "pc-laptop"
| "apple-laptop"
| "servers";
type PlatformData = Record<PlatformKey, OsEntry[]>;
// === DATOS TEMPORALES (mock) ===
const MOCK_DATA: PlatformData = {
"pc-desktop": [
{ os: "Windows 11", count: "408" },
{ os: "Windows 10", count: "1171" },
{ os: "Windows 7/8", count: "177" },
{ os: "Windows XP/Vista", count: "43" },
{ os: "Linux", count: "45" },
{ os: "Total", count: "1844", isTotal: true },
{ os: "Windows 11", count: 408 },
{ os: "Windows 10", count: 1171 },
{ os: "Windows 7/8", count: 177 },
{ os: "Windows XP/Vista", count: 43 },
{ os: "Linux", count: 45 },
{ os: "Total", count: 1844, isTotal: true },
],
"apple-desktop": [
{ os: "Mac OS X(13 - Ventura, 14 - Sonoma)", count: "205" },
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
{
os: "Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)",
count: "180",
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
count: 180,
},
{ os: "Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)", count: "95" },
{ os: "Mac OS X(Snow Leopard,Mountain Lion,Mavericks)", count: "6" },
{ os: "Total", count: "480", isTotal: true },
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
{ os: "Total", count: 480, isTotal: true },
],
"pc-laptop": [
{ os: "Windows 11", count: "40" },
{ os: "Windows 10", count: "171" },
{ os: "Windows 7/8", count: "17" },
{ os: "Windows XP/Vista", count: "3" },
{ os: "Linux", count: "5" },
{ os: "Total", count: "144", isTotal: true },
{ os: "Windows 11", count: 40 },
{ os: "Windows 10", count: 171 },
{ os: "Windows 7/8", count: 17 },
{ os: "Windows XP/Vista", count: 3 },
{ os: "Linux", count: 5 },
{ os: "Total", count: 236, isTotal: true },
],
"apple-laptop": [
{ os: "Mac OS X(13 - Ventura, 14 - Sonoma)", count: "39" },
{ os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 },
{
os: "Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)",
count: "23",
os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)",
count: 180,
},
{ os: "Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)", count: "0" },
{ os: "Mac OS X(Snow Leopard,Mountain Lion,Mavericks)", count: "9" },
{ os: "Total", count: "71", isTotal: true },
{ os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 },
{ os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 },
{ os: "Total", count: 480, isTotal: true },
],
servers: [
{
os: "Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)",
count: "21",
os: "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)",
count: 120,
},
{ os: "Unix (AIX,MAC OS Server,Solaris,entre otros)", count: "2" },
{ os: "Windows Server 2022/2023", count: "6" },
{ os: "Windows Server 2016/2019", count: "3" },
{ os: "Windows Server 2008/2012", count: "3" },
{ os: "Windows Server 2000/2003", count: "2" },
{ os: "Total", count: "37", isTotal: true },
{ os: "Unix (AIX, Mac OS Server, Solaris, etc.)", count: 80 },
{ os: "Windows Server 2022/2023", count: 50 },
{ os: "Windows Server 2016/2019", count: 80 },
{ os: "Windows Server 2008/2012", count: 50 },
{ os: "Windows Server 2000/2003", count: 12 },
{ os: "Total", count: 392, isTotal: true },
],
};
const API_ENDPOINT = "/api/platform-stats"; // ← ¡Reemplaza esto cuando sepas la URL real!
const PLATFORM_LABELS: Record<PlatformKey, string> = {
"pc-desktop": "Computadoras de escritorio Plataforma PC",
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
"pc-laptop": "Computadoras portátiles Plataforma PC",
"apple-laptop": "Computadoras portátiles Plataforma Apple",
servers: "Servidores de alto rendimiento",
};
const Pregunta2= () => {
const [activeTab, setActiveTab] = useState<string>("pc-desktop");
const [data, setData] = useState<PlatformData>(MOCK_DATA);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
export default function Pregunta1() {
const [activeTab, setActiveTab] = useState<PlatformKey>("pc-desktop");
useEffect(() => {
const fetchData = async () => {
try {
// === DESCOMENTA ESTO CUANDO TENGAS LA API ===
// const response = await fetch(API_ENDPOINT);
// if (!response.ok) throw new Error('Error al cargar estadísticas');
// const apiData: PlatformData = await response.json();
// setData(apiData);
// setLoading(false);
// === POR AHORA: usa datos simulados (y simula un retraso si quieres) ===
// await new Promise(resolve => setTimeout(resolve, 300));
setData(MOCK_DATA);
setLoading(false);
} catch (err) {
console.error("Error al cargar datos:", err);
setError(
"No se pudieron cargar las estadísticas. Usando datos temporales."
);
setData(MOCK_DATA); // fallback en caso de error
setLoading(false);
}
};
fetchData();
}, []);
const currentData = data[activeTab] || [];
// Si quisieras mostrar un estado de carga (opcional)
// if (loading) return <div className="dashboardContainer"><p>Cargando...</p></div>;
// if (error) console.warn(error); // o muestra un toast, etc.
const currentData = MOCK_DATA[activeTab];
return (
<div className="dashboardContainer">
<div className={styles.scanView_P1}>
<div className={styles.container_P1}>
<div className={styles.header_P1}>
Presione cada pestaña para ver la información de las plataformas.
</div>
<div className="scanView">
<div className="container">
<div className="header">
Presione cada pestaña para ver la información de las plataformas.
<div className={styles["main-content_P1"]}>
{/* Tabs */}
<div className={styles.tabs_P1}>
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
<button
key={key}
className={`${styles.tab_P1} ${
activeTab === key ? styles.active_P1 : ""
}`}
onClick={() => setActiveTab(key as PlatformKey)}
aria-selected={activeTab === key}
>
{label}
</button>
))}
</div>
<div className="main-content">
<div className="tabs">
{Object.entries({
"pc-desktop": "Computadoras de escritorio Plataforma PC",
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
"pc-laptop": "Computadoras portátiles Plataforma PC",
"apple-laptop": "Computadoras portátiles Plataforma Apple",
servers: "Servidores de alto rendimiento",
}).map(([key, label]) => (
{/* Data Table */}
<div className={styles["data-table_P1"]}>
{currentData.map((item, index) => (
<div
key={key}
className={`tab ${activeTab === key ? "active" : ""}`}
onClick={() => setActiveTab(key)}
key={index}
className={`${styles["data-row_P1"]} ${
item.isTotal ? styles["total-row_P1"] : ""
}`}
>
{label}
<div className={styles["os-name_P1"]}>{item.os}</div>
<div className={styles["count-box_P1"]}>{item.count}</div>
</div>
))}
</div>
<div className="data-table-wrapper">
<div className="data-table">
{currentData.map((item, index) => (
<div
key={index}
className={`data-row ${item.isTotal ? "total-row" : ""}`}
>
<div className="os-name">{item.os}</div>
<div className="count-box">{item.count}</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Pregunta2;
}
src/components/Equipo_Computo/Pregunta3.tsx
+297 -337
View File
@@ -1,366 +1,326 @@
"use client";
import React, { useState } from "react";
import Link from "next/link";
import "./pregunta3.css";
import { useState } from "react";
import styles from "./pregunta3.module.scss";
export default function Pregunta3() {
const [activeTab, setActiveTab] = useState(0);
type ProcessorEntry = {
tipo: string;
alumnos: string;
profesores: string;
tecnicos: string;
investigadores: string;
administrativos: string;
total: string;
isTotal?: boolean;
};
const tabs = [
"Computadoras de escritorio Plataforma PC",
"Computadoras de escritorio Plataforma Apple",
"Computadoras portátiles Plataforma PC",
"Computadoras portátiles Plataforma Apple",
"Alto rendimiento Servidores",
];
type PlatformKey =
| "pc-desktop"
| "apple-desktop"
| "pc-laptop"
| "apple-laptop"
| "servers";
// === DATOS DE CADA TABLA ===
const data = [
// === 1. PC Escritorio ===
type PlatformData = Record<PlatformKey, ProcessorEntry[]>;
// Datos: solo "apple-desktop" tiene información en este caso
const MOCK_DATA: PlatformData = {
"pc-desktop": [],
"apple-desktop": [
{
color: "#16a34a",
headerColor: "#15803d",
rows: [
{
tipo: "Core i9 / Ryzen 9",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core i7 / Ryzen 7",
alumnos: "15",
profesores: "8",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "23",
},
{
tipo: "Core i5 / Ryzen 5",
alumnos: "10",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "2",
total: "17",
},
],
total: {
alumnos: "25",
profesores: "13",
tecnicos: "0",
investigadores: "0",
administrativos: "2",
total: "40",
},
tipo: "Core Ultra (i3, i5, i7) Serie 2",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
// === 2. Apple Escritorio ===
{
color: "#a855f7",
headerColor: "#7e22ce",
rows: [
{
tipo: "Familia M3",
alumnos: "10",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "12",
},
{
tipo: "Familia M2",
alumnos: "5",
profesores: "3",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "8",
},
],
total: {
alumnos: "15",
profesores: "5",
tecnicos: "0",
investigadores: "0",
administrativos: "0",
total: "20",
},
tipo: "Core Ultra (i3, i5, i7) Serie 1",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
// === 3. PC Portátiles ===
{
color: "#22c55e",
headerColor: "#15803d",
rows: [
{
tipo: "Core i5 (12a generación)",
alumnos: "12",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "17",
},
{
tipo: "Core i7 (13a generación)",
alumnos: "6",
profesores: "4",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "11",
},
],
total: {
alumnos: "18",
profesores: "9",
tecnicos: "0",
investigadores: "0",
administrativos: "1",
total: "28",
},
tipo: "Familia M4",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "2",
total: "2",
},
// === 4. Apple Portátiles ===
{
color: "#9333ea",
headerColor: "#7e22ce",
rows: [
{
tipo: "Familia M2",
alumnos: "35",
profesores: "3",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "38",
},
{
tipo: "Familia M1",
alumnos: "",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "6",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "14",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "14",
},
],
total: {
alumnos: "35",
profesores: "31",
tecnicos: "0",
investigadores: "0",
administrativos: "5",
total: "71",
},
tipo: "Familia M3",
alumnos: "",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "2",
},
// === 5. Servidores ===
{
color: "#2563eb",
headerColor: "#1e40af",
rows: [
{
tipo: "Xeon E3, E5, E7",
alumnos: "19",
profesores: "",
tecnicos: "",
investigadores: "16",
administrativos: "",
total: "35",
},
{
tipo: "Xeon Bronce, Plata, Oro 6a generación",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "Xeon Phi",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
],
total: {
alumnos: "19",
profesores: "0",
tecnicos: "0",
investigadores: "16",
administrativos: "2",
total: "37",
},
tipo: "Familia M2",
alumnos: "",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "2",
},
];
{
tipo: "Familia M1",
alumnos: "51",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "52",
},
{
tipo: "i9 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i5 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "11",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "12",
},
{
tipo: "i3 o equivalentes (13a generación en adelante)",
alumnos: "175",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "26",
total: "206",
},
{
tipo: "i3 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i3 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "2",
},
{
tipo: "Core2 Mac, Quad Core o anteriores",
alumnos: "12",
profesores: "3",
tecnicos: "3",
investigadores: "",
administrativos: "3",
total: "21",
},
{
tipo: "Total",
alumnos: "249",
profesores: "14",
tecnicos: "3",
investigadores: "0",
administrativos: "37",
total: "303",
isTotal: true,
},
],
"pc-laptop": [],
"apple-laptop": [],
servers: [],
};
const PLATFORM_LABELS: Record<PlatformKey, string> = {
"pc-desktop": "Computadoras de escritorio Plataforma PC",
"apple-desktop": "Computadoras de escritorio Plataforma Apple",
"pc-laptop": "Computadoras portátiles Plataforma PC",
"apple-laptop": "Computadoras portátiles Plataforma Apple",
servers: "Alto rendimiento Servidores",
};
export default function Pregunta3_2() {
const [activeTab, setActiveTab] = useState<PlatformKey>("apple-desktop");
const currentData = MOCK_DATA[activeTab];
return (
<main className="pregunta-page">
<div className="pregunta-container">
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5 - 5/5)</h1>
<section className="pregunta-seccion">
<p className="pregunta-texto">
3. Desglose la cantidad de población beneficiada por plataforma y
tipo de procesador: *
<div className={styles.scanView_P3}>
<div className={styles.container_P3}>
<div className={styles.header_P3}>
<h1 className={styles.titulo}>PREGUNTA 3 (2/5)</h1>
<p className={styles.texto}>
3. Desglose la cantidad de población beneficiada por plataforma y tipo de procesador: *
</p>
<p className="pregunta-subtexto">
<p className={styles.subtexto}>
Presione cada pestaña para ingresar la información.
</p>
</div>
{/* === PESTAÑAS === */}
<div className="tab-container">
{tabs.map((tab, index) => (
<div
key={index}
className={`tab ${activeTab === index ? "active" : "inactive"}`}
style={
activeTab === index
? {
borderBottomColor: data[index].color,
color: data[index].color,
}
: {}
}
onClick={() => setActiveTab(index)}
{/* Contenido principal con pestañas a la izquierda */}
<div className={styles.mainContent_P3}>
{/* Pestañas verticales (izquierda) */}
<div className={styles.tabs_P3}>
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
<button
key={key}
className={`${styles.tab_P3} ${
activeTab === key ? styles.active_P3 : ""
}`}
onClick={() => setActiveTab(key as PlatformKey)}
aria-selected={activeTab === key}
>
{tab}
</div>
{label}
</button>
))}
</div>
{/* === TABLA === */}
<div className="tabla-container">
<table className="tabla">
<thead>
<tr>
<th
rowSpan={2}
className="header-procesador"
style={{ backgroundColor: data[activeTab].color }}
>
Tipo de procesador
</th>
<th
colSpan={5}
className="header-poblacion"
style={{ backgroundColor: data[activeTab].headerColor }}
>
Población Beneficiada
</th>
<th
rowSpan={2}
className="header-total"
style={{ backgroundColor: data[activeTab].color }}
>
Total
</th>
</tr>
<tr>
<th className="sub-header">Alumnos</th>
<th className="sub-header">Profesores</th>
<th className="sub-header">Técnicos</th>
<th className="sub-header">Investigadores</th>
<th className="sub-header">Administrativos</th>
</tr>
</thead>
<tbody>
{data[activeTab].rows.map((item, i) => (
<tr key={i}>
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input type="text" value={item.alumnos} readOnly />
</td>
<td>
<input type="text" value={item.profesores} readOnly />
</td>
<td>
<input type="text" value={item.tecnicos} readOnly />
</td>
<td>
<input type="text" value={item.investigadores} readOnly />
</td>
<td>
<input
type="text"
value={item.administrativos}
readOnly
/>
</td>
<td className="total-celda">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td className="tipo-procesador">Total</td>
<td>
<input
type="text"
value={data[activeTab].total.alumnos}
readOnly
/>
</td>
<td>
<input
type="text"
value={data[activeTab].total.profesores}
readOnly
/>
</td>
<td>
<input
type="text"
value={data[activeTab].total.tecnicos}
readOnly
/>
</td>
<td>
<input
type="text"
value={data[activeTab].total.investigadores}
readOnly
/>
</td>
<td>
<input
type="text"
value={data[activeTab].total.administrativos}
readOnly
/>
</td>
<td className="total-celda">{data[activeTab].total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
{/* Contenido de la tabla (derecha) */}
<div className={styles.content_P3}>
{currentData.length > 0 ? (
<>
<div className={styles.tableWrapper_P3}>
<table className={styles.table_P3}>
<thead>
<tr>
<th rowSpan={2} className={styles.headerProcesador}>
{activeTab.includes("apple")
? "Plataforma Apple"
: "Plataforma PC"}{" "}
<br />
Tipo de procesador
</th>
<th colSpan={5} className={styles.headerPoblacion}>
Población Beneficiada
</th>
<th rowSpan={2} className={styles.headerTotal}>
Total
</th>
</tr>
<tr>
<th className={styles.subHeader}>Alumnos</th>
<th className={styles.subHeader}>Profesores</th>
<th className={styles.subHeader}>Técnicos Académicos</th>
<th className={styles.subHeader}>Investigadores</th>
<th className={styles.subHeader}>Administrativos</th>
</tr>
</thead>
<tbody>
{currentData.map((item, index) => (
<tr
key={index}
className={
item.isTotal ? styles.totalRow_P3 : styles.dataRow_P3
}
>
<td className={styles.processor_P3}>{item.tipo}</td>
<td>
<input
type="text"
value={item.alumnos}
readOnly
className={styles.inputBox_P3}
/>
</td>
<td>
<input
type="text"
value={item.profesores}
readOnly
className={styles.inputBox_P3}
/>
</td>
<td>
<input
type="text"
value={item.tecnicos}
readOnly
className={styles.inputBox_P3}
/>
</td>
<td>
<input
type="text"
value={item.investigadores}
readOnly
className={styles.inputBox_P3}
/>
</td>
<td>
<input
type="text"
value={item.administrativos}
readOnly
className={styles.inputBox_P3}
/>
</td>
<td className={styles.totalCell_P3}>{item.total}</td>
</tr>
))}
</tbody>
</table>
</div>
<button className={styles.consultarBtn_P3}>
Consultar las equivalencias de procesadores
</button>
</>
) : (
<div className={styles.emptyState_P3}>
No hay datos disponibles para esta plataforma.
</div>
)}
</div>
</section>
<div className="boton-contenedor">
<Link href="/" className="boton volver">
← Volver al inicio
</Link>
</div>
</div>
</main>
</div>
);
}
}
src/components/Equipo_Computo/Pregunta3_1.tsx
-248
View File
@@ -1,248 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import "./pregunta3_1.css";
export default function pregunta3_1() {
const data = [
{
tipo: "Core Ultra (i3, i5, i7) Serie 2",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core Ultra (i3, i5, i7) Serie 1",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i9 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (13a generación en adelante)",
alumnos: "15",
profesores: "16",
tecnicos: "",
investigadores: "",
administrativos: "52",
total: "97",
},
{
tipo: "i7 o equivalentes (12a generación en adelante)",
alumnos: "29",
profesores: "16",
tecnicos: "",
investigadores: "",
administrativos: "52",
total: "97",
},
{
tipo: "i5 o equivalentes (13a generación en adelante)",
alumnos: "107",
profesores: "3",
tecnicos: "",
investigadores: "",
administrativos: "8",
total: "118",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "250",
profesores: "59",
tecnicos: "3",
investigadores: "",
administrativos: "904",
total: "1216",
},
{
tipo: "i3 o equivalentes (13a generación en adelante)",
alumnos: "3",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "12",
total: "16",
},
{
tipo: "i3 o equivalentes (12a generación en adelante)",
alumnos: "36",
profesores: "19",
tecnicos: "2",
investigadores: "",
administrativos: "78",
total: "137",
},
{
tipo: "i3 o equivalentes (11a generación en adelante)",
alumnos: "264",
profesores: "66",
tecnicos: "",
investigadores: "",
administrativos: "410",
total: "740",
},
{
tipo: "Pentium Gold",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "Pentium Serie J, G",
alumnos: "2",
profesores: "3",
tecnicos: "",
investigadores: "",
administrativos: "3",
total: "8",
},
{
tipo: "Celeron Dual Core, Pentium Dual Core o anteriores",
alumnos: "25",
profesores: "40",
tecnicos: "",
investigadores: "",
administrativos: "56",
total: "121",
},
];
const total = {
alumnos: "774",
profesores: "227",
tecnicos: "5",
investigadores: "0",
administrativos: "838",
total: "1844",
};
return (
<main className="pregunta-page pregunta3">
<div className="pregunta-container">
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5)</h1>
<section className="pregunta-seccion">
<p className="pregunta-texto">
3. Desglose la cantidad de población beneficiada por plataforma y
tipo de procesador: *
</p>
<p className="pregunta-subtexto">
Presione cada pestaña para ingresar la información.
</p>
{/* Pestañas */}
<div className="tab-container">
<div className="tab active">
Computadoras de escritorio Plataforma PC
</div>
<div className="tab inactive">
Computadoras de escritorio Plataforma Apple
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma PC
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma Apple
</div>
<div className="tab inactive">Alto rendimiento Servidores</div>
</div>
{/* Tabla */}
<div className="tabla-wrapper">
<table className="tabla-pc">
<thead>
<tr>
<th rowSpan={2} className="header-procesador">
Plataforma PC <br /> Tipo de procesador
</th>
<th colSpan={5} className="header-poblacion">
Población Beneficiada
</th>
<th rowSpan={2} className="header-total">
Total
</th>
</tr>
<tr>
<th>Alumnos</th>
<th>Profesores</th>
<th>Técnicos Académicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
</tr>
</thead>
<tbody>
{data.map((item, i) => (
<tr key={i}>
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input value={item.alumnos} readOnly />
</td>
<td>
<input value={item.profesores} readOnly />
</td>
<td>
<input value={item.tecnicos} readOnly />
</td>
<td>
<input value={item.investigadores} readOnly />
</td>
<td>
<input value={item.administrativos} readOnly />
</td>
<td className="total-celda">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td className="tipo-procesador">Total</td>
<td>
<input value={total.alumnos} readOnly />
</td>
<td>
<input value={total.profesores} readOnly />
</td>
<td>
<input value={total.tecnicos} readOnly />
</td>
<td>
<input value={total.investigadores} readOnly />
</td>
<td>
<input value={total.administrativos} readOnly />
</td>
<td className="total-celda final-total">{total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
</div>
</section>
<div className="boton-contenedor">
<Link href="/pregunta3.2" className="boton siguiente">
Pregunta 3 (2/5) →
</Link>
</div>
</div>
</main>
);
}
src/components/Equipo_Computo/Pregunta3_2.tsx
-270
View File
@@ -1,270 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import "./pregunta3_2.css";
export default function Pregunta3_2() {
const data = [
{
tipo: "Core Ultra (i3, i5, i7) Serie 2",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core Ultra (i3, i5, i7) Serie 1",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Familia M4",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "2",
total: "2",
},
{
tipo: "Familia M3",
alumnos: "",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "2",
},
{
tipo: "Familia M2",
alumnos: "",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "2",
},
{
tipo: "Familia M1",
alumnos: "51",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "52",
},
{
tipo: "i9 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i5 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "11",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "12",
},
{
tipo: "i3 o equivalentes (13a generación en adelante)",
alumnos: "175",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "26",
total: "206",
},
{
tipo: "i3 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i3 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "2",
},
{
tipo: "Core2 Mac, Quad Core o anteriores",
alumnos: "12",
profesores: "3",
tecnicos: "3",
investigadores: "",
administrativos: "3",
total: "21",
},
];
const total = {
alumnos: "249",
profesores: "14",
tecnicos: "3",
investigadores: "0",
administrativos: "37",
total: "303",
};
return (
<main className="pregunta-page pregunta3">
<div className="pregunta-container">
<h1 className="pregunta-titulo">PREGUNTA 3 (2/5)</h1>
<section className="pregunta-seccion">
<p className="pregunta-texto">
3. Desglose la cantidad de población beneficiada por plataforma y
tipo de procesador: *
</p>
<p className="pregunta-subtexto">
Presione cada pestaña para ingresar la información.
</p>
{/* === PESTAÑAS === */}
<div className="tab-container">
<div className="tab inactive">
Computadoras de escritorio Plataforma PC
</div>
<div className="tab active">
Computadoras de escritorio Plataforma Apple
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma PC
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma Apple
</div>
<div className="tab inactive">Alto rendimiento Servidores</div>
</div>
{/* === TABLA === */}
<div className="tabla-apple-container">
<table className="tabla-apple">
<thead>
<tr>
<th rowSpan={2} className="header-procesador">
Plataforma Apple <br /> Tipo de procesador
</th>
<th colSpan={5} className="header-poblacion">
Población Beneficiada
</th>
<th rowSpan={2} className="header-total">
Total
</th>
</tr>
<tr>
<th className="sub-header">Alumnos</th>
<th className="sub-header">Profesores</th>
<th className="sub-header">Técnicos Académicos</th>
<th className="sub-header">Investigadores</th>
<th className="sub-header">Administrativos</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input type="text" value={item.alumnos} readOnly />
</td>
<td>
<input type="text" value={item.profesores} readOnly />
</td>
<td>
<input type="text" value={item.tecnicos} readOnly />
</td>
<td>
<input type="text" value={item.investigadores} readOnly />
</td>
<td>
<input
type="text"
value={item.administrativos}
readOnly
/>
</td>
<td className="total-celda">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td className="tipo-procesador">Total</td>
<td>
<input type="text" value={total.alumnos} readOnly />
</td>
<td>
<input type="text" value={total.profesores} readOnly />
</td>
<td>
<input type="text" value={total.tecnicos} readOnly />
</td>
<td>
<input type="text" value={total.investigadores} readOnly />
</td>
<td>
<input type="text" value={total.administrativos} readOnly />
</td>
<td className="total-celda final-total">{total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
</div>
</section>
<div className="boton-contenedor">
<Link href="/pregunta3.3" className="boton siguiente">
Pregunta 3 (3/5) →
</Link>
</div>
</div>
</main>
);
}
src/components/Equipo_Computo/Pregunta3_3.tsx
-271
View File
@@ -1,271 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import "./pregunta3_3.css";
export default function Pregunta3_3() {
const data = [
{
tipo: "Core Ultra (i3, i5, i7) Serie 2",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core Ultra (i3, i5, i7) Serie 1",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i9 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (12a generación en adelante)",
alumnos: "16",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "27",
total: "43",
},
{
tipo: "i7 o equivalentes (11a generación)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "i5 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "1",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "2",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "146",
profesores: "34",
tecnicos: "",
investigadores: "",
administrativos: "42",
total: "222",
},
{
tipo: "i5 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "2",
tecnicos: "",
investigadores: "",
administrativos: "15",
total: "19",
},
{
tipo: "i3 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "12",
total: "12",
},
{
tipo: "i3 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "8",
tecnicos: "",
investigadores: "",
administrativos: "23",
total: "31",
},
{
tipo: "i3 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Pentium Dual Core o anteriores",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Celeron (equivalente 2018 hasta la fecha)",
alumnos: "299",
profesores: "8",
tecnicos: "",
investigadores: "",
administrativos: "4",
total: "311",
},
{
tipo: "Celeron anteriores",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core2 Duo, Quad Core, Pentium Dual Core o anteriores",
alumnos: "4",
profesores: "4",
tecnicos: "",
investigadores: "",
administrativos: "3",
total: "11",
},
];
const total = {
alumnos: "445",
profesores: "132",
tecnicos: "0",
investigadores: "0",
administrativos: "139",
total: "716",
};
return (
<main className="pregunta-page pregunta3">
<div className="pregunta-container">
<h1 className="pregunta-titulo">PREGUNTA 3 (3/5)</h1>
<section className="pregunta-seccion">
<p className="pregunta-texto">
3. Desglose la cantidad de población beneficiada por plataforma y
tipo de procesador: *
</p>
<p className="pregunta-subtexto">
Presione cada pestaña para ingresar la información.
</p>
{/* === PESTAÑAS === */}
<div className="tab-container">
<div className="tab inactive">
Computadoras de escritorio Plataforma PC
</div>
<div className="tab inactive">
Computadoras de escritorio Plataforma Apple
</div>
<div className="tab active">
Computadoras portátiles Plataforma PC
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma Apple
</div>
<div className="tab inactive">Alto rendimiento Servidores</div>
</div>
{/* === TABLA === */}
<div className="tabla-pc-container">
<table className="tabla-pc">
<thead>
<tr>
<th rowSpan={2} className="header-procesador">
Plataforma PC <br /> Tipo de procesador
</th>
<th colSpan={5} className="header-poblacion">
Población Beneficiada
</th>
<th rowSpan={2} className="header-total">
Total
</th>
</tr>
<tr>
<th className="sub-header">Alumnos</th>
<th className="sub-header">Profesores</th>
<th className="sub-header">Técnicos Académicos</th>
<th className="sub-header">Investigadores</th>
<th className="sub-header">Administrativos</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input type="text" value={item.alumnos} readOnly />
</td>
<td>
<input type="text" value={item.profesores} readOnly />
</td>
<td>
<input type="text" value={item.tecnicos} readOnly />
</td>
<td>
<input type="text" value={item.investigadores} readOnly />
</td>
<td>
<input
type="text"
value={item.administrativos}
readOnly
/>
</td>
<td className="total-celda">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td className="tipo-procesador">Total</td>
<td>
<input type="text" value={total.alumnos} readOnly />
</td>
<td>
<input type="text" value={total.profesores} readOnly />
</td>
<td>
<input type="text" value={total.tecnicos} readOnly />
</td>
<td>
<input type="text" value={total.investigadores} readOnly />
</td>
<td>
<input type="text" value={total.administrativos} readOnly />
</td>
<td className="total-celda final-total">{total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
</div>
</section>
<div className="boton-contenedor">
<Link href="/pregunta3.4" className="boton siguiente">
Pregunta 3 (4/5) →
</Link>
</div>
</div>
</main>
);
}
src/components/Equipo_Computo/Pregunta3_4.tsx
-257
View File
@@ -1,257 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import "./pregunta3_4.css";
export default function Pregunta3_4() {
const data = [
{
tipo: "Core Ultra (i3, i5, i7) Serie 2",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Core Ultra (i3, i5, i7) Serie 1",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Familia M4",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Familia M3",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Familia M2",
alumnos: "35",
profesores: "3",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "38",
},
{
tipo: "Familia M1",
alumnos: "",
profesores: "5",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "6",
},
{
tipo: "i9 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i7 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i5 o equivalentes (13a generación en adelante)",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "i5 o equivalentes (12a generación en adelante)",
alumnos: "",
profesores: "14",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "14",
},
{
tipo: "i5 o equivalentes (11a generación en adelante)",
alumnos: "",
profesores: "9",
tecnicos: "",
investigadores: "",
administrativos: "4",
total: "13",
},
{
tipo: "Core2 Mac, Quad Core o anteriores",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
];
const total = {
alumnos: "35",
profesores: "31",
tecnicos: "0",
investigadores: "0",
administrativos: "5",
total: "71",
};
return (
<main className="pregunta3-container">
<h1 className="pregunta3-titulo">PREGUNTA 3 (4/5)</h1>
<div className="pregunta3-descripcion">
<p>
<strong>3.</strong> Desglose la cantidad de población beneficiada por
plataforma y tipo de procesador:
</p>
<span className="subtexto">
Presione cada pestaña para ingresar la información.
</span>
</div>
{/* === PESTAÑAS === */}
<div className="tabs">
<button className="tab inactive">
Computadoras de escritorio Plataforma PC
</button>
<button className="tab inactive">
Computadoras de escritorio Plataforma Apple
</button>
<button className="tab inactive">
Computadoras portátiles Plataforma PC
</button>
<button className="tab active">
Computadoras portátiles Plataforma Apple
</button>
<button className="tab inactive">Alto rendimiento Servidores</button>
</div>
{/* === TABLA === */}
<div className="tabla-wrapper">
<table className="tabla-pregunta3">
<thead>
<tr>
<th rowSpan={2} className="header-procesador">
Plataforma Apple <br /> Tipo de procesador
</th>
<th colSpan={5} className="header-poblacion">
Población Beneficiada
</th>
<th rowSpan={2} className="header-total">
Total
</th>
</tr>
<tr>
<th>Alumnos</th>
<th>Profesores</th>
<th>Técnicos Académicos</th>
<th>Investigadores</th>
<th>Administrativos</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input type="text" value={item.alumnos} readOnly />
</td>
<td>
<input type="text" value={item.profesores} readOnly />
</td>
<td>
<input type="text" value={item.tecnicos} readOnly />
</td>
<td>
<input type="text" value={item.investigadores} readOnly />
</td>
<td>
<input type="text" value={item.administrativos} readOnly />
</td>
<td className="celda-total">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td>Total</td>
<td>
<input type="text" value={total.alumnos} readOnly />
</td>
<td>
<input type="text" value={total.profesores} readOnly />
</td>
<td>
<input type="text" value={total.tecnicos} readOnly />
</td>
<td>
<input type="text" value={total.investigadores} readOnly />
</td>
<td>
<input type="text" value={total.administrativos} readOnly />
</td>
<td className="celda-total final">{total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
</div>
<div className="boton-siguiente">
<Link href="/pregunta3.5" className="next">
Pregunta 3 (5/5) →
</Link>
</div>
</main>
);
}
src/components/Equipo_Computo/Pregunta3_5.tsx
-209
View File
@@ -1,209 +0,0 @@
"use client";
import React from "react";
import Link from "next/link";
import "./pregunta3_5.css";
export default function Pregunta3_5() {
const data = [
{
tipo: "Xeon 6",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Xeon Bronce, Plata, Oro 3a generación",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Xeon Bronce, Plata, Oro 4a generación",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Xeon Bronce, Plata, Oro 5a generación",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
{
tipo: "Xeon Bronce, Plata, Oro 6a generación",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "Xeon E3, E5, E7",
alumnos: "19",
profesores: "",
tecnicos: "",
investigadores: "16",
administrativos: "",
total: "35",
},
{
tipo: "Xeon Phi",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "1",
total: "1",
},
{
tipo: "Xeon o anteriores",
alumnos: "",
profesores: "",
tecnicos: "",
investigadores: "",
administrativos: "",
total: "0",
},
];
const total = {
alumnos: "19",
profesores: "0",
tecnicos: "0",
investigadores: "16",
administrativos: "2",
total: "37",
};
return (
<main className="pregunta-page pregunta3">
<div className="pregunta-container">
<h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
<section className="pregunta-seccion">
<p className="pregunta-texto">
3. Desglose la cantidad de población beneficiada por plataforma y
tipo de procesador: *
</p>
<p className="pregunta-subtexto">
Presione cada pestaña para ingresar la información.
</p>
{/* === PESTAÑAS === */}
<div className="tab-container">
<div className="tab inactive">
Computadoras de escritorio Plataforma PC
</div>
<div className="tab inactive">
Computadoras de escritorio Plataforma Apple
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma PC
</div>
<div className="tab inactive">
Computadoras portátiles Plataforma Apple
</div>
<div className="tab active">Alto rendimiento Servidores</div>
</div>
{/* === TABLA === */}
<div className="tabla-servidores-container">
<table className="tabla-servidores">
<thead>
<tr>
<th rowSpan={2} className="header-procesador">
Servidores <br /> Tipo de procesador
</th>
<th colSpan={5} className="header-poblacion">
Población Beneficiada
</th>
<th rowSpan={2} className="header-total">
Total
</th>
</tr>
<tr>
<th className="sub-header">Alumnos</th>
<th className="sub-header">Profesores</th>
<th className="sub-header">Técnicos Académicos</th>
<th className="sub-header">Investigadores</th>
<th className="sub-header">Administrativos</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index} className="tabla-fila">
<td className="tipo-procesador">{item.tipo}</td>
<td>
<input type="text" value={item.alumnos} readOnly />
</td>
<td>
<input type="text" value={item.profesores} readOnly />
</td>
<td>
<input type="text" value={item.tecnicos} readOnly />
</td>
<td>
<input type="text" value={item.investigadores} readOnly />
</td>
<td>
<input
type="text"
value={item.administrativos}
readOnly
/>
</td>
<td className="total-celda">{item.total}</td>
</tr>
))}
<tr className="fila-total">
<td className="tipo-procesador">Total</td>
<td>
<input type="text" value={total.alumnos} readOnly />
</td>
<td>
<input type="text" value={total.profesores} readOnly />
</td>
<td>
<input type="text" value={total.tecnicos} readOnly />
</td>
<td>
<input type="text" value={total.investigadores} readOnly />
</td>
<td>
<input type="text" value={total.administrativos} readOnly />
</td>
<td className="total-celda final-total">{total.total}</td>
</tr>
</tbody>
</table>
<button className="boton-consultar">
Consultar las equivalencias de procesadores
</button>
</div>
</section>
<div className="boton-contenedor">
<Link href="/" className="boton volver">
← Volver al inicio
</Link>
</div>
</div>
</main>
);
}
src/components/Equipo_Computo/pregunta1.module.scss
+36 -34
View File
@@ -1,4 +1,4 @@
.dashboardContainer_P1 {
.dashboardContainer {
display: flex;
flex-direction: column;
padding: 0;
@@ -7,13 +7,14 @@
background-color: #f4f4f4;
}
.scanView_P1 {
.scanView {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
.container_P1 {
.container {
width: 100%;
max-width: 900px;
background: #fff;
@@ -25,7 +26,7 @@
border: 1px solid #ddd;
}
.header_P1 {
.header {
padding: 16px 20px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
@@ -35,12 +36,12 @@
font-weight: 500;
}
.main-content_P1 {
.main-content {
display: flex;
min-height: 420px;
}
.tabs_P1 {
.tabs {
width: 230px;
background-color: #fafafa;
display: flex;
@@ -48,26 +49,26 @@
justify-content: space-evenly;
}
.tab_P1 {
padding: 12px 16px;
cursor: pointer;
border-right: 1px solid #e0e0e0;
color: #555;
transition: all 0.3s ease;
border-left: 4px solid transparent;
font-size: 15px;
font-weight: 500;
background: none;
border: none;
text-align: left;
}
.tab {
padding: 12px 16px; /* ← CORREGIDO: "auto" no es válido */
cursor: pointer;
border-right: 1px solid #e0e0e0;
color: #555;
transition: all 0.3s ease;
border-left: 4px solid transparent;
font-size: 15px;
font-weight: 500;
background: none;
border: none;
text-align: left;
}
.tab_P1:hover {
.tab:hover {
background-color: #f0f0f0;
color: #000;
}
.active_P1 {
.tab.active {
background-color: #fff;
border-left: 4px solid #0056b3;
border-right: none;
@@ -76,16 +77,16 @@
font-weight: 600;
}
.data-table-wrapper_P1 {
.data-table-wrapper {
flex: 1;
padding: 20px;
}
.data-table_P1 {
.data-table {
width: 100%;
}
.data-row_P1 {
.data-row {
display: flex;
align-items: center;
justify-content: space-between;
@@ -94,17 +95,17 @@
transition: background 0.2s ease;
}
.data-row_P1:hover {
.data-row:hover {
background: #f1f1f1;
}
.os-name_P1 {
.os-name {
flex: 1;
font-size: 15px;
color: #333;
}
.count-box_P1 {
.count-box {
background: #ffffff;
border: 1px solid #0056b3;
padding: 6px 14px;
@@ -114,24 +115,25 @@
min-width: 70px;
}
.total-row_P1 {
.total-row {
background: #eaf4ff;
font-weight: bold;
.count-box_P1 {
.count-box {
color: #0056b3;
}
}
}
/* ======== RESPONSIVE ======== */
@media (max-width: 700px) {
.scanView_P1 .tabs_P1 {
.scanView .tabs {
width: 160px;
}
.scanView_P1 .tab_P1 {
.scanView .tab {
font-size: 12px;
padding: 10px 12px;
text-align: left;
}
}
}
src/components/Equipo_Computo/pregunta1_1.module.scss → src/components/Equipo_Computo/pregunta2.module.scss
+34 -37
View File
@@ -1,4 +1,4 @@
.dashboardContainer {
.dashboardContainer_P1 {
display: flex;
flex-direction: column;
padding: 0;
@@ -7,16 +7,14 @@
background-color: #f4f4f4;
}
.scanView {
.scanView_P1 {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
.container {
.container_P1 {
width: 100%;
max-width: 900px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
@@ -26,7 +24,7 @@
border: 1px solid #ddd;
}
.header {
.header_P1 {
padding: 16px 20px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
@@ -36,12 +34,12 @@
font-weight: 500;
}
.main-content {
.main-content_P1 {
display: flex;
min-height: 420px;
}
.tabs {
.tabs_P1 {
width: 230px;
background-color: #fafafa;
display: flex;
@@ -49,26 +47,26 @@
justify-content: space-evenly;
}
.tab {
padding: 12px 16px; /* ← CORREGIDO: "auto" no es válido */
cursor: pointer;
border-right: 1px solid #e0e0e0;
color: #555;
transition: all 0.3s ease;
border-left: 4px solid transparent;
font-size: 15px;
font-weight: 500;
background: none;
border: none;
text-align: left;
}
.tab_P1 {
padding: 12px 16px;
cursor: pointer;
border-right: 1px solid #e0e0e0;
color: #555;
transition: all 0.3s ease;
border-left: 4px solid transparent;
font-size: 15px;
font-weight: 500;
background: none;
border: none;
text-align: left;
}
.tab:hover {
.tab_P1:hover {
background-color: #f0f0f0;
color: #000;
}
.tab.active {
.active_P1 {
background-color: #fff;
border-left: 4px solid #0056b3;
border-right: none;
@@ -77,16 +75,16 @@
font-weight: 600;
}
.data-table-wrapper {
.data-table-wrapper_P1 {
flex: 1;
padding: 20px;
}
.data-table {
.data-table_P1 {
width: 100%;
}
.data-row {
.data-row_P1 {
display: flex;
align-items: center;
justify-content: space-between;
@@ -95,17 +93,17 @@
transition: background 0.2s ease;
}
.data-row:hover {
.data-row_P1:hover {
background: #f1f1f1;
}
.os-name {
.os-name_P1 {
flex: 1;
font-size: 15px;
color: #333;
}
.count-box {
.count-box_P1 {
background: #ffffff;
border: 1px solid #0056b3;
padding: 6px 14px;
@@ -115,25 +113,24 @@
min-width: 70px;
}
.total-row {
.total-row_P1 {
background: #eaf4ff;
font-weight: bold;
.count-box {
.count-box_P1 {
color: #0056b3;
}
}
}
/* ======== RESPONSIVE ======== */
@media (max-width: 700px) {
.scanView .tabs {
.scanView_P1 .tabs_P1 {
width: 160px;
}
.scanView .tab {
.scanView_P1 .tab_P1 {
font-size: 12px;
padding: 10px 12px;
text-align: left;
}
}
}
src/components/Equipo_Computo/pregunta2.scss
-164
View File
@@ -1,164 +0,0 @@
.dashboardContainer {
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
min-height: 100vh;
background-color: #f4f4f4;
}
.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;
justify-content: flex-start;
padding: 20px;
width: 100%;
height: 100%;
.container {
width: 100%;
height: 500px;
max-width: 900px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
}
.header {
padding: 16px 20px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
font-size: 15px;
color: #0056b3;
text-align: center;
font-weight: 500;
display: block;
box-shadow: none;
position: static;
}
.main-content {
display: flex;
min-height: 420px;
}
.tabs {
height: 100%;
width: 230px;
background-color: #fafafa;
display: flex;
flex-direction: column;
}
.tab {
padding: 5%;
cursor: pointer;
color: #555;
transition: all 0.3s ease;
border-left: 4px solid transparent;
font-size: 15px;
font-weight: 500;
}
.tab:hover {
background-color: #f0f0f0;
color: #000;
}
.tab.active {
background-color: #fff;
border-left: 4px solid #0056b3;
border-right: none;
color: #0056b3;
font-weight: 600;
}
.data-table-wrapper {
flex: 1;
padding: 20px;
}
.data-table {
width: 100%;
}
.data-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f9f9f9;
transition: background 0.2s ease;
}
.data-row:hover {
background: #f1f1f1;
}
.os-name {
flex: 1;
font-size: 15px;
color: #333;
}
.count-box {
background: #ffffff;
border: 1px solid #0056b3;
padding: 6px 14px;
font-weight: 600;
font-size: 15px;
text-align: center;
min-width: 70px;
}
.total-row {
background: #eaf4ff;
font-weight: bold;
.count-box {
color:#0056b3;
}
}
}
/* ======== RESPONSIVE ======== */
@media (max-width: 700px) {
.scanView .main-content {
flex-direction: column;
}
.scanView .tabs {
flex-direction: row;
width: 100%;
}
.scanView .tab {
flex: 1;
text-align: center;
font-size: 13px;
}
}
src/components/Equipo_Computo/pregunta3.css
-167
View File
@@ -1,167 +0,0 @@
/* === CONTENEDOR GENERAL === */
.pregunta-page {
display: flex;
justify-content: center;
padding: 2rem;
}
.pregunta-container {
width: 100%;
max-width: 1100px;
}
.pregunta-titulo {
text-align: center;
color: #1e3a8a;
margin-bottom: 1.2rem;
font-size: 1.6rem;
font-weight: 700;
}
.pregunta-texto {
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.pregunta-subtexto {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1rem;
}
/* === PESTAÑAS === */
.tab-container {
display: flex;
overflow-x: auto;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 1.5rem;
}
.tab {
padding: 0.8rem 1.2rem;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
margin-right: 0.25rem;
}
.tab.active {
font-weight: 600;
background-color: #f3f4f6;
}
.tab.inactive {
color: #6b7280;
background-color: #ffffff;
}
.tab.inactive:hover {
background-color: #f9fafb;
}
/* === TABLA === */
.tabla-container {
overflow-x: auto;
position: relative;
}
.tabla {
width: 100%;
border-collapse: collapse;
min-width: 950px;
font-size: 0.85rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.tabla th {
padding: 0.7rem 0.5rem;
text-align: center;
color: white;
font-weight: 600;
border: 1px solid #d1d5db;
}
.tabla .sub-header {
background-color: #9ca3af;
}
.tabla td {
border: 1px solid #e5e7eb;
text-align: center;
vertical-align: middle;
}
.tabla tr:hover td {
background-color: #f9fafb;
}
.tipo-procesador {
text-align: left;
font-weight: 500;
padding: 0.6rem 0.5rem;
background-color: #f9fafb;
color: #374151;
}
.tabla input[type="text"] {
width: 100%;
padding: 0.45rem 0.3rem;
border: none;
background-color: #f3f4f6;
text-align: center;
box-sizing: border-box;
color: #374151;
}
.total-celda {
font-weight: 600;
color: #111827;
background-color: #eef2ff;
}
.fila-total td {
background-color: #e0e7ff;
font-weight: 700;
}
/* === BOTONES === */
.boton-consultar {
margin-top: 1rem;
background-color: #10b981;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
transition: background-color 0.2s;
float: right;
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-contenedor {
margin-top: 4rem;
text-align: right;
}
.boton.volver {
background-color: #2563eb;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
transition: background-color 0.2s;
}
.boton.volver:hover {
background-color: #1d4ed8;
}
src/components/Equipo_Computo/pregunta3.module.scss
+220
View File
@@ -0,0 +1,220 @@
.scanView_P3 {
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
.container_P3 {
width: 100%;
max-width: 1000px;
background: #fff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
}
.header_P3 {
padding: 16px 20px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
text-align: center;
.titulo {
margin: 0 0 8px;
font-size: 20px;
color: #0056b3;
}
.texto {
margin: 0 0 6px;
font-size: 16px;
font-weight: 500;
}
.subtexto {
margin: 0;
font-size: 14px;
color: #666;
}
}
.mainContent_P3 {
display: flex;
min-height: 500px;
}
.tabs_P3 {
width: 230px;
background-color: #fafafa;
display: flex;
flex-direction: column;
border-right: 1px solid #ddd;
}
.tab_P3 {
padding: 12px 16px;
cursor: pointer;
color: #555;
background: none;
border: none;
text-align: left;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
border-left: 4px solid transparent;
}
.tab_P3:hover {
background-color: #f0f0f0;
color: #000;
}
.active_P3 {
background-color: #fff;
color: #0056b3;
font-weight: 600;
border-left: 4px solid #0056b3;
}
.content_P3 {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
.tableWrapper_P3 {
overflow-x: auto;
flex: 1;
padding-bottom: 10px;
}
.table_P3 {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
min-width: 750px;
th {
background: #f1f5f9;
font-weight: 700;
padding: 12px 14px;
color: #003f80;
border-bottom: 2px solid #e2e8f0;
text-align: center;
white-space: nowrap;
}
td {
padding: 10px 12px;
border-bottom: 1px solid #e5e7eb;
text-align: center;
vertical-align: middle;
}
tr:last-child td {
border-bottom: none;
}
/* Primera columna */
.processor_P3 {
text-align: left;
font-weight: 600;
color: #334155;
max-width: 300px;
}
}
/* ----------- INPUTS ----------- */
.inputBox_P3 {
width: 70px;
padding: 6px;
border-radius: 6px;
border: 1px solid #cbd5e1;
background: #f8fafc;
font-size: 14px;
transition: 0.2s ease;
}
.inputBox_P3:focus {
outline: none;
border-color: #3b82f6;
background: #ffffff;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
/* -------- FILA NORMAL -------- */
.dataRow_P3 {
background: #ffffff;
&:hover {
background: #f8fafc;
}
}
/* -------- FILA TOTAL -------- */
.totalRow_P3 {
background: #e0f0ff !important;
font-weight: 700;
.totalCell_P3 {
color: #004a94;
font-weight: 800;
}
}
.totalCell_P3 {
font-weight: 600;
}
.consultarBtn_P3 {
margin-top: 20px;
background: #0056b3;
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
font-weight: 600;
align-self: flex-start;
}
.emptyState_P3 {
color: #888;
font-style: italic;
padding: 40px 0;
text-align: center;
}
}
@media (max-width: 768px) {
.scanView_P3 .mainContent_P3 {
flex-direction: column;
}
.scanView_P3 .tabs_P3 {
width: 100%;
flex-direction: row;
border-right: none;
border-bottom: 1px solid #ddd;
}
.scanView_P3 .tab_P3 {
border-left: none;
border-bottom: 3px solid transparent;
}
.scanView_P3 .active_P3 {
border-left: none;
border-bottom: 3px solid #0056b3;
}
}
src/components/Equipo_Computo/pregunta3_1.css
-171
View File
@@ -1,171 +0,0 @@
/* === CONTENEDOR GENERAL === */
.pregunta-page {
display: flex;
justify-content: center;
padding: 2rem 0;
}
.pregunta-container {
width: 90%;
max-width: 1100px;
background-color: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* === TITULOS === */
.pregunta-titulo {
text-align: center;
color: #0a2d6e;
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: 700;
}
.pregunta-texto {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.2rem;
color: #1f2937;
}
.pregunta-subtexto {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1rem;
}
/* === PESTAÑAS === */
.tab-container {
display: flex;
border-bottom: 3px solid #d1d5db;
margin-bottom: 1rem;
}
.tab {
padding: 0.6rem 1rem;
cursor: pointer;
font-weight: 600;
border-radius: 8px 8px 0 0;
margin-right: 0.25rem;
font-size: 0.9rem;
}
.tab.active {
color: #1e40af;
border: 2px solid #1e40af;
border-bottom: none;
background-color: #f3f4f6;
}
.tab.inactive {
color: #6b7280;
background-color: #fff;
}
/* === TABLA === */
.tabla-wrapper {
overflow-x: auto;
display: flex;
justify-content: center;
}
.tabla-pc {
border-collapse: collapse;
width: 95%;
text-align: center;
font-size: 0.83rem;
}
.tabla-pc th,
.tabla-pc td {
border: 1px solid #d1d5db;
padding: 0.4rem;
}
.header-procesador,
.header-total {
background-color: #3b82f6;
color: white;
font-weight: 700;
}
.header-poblacion {
background-color: #9333ea;
color: white;
font-weight: 700;
}
.tabla-pc th {
text-align: center;
}
.tipo-procesador {
text-align: left;
background-color: #f9fafb;
font-weight: 600;
padding-left: 0.5rem;
}
.tabla-pc input {
width: 60px;
text-align: center;
border: none;
background-color: #f3f4f6;
border-radius: 4px;
padding: 0.2rem;
font-size: 0.8rem;
color: #111827;
}
.total-celda {
background-color: #e0f2fe;
font-weight: 600;
color: #1e3a8a;
}
.fila-total td {
background-color: #bfdbfe;
font-weight: 700;
}
.fila-total .total-celda {
background-color: #93c5fd;
}
/* === BOTONES === */
.boton-consultar {
margin-top: 1rem;
background-color: #10b981;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
float: right;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-contenedor {
text-align: right;
margin-top: 4rem;
}
.boton.siguiente {
background-color: #2563eb;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
}
.boton.siguiente:hover {
background-color: #1e3a8a;
}
src/components/Equipo_Computo/pregunta3_2.css
-170
View File
@@ -1,170 +0,0 @@
/* === ESTILOS PREGUNTA 3 (2/5) - Plataforma Apple === */
.pregunta-titulo {
text-align: center;
color: #7e22ce;
margin-bottom: 1.2rem;
font-size: 1.5rem;
font-weight: 700;
}
.pregunta-texto {
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.pregunta-subtexto {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1rem;
}
/* === PESTAÑAS === */
.tab-container {
display: flex;
overflow-x: auto;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 1.5rem;
}
.tab {
padding: 0.8rem 1.2rem;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
margin-right: 0.25rem;
}
.tab.active {
color: #7e22ce;
border-bottom: 3px solid #7e22ce;
background-color: #f3f4f6;
}
.tab.inactive {
color: #6b7280;
background-color: #ffffff;
}
.tab.inactive:hover {
color: #7e22ce;
background-color: #f9fafb;
}
/* === TABLA === */
.tabla-apple-container {
overflow-x: auto;
margin-bottom: 2rem;
position: relative;
}
.tabla-apple {
width: 100%;
border-collapse: collapse;
min-width: 950px;
font-size: 0.85rem;
}
.tabla-apple th {
padding: 0.7rem 0.5rem;
text-align: center;
color: white;
font-weight: 600;
border: 1px solid #d1d5db;
}
.tabla-apple .header-procesador,
.tabla-apple .header-total {
background-color: #9333ea;
}
.tabla-apple .header-poblacion {
background-color: #7e22ce;
}
.tabla-apple .sub-header {
background-color: #a855f7;
color: white;
}
.tabla-apple td {
border: 1px solid #e5e7eb;
text-align: center;
vertical-align: middle;
}
.tabla-apple .tipo-procesador {
text-align: left;
font-weight: 500;
padding: 0.6rem 0.5rem;
background-color: #faf5ff;
color: #4b5563;
}
.tabla-apple input[type="text"] {
width: 100%;
padding: 0.45rem 0.3rem;
border: none;
background-color: #f3f4f6;
text-align: center;
box-sizing: border-box;
color: #374151;
}
.tabla-apple .total-celda {
background-color: #f3e8ff;
font-weight: 600;
color: #7e22ce;
}
.tabla-apple .fila-total td {
background-color: #e9d5ff;
font-weight: 700;
}
.tabla-apple .fila-total .total-celda {
background-color: #d8b4fe;
}
/* === BOTONES === */
.boton-consultar {
position: absolute;
bottom: -3.5rem;
right: 0;
background-color: #10b981;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
transition: background-color 0.2s;
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-contenedor {
margin-top: 5rem;
text-align: right;
}
.boton.siguiente {
background-color: #9333ea;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 2px 5px rgba(147, 51, 234, 0.3);
transition: background-color 0.2s;
}
.boton.siguiente:hover {
background-color: #7e22ce;
}
src/components/Equipo_Computo/pregunta3_3.css
-170
View File
@@ -1,170 +0,0 @@
/* === ESTILOS PREGUNTA 3 (3/5) - Portátiles Plataforma PC === */
.pregunta-titulo {
text-align: center;
color: #dc2626;
margin-bottom: 1.2rem;
font-size: 1.5rem;
font-weight: 700;
}
.pregunta-texto {
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.pregunta-subtexto {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1rem;
}
/* === PESTAÑAS === */
.tab-container {
display: flex;
overflow-x: auto;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 1.5rem;
}
.tab {
padding: 0.8rem 1.2rem;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
margin-right: 0.25rem;
}
.tab.active {
color: #dc2626;
border-bottom: 3px solid #dc2626;
background-color: #fef2f2;
}
.tab.inactive {
color: #6b7280;
background-color: #ffffff;
}
.tab.inactive:hover {
color: #dc2626;
background-color: #f9fafb;
}
/* === TABLA === */
.tabla-pc-container {
overflow-x: auto;
margin-bottom: 2rem;
position: relative;
}
.tabla-pc {
width: 100%;
border-collapse: collapse;
min-width: 950px;
font-size: 0.85rem;
}
.tabla-pc th {
padding: 0.7rem 0.5rem;
text-align: center;
color: white;
font-weight: 600;
border: 1px solid #d1d5db;
}
.tabla-pc .header-procesador,
.tabla-pc .header-total {
background-color: #b91c1c;
}
.tabla-pc .header-poblacion {
background-color: #dc2626;
}
.tabla-pc .sub-header {
background-color: #ef4444;
color: white;
}
.tabla-pc td {
border: 1px solid #e5e7eb;
text-align: center;
vertical-align: middle;
}
.tabla-pc .tipo-procesador {
text-align: left;
font-weight: 500;
padding: 0.6rem 0.5rem;
background-color: #fef2f2;
color: #4b5563;
}
.tabla-pc input[type="text"] {
width: 100%;
padding: 0.45rem 0.3rem;
border: none;
background-color: #f3f4f6;
text-align: center;
box-sizing: border-box;
color: #374151;
}
.tabla-pc .total-celda {
background-color: #fee2e2;
font-weight: 600;
color: #b91c1c;
}
.tabla-pc .fila-total td {
background-color: #fecaca;
font-weight: 700;
}
.tabla-pc .fila-total .total-celda {
background-color: #fca5a5;
}
/* === BOTONES === */
.boton-consultar {
position: absolute;
bottom: -3.5rem;
right: 0;
background-color: #10b981;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
transition: background-color 0.2s;
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-contenedor {
margin-top: 5rem;
text-align: right;
}
.boton.siguiente {
background-color: #b91c1c;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 2px 5px rgba(220, 38, 38, 0.3);
transition: background-color 0.2s;
}
.boton.siguiente:hover {
background-color: #dc2626;
}
src/components/Equipo_Computo/pregunta3_4.css
-166
View File
@@ -1,166 +0,0 @@
/* === CONTENEDOR GENERAL === */
.pregunta3-container {
max-width: 1100px;
margin: 2rem auto;
padding: 2rem;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
font-family: "Inter", sans-serif;
}
.pregunta3-titulo {
text-align: left;
font-size: 1.3rem;
font-weight: 700;
color: #6d28d9;
margin-bottom: 1rem;
}
.pregunta3-descripcion p {
font-size: 1rem;
margin-bottom: 0.3rem;
}
.subtexto {
font-size: 0.9rem;
color: #6b7280;
}
/* === TABS === */
.tabs {
display: flex;
flex-wrap: wrap;
margin: 1rem 0 1.5rem;
border-bottom: 2px solid #e5e7eb;
}
.tab {
padding: 0.8rem 1.1rem;
font-size: 0.9rem;
border: none;
cursor: pointer;
background: #fff;
color: #6b7280;
transition: all 0.2s ease;
border-radius: 8px 8px 0 0;
margin-right: 0.25rem;
}
.tab.active {
background: #f3f4f6;
color: #7e22ce;
border-bottom: 3px solid #9333ea;
}
.tab.inactive:hover {
background: #f9fafb;
color: #9333ea;
}
/* === TABLA === */
.tabla-wrapper {
overflow-x: auto;
position: relative;
margin-bottom: 2.5rem;
}
.tabla-pregunta3 {
width: 100%;
border-collapse: collapse;
min-width: 950px;
font-size: 0.85rem;
}
.tabla-pregunta3 th,
.tabla-pregunta3 td {
border: 1px solid #e5e7eb;
text-align: center;
padding: 0.5rem;
}
.header-procesador,
.header-total {
background-color: #9333ea;
color: #fff;
font-weight: 600;
}
.header-poblacion {
background-color: #7e22ce;
color: #fff;
font-weight: 600;
}
.tabla-pregunta3 th {
padding: 0.7rem;
}
.tabla-pregunta3 input {
width: 100%;
padding: 0.4rem;
border: none;
background-color: #f3f4f6;
text-align: center;
font-size: 0.85rem;
}
.tipo-procesador {
text-align: left;
background-color: #faf5ff;
font-weight: 500;
color: #4b5563;
}
.celda-total {
background-color: #f3e8ff;
font-weight: 600;
color: #6b21a8;
}
.fila-total td {
background-color: #e9d5ff;
font-weight: 700;
}
.fila-total .celda-total.final {
background-color: #d8b4fe;
}
/* === BOTONES === */
.boton-consultar {
position: absolute;
bottom: -3rem;
right: 0;
background-color: #10b981;
color: white;
padding: 0.6rem 1.1rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-siguiente {
text-align: right;
margin-top: 4rem;
}
.next {
background-color: #9333ea;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: 0.2s;
}
.next:hover {
background-color: #7e22ce;
}
src/components/Equipo_Computo/pregunta3_5.css
-201
View File
@@ -1,201 +0,0 @@
/* === ESTILOS PREGUNTA 3 (5/5) - Alto Rendimiento Servidores === */
.pregunta-page {
display: flex;
justify-content: center;
padding: 2rem 1rem;
background-color: #f9fafb;
}
.pregunta-container {
width: 100%;
max-width: 1100px;
background-color: #ffffff;
border-radius: 12px;
padding: 2rem 2.5rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.pregunta-titulo {
text-align: center;
color: #2563eb;
margin-bottom: 1.5rem;
font-size: 1.6rem;
font-weight: 700;
border-bottom: 3px solid #2563eb;
display: inline-block;
padding-bottom: 0.3rem;
}
.pregunta-texto {
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: #1f2937;
}
.pregunta-subtexto {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 1.2rem;
}
/* === PESTAÑAS === */
.tab-container {
display: flex;
overflow-x: auto;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 1.5rem;
}
.tab {
padding: 0.8rem 1.2rem;
cursor: pointer;
white-space: nowrap;
font-weight: 500;
border-radius: 8px 8px 0 0;
transition: all 0.2s ease;
margin-right: 0.25rem;
}
.tab.active {
color: #2563eb;
border-bottom: 3px solid #2563eb;
background-color: #f3f4f6;
box-shadow: inset 0 -2px 4px rgba(37, 99, 235, 0.1);
}
.tab.inactive {
color: #6b7280;
background-color: #ffffff;
}
.tab.inactive:hover {
color: #2563eb;
background-color: #f9fafb;
}
/* === TABLA === */
.tabla-servidores-container {
overflow-x: auto;
margin-bottom: 3rem;
position: relative;
}
.tabla-servidores {
width: 100%;
border-collapse: collapse;
min-width: 950px;
font-size: 0.85rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}
.tabla-servidores th {
padding: 0.7rem 0.5rem;
text-align: center;
color: white;
font-weight: 600;
border: 1px solid #d1d5db;
}
.tabla-servidores .header-procesador,
.tabla-servidores .header-total {
background-color: #2563eb;
}
.tabla-servidores .header-poblacion {
background-color: #1e40af;
}
.tabla-servidores .sub-header {
background-color: #3b82f6;
color: white;
}
.tabla-servidores td {
border: 1px solid #e5e7eb;
text-align: center;
vertical-align: middle;
background-color: #ffffff;
transition: background-color 0.2s;
}
.tabla-fila:hover td {
background-color: #f3f4f6;
}
.tabla-servidores .tipo-procesador {
text-align: left;
font-weight: 500;
padding: 0.6rem 0.7rem;
background-color: #eff6ff;
color: #374151;
}
.tabla-servidores input[type="text"] {
width: 100%;
padding: 0.45rem 0.3rem;
border: none;
background-color: #f9fafb;
text-align: center;
color: #374151;
border-radius: 4px;
font-weight: 500;
}
.tabla-servidores .total-celda {
background-color: #dbeafe;
font-weight: 600;
color: #1d4ed8;
}
.tabla-servidores .fila-total td {
background-color: #bfdbfe;
font-weight: 700;
}
.tabla-servidores .fila-total .total-celda {
background-color: #93c5fd;
}
/* === BOTONES === */
.boton-consultar {
position: absolute;
bottom: -3.5rem;
right: 0;
background-color: #10b981;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 8px;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
transition: background-color 0.2s;
}
.boton-consultar:hover {
background-color: #059669;
}
.boton-contenedor {
margin-top: 5rem;
text-align: right;
}
.boton.volver {
background-color: #2563eb;
color: white;
padding: 0.7rem 1.4rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
transition: background-color 0.2s;
}
.boton.volver:hover {
background-color: #1d4ed8;
}
tsconfig.json
+1 -1
View File
@@ -15,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"jsx": "preserve",
"incremental": true,
"plugins": [
{