utn-cli 2.1.54 → 2.1.55

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

@@ -1,97 +1,170 @@
-<div class="subtitle">
-  <p>Preguntas frecuentes</p>
-</div>
-<div class="politicas-container">
-
-  <!-- Árbol-->
-  <div class="tree-container">
+<div class="ia-layout">
+  <main class="ia-main">
 
-    <!-- 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. ¿Cómo recuperar la clave acceso en SIGU?</span>
+    <header class="ia-encabezado">
+      <mat-icon class="ia-icono-header">help_outline</mat-icon>
+      <div>
+        <h1>Preguntas frecuentes</h1>
       </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item1']">
-        <p><strong>Para restablecer la contraseña de acceso, siga el siguiente procedimiento:</strong></p>
+    </header>
 
-        <p>1.1 Ingrese al portal de inicio de sesión de SIGU y digite su número de identificación. </p>
+    <section class="ia-seccion">
+      <div class="tree-container">
 
-        <p>1.2 Seleccione la opción <strong>¿Olvidó su clave de acceso?</strong>.</p>
+        <div
+          *ngFor="let pregunta of preguntas"
+          class="tree-item"
+          [class.expanded-item]="expandedItems[pregunta.id]"
+        >
+
+          <div class="tree-header" (click)="toggleItem(pregunta.id)">
+            <span class="tree-icon">
+              {{ expandedItems[pregunta.id] ? '▼' : '▶' }}
+            </span>
+            <span class="tree-title">
+              {{ pregunta.titulo }}
+            </span>
+          </div>
+
+          <div class="tree-content" [class.expanded]="expandedItems[pregunta.id]">
+
+            <ng-container [ngSwitch]="pregunta.id">
+
+              <!-- ITEM 1 -->
+              <ng-container *ngSwitchCase="'item1'">
+
+                <p><strong>Para restablecer la contraseña de acceso, siga el siguiente procedimiento:</strong></p>
+
+                <p>1.1 Ingrese al portal de inicio de sesión de SIGU y digite su número de identificación.</p>
+
+                <p>1.2 Seleccione la opción <strong>¿Olvidó su clave de acceso?</strong>.</p>
+
+                <div class="conozcanos-image">
+                  <img src="preguntasF-1.png" alt="Equipo SIGU">
+                </div>
+
+                <p>
+                  El sistema mostrará un mensaje de confirmación indicando:
+                  <strong>
+                    Por favor revise su correo electrónico, se han enviado las instrucciones para continuar con el cambio de clave
+                  </strong>.
+                  Haga clic en <strong>continuar</strong>.
+                </p>
+
+                <p>
+                  1.4 Acceda a la bandeja de entrada del correo electrónico registrado en su cuenta.
+                  Allí encontrará un mensaje automático con una clave nueva.
+                </p>
+
+                <p>
+                  1.5 Regrese a la página de inicio de sesión de SIGU e ingrese su número de identificación
+                  junto con la clave nueva proporcionada.
+                </p>
+
+                <p>
+                  1.6 El sistema solicitará una verificación de identidad. Se enviará un código de verificación
+                  a su correo electrónico registrado.
+                </p>
+
+                <p>
+                  1.7 Copie el código recibido, péguelo en el campo indicado y haga clic en
+                  <strong>siguiente</strong>.
+                </p>
+
+                <div class="conozcanos-image">
+                  <img src="preguntasF-2.png" alt="Equipo SIGU">
+                </div>
+
+                <p>
+                  1.8 Una vez validado el código, recibirá el mensaje
+                  <strong>verificación exitosa</strong> y será redirigido automáticamente
+                  al panel principal de su cuenta.
+                </p>
+
+                <p>
+                  <strong>Nota:</strong>
+                  Se recomienda cambiar la contraseña temporal por una nueva una vez dentro del sistema.
+                </p>
+
+              </ng-container>
+
+              <!-- ITEM 2 -->
+              <ng-container *ngSwitchCase="'item2'">
+
+                <p><strong>Para cambiar su clave, realice los siguientes pasos:</strong></p>
+
+                <p>2.1 Inicie sesión en SIGU con sus credenciales actuales.</p>
+
+                <p>
+                  2.2 En el panel principal, diríjase al menú superior y ubique el ícono de usuario
+                  (representado por silueta de persona) en el extremo derecho.
+                </p>
+
+                <div class="preguntados-image">
+                  <img src="preguntasF-3.png" alt="Equipo SIGU">
+                </div>
+
+                <p>
+                  2.3 Haga clic en el ícono y seleccione su cuenta
+                  (el nombre de usuario asociado).
+                </p>
+
+                <p>
+                  2.4 Se abrirá una nueva ventana. Dentro de este, seleccione la pestaña o tarjeta denominada
+                  <strong>cambio de contraseña</strong>.
+                </p>
+
+                <p>
+                  2.5 El sistema mostrará un panel con las instrucciones técnicas.
+                  Ingrese la nueva contraseña en el campo correspondiente respetando los requisitos
+                  de seguridad (longitud, caracteres especiales, etc.).
+                </p>
+
+                <div class="conozcanos-image">
+                  <img src="preguntasF-4.png" alt="Equipo SIGU">
+                </div>
+
+                <p>
+                  2.6 Confirme la nueva contraseña y haga clic en <strong>cambiar</strong>.
+                </p>
+
+                <p>
+                  <strong>
+                    La contraseña quedará actualizada de forma inmediata para futuros inicios de sesión.
+                  </strong>
+                </p>
+
+              </ng-container>
+
+              <!-- ITEM 3 -->
+              <ng-container *ngSwitchCase="'item3'">
+
+                <p>
+                  3.1 Para acceder mediante <strong>login con google</strong>,
+                  el usuario debe tener una cuenta registrada previamente como oferente
+                  o personal administrativo bajo el dominio <strong>@utn.ac.cr</strong>.
+                  Al seleccionar la cuenta institucional asociada,
+                  el sistema lo redirigirá automáticamente al panel de su perfil.
+                </p>
+
+                <div class="conozcanos-image">
+                  <img src="preguntasF-5.png" alt="Equipo SIGU">
+                </div>
+
+              </ng-container>
+
+            </ng-container>
+
+          </div>
+
+          <div class="line"></div>
 
