utn-cli 2.1.54 → 2.1.55

package/templates/frontend/src/app/Paginas/Nucleo/politicas/politicas.component.html

@@ -1,120 +1,142 @@
+<div class="ia-layout">
+  <main class="ia-main">
 
-<div class="subtitle">
-    <p>Acuerdo de seguridad, privacidad y condiciones de uso</p>
-  </div>
-<div class="politicas-container">
+    <header class="ia-encabezado">
+      <mat-icon class="ia-icono-header">gavel</mat-icon>
+      <div>
+        <h1>Acuerdo de seguridad, privacidad y condiciones de uso</h1>
+      </div>
+    </header>
 
-  <div class="description">
-    <p>La Universidad Técnica Nacional (UTN), institución pública de educación superior dedicada a la docencia, la
-      investigación y la acción social, pone a disposición de la comunidad universitaria la plataforma digital SIGU
-      (Sistema Integrado de Gestión Universitaria).
-    </p>
-    <p>El presente acuerdo establece los términos y condiciones de seguridad, privacidad y acceso aplicables a todos los
-      usuarios del sistema.</p>
-  </div>
+    <section class="ia-seccion">
+      <div class="description">
+        <p>La Universidad Técnica Nacional (UTN), institución pública de educación superior dedicada a la docencia, la
+          investigación y la acción social, pone a disposición de la comunidad universitaria la plataforma digital SIGU
+          (Sistema Integrado de Gestión Universitaria).
+        </p>
+        <p>El presente acuerdo establece los términos y condiciones de seguridad, privacidad y acceso aplicables a todos los
+          usuarios del sistema.</p>
+      </div>
+    </section>
 
-  <!-- Árbol-->
-  <div class="tree-container">
+    <section class="ia-seccion">
+      <div class="tree-container">
 
-    <!-- Item 1 -->
-    <div class="tree-item" [class.expanded-item]="expandedItems['item1']">
-      <div class="tree-header" (click)="toggleItem('item1')">
-        <span class="tree-icon">{{ expandedItems['item1'] ? '▼' : '▶' }}</span>
-        <span class="tree-title">1. Usuario</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item1']">
-        <p>1.1. Este Acuerdo regula la relación entre la Universidad Técnica Nacional y los usuarios que hacen uso de la
-          plataforma SIGU, incluyendo estudiantes, docentes, personal administrativo, aspirantes, clientes y público en
-          general que utilicen los servicios disponibles dentro del sistema.</p>
+        <div class="tree-item" *ngFor="let pregunta of preguntas" [class.expanded-item]="expandedItems[pregunta.id]">
 
-        <p>1.2. El acceso a los módulos del SIGU está estrictamente limitado según el perfil del usuario autenticado,
-          garantizando que visualice y utilice únicamente la información y servicios correspondientes a su gestión o
-          autorización dentro de la plataforma. </p>
+          <div class="tree-header" (click)="toggleItem(pregunta.id)">
+            <span class="tree-icon">
+              {{ expandedItems[pregunta.id] ? '▼' : '▶' }}
+            </span>
+            <span class="tree-title">
+              {{ obtenerNumeroItem(pregunta.id) }}. {{ pregunta.titulo }}
+            </span>
+          </div>
 
-        <p>1.3. Los usuarios deberán hacer un uso responsable, ético y seguro de la plataforma SIGU, conforme al
-          Reglamento de Seguridad de la Información de TI de la UTN y demás políticas aplicables en materia de seguridad
-          informática y uso de recursos tecnológicos.
-        </p>
+          <!-- ITEM 1 -->
+          <div *ngIf="pregunta.id === 'item1'" class="tree-content" [class.expanded]="expandedItems['item1']">
+            <p>
+              {{ obtenerNumeroItem('item1') }}.1.
+              Este acuerdo regula la relación entre la Universidad Técnica Nacional y los usuarios que hacen uso de la
+              plataforma SIGU, incluyendo estudiantes, docentes, personal administrativo, aspirantes, clientes y público en
+              general que utilicen los servicios disponibles dentro del sistema.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item1') }}.2.
+              El acceso a los módulos del SIGU está estrictamente limitado según el perfil del usuario autenticado,
+              garantizando que visualice y utilice únicamente la información y servicios correspondientes a su gestión o
+              autorización dentro de la plataforma.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item1') }}.3.
+              Los usuarios deberán hacer un uso responsable, ético y seguro de la plataforma SIGU, conforme al
+              Reglamento de Seguridad de la Información de TI de la UTN y demás políticas aplicables en materia de seguridad
+              informática y uso de recursos tecnológicos.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item1') }}.4.
+              Asimismo, cada usuario será responsable de resguardar la confidencialidad de sus credenciales de acceso
+              y de utilizar la información disponible en el sistema únicamente para fines académicos y administrativos
+              autorizados.
+            </p>
+          </div>
 
