utn-cli 2.1.54 → 2.1.55

package/templates/frontend/src/app/Componentes/Nucleo/boton-ayuda/boton-ayuda.component.css

@@ -0,0 +1,7 @@
+.campo-completo {
+  width: 100%;
+}
+
+.sin-texto {
+  opacity: 0.3;
+}

package/templates/frontend/src/app/Componentes/Nucleo/boton-ayuda/boton-ayuda.component.html

@@ -0,0 +1,28 @@
+<button mat-icon-button type="button"
+        [class.sin-texto]="!textoAyuda"
+        #tooltip="matTooltip"
+        [matTooltip]="textoAyuda || 'Sin información disponible.'"
+        matTooltipPosition="above"
+        (mouseenter)="cargarTexto()"
+        (dblclick)="abrirEdicion()">
+  <mat-icon>{{ textoAyuda ? 'help' : 'help_outline' }}</mat-icon>
+</button>
+
+<ng-template #dialogEdicion>
+  <h2 mat-dialog-title>Texto de ayuda</h2>
+  <mat-dialog-content>
+    <mat-form-field class="campo-completo">
+      <mat-label>Descripción</mat-label>
+      <textarea matInput [(ngModel)]="textoEdicion" rows="5"
+                placeholder="Escriba el texto de ayuda para este campo..."></textarea>
+    </mat-form-field>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Cancelar</button>
+    <button mat-flat-button color="primary"
+            [disabled]="guardando"
+            (click)="guardarYCerrar()">
+      {{ guardando ? 'Guardando...' : 'Guardar' }}
+    </button>
+  </mat-dialog-actions>
+</ng-template>

package/templates/frontend/src/app/Componentes/Nucleo/boton-ayuda/boton-ayuda.component.ts

