pregunta 3-3.5
This commit is contained in:
@@ -148,7 +148,7 @@ export default function Pregunta3() {
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* Pestañas simuladas */}
|
||||
{/* Pestañas */}
|
||||
<div className="tab-container">
|
||||
<div className="tab active">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
@@ -165,8 +165,8 @@ export default function Pregunta3() {
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* Tabla principal */}
|
||||
<div className="tabla-pc-container">
|
||||
{/* Tabla */}
|
||||
<div className="tabla-wrapper">
|
||||
<table className="tabla-pc">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -181,35 +181,31 @@ export default function Pregunta3() {
|
||||
</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>
|
||||
<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}>
|
||||
{data.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
<input value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
<input value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
<input value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
<input value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
<input value={item.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
@@ -217,19 +213,19 @@ export default function Pregunta3() {
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
<input value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
<input value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
<input value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
<input value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
<input value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
@@ -242,7 +238,7 @@ export default function Pregunta3() {
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-2" className="boton siguiente">
|
||||
<Link href="/pregunta3.2" className="boton siguiente">
|
||||
Pregunta 3 (2/5) →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,33 @@
|
||||
/* === ESTILOS PREGUNTA 3 (1/5) === */
|
||||
/* === 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: #1e3a8a;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
color: #0a2d6e;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
@@ -23,126 +39,113 @@
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 3px solid #d1d5db;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1e40af;
|
||||
border-bottom: 3px solid #1e40af;
|
||||
border: 2px solid #1e40af;
|
||||
border-bottom: none;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #1e40af;
|
||||
background-color: #f9fafb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-pc-container {
|
||||
.tabla-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tabla-pc {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
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 {
|
||||
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: #3b82f6;
|
||||
}
|
||||
|
||||
.tabla-pc .header-poblacion {
|
||||
background-color: #9333ea;
|
||||
}
|
||||
|
||||
.tabla-pc .sub-header {
|
||||
background-color: #a855f7;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tabla-pc td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-pc .tipo-procesador {
|
||||
.tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.tabla-pc input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
.tabla-pc input {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
border-radius: 4px;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.tabla-pc .total-celda {
|
||||
.total-celda {
|
||||
background-color: #e0f2fe;
|
||||
font-weight: 600;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total td {
|
||||
.fila-total td {
|
||||
background-color: #bfdbfe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-pc .fila-total .total-celda {
|
||||
.fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
right: 0;
|
||||
margin-top: 1rem;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
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;
|
||||
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
@@ -150,21 +153,19 @@
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
text-align: right;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
padding: 0.7rem 1.4rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
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.siguiente:hover {
|
||||
background-color: #1e40af;
|
||||
background-color: #1e3a8a;
|
||||
}
|
||||
|
||||
@@ -260,7 +260,7 @@ export default function Pregunta3_2() {
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-3" className="boton siguiente">
|
||||
<Link href="/pregunta3.3" className="boton siguiente">
|
||||
Pregunta 3 (3/5) →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -261,7 +261,7 @@ export default function Pregunta3_3() {
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-4" className="boton siguiente">
|
||||
<Link href="/pregunta3.4" className="boton siguiente">
|
||||
Pregunta 3 (4/5) →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -144,118 +144,113 @@ export default function Pregunta3_4() {
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (4/5)</h1>
|
||||
<main className="pregunta3-container">
|
||||
<h1 className="pregunta3-titulo">PREGUNTA 3 (4/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>
|
||||
<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="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 active">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</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-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>
|
||||
{/* === 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="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>
|
||||
<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>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3-5" className="boton siguiente">
|
||||
Pregunta 3 (5/5) →
|
||||
</Link>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -1,170 +1,166 @@
|
||||
/* === ESTILOS PREGUNTA 3 (4/5) - Portátiles Plataforma Apple === */
|
||||
/* === 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;
|
||||
}
|
||||
|
||||
.pregunta-titulo {
|
||||
text-align: center;
|
||||
color: #a855f7;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
.pregunta3-titulo {
|
||||
text-align: left;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pregunta-subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
color: #6d28d9;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
.pregunta3-descripcion p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.subtexto {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* === TABS === */
|
||||
.tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
flex-wrap: wrap;
|
||||
margin: 1rem 0 1.5rem;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
padding: 0.8rem 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: #fff;
|
||||
color: #6b7280;
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #9333ea;
|
||||
background: #f3f4f6;
|
||||
color: #7e22ce;
|
||||
border-bottom: 3px solid #9333ea;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
color: #6b7280;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
background: #f9fafb;
|
||||
color: #9333ea;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA === */
|
||||
.tabla-apple-container {
|
||||
.tabla-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.tabla-apple {
|
||||
.tabla-pregunta3 {
|
||||
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 {
|
||||
.tabla-pregunta3 th,
|
||||
.tabla-pregunta3 td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.tabla-apple .tipo-procesador {
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.5rem;
|
||||
background-color: #faf5ff;
|
||||
color: #4b5563;
|
||||
.header-procesador,
|
||||
.header-total {
|
||||
background-color: #9333ea;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabla-apple input[type="text"] {
|
||||
.header-poblacion {
|
||||
background-color: #7e22ce;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 th {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.tabla-pregunta3 input {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
padding: 0.4rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabla-apple .total-celda {
|
||||
.tipo-procesador {
|
||||
text-align: left;
|
||||
background-color: #faf5ff;
|
||||
font-weight: 500;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.celda-total {
|
||||
background-color: #f3e8ff;
|
||||
font-weight: 600;
|
||||
color: #7e22ce;
|
||||
color: #6b21a8;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total td {
|
||||
.fila-total td {
|
||||
background-color: #e9d5ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-apple .fila-total .total-celda {
|
||||
.fila-total .celda-total.final {
|
||||
background-color: #d8b4fe;
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem;
|
||||
bottom: -3rem;
|
||||
right: 0;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
padding: 0.6rem 1.1rem;
|
||||
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;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.boton-consultar:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem;
|
||||
.boton-siguiente {
|
||||
text-align: right;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
.next {
|
||||
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;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
.next:hover {
|
||||
background-color: #7e22ce;
|
||||
}
|
||||
|
||||
@@ -146,7 +146,7 @@ export default function Pregunta3_5() {
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<tr key={index} className="tabla-fila">
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
|
||||
@@ -1,23 +1,43 @@
|
||||
/* === 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.2rem;
|
||||
font-size: 1.5rem;
|
||||
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: 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
/* === PESTAÑAS === */
|
||||
@@ -42,6 +62,7 @@
|
||||
color: #2563eb;
|
||||
border-bottom: 3px solid #2563eb;
|
||||
background-color: #f3f4f6;
|
||||
box-shadow: inset 0 -2px 4px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.tab.inactive {
|
||||
@@ -57,7 +78,7 @@
|
||||
/* === TABLA === */
|
||||
.tabla-servidores-container {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -66,6 +87,9 @@
|
||||
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 {
|
||||
@@ -94,12 +118,18 @@
|
||||
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.5rem;
|
||||
padding: 0.6rem 0.7rem;
|
||||
background-color: #eff6ff;
|
||||
color: #374151;
|
||||
}
|
||||
@@ -108,10 +138,11 @@
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
background-color: #f3f4f6;
|
||||
background-color: #f9fafb;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tabla-servidores .total-celda {
|
||||
|
||||
@@ -1,108 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.css"; // Asegúrate de que los estilos están en este archivo
|
||||
import "./page3.css";
|
||||
|
||||
export default function Pregunta3() {
|
||||
// Datos de ejemplo basados en las imágenes (especialmente la de la tabla final)
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
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",
|
||||
];
|
||||
|
||||
// === DATOS DE CADA TABLA ===
|
||||
const data = [
|
||||
// === 1. PC Escritorio ===
|
||||
{
|
||||
tipo: "Xeon 6",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
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",
|
||||
},
|
||||
},
|
||||
// === 2. Apple Escritorio ===
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 5a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
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",
|
||||
},
|
||||
},
|
||||
// === 3. PC Portátiles ===
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 4a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "6",
|
||||
total: "6",
|
||||
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",
|
||||
},
|
||||
},
|
||||
// === 4. Apple Portátiles ===
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 3a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
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",
|
||||
},
|
||||
},
|
||||
// === 5. Servidores ===
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 2a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Bronce, Plata, Oro 1a generación",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon E3, E5, E7",
|
||||
alumnos: "19",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "16",
|
||||
total: "35",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon Phi",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "0",
|
||||
total: "0",
|
||||
},
|
||||
{
|
||||
tipo: "Xeon's anteriores",
|
||||
alumnos: "",
|
||||
profesores: "",
|
||||
tecnicos: "",
|
||||
investigadores: "0",
|
||||
administrativos: "1",
|
||||
total: "1",
|
||||
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",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const total = {
|
||||
alumnos: "19",
|
||||
profesores: "0",
|
||||
tecnicos: "0",
|
||||
investigadores: "0",
|
||||
administrativos: "24", // Suma de los valores de ejemplo
|
||||
total: "43", // Suma de los totales de ejemplo
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<main className="pregunta-page">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5 - 5/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
@@ -113,44 +225,65 @@ export default function Pregunta3() {
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === Pestañas de Plataforma (Simulación) === */}
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
{/* Solo se muestra la pestaña 'Alto rendimiento Servidores' activa */}
|
||||
<div className="tab active">Alto rendimiento Servidores</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
{/* ... otras pestañas que no son visibles en la imagen de la tabla ... */}
|
||||
{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)}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* === Contenido de la Tabla === */}
|
||||
<div className="tabla-servidores-container">
|
||||
<table className="tabla-servidores">
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-container">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-servidores">
|
||||
Servidores
|
||||
<br />
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="header-procesador"
|
||||
style={{ backgroundColor: data[activeTab].color }}
|
||||
>
|
||||
Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
<th
|
||||
colSpan={5}
|
||||
className="header-poblacion"
|
||||
style={{ backgroundColor: data[activeTab].headerColor }}
|
||||
>
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
<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 Académicos</th>
|
||||
<th className="sub-header">Técnicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
{data[activeTab].rows.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
@@ -177,34 +310,54 @@ export default function Pregunta3() {
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.alumnos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.profesores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.tecnicos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.investigadores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
<td className="total-celda">{data[activeTab].total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar el equivalente del procesador
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
{/* Se asume que este sería el botón de navegación final o de guardar */}
|
||||
<Link href="/siguiente-seccion" className="boton siguiente">
|
||||
Pregunta 4 →
|
||||
<Link href="/" className="boton volver">
|
||||
← Volver al inicio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,28 @@
|
||||
/* --- Estilos específicos para la Pregunta 3 (Tabla y Pestañas) --- */
|
||||
/* === 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;
|
||||
@@ -9,16 +33,15 @@
|
||||
/* === PESTAÑAS === */
|
||||
.tab-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap; /* Para que las pestañas se mantengan en una fila */
|
||||
overflow-x: auto; /* Permite scroll horizontal si hay muchas pestañas */
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0.8rem 1.2rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap; /* Previene el salto de línea en el texto de la pestaña */
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.2s ease;
|
||||
@@ -26,8 +49,7 @@
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #1e40af;
|
||||
border-bottom: 3px solid #1e40af;
|
||||
font-weight: 600;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
@@ -37,26 +59,24 @@
|
||||
}
|
||||
|
||||
.tab.inactive:hover {
|
||||
color: #1e40af;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* === TABLA DE SERVIDORES === */
|
||||
.tabla-servidores-container {
|
||||
overflow-x: auto; /* Permite scroll horizontal en la tabla */
|
||||
margin-bottom: 2rem;
|
||||
position: relative; /* Para posicionar el botón */
|
||||
/* === TABLA === */
|
||||
.tabla-container {
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabla-servidores {
|
||||
.tabla {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 950px;
|
||||
font-size: 0.85rem;
|
||||
min-width: 900px; /* Asegura un ancho mínimo para que se vea bien */
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Encabezados */
|
||||
.tabla-servidores th {
|
||||
.tabla th {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
@@ -64,72 +84,53 @@
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.tabla-servidores thead .header-servidores,
|
||||
.tabla-servidores thead .header-total {
|
||||
background-color: #3b82f6; /* Azul base para servidores/total */
|
||||
.tabla .sub-header {
|
||||
background-color: #9ca3af;
|
||||
}
|
||||
|
||||
.tabla-servidores thead .header-poblacion {
|
||||
background-color: #ef4444; /* Rojo/Rosa para población (ajustar color si es necesario) */
|
||||
}
|
||||
|
||||
.tabla-servidores thead .sub-header {
|
||||
background-color: #f87171; /* Tono más claro para sub-encabezados de población */
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Celdas del cuerpo */
|
||||
.tabla-servidores td {
|
||||
padding: 0; /* Quitamos padding de la celda para controlarlo en el input */
|
||||
.tabla td {
|
||||
border: 1px solid #e5e7eb;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-servidores .tipo-procesador {
|
||||
padding: 0.7rem 0.5rem;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
.tabla tr:hover td {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"] {
|
||||
.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.5rem 0.3rem;
|
||||
padding: 0.45rem 0.3rem;
|
||||
border: none;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box; /* Asegura que el padding no cambie el ancho */
|
||||
}
|
||||
|
||||
.tabla-servidores input[type="text"]:read-only {
|
||||
background-color: #f3f4f6;
|
||||
color: #4b5563;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tabla-servidores .total-celda {
|
||||
background-color: #e0f2fe; /* Azul muy claro para las celdas de total */
|
||||
.total-celda {
|
||||
font-weight: 600;
|
||||
color: #1e40af;
|
||||
padding: 0.5rem;
|
||||
color: #111827;
|
||||
background-color: #eef2ff;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total td {
|
||||
background-color: #bfdbfe; /* Azul más intenso para la fila total */
|
||||
.fila-total td {
|
||||
background-color: #e0e7ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tabla-servidores .fila-total .total-celda {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
|
||||
/* Botón Consultar */
|
||||
/* === BOTONES === */
|
||||
.boton-consultar {
|
||||
position: absolute;
|
||||
bottom: -3.5rem; /* Debajo de la tabla */
|
||||
right: 0;
|
||||
background-color: #10b981; /* Verde */
|
||||
margin-top: 1rem;
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
@@ -138,13 +139,29 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/* Ajuste para el contenedor de botones si ya existe */
|
||||
.boton-contenedor {
|
||||
margin-top: 5rem; /* Asegura espacio debajo del botón 'Consultar' */
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user