-        <p>1.4. Asimismo, cada usuario será responsable de resguardar la confidencialidad de sus credenciales de acceso
-          y de utilizar la información disponible en el sistema únicamente para fines académicos y administrativos
-          autorizados. </p>
-      </div>
-      <div class="line"></div>
-    </div>
+          <!-- ITEM 2 -->
+          <div *ngIf="pregunta.id === 'item2'" class="tree-content" [class.expanded]="expandedItems['item2']">
+            <p>
+              {{ obtenerNumeroItem('item2') }}.1
+              El cumplimiento de la ley de protección de la persona frente al tratamiento de sus datos personales (N °
+              8968) y su reglamento, la UTN declara que:
+            </p>
+            <ul>
+              <li>La información recolectada a través de formularios en el SIGU (admisión, solicitud de becas, planes de
+                estudio, etc.) será utilizada exclusivamente para la finalidad establecida en cada formulario y para la
+                gestión interna universitaria.</li>
+              <li>Al completar los formularios, el usuario otorga su consentimiento para que los datos sean suministrados y
+                procesados por la UTN.</li>
+              <li>En ningún caso la información personal será distribuida, vendida o cedida a terceros.</li>
+            </ul>
+          </div>
 
-    <!-- Item 2-->
-    <div class="tree-item" [class.expanded-item]="expandedItems['item2']">
-      <div class="tree-header" (click)="toggleItem('item2')">
-        <span class="tree-icon">{{ expandedItems['item2'] ? '▼' : '▶' }}</span>
-        <span class="tree-title">2. Protección de datos</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item2']">
-        <p>2.1 El cumplimiento de la ley de protección de la persona frente al tratamiento de sus datos personales (N °
-          8968) y su reglamento, la UTN declara que:</p>
-        <ul>
-          <li>La información recolectada a través de formularios en el SIGU (admisión, solicitud de becas, planes de
-            estudio, etc.) será utilizada exclusivamente para la finalidad establecida en cada formulario y para la
-            gestión interna universitaria.</li>
-          <li>Al completar los formularios, el usuario otorga su consentimiento para que los datos sean suministrados y
-            procesados por la UTN.</li>
-          <li>En ningún caso la información personal será distribuida, vendida o cedida a terceros.</li>
-        </ul>
-      </div>
-      <div class="line"></div>
-    </div>
+          <!-- ITEM 3 -->
+          <div *ngIf="pregunta.id === 'item3'" class="tree-content" [class.expanded]="expandedItems['item3']">
+            <p>
+              {{ obtenerNumeroItem('item3') }}.1
+              Las solicitudes de información sensible a través del sitio web son completamente privadas y solo visibles
+              para el usuario titular y el personal administrativo autorizado para la gestión de trámites. Cualquier otro
+              dato que el usuario proporcione será utilizado en apego a lo establecido por la legislación costarricense en
+              materia de protección de datos personales, y no será divulgado sin el consentimiento del titular.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item3') }}.2
+              Asimismo, el sitio web SIGU utiliza cookies para almacenar información de sesión y preferencias de
+              accesibilidad del usuario. Estos datos se utilizan únicamente con el fin de mejorar la experiencia del usuario
+              mientras navega por el sitio web institucional.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item3') }}.3
+              El contenido almacenado en las cookies no almacena datos sensibles y no se distribuyen a terceros.
+            </p>
+          </div>
 
