utn-cli 2.1.52 → 2.1.54

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

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
+@Component({
+  selector: 'app-conozcanos',
+  standalone: true,
+  imports: [MatIconModule, CommonModule],
+  templateUrl: './conozcanos.component.html',
+  styleUrl: './conozcanos.component.css'
+})
+export class ConozcanosComponent implements OnInit {
+  public datosDesarrolladores: any[] = [];
+  public cargando: boolean = true;
+  public desarrolladorLider: any = null;
+  private _destroy$ = new Subject<void>();
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+
+
+  ngOnInit(): void {
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDeConozcanos`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+    this.obtenerDesarrolladores();
+  }
+
+  obtenerDesarrolladores(): void {
+    this.cargando = true;
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/obtenerEquipoDeDesarrolladores`).subscribe({
+      next: (respuesta: any) => {
+        console.log('Respuesta equipo:', respuesta);
+
+        if (respuesta.error) {
+          console.error('Problemas:', respuesta.error);
+          this.cargando = false;
+          return;
+        }
+
+        const todos = respuesta.body ?? [];
+        this.desarrolladorLider = todos.find((dev: any) => dev.Perfil === 'Lider') ?? null;
+        this.datosDesarrolladores = todos.filter((dev: any) => dev.Perfil !== 'Lider');
+        this.cargando = false;
+      },
+      error: (error) => {
+        console.error('Error:', error);
+        this.cargando = false;
+      },
+    });
+  }
+
+
+  flipCard(event: Event): void {
+    const button = event.target as HTMLElement;
+    const card = button.closest('.team-card');
+
+    if (card) {
+      card.classList.toggle('flipped');
+    }
+  }
+}
+

package/templates/frontend/src/app/Paginas/Nucleo/contenedor-componentes/contenedor-componentes.component.ts

@@ -104,6 +104,11 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
       { id: 'nav_estadisticas', etiqueta: 'Estadísticas del módulo', icono: 'bar_chart', accion: () => this.irAEstadisticasDelModulo(), requierePermiso: true, posicion: 30 },
       { id: 'nav_accesibilidad', etiqueta: 'Accesibilidad', icono: 'accessibility', accion: () => this.irAAccesibilidad(), requierePermiso: false, posicion: 40 },
       { id: 'nav_declaracion_ia', etiqueta: 'Declaración de IA', icono: 'smart_toy', accion: () => this.irADeclaracionIA(), requierePermiso: false, posicion: 50 },
+      { id: 'nav_politicas', etiqueta: 'Políticas de seguridad', icono: 'security', accion: () => this.irAPoliticas(), requierePermiso: false, posicion: 50 },
+      { id: 'nav_acercade', etiqueta: 'Acerca de', icono: 'info', accion: () => this.irAAcercaDe(), requierePermiso: false, posicion: 50 },
+      { id: 'nav_conozcanos', etiqueta: 'Conózcanos', icono: 'groups', accion: () => this.irAConozcanos(), requierePermiso: false, posicion: 50 },
+      { id: 'nav_sabias_que', etiqueta: 'Sabías qué', icono: 'lightbulb', accion: () => this.irASabiasQue(), requierePermiso: false, posicion: 50 },
+      { id: 'nav_preguntas_frecuentes', etiqueta: 'Preguntas frecuentes', icono: 'question_answer', accion: () => this.irAPreguntasFrecuentes(), requierePermiso: false, posicion: 50 },
     ];
   }
 
@@ -298,6 +303,26 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
     this.router.navigate(['/ia']);
   }
 
+  irAAcercaDe(): void {
+    this.router.navigate(['/acercade']);
+  }
+
+  irAPoliticas(): void {
+    this.router.navigate(['/politicas']);
+  }
+
+  irAConozcanos(): void {
+    this.router.navigate(['/conozcanos']);
+  }
+
+  irASabiasQue(): void {
+    this.router.navigate(['/sabiasque']);
+  }
+  
+  irAPreguntasFrecuentes(): void {
+    this.router.navigate(['/preguntasfrecuentes']);
+  }
+
   irAVideo(): void {
     window.open(this.EnlaceDelVideo, '_blank', 'noopener,noreferrer');
   }

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

@@ -0,0 +1,158 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+.description {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+  box-sizing: border-box;
+   margin-top: 30px;  
+}
+
+.description p {
+  margin: 15px 0;
+  font-size: 16px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+  .description {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .description p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .description {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.tree-content ul {
+  padding-left: 20px; 
+  margin-top: 10px;  
+}
+
+.tree-content li {
+  list-style-type: disc; 
+  margin-bottom: 10px; 
+  color: #4D4D4D;  
+  font-size: 16px; 
+}
+
+@media (max-width: 768px) {
+  
+  .tree-title {
+    font-size: 14px;
+  }
+  
+  .tree-content p {
+    font-size: 14px;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}

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

@@ -0,0 +1,120 @@
+
+<div class="subtitle">
+    <p>Acuerdo de seguridad, privacidad y condiciones de uso</p>
+  </div>
+<div class="politicas-container">
+
+  <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>
+
+  <!-- Árbol-->
+  <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>
+
+        <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>
+
+        <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>
+
+        <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 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 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 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>
+
+  </div>
+
+</div>

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

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { HttpClient } from '@angular/common/http';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+@Component({
+  selector: 'app-politicas',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './politicas.component.html',
+  styleUrl: './politicas.component.css'
+})
+export class PoliticasComponent implements OnInit {
+  
+  private _destroy$ = new Subject<void>();
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+   ngOnInit(): void {
+      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePoliticas`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+   }
+  // items expandidos
+  expandedItems: { [key: string]: boolean } = {
+    item1: false,
+    item2: false,
+    item3: false,
+    item4: false,
+  };
+  
+  toggleItem(itemId: string) {
+    this.expandedItems[itemId] = !this.expandedItems[itemId];
+  }
+  
+ }

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

@@ -0,0 +1,162 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+
+
+@media (max-width: 768px) {
+  .description {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .description p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .description {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+.conozcanos-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.conozcanos-image img {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+.preguntados-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.preguntados-image img {
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+  object-fit: cover;
+  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;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}

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

@@ -0,0 +1,97 @@
+<div class="subtitle">
+  <p>Preguntas frecuentes</p>
+</div>
+<div class="politicas-container">
+
+  <!-- Árbol-->
+  <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. ¿Cómo recuperar la clave acceso en SIGU?</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['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>
+      </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>
+
+  </div>
+
+</div>