@@ -0,0 +1,78 @@
+import { Component, inject, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+
+@Component({
+  selector: 'app-boton-ayuda',
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    MatDialogTitle,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './boton-ayuda.component.html',
+  styleUrl: './boton-ayuda.component.css'
+})
+export class BotonAyudaComponent implements OnInit {
+  @Input({ required: true }) campo!: string;
+  @Input() EsEditable: boolean = false;
+  @ViewChild('dialogEdicion') dialogEdicion!: TemplateRef<any>;
+
+  textoAyuda = '';
+  textoEdicion = '';
+  guardando = false;
+
+  private cargando = false;
+  private dialogRef: any;
+  private http = inject(HttpClient);
+  private datosGlobales = inject(DatosGlobalesService);
+  private dialog = inject(MatDialog);
+
+  ngOnInit() {
+    this.cargarTexto();
+  }
+
+  async cargarTexto() {
+    if (this.cargando) return;
+    this.cargando = true;
+    try {
+      const url = `${this.datosGlobales.ObtenerURL()}DatosMiscelaneos/detalle/${this.campo}`;
+      const resultado: any = await firstValueFrom(this.http.get(url));
+      this.textoAyuda = resultado?.body ?? '';
+    } finally {
+      this.cargando = false;
+    }
+  }
+
+  abrirEdicion() {
+    if (!this.EsEditable) return;
+    this.textoEdicion = this.textoAyuda;
+    this.dialogRef = this.dialog.open(this.dialogEdicion, { width: '400px' });
+  }
+
+  async guardarYCerrar() {
+    this.guardando = true;
+    try {
+      const url = `${this.datosGlobales.ObtenerURL()}DatosMiscelaneos/guardar`;
+      await firstValueFrom(this.http.post(url, { Llave: this.campo, Texto: this.textoEdicion }));
+      this.textoAyuda = this.textoEdicion;
+      this.dialogRef?.close();
+    } finally {
+      this.guardando = false;
+    }
+  }
+}

package/templates/frontend/src/app/Componentes/Nucleo/estadisticas-del-modulo/estadisticas-del-modulo.component.html

@@ -1,8 +1,4 @@
-<div class="dialogo-header">
-  <mat-icon class="dialogo-icono">bar_chart</mat-icon>
-  <span class="dialogo-titulo">Estadísticas del módulo</span>
-</div>
-
+<h2 mat-dialog-title>Estadísticas del módulo</h2>
 <mat-dialog-content>
   <div class="contenedor">
     <div class="estadistica">
@@ -19,11 +15,50 @@
         <span class="estadistica-valor">{{ datos.VistasDelManual | number }}</span>
       </div>
     </div>
+    <div class="estadistica">
+      <mat-icon class="estadistica-icono">info</mat-icon>
+      <div class="estadistica-info">
+        <span class="estadistica-label">Vistas de Acerca de</span>
+        <span class="estadistica-valor">{{ datos.VistasDeAcercaDe | number }}</span>
+      </div>
+    </div>
+    <div class="estadistica">
+      <mat-icon class="estadistica-icono">security</mat-icon>
+      <div class="estadistica-info">
+        <span class="estadistica-label">Vistas de Políticas</span>
+        <span class="estadistica-valor">{{ datos.VistasDePoliticas | number }}</span>
+      </div>
+    </div>
+     <div class="estadistica">
+      <mat-icon class="estadistica-icono">groups</mat-icon>
+      <div class="estadistica-info">
+        <span class="estadistica-label">Vistas de Conózcanos</span>
+        <span class="estadistica-valor">{{ datos.VistasDeConozcanos | number }}</span>
+      </div>
+    </div>
+     <div class="estadistica">
+      <mat-icon class="estadistica-icono">lightbulb</mat-icon>
+      <div class="estadistica-info">
+        <span class="estadistica-label">Vistas de Sabías qué</span>
+        <span class="estadistica-valor">{{ datos.VistasDeSabiasQue| number }}</span>
+      </div>
+    </div>
+    <div class="estadistica">
+      <mat-icon class="estadistica-icono">question_answer</mat-icon>
+      <div class="estadistica-info">
+        <span class="estadistica-label">Vistas de Preguntas Frecuentes</span>
+        <span class="estadistica-valor">{{ datos.VistasDePreguntasFrecuentes| number }}</span>
+      </div>
+    </div>
+
+    
   </div>
 </mat-dialog-content>
-
 <mat-dialog-actions>
-  <button mat-stroked-button class="btn-cerrar" (click)="Cerrar()">Cerrar</button>
+  <button mat-button (click)="Cerrar()">Cerrar</button>
 </mat-dialog-actions>
 
-<div class="dialogo-pie"></div>
+
+
+
+

package/templates/frontend/src/app/Componentes/Nucleo/estadisticas-del-modulo/estadisticas-del-modulo.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
@@ -8,14 +8,15 @@ import { CommonModule } from '@angular/common';
   selector: 'app-estadisticas-del-modulo',
   templateUrl: './estadisticas-del-modulo.component.html',
   styleUrl: './estadisticas-del-modulo.component.css',
-  imports: [MatDialogContent, MatDialogActions, MatButtonModule, MatIconModule, CommonModule]
+  imports: [MatDialogContent, MatDialogActions, MatDialogTitle, MatButtonModule, MatIconModule, CommonModule]
 })
+
 export class EstadisticasDelModuloComponent {
   readonly dialogRef = inject(MatDialogRef<EstadisticasDelModuloComponent>);
 
-  constructor(@Inject(MAT_DIALOG_DATA) public datos: { VistasDelModulo: number, VistasDelManual: number }) { }
+  constructor(@Inject(MAT_DIALOG_DATA) public datos: { VistasDelModulo: number, VistasDelManual: number, VistasDeAcercaDe: number, VistasDePoliticas: number,VistasDeConozcanos: number, VistasDeSabiasQue: number,VistasDePreguntasFrecuentes: number }) { }
 
   Cerrar(): void {
     this.dialogRef.close();
   }
-}
+}

package/templates/frontend/src/app/Componentes/Nucleo/gestion-actividad/gestion-actividad.component.ts