-    <!-- Item 3-->
-    <div class="tree-item" [class.expanded-item]="expandedItems['item3']">
-      <div class="tree-header" (click)="toggleItem('item3')">
-        <span class="tree-icon">{{ expandedItems['item3'] ? '▼' : '▶' }}</span>
-        <span class="tree-title">3. Privacidad</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item3']">
-        <p>3.1 Las solicitudes de información sensible a través del sitio web son completamente privadas y solo visibles
-          para el usuario titular y el personal administrativo autorizado para la gestión de trámites. Cualquier otro
-          dato que el usuario proporcione será utilizado en apego a lo establecido por la legislación costarricense en
-          materia de protección de datos personales, y no será divulgado sin el consentimiento del titular.
-        </p>
-        <p>3.2 Asimismo, el sitio web SIGU utiliza cookies para almacenar información de sesión y preferencias de
-          accesibilidad del usuario. Estos datos se utilizan únicamente con el fin de mejorar la experiencia del usuario
-          mientras navega por el sitio web institucional.
-        </p>
-        <p>3.3 El contenido almacenado en las cookies no almacena datos sensibles y no se distribuyen a terceros.
-        </p>
-      </div>
-      <div class="line"></div>
-    </div>
+          <!-- ITEM 4 -->
+          <div *ngIf="pregunta.id === 'item4'" class="tree-content" [class.expanded]="expandedItems['item4']">
+            <p>
+              {{ obtenerNumeroItem('item4') }}.1
+              La UTN se reserva el derecho de actualizar y mejorar la plataforma SIGU, su estructura, funcionalidades,
+              contenidos y el presente Acuerdo de Seguridad, cuando lo considere necesario para fortalecer la seguridad, la
+              accesibilidad y el correcto funcionamiento del sistema. Las modificaciones entrarán en vigencia a partir de su
+              publicación dentro de la plataforma, sin necesidad de previo aviso individual, aunque se recomienda al usuario
+              revisar la última actualización.
+            </p>
+            <p>
+              {{ obtenerNumeroItem('item4') }}.2
+              La dirección de gestión de tecnologías de información de la UTN trabaja para garantizar la accesibilidad
+              universal del SIGU, como:
+            </p>
+            <ul>
+              <li>Se utilizan herramientas automáticas y pruebas de intervención humana para evaluar el desempeño en
+                términos de accesibilidad visual y de navegación.</li>
+              <li>Durante las actualizaciones o pruebas de funcionalidades, los datos personales de los usuarios no serán
+                utilizados en entornos de prueba. Se utilizan datos ficticios para salvaguardar la privacidad.
+              </li>
+            </ul>
+            <p>
+              {{ obtenerNumeroItem('item4') }}.3
+              En caso de que los usuarios presenten alguna dificultad de accesibilidad al sitio web y requieran
+              asistencia, pueden contactarse con el Departamento de Soporte Técnico de la UTN, por medio del correo
+              electrónico soporte@utn.ac.cr
+            </p>
+          </div>
+
+          <div class="line"></div>
+
+        </div>
 
-    <!-- Item 4-->
-    <div class="tree-item" [class.expanded-item]="expandedItems['item4']">
-      <div class="tree-header" (click)="toggleItem('item4')">
-        <span class="tree-icon">{{ expandedItems['item4'] ? '▼' : '▶' }}</span>
-        <span class="tree-title">4. Accesibilidad y modificaciones</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item4']">
-        <p>4.1 La UTN se reserva el derecho de actualizar y mejorar la plataforma SIGU, su estructura, funcionalidades,
-          contenidos y el presente Acuerdo de Seguridad, cuando lo considere necesario para fortalecer la seguridad, la
-          accesibilidad y el correcto funcionamiento del sistema. Las modificaciones entrarán en vigencia a partir de su
-          publicación dentro de la plataforma, sin necesidad de previo aviso individual, aunque se recomienda al usuario
-          revisar la última actualización.</p>
-        <p>4.2 La dirección de gestión de tecnologías de información de la UTN trabaja para garantizar la accesibilidad
-          universal del SIGU, como:
-        </p>
-        <ul>
-          <li>Se utilizan herramientas automáticas y pruebas de intervención humana para evaluar el desempeño en
-            términos de accesibilidad visual y de navegación.</li>
-          <li>Durante las actualizaciones o pruebas de funcionalidades, los datos personales de los usuarios no serán
-            utilizados en entornos de prueba. Se utilizan datos ficticios para salvaguardar la privacidad.
-          </li>
-        </ul>
-        <p>4.3 En caso de que los usuarios presenten alguna dificultad de accesibilidad al sitio web y requieran
-          asistencia, pueden contactarse con el Departamento de Soporte Técnico de la UTN, por medio del correo
-          electrónico soporte@utn.ac.cr</p>
       </div>
-      <div class="line"></div>
-    </div>
+    </section>
 
-  </div>
+    <button *ngIf="mostrarBotonInicio" class="btn-volver-arriba" (click)="irAlInicio()" title="Volver arriba">↑ Volver arriba</button>
 
-</div>
+  </main>
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/politicas/politicas.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
 import { DatosGlobalesService } from '../../../datos-globales.service';
 import { HttpClient } from '@angular/common/http';
 import { takeUntil } from 'rxjs/operators';