-        <div class="conozcanos-image">
-          <img src="preguntasF-1.png" alt="Equipo SIGU">
-        </div>
-        <p>El sistema mostrará un mensaje de confirmación indicando: <strong>Por favor revise su correo electrónico, se
-            han enviado las instrucciones para continuar con el cambio de clave</strong>”. Haga clic en
-          <strong>continuar</strong>.
-        </p>
-        <p>1.4 Acceda a la bandeja de entrada del correo electrónico registrado en su cuenta. Allí encontrará un mensaje
-          automático con una clave nueva.</p>
-        <p>1.5 Regrese a la página de inicio de sesión de SIGU e ingrese su número de identificación junto con la clave
-          nueva proporcionada.</p>
-        <p>1.6 El sistema solicitará una verificación de identidad. Se enviará un código de verificación a su correo
-          electrónico registrado.</p>
-        <p>1.7 Copie el código recibido, péguelo en el campo indicado y haga clic en <strong>siguiente</strong>.</p>
-        <div class="conozcanos-image">
-          <img src="preguntasF-2.png" alt="Equipo SIGU">
-        </div>
-        <p>1.8 Una vez validado el código, recibirá el mensaje <strong>verificación exitosa</strong> y será redirigido
-          automáticamente al panel principal de su cuenta.</p>
-        <p><strong>Nota:</strong> Se recomienda cambiar la contraseña temporal por una nueva una vez dentro del sistema.
-        </p>
-      </div>
-      <div class="line"></div>
-    </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. ¿Cómo cambiar mi clave en SIGU?</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item2']">
-        <p><strong>Para cambiar su clave, realice los siguientes pasos:</strong></p>
-        <P>2.1 Inicie sesión en SIGU con sus credenciales actuales.</P>
-        <p>2.2 En el panel principal, diríjase al menú superior y ubique el ícono de usuario (representado por silueta
-          de persona) en el extremo derecho.</p>
-        <div class="preguntados-image">
-          <img src="preguntasF-3.png" alt="Equipo SIGU">
-        </div>
-        <p>2.3 Haga clic en el ícono y seleccione su cuenta (el nombre de usuario asociado).</p>
-        <p>2.4 Se abrirá una nueva ventana. Dentro de este, seleccione la pestaña o tarjeta denominada <strong>cambio
-            de contraseña</strong>.</p>
-        <p>2.5 El sistema mostrará un panel con las instrucciones técnicas. Ingrese la nueva contraseña en el campo
-          correspondiente respetando los requisitos de seguridad (longitud, caracteres especiales, etc.).</p>
-        <div class="conozcanos-image">
-          <img src="preguntasF-4.png" alt="Equipo SIGU">
-        </div>
-        <p>2.6 Confirme la nueva contraseña y haga clic en <strong>cambiar</strong>.</p>
-        <p><strong>La contraseña quedará actualizada de forma inmediata para futuros inicios de sesión.</strong></p>
-      </div>
-      <div class="line"></div>
-    </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. ¿Cómo inicio sesión con google en SIGU?</span>
-      </div>
-      <div class="tree-content" [class.expanded]="expandedItems['item3']">
-        <p>3.1 Para acceder mediante <strong>login con google</strong>, el usuario debe tener una cuenta registrada
-          previamente como
-          oferente o personal administrativo bajo el dominio <strong>@utn.ac.cr</strong>. Al seleccionar la cuenta
-          institucional
-          asociada, el sistema lo redirigirá automáticamente al panel de su perfil.</p>
-
-        <div class="conozcanos-image">
-          <img src="preguntasF-5.png" alt="Equipo SIGU">
         </div>