@@ -28,6 +28,7 @@ export class GestionActividadComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.tokenActual = this.datosGlobalesService.ObtenerToken().split(' ')[1] || '';
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDeActividad`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
     this.obtenerActividad();
   }
 

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-confirmacion/mensaje-confirmacion.component.css

@@ -6,7 +6,6 @@
   background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
   color: white;
   padding: 24px 20px 16px;
-  margin: -8px -8px 0;
 }
 
 .dialogo-icono {
@@ -69,5 +68,8 @@ mat-dialog-actions {
 .dialogo-pie {
   height: 20px;
   background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
-  margin: 0 -8px;
 }
+
+:host ::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+  padding: 0;
+}

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-institucional/mensaje-institucional.component.html

@@ -1,5 +1,5 @@
 <div class="mensaje-banner">
-  <img src="https://storage.sigu.utn.ac.cr/images/MensajesInstitucionales/Banner.png"
+  <img src="https://framework-mantenimientosv2-storage.sigu.utn.ac.cr/framework-mantenimientosv2/Banner.png"
        alt="Información SIGU"
        class="mensaje-banner-imagen" />
 </div>
@@ -8,8 +8,8 @@
   <h1 class="mensaje-titulo">{{ datos.Titulo }}</h1>
 
   <figure class="mensaje-figura">
-    <img src="https://storage.sigu.utn.ac.cr/images/MensajesInstitucionales/Carnet.png"
-         alt="Carnet institucional"
+    <img [src]="datos.ImagenURL"
+         alt="Imagen del mensaje institucional"
          class="mensaje-imagen" />
   </figure>
 

package/templates/frontend/src/app/Componentes/Nucleo/mensaje-institucional/mensaje-institucional.component.ts

@@ -11,7 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
 export class MensajeInstitucionalComponent {
   readonly dialogRef = inject(MatDialogRef<MensajeInstitucionalComponent>);
 
-  constructor(@Inject(MAT_DIALOG_DATA) public datos: { Titulo: string, Texto: string }) { }
+  constructor(@Inject(MAT_DIALOG_DATA) public datos: { Titulo: string, Texto: string, ImagenURL: string | null }) { }
 
   Cerrar(): void {
     this.dialogRef.close();

package/templates/frontend/src/app/Componentes/Nucleo/subir-archivo/subir-archivo.component.ts

@@ -275,7 +275,7 @@ export class SubirArchivoComponent implements OnInit, OnDestroy {
   // ── Visor inline ─────────────────────────────────────────────────────────
 
   obtenerTipoDeVista(nombre: string): TipoDeVista | null {
-    const n = nombre.split(' (')[0].trim().toLowerCase();
+    const n = nombre.replace(/\s*\([^)]*\)\s*$/, '').trim().toLowerCase();
     if (n.endsWith('.diff')) return 'diff';
     if (n.endsWith('.txt')) return 'texto';
     if (n.endsWith('.csv')) return 'csv';

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

@@ -256,3 +256,28 @@ kbd {
     text-align: center;
   }
 }
+
+
+/* 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);
+  }
+}

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

@@ -285,5 +285,7 @@
       </table>
     </section>
 
+    <button *ngIf="mostrarBotonInicio" class="btn-volver-arriba" (click)="irAlInicio()" title="Volver arriba">↑ Volver arriba</button>
+
   </main>
 </div>

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

@@ -1,6 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
+import { HttpClient } from '@angular/common/http';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 interface SeccionToc {
   id: string;
@@ -14,7 +18,27 @@ interface SeccionToc {
   templateUrl: './accesibilidad.component.html',
   styleUrl: './accesibilidad.component.css'
 })
-export class AccesibilidadComponent {
+export class AccesibilidadComponent 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/VistaDeAccesibilidad`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+    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); }
+  }
   public secciones: SeccionToc[] = [
     { id: 'navegacion-teclado', titulo: 'Navegación con teclado' },
     { id: 'atajos-navegadores', titulo: 'Atajos por navegador y sistema operativo' },
@@ -25,4 +49,9 @@ export class AccesibilidadComponent {
   irA(id: string): void {
     document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
+  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/acercade/acercade.component.css

@@ -1,37 +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;
 }
 
-.subtitle {
-  background-color: #0b4794;
-  font-size: 25px;
+.ia-main {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.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;
 }
-.subtitle p {
-  margin: 5px 0;
+
+.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;
+}
+
+.ia-seccion {
+  background: white;
+  border: 1px solid #d0daea;
+  border-radius: 10px;
+  padding: 20px 24px;
 }
 .description {
   width: 100%;
-  padding-left: 30px;
-  padding-right: 30px;
+  max-width: 680px;
+  margin: 0 auto;
   box-sizing: border-box;
-   margin-top: 30px;  
 }
 
 .description p {
-  margin: 15px 0;
+  margin: 0 0 20px 0;
   font-size: 16px;
   font-weight: 400;
   color: #4D4D4D;
   line-height: 1.6;
+  text-align: justify;
 }
 
 .description ul {
@@ -63,3 +87,28 @@
   }
 }
 
+
+
+/* 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);
+  }
+}

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

@@ -1,49 +1,59 @@
-<div class="subtitle">
-  <p>¿Qué es SIGU?</p>
-</div>
-<div class="politicas-container">
+<div class="ia-layout">
+  <main class="ia-main">
+
+    <header class="ia-encabezado">
+      <mat-icon class="ia-icono-header">info</mat-icon>
+      <div>
+        <h1>¿Qué es SIGU?</h1>
+      </div>
+    </header>
 
-  <div class="description">
-    <p>El Sistema Integrado de Gestión Universitaria (SIGU) es la plataforma digital de la Universidad Técnica Nacional
-      diseñada para centralizar y facilitar la gestión de servicios académicos, administrativos e institucionales.
-    </p>
-    <p>SIGU nace con el propósito de modernizar y optimizar los procesos institucionales que permitan a estudiantes,
-      docentes, personal administrativo, aspirantes, clientes y público en general acceder a distintos servicios
-      universitarios desde una plataforma segura, accesible y eficiente.
-    </p>
-    <P>
-      La plataforma integra funcionalidades relacionadas con procesos académicos, solicitudes institucionales, gestión
-      administrativa, autenticación de usuarios y acceso a información universitaria, permitiendo centralizar y mejorar
-      la experiencia digital y fortalecer la interacción entre la Universidad y sus usuarios.
-    </P>
-    <P>
-      Asimismo, SIGU busca ser una plataforma universitaria moderna, innovadora, accesible y en constante evolución,
-      comprometida con la mejora continua de los servicios digitales institucionales, el fortalecimiento de la gestión
-      universitaria y el uso responsable y seguro de la información, contribuyendo así a una experiencia tecnológica más
-      eficiente, transparente y orientada a las necesidades de la comunidad universitaria.
-    </P>
-    <P><strong>
-      El Sistema Integrado de Gestión Universitaria (SIGU) ofrece principios enfocados en la mejora continua de los
-      servicios digitales universitarios como:
-      </strong>
-    </P>
-    <ul>
-      <li>Eficiencia: SIGU busca optimizar los procesos académicos y administrativos mediante herramientas tecnológicas
-        que faciliten el acceso ágil y centralizado a los servicios institucionales.</li>
-      <li>Confiabilidad: La plataforma procura garantizar integridad y disponibilidad de la información, permitiendo a
-        los usuarios realizar sus gestiones dentro de un entorno confiable.
-      </li>
-      <li>Accesibilidad: SIGU facilita el acceso inmediato a la información y a los módulos de servicios, asegurando una
-        experiencia digital fluida para todos los usuarios registrados.</li>
-      <li>Seguridad: La plataforma incorpora medidas de seguridad informática y protección de datos personales, con el
-        fin de resguardar la información institucional y la privacidad de los usuarios.</li>
-      <li>Organización: SIGU centraliza distintos procesos y servicios universitarios en una única plataforma digital,
-        permitiendo una gestión más ordenada y eficiente de la información.</li>
-    </ul>
+    <section class="ia-seccion">
+      <div class="description">
+        <p>El Sistema Integrado de Gestión Universitaria (SIGU) es la plataforma digital de la Universidad Técnica Nacional
+          diseñada para centralizar y facilitar la gestión de servicios académicos, administrativos e institucionales.
+        </p>
+        <p>SIGU nace con el propósito de modernizar y optimizar los procesos institucionales que permitan a estudiantes,
+          docentes, personal administrativo, aspirantes, clientes y público en general acceder a distintos servicios
+          universitarios desde una plataforma segura, accesible y eficiente.
+        </p>
+        <P>
+          La plataforma integra funcionalidades relacionadas con procesos académicos, solicitudes institucionales, gestión
+          administrativa, autenticación de usuarios y acceso a información universitaria, permitiendo centralizar y mejorar
+          la experiencia digital y fortalecer la interacción entre la Universidad y sus usuarios.
+        </P>
+        <P>
+          Asimismo, SIGU busca ser una plataforma universitaria moderna, innovadora, accesible y en constante evolución,
+          comprometida con la mejora continua de los servicios digitales institucionales, el fortalecimiento de la gestión
+          universitaria y el uso responsable y seguro de la información, contribuyendo así a una experiencia tecnológica más
+          eficiente, transparente y orientada a las necesidades de la comunidad universitaria.
+        </P>
+        <P><strong>
+          El Sistema Integrado de Gestión Universitaria (SIGU) ofrece principios enfocados en la mejora continua de los
+          servicios digitales universitarios como:
+          </strong>
+        </P>
+        <ul>
+          <li>Eficiencia: SIGU busca optimizar los procesos académicos y administrativos mediante herramientas tecnológicas
+            que faciliten el acceso ágil y centralizado a los servicios institucionales.</li>
+          <li>Confiabilidad: La plataforma procura garantizar integridad y disponibilidad de la información, permitiendo a
+            los usuarios realizar sus gestiones dentro de un entorno confiable.
+          </li>
+          <li>Accesibilidad: SIGU facilita el acceso inmediato a la información y a los módulos de servicios, asegurando una
+            experiencia digital fluida para todos los usuarios registrados.</li>
+          <li>Seguridad: La plataforma incorpora medidas de seguridad informática y protección de datos personales, con el
+            fin de resguardar la información institucional y la privacidad de los usuarios.</li>
+          <li>Organización: SIGU centraliza distintos procesos y servicios universitarios en una única plataforma digital,
+            permitiendo una gestión más ordenada y eficiente de la información.</li>
+        </ul>
 
-    <P>La Universidad Técnica Nacional trabaja continuamente en el desarrollo y actualización de la plataforma, con el
-      objetivo de ofrecer servicios digitales más modernos y adaptados a las necesidades de la comunidad universitaria.
-    </P>
-  </div>
+        <P>La Universidad Técnica Nacional trabaja continuamente en el desarrollo y actualización de la plataforma, con el
+          objetivo de ofrecer servicios digitales más modernos y adaptados a las necesidades de la comunidad universitaria.
+        </P>
+      </div>
+    </section>
 
-</div>
+    <button *ngIf="mostrarBotonInicio" class="btn-volver-arriba" (click)="irAlInicio()" title="Volver arriba">↑ Volver arriba</button>
+
+  </main>
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/acercade/acercade.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,14 +8,33 @@ import { Subject } from 'rxjs';
 @Component({
   selector: 'app-acercade',
   standalone: true,
-  imports: [MatIconModule],
+  imports: [MatIconModule, CommonModule],
   templateUrl: './acercade.component.html',
   styleUrl: './acercade.component.css'
 })
 export class AcercadeComponent 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/VistaDeAcercaDe`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+      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); }
+   }
+   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' }); }
    }
  }