@@ -7,17 +8,41 @@ import { Subject } from 'rxjs';
 @Component({
   selector: 'app-politicas',
   standalone: true,
-  imports: [MatIconModule],
+  imports: [CommonModule, MatIconModule],
   templateUrl: './politicas.component.html',
   styleUrl: './politicas.component.css'
 })
 export class PoliticasComponent implements OnInit {
-  
+
   private _destroy$ = new Subject<void>();
+  mostrarBotonInicio = false;
+  private _scrollListener?: EventListener;
+
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
-   ngOnInit(): void {
-      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePoliticas`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
-   }
+  ngOnInit(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePoliticas`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+
+    this.http.get<any>(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerRankingDeItemsDePoliticas`).pipe(takeUntil(this._destroy$)).subscribe({
+      next: (respuesta) => {
+        const ranking = respuesta.body ?? {};
+        this.preguntas.sort(
+          (a, b) =>
+            (ranking[b.id] ?? 0) - (ranking[a.id] ?? 0));
+      }
+    });
+    setTimeout(() => {
+      const c = document.querySelector('.zona-scrollable');
+      if (c) {
+        this._scrollListener = () => { this.mostrarBotonInicio = (c as HTMLElement).scrollTop > 200; };
+        c.addEventListener('scroll', this._scrollListener);
+      }
+    }, 0);
+  }
+
+  ngOnDestroy(): void {
+    this._destroy$.next(); this._destroy$.complete();
+    if (this._scrollListener) { document.querySelector('.zona-scrollable')?.removeEventListener('scroll', this._scrollListener); }
+  }
   // items expandidos
   expandedItems: { [key: string]: boolean } = {
     item1: false,
@@ -25,9 +50,26 @@ export class PoliticasComponent implements OnInit {
     item3: false,
     item4: false,
   };
-  
+
   toggleItem(itemId: string) {
-    this.expandedItems[itemId] = !this.expandedItems[itemId];
+    const estabaAbierto = this.expandedItems[itemId];
+    this.expandedItems[itemId] = !estabaAbierto;
+    if (!estabaAbierto) { this.http.post(`${this.datosGlobalesService.ObtenerURL()}misc/registrarVistaDeItemsDePoliticas`, { itemId }).subscribe({ error: (error) => console.error(error) }); }
+  }
+
+  preguntas = [
+    { id: 'item1', titulo: 'Usuario' },
+    { id: 'item2', titulo: 'Protección de datos' },
+    { id: 'item3', titulo: 'Privacidad' },
+    { id: 'item4', titulo: 'Accesibilidad y modificaciones' }
+  ];
+
+  obtenerNumeroItem(itemId: string): number {
+    return this.preguntas.findIndex(x => x.id === itemId) + 1;
+  }
+  irAlInicio(): void {
+    const contenedor = document.querySelector('.zona-scrollable');
+    if (contenedor) { contenedor.scrollTo({ top: 0, behavior: 'smooth' }); this.mostrarBotonInicio = false; }
+    else { window.scrollTo({ top: 0, behavior: 'smooth' }); }
   }
-  
- }
+}

package/templates/frontend/src/app/Paginas/Nucleo/preguntasFrecuentes/preguntasFrecuentes.component.css

@@ -1,24 +1,53 @@
-.politicas-container {
-  max-width: 1000px;
-  padding-bottom: 20px;
-  font-family: 'Roboto', sans-serif;
-  background-color: white;
-  text-align: left;
+.ia-layout {
+  max-width: 820px;
   margin: 0 auto;
+  padding: 24px 16px;
+  font-family: 'Roboto', sans-serif;
+}
+
+.ia-main {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
 }
 
-.subtitle {
-  background-color: #0b4794;
-  font-size: 25px;
+.ia-encabezado {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 20px 24px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
   color: white;
-  padding: 18px;
-  margin: 20px 0;
-  text-align: center;
+  border-radius: 12px;
+}
+
+.ia-icono-header {
+  font-size: 40px !important;
+  width: 40px !important;
+  height: 40px !important;
+  flex-shrink: 0;
+  opacity: 0.9;
+}
+
+.ia-encabezado h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
 }
-.subtitle p {
-  margin: 5px 0;
+
+.ia-seccion {
+  background: white;
+  border: 1px solid #d0daea;
+  border-radius: 10px;
+  padding: 20px 24px;
 }
 
+.ia-seccion .tree-container {
+  padding-left: 0;
+  padding-right: 0;
+  margin-top: 0;
+}
 
 @media (max-width: 768px) {
   .description {
@@ -159,4 +188,28 @@
   .tree-content li{
      font-size: 14px;
   }
-}
+}
+
+/* Botón volver arriba */
+.btn-volver-arriba {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .btn-volver-arriba {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem auto 1rem;
+    padding: 0.6rem 1.4rem;
+    background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+    color: white;
+    border: none;
+    border-radius: 24px;
+    font-family: 'Roboto', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  }
+}