utn-cli 2.1.44 → 2.1.46

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

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  padding-bottom: 12px;
 }
 
 .cabecera2-info {
@@ -24,6 +25,17 @@
 .cabecera2 .titulo2 {
   font-size: large;
   font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.titulo2-icono {
+  font-size: 1.6rem !important;
+  width: 1.6rem !important;
+  height: 1.6rem !important;
+  color: #002f6b;
+  flex-shrink: 0;
 }
 
 .cabecera2 .descripcion2 {
@@ -34,11 +46,11 @@
 .filtro-tarjetas {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   background: #f0f4f8;
   border: 1px solid #c4d0de;
-  border-radius: 8px;
-  padding: 4px 8px;
+  border-radius: 4px;
+  padding: 8px 12px;
   flex-shrink: 0;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -49,9 +61,9 @@
 }
 
 .filtro-icono {
-  font-size: 18px !important;
-  width: 18px !important;
-  height: 18px !important;
+  font-size: 20px !important;
+  width: 20px !important;
+  height: 20px !important;
   color: #6b7c8f;
   flex-shrink: 0;
 }
@@ -60,10 +72,10 @@
   border: none;
   background: transparent;
   outline: none;
-  font-size: 14px;
+  font-size: 15px;
   font-family: 'Roboto', sans-serif;
   color: #333;
-  width: 180px;
+  width: 320px;
 }
 
 .filtro-input::placeholder {
@@ -125,10 +137,15 @@
   color: #0b4fce;
 }
 
+.ColorBlanco:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
 /* Contenedor */
 .contenedor {
   flex-grow: 1;
-  padding: 0 15px;
+  padding: 16px 15px 0;
   display: flex;
   flex-direction: column;
   background-color: aliceblue;
@@ -148,40 +165,97 @@
 
 /* Contenido */
 .contenido {
-  border: 3px solid #0b4fce;
   border-radius: 15px;
   padding: 20px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   background-color: white;
   text-align: center;
 }
 
-/* Titulos */
-.titulo,
+/* Header unificado */
 .encabezado {
-  font-weight: bold;
-  text-align: center;
-  padding: 0.5rem;
-  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  height: 52px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  color: white;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 }
 
-.titulo {
-  font-size: 18px;
-  background-color: #002f6b;
-  color: white;
+.encabezado-marca {
   display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  overflow: hidden;
 }
 
-.encabezado {
-  font-size: 25px;
-  background-color: #adbccf;
-  color: #002f6b;
+.encabezado-logo {
+  height: 28px;
+  width: auto;
+  flex-shrink: 0;
+  filter: brightness(0) invert(1);
+}
+
+.encabezado-nombre-uni {
+  font-size: 16px;
+  font-weight: 700;
+  white-space: nowrap;
+  letter-spacing: 0.2px;
+}
+
+.encabezado-nombre-corto {
+  display: none;
+}
+
+.encabezado-separador {
+  color: rgba(255, 255, 255, 0.35);
+  font-weight: 200;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.encabezado-titulo-modulo {
+  font-size: 14px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.8);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.encabezado-acciones {
   display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.encabezado-divisor-vertical {
+  width: 1px;
+  height: 20px;
+  background-color: rgba(255, 255, 255, 0.25);
+  margin: 0 6px;
 }
 
 @media (max-width: 768px) {
   .encabezado {
     font-size: 18px;
+    padding: 0 8px;
+  }
+
+  .encabezado-logo {
+    height: 22px;
+  }
+
+  .encabezado-marca {
+    gap: 6px;
+  }
+
+  .encabezado-acciones {
+    gap: 0;
   }
 
   .cabecera2 {
@@ -219,6 +293,14 @@
     font-size: 18px;
   }
 
+  .encabezado-nombre-completo {
+    display: none;
+  }
+
+  .encabezado-titulo-modulo {
+    font-size: 11px;
+  }
+
   .pie-col.izquierda {
     display: none;
   }
@@ -238,10 +320,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem;
-  background-color: #adbccf;
-  color: #000;
-  font-size: 15px;
+  padding: 3px 12px;
+  background-color: #f4f6f9;
+  border-top: 1px solid #dde3ec;
+  color: #6b7c8f;
+  font-size: 11px;
   flex-shrink: 0;
 }
 
@@ -286,29 +369,25 @@
 .contador-usuarios {
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.5);
-  padding: 4px 15px;
-  border-radius: 20px;
+  background: transparent;
+  padding: 2px 10px;
+  border-radius: 12px;
   font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  color: #002f6b;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 47, 107, 0.1);
+  font-size: 11px;
+  color: #6b7c8f;
   transition: all 0.3s ease;
 }
 
 .contador-usuarios:hover {
-  background: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transform: translateY(-1px);
+  background: rgba(0, 47, 107, 0.05);
 }
 
 .icono-usuarios {
-  font-size: 18px !important;
-  width: 18px !important;
-  height: 18px !important;
-  margin-right: 8px;
-  color: #1976d2;
+  font-size: 14px !important;
+  width: 14px !important;
+  height: 14px !important;
+  margin-right: 5px;
+  color: #8fa0b4;
 }
 
 .etiqueta-usuarios {
@@ -318,11 +397,28 @@
 }
 
 .separador-usuarios {
-  margin: 0 10px;
+  margin: 0 8px;
   color: #ccc;
   font-weight: 200;
 }
 
+.pie .botonDeNavegacion {
+  color: #8fa0b4;
+  padding: 2px;
+}
+
+.pie .botonDeNavegacion mat-icon {
+  font-size: 18px !important;
+  width: 18px !important;
+  height: 18px !important;
+}
+
+.pie .botonDeNavegacion:hover {
+  background-color: rgba(0, 47, 107, 0.08);
+  color: #002f6b;
+  transform: scale(1.1);
+}
+
 .valor-fijo {
   font-weight: bold;
   color: #002f6b;
@@ -343,11 +439,10 @@
 
 .numero-animado {
   display: block;
-  font-weight: bold;
-  color: #002f6b;
+  font-weight: 600;
+  color: #4a5e73;
   width: 100%;
   text-align: center;
-  /* Animación tipo YouTube: deslizamiento estrictamente vertical */
   animation: youtubeSlide 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
   will-change: transform, opacity;
 }

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

@@ -1,39 +1,24 @@
 <div class="pagina">
   <div class="encabezado">
-    <div class="pie-col izquierda">
-    </div>
-    <div class="pie-col centro">
-      Universidad Técnica Nacional
-    </div>
-    <div class="pie-col derecha">
-      @if(TienePermiso) {
-      <button class="botonDeNavegacion" [matTooltip]="NombreUsuario || 'Perfil'" [title]="NombreUsuario || 'Perfil'"
-        (click)="irAPerfil()">
-        <mat-icon>person</mat-icon>
-      </button>
-      <button class="botonDeNavegacion" matTooltip="Mensajes" title="Mensajes" (click)="irAMensajes()">
-        @if (Mensajes.length > 0) {
-        <mat-icon>mark_email_unread</mat-icon>
-        } @else {
-        <mat-icon>email_unread</mat-icon>
-        }
-      </button>
-      <button class="botonDeNavegacion" matTooltip="Salir" title="Salir" (click)="Salir()">
-        <mat-icon>logout</mat-icon>
+    <div class="encabezado-marca">
+      @if(TienePermiso && esDashboard){
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Módulos" title="Módulos" (click)="toggleSidebar()">
+        <mat-icon>menu</mat-icon>
       </button>
-      } @else {
-      <button class="botonDeNavegacion" matTooltip="Entrar" title="Entrar" (click)="Entrar()">
-        <mat-icon>login</mat-icon>
+      } @else if (TienePermiso) {
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Menú principal" title="Menú principal" (click)="irAlInicio()">
+        <mat-icon>home</mat-icon>
       </button>
       }
+      <span class="encabezado-divisor-vertical"></span>
+      <img class="encabezado-logo" src="https://storage.sigu.utn.ac.cr/images/cards/LogoUTN.svg" alt="Logo UTN" />
+      <span class="encabezado-nombre-uni encabezado-nombre-completo">Universidad Técnica Nacional</span>
+      <span class="encabezado-nombre-uni encabezado-nombre-corto">UTN</span>
+      <span class="encabezado-separador">|</span>
+      <span class="encabezado-titulo-modulo">SIGU</span>
     </div>
-  </div>
-
-  @if(TienePermiso){
-  <div class="titulo">
-    <div class="pie-col izquierda"></div>
-    <div class="pie-col centro">{{ Titulo }}</div>
-    <div class="pie-col derecha">
+    <div class="encabezado-acciones">
+      @if(TienePermiso){
       <button class="botonDeNavegacion ColorBlanco" matTooltip="Ir atrás" title="Ir atrás" (click)="irAtras()">
         <mat-icon>arrow_back</mat-icon>
       </button>
@@ -41,16 +26,40 @@
         (click)="irAlMenuDeModulo()">
         <mat-icon>menu</mat-icon>
       </button>
-      <!-- <button class="botonDeNavegacion" matTooltip="Ir al móudulo padre" title="Ir al móudulo padre" (click)="irAlModuloPadre()">
-                  <mat-icon>apps</mat-icon>
-                </button> -->
       <button class="botonDeNavegacion ColorBlanco" matTooltip="Ir al inicio" title="Ir al inicio"
         (click)="irAlInicio()">
         <mat-icon>home</mat-icon>
       </button>
+      <span class="encabezado-divisor-vertical"></span>
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Mensajes" title="Mensajes" (click)="irAMensajes()">
+        @if (Mensajes.length > 0) {
+        <mat-icon>mark_email_unread</mat-icon>
+        } @else {
+        <mat-icon>email_unread</mat-icon>
+        }
+      </button>
+      <button class="botonDeNavegacion ColorBlanco" [matTooltip]="NombreUsuario || 'Perfil'"
+        [title]="NombreUsuario || 'Perfil'" [matMenuTriggerFor]="menuUsuario">
+        <mat-icon>person</mat-icon>
+      </button>
+      <mat-menu #menuUsuario="matMenu">
+        <button mat-menu-item (click)="irAPerfil()" title="Ver perfil">
+          <mat-icon>manage_accounts</mat-icon>
+          <span>{{ NombreUsuario || 'Perfil' }}</span>
+        </button>
+        <mat-divider></mat-divider>
+        <button mat-menu-item (click)="Salir()" title="Cerrar sesión">
+          <mat-icon>logout</mat-icon>
+          <span>Cerrar sesión</span>
+        </button>
+      </mat-menu>
+      } @else {
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Entrar" title="Entrar" (click)="Entrar()">
+        <mat-icon>login</mat-icon>
+      </button>
+      }
     </div>
   </div>
-  }
   <div class="zona-scrollable">
     <div [ngClass]="claseDelContenedor">
       <!-- @if(TienePermiso) {
@@ -72,17 +81,23 @@
       } -->
       <div class="contenido">
         @if(TienePermiso){
-        @if(!esDashboard || tieneTarjetas) {
+        @if(esDashboard && tieneTarjetas) {
         <div class="cabecera2">
           <div class="cabecera2-info">
-            <p class="titulo2">{{ Descripcion }}</p>
+            <p class="titulo2">
+              @if (esDashboard) {
+              <mat-icon class="titulo2-icono" aria-hidden="true">home</mat-icon>
+              }
+              {{ Descripcion }}
+            </p>
             <p class="descripcion2">{{ Detalle }}</p>
           </div>
           @if (esDashboard) {
           <div class="filtro-tarjetas">
             <mat-icon class="filtro-icono">search</mat-icon>
             <input #filtroInput class="filtro-input" type="text" placeholder="Buscar tarjeta..." [value]="filtro"
-              (input)="onFiltroChange($event)" aria-label="Buscar tarjeta por nombre" />
+              (input)="onFiltroChange($event)" aria-label="Buscar tarjeta por nombre"
+              (keydown.tab)="enfocarPrimeraTarjeta($event)" />
             @if (filtro) {
             <button class="filtro-limpiar" (click)="limpiarFiltro()" title="Limpiar búsqueda"
               aria-label="Limpiar búsqueda">
@@ -101,6 +116,13 @@
     </div>
   </div>
 
+  @if (panelNotificacionesAbierto) {
+  <app-panel-notificaciones
+    [datos]="datosNotificaciones"
+    (cerrar)="panelNotificacionesAbierto = false">
+  </app-panel-notificaciones>
+  }
+
   <div class="pie">
     <div class="pie-col izquierda">
       Módulo: {{ Modulo }}. Versión: {{ Version }}.
@@ -151,7 +173,7 @@
       <button class="botonDeNavegacion" matTooltip="Ayuda" title="Ayuda" (click)="irAAyuda()">
         <mat-icon>help</mat-icon>
       </button>
-      <button class="botonDeNavegacion" matTooltip="Calensario institucional" title="Calendario institucional"
+      <button class="botonDeNavegacion" matTooltip="Calendario institucional" title="Calendario institucional"
         (click)="irACalendario()">
         <mat-icon>calendar_view_week</mat-icon>
       </button>

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

@@ -8,6 +8,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import type { ItemDeMenuDialog } from '../../../Componentes/Nucleo/reordenar-menu/reordenar-menu.component';
+import { PanelNotificacionesComponent } from '../../../Componentes/Nucleo/panel-notificaciones/panel-notificaciones.component';
 
 import { MatMenuModule } from '@angular/material/menu';
 
@@ -22,7 +23,7 @@ interface ItemDeMenu {
 
 @Component({
   selector: 'app-contenedor-componentes',
-  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule, MatMenuModule, MatDividerModule],
+  imports: [RouterOutlet, MatIconModule, MatTooltipModule, CommonModule, MatMenuModule, MatDividerModule, PanelNotificacionesComponent],
   templateUrl: './contenedor-componentes.component.html',
   styleUrl: './contenedor-componentes.component.css'
 })
@@ -35,6 +36,8 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
   public Modulo: string = '';
   public Version: string = '';
   public Mensajes: string[] = [];
+  public panelNotificacionesAbierto: boolean = false;
+  public datosNotificaciones: any[] = [];
   public EnlaceDelManual: string = '-';
   public EnlaceDelVideo: string = '-';
   public claseDelContenedor: string = '';
@@ -54,6 +57,12 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
   }
 
   get esDashboard(): boolean { return this.router.url === '/'; }
+
+  toggleSidebar(): void {
+    const abriendo = !this.datosGlobalesService.sidebarVisible$.value;
+    if (abriendo) this.panelNotificacionesAbierto = false;
+    this.datosGlobalesService.sidebarVisible$.next(abriendo);
+  }
   get tieneTarjetas(): boolean { return this.datosGlobalesService.cantidadDeTarjetas$.value > 0; }
   get filtro(): string { return this.datosGlobalesService.filtroDeTarjetas$.value; }
 
@@ -70,6 +79,13 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
     this.datosGlobalesService.filtroDeTarjetas$.next('');
   }
 
+  enfocarPrimeraTarjeta(event: Event): void {
+    const primera = document.querySelector<HTMLElement>('.modulo-card[role="button"]');
+    if (!primera) return;
+    event.preventDefault();
+    primera.focus();
+  }
+
   constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService, private location: Location, private dialog: MatDialog, private router: Router, private ngZone: NgZone) {
     if (datosGlobalesService.ObtenerToken() === '') {
       datosGlobalesService.RedirigirALogin();
@@ -258,9 +274,15 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
   }
 
   irAMensajes(): void {
-    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones').subscribe(async (datos: any) => {
-      const { MensajesComponent } = await import('../../../Componentes/Nucleo/mensajes/mensajes.component');
-      this.dialog.open(MensajesComponent, { data: datos.body });
+    this.datosGlobalesService.sidebarVisible$.next(false);
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerNotificaciones').subscribe((datos: any) => {
+      this.datosNotificaciones = (datos.body ?? []).map((n: any) => ({
+        llave: n.FechaYHoraDeCreacion,
+        valor: n.Notificacion,
+        tachado: false,
+        eliminando: false
+      }));
+      this.panelNotificacionesAbierto = true;
     });
   }
 
@@ -310,13 +332,13 @@ export class ContenedorComponentesComponent implements OnInit, OnDestroy, AfterV
 
   async irASugerencias(): Promise<void> {
     const { ReporteDeSugerenciasComponent } = await import('../../../Componentes/Nucleo/reporte-de-sugerencias/reporte-de-sugerencias.component');
-    this.dialog.open(ReporteDeSugerenciasComponent);
+    this.dialog.open(ReporteDeSugerenciasComponent, { panelClass: 'dialog-sugerencias' });
   }
 
   irAEstadisticasDelModulo(): void {
     this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/obtenerVistas').subscribe(async (datos: any) => {
       const { EstadisticasDelModuloComponent } = await import('../../../Componentes/Nucleo/estadisticas-del-modulo/estadisticas-del-modulo.component');
-      this.dialog.open(EstadisticasDelModuloComponent, { data: datos.body });
+      this.dialog.open(EstadisticasDelModuloComponent, { data: datos.body, panelClass: 'dialog-estadisticas' });
     });
   }
 

package/templates/frontend/src/app/Paginas/Nucleo/declaracion-ia/declaracion-ia.component.css

@@ -14,10 +14,10 @@
 /* Encabezado */
 .ia-encabezado {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 14px;
   padding: 20px 24px;
-  background: linear-gradient(135deg, #002f6b 0%, #1565c0 100%);
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
   color: white;
   border-radius: 12px;
 }
@@ -27,14 +27,14 @@
   width: 40px !important;
   height: 40px !important;
   flex-shrink: 0;
-  margin-top: 4px;
   opacity: 0.9;
 }
 
 .ia-encabezado h1 {
-  margin: 0 0 6px 0;
+  margin: 0;
   font-size: 22px;
   font-weight: 700;
+  line-height: 1;
 }
 
 .ia-encabezado p {

package/templates/frontend/src/index.html

@@ -20,6 +20,12 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="https://accounts.google.com/gsi/client" async defer></script>
   <meta description="Universidad Técnica Nacional - SIGU">
+  <style>
+    #userwayAccessibilityIcon {
+      bottom: 35px !important;
+      top: auto !important;
+    }
+  </style>
 </head>
 
 <body bgcolor="#adbccf">
@@ -29,6 +35,7 @@
     (function (d) {
       var s = d.createElement("script");
       s.setAttribute("data-account", "oDM5lWND5w");
+      s.setAttribute("data-position", "3");
       s.setAttribute("src", "https://cdn.userway.org/widget.js");
       (d.body || d.head).appendChild(s);
     })(document);

package/templates/frontend/src/styles.css

@@ -8,7 +8,20 @@ body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-.cdk-overlay-pane.mat-mdc-dialog-panel{
+.cdk-overlay-pane.mat-mdc-dialog-panel {
   max-width: 100vw !important;
   max-height: 200vh !important;
 }
+
+.dialog-sugerencias .mat-mdc-dialog-surface,
+.dialog-mensajes .mat-mdc-dialog-surface,
+.dialog-estadisticas .mat-mdc-dialog-surface {
+  overflow: hidden !important;
+}
+
+.dialog-sugerencias .mat-mdc-dialog-content,
+.dialog-mensajes .mat-mdc-dialog-content,
+.dialog-estadisticas .mat-mdc-dialog-content {
+  max-height: unset !important;
+  overflow: visible !important;
+}