+
       </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/preguntasFrecuentes/preguntasFrecuentes.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-preguntasfrecuentes',
   standalone: true,
-  imports: [MatIconModule],
+  imports: [CommonModule, MatIconModule],
   templateUrl: './preguntasFrecuentes.component.html',
   styleUrl: './preguntasFrecuentes.component.css'
 })
 export class PreguntasFrecuentesComponent 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/VistaDePreguntasFrecuentes`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
-   }
+  ngOnInit(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePreguntasFrecuentes`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+
+    this.http.get<any>(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerRankingDeItemsPreguntasFrecuentes`).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,
@@ -27,10 +52,38 @@ export class PreguntasFrecuentesComponent implements OnInit {
     item5: false,
     item6: 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/registrarVistaDeItemsDePreguntaFrecuente`,
+      { itemId }
+    ).subscribe({
+      error: (error) => console.error(error)
+    });
+  }
+}
+
+  preguntas = [
+    {
+      id: 'item1',
+      titulo: '¿Cómo recuperar la clave acceso en SIGU?'
+    },
+    {
+      id: 'item2',
+      titulo: '¿Cómo cambiar mi clave en SIGU?'
+    },
+    {
+      id: 'item3',
+      titulo: '¿Cómo inicio sesión con google en SIGU?'
+    }
+  ];
+  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/sabiasque/sabiasque.component.css

@@ -1,22 +1,61 @@
-.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;
 }
-.subtitle p {
-  margin: 5px 0;
+
+.ia-encabezado h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.ia-seccion {
+  background: white;
+  border: 1px solid #d0daea;
+  border-radius: 10px;
+  padding: 20px 24px;
+}
+
+@media (max-width: 768px) {
+  .ia-seccion {
+    border: none;
+    border-radius: 0;
+    padding: 8px 0;
+    background: transparent;
+  }
+}
+
+.ia-seccion .tree-container {
+  padding-left: 0;
+  padding-right: 0;
+  margin-top: 0;
 }
 
 
@@ -96,6 +135,7 @@
   color: #4D4D4D;
   margin-bottom: 20px;
   font-size: 16px;
+  text-align: justify;
 }
 
 .tree-content ul {
@@ -126,11 +166,11 @@
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 @media (max-width: 768px) {
-  
+
   .tree-title {
     font-size: 14px;
   }
-  
+
   .tree-content p {
     font-size: 14px;
   }
@@ -138,6 +178,19 @@
   .tree-content li{
      font-size: 14px;
   }
+
+  .sub-tree-item {
+    margin: 6px 0;
+  }
+
+  .tree-item {
+    padding-left: 4px;
+  }
+
+  .tree-content.expanded {
+    padding: 8px 4px;
+  }
+
 }
 
 /* sub items*/
@@ -193,16 +246,15 @@
 
 .imagenes-comparacion {
   display: flex;
-  gap: 20px;
-  justify-content: center;
-  align-items: flex-start;
-  flex-wrap: wrap; 
+  flex-direction: column;
+  gap: 16px;
   margin-bottom: 20px;
 }
 
 .imagen-item {
-  flex: 1;
-  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
 
@@ -211,7 +263,7 @@
   max-width: 420px;
   height: auto;
   border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 
 .video-container {
@@ -226,4 +278,28 @@
   max-width: 700px;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-}
+}
+
+/* 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);
+  }
+}