utn-cli 2.1.44 → 2.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "utn-cli",
-  "version": "2.1.44",
+  "version": "2.1.46",
   "description": "Herramienta CLI unificada para la gestión de plantillas en SIGU.",
   "main": "index.js",
   "type": "module",

package/templates/backend/servicios/Nucleo/Miscelaneas.js

@@ -275,7 +275,7 @@ class Miscelaneo {
         let datosFinales;
         if (existentes.length > 0) {
           const datosExistentes = typeof existentes[0].Datos === 'string' ? JSON.parse(existentes[0].Datos) : existentes[0].Datos;
-          datosFinales = { ...datosExistentes, ...tarjeta, 'Posición': existentes[0].Posicion, 'Título': existentes[0].Titulo, 'Descripción': existentes[0].Descripcion, 'Archivo': archivo };
+          datosFinales = { 'Archivo': archivo, ...tarjeta, ...datosExistentes };
           await ejecutarConsultaSIGU(
             `UPDATE \`SIGU\`.\`SIGU_ModulosV2Tarjetas\` SET \`Datos\` = ?, \`LastUser\` = 'Sistema' WHERE \`Modulo\` = ? AND JSON_VALUE(\`Datos\`, '$."Título"') = ?`,
             [JSON.stringify(datosFinales), this.NombreCanonicoDelModulo, titulo]

package/templates/frontend/src/app/Componentes/Nucleo/calendario-publico/calendario-publico.component.css

@@ -1,15 +1,55 @@
-.titulo-dialog {
+/* Header */
+.dialogo-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  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 {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.dialogo-titulo {
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 0.2px;
 }
 
-.titulo-dialog small {
+.dialogo-titulo small {
   font-size: 0.65em;
-  opacity: 0.6;
+  opacity: 0.7;
   font-weight: normal;
 }
 
+/* Botón cerrar */
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 20px 16px;
+}
+
+.btn-cancelar {
+  color: #012169;
+  border-color: #012169;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+/* Pie */
+.dialogo-pie {
+  height: 20px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  margin: 0 -8px;
+}
+
 /* ── Buscador ── */
 .buscador {
   width: 100%;

package/templates/frontend/src/app/Componentes/Nucleo/calendario-publico/calendario-publico.component.html

@@ -1,9 +1,9 @@
-<h2 mat-dialog-title class="titulo-dialog">
-  <mat-icon>calendar_month</mat-icon>
-  <span *ngIf="cargando">Cargando...</span>
-  <span *ngIf="!cargando && calendario">{{ calendario.Titulo }}&nbsp;<small>{{ calendario.Version }}</small></span>
-  <span *ngIf="!cargando && !calendario">Calendario institucional</span>
-</h2>
+<div class="dialogo-header">
+  <mat-icon class="dialogo-icono">calendar_month</mat-icon>
+  <span class="dialogo-titulo" *ngIf="cargando">Cargando...</span>
+  <span class="dialogo-titulo" *ngIf="!cargando && calendario">{{ calendario.Titulo }}&nbsp;<small>{{ calendario.Version }}</small></span>
+  <span class="dialogo-titulo" *ngIf="!cargando && !calendario">Calendario institucional</span>
+</div>
 
 <mat-dialog-content>
 
@@ -167,6 +167,8 @@
   </ng-container>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button (click)="cerrar()">Cerrar</button>
+<mat-dialog-actions>
+  <button mat-stroked-button class="btn-cancelar" (click)="cerrar()">Cerrar</button>
 </mat-dialog-actions>
+
+<div class="dialogo-pie"></div>

package/templates/frontend/src/app/Componentes/Nucleo/calendario-publico/calendario-publico.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -16,7 +16,7 @@ import { DatosGlobalesService } from '../../../datos-globales.service';
   styleUrl: './calendario-publico.component.css',
   imports: [
     CommonModule,
-    MatDialogContent, MatDialogActions, MatDialogTitle,
+    MatDialogContent, MatDialogActions,
     MatButtonModule, MatIconModule,
     MatProgressBarModule, MatExpansionModule,
     MatFormFieldModule, MatInputModule

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

@@ -1,8 +1,34 @@
+/* Header */
+.dialogo-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  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 {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.dialogo-titulo {
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 0.2px;
+}
+
+/* Contenido */
 .contenedor {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 0.5rem 0;
+  padding: 16px 0 8px;
   min-width: 260px;
 }
 
@@ -39,6 +65,27 @@
 .estadistica-valor {
   font-size: 1.5rem;
   font-weight: 700;
-  color: #002f6b;
+  color: #012169;
   line-height: 1.2;
 }
+
+/* Botones */
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px 20px 16px;
+}
+
+.btn-cerrar {
+  color: #012169;
+  border-color: #012169;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+/* Pie */
+.dialogo-pie {
+  height: 20px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  margin: 0 -8px;
+}

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

@@ -1,4 +1,8 @@
-<h2 mat-dialog-title>Estadísticas del módulo</h2>
+<div class="dialogo-header">
+  <mat-icon class="dialogo-icono">bar_chart</mat-icon>
+  <span class="dialogo-titulo">Estadísticas del módulo</span>
+</div>
+
 <mat-dialog-content>
   <div class="contenedor">
     <div class="estadistica">
@@ -17,6 +21,9 @@
     </div>
   </div>
 </mat-dialog-content>
+
 <mat-dialog-actions>
-  <button mat-button (click)="Cerrar()">Cerrar</button>
+  <button mat-stroked-button class="btn-cerrar" (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, MatDialogTitle } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
@@ -8,7 +8,7 @@ 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, MatDialogTitle, MatButtonModule, MatIconModule, CommonModule]
+  imports: [MatDialogContent, MatDialogActions, MatButtonModule, MatIconModule, CommonModule]
 })
 export class EstadisticasDelModuloComponent {
   readonly dialogRef = inject(MatDialogRef<EstadisticasDelModuloComponent>);

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

@@ -211,14 +211,22 @@ mat-progress-bar {
     flex-direction: column;
     align-items: flex-start;
   }
-  
+
   .item-icono {
     margin-bottom: 12px;
   }
-  
+
   .item-fecha {
     margin-left: 0;
     margin-top: 12px;
     align-items: flex-start;
   }
+
+  .item-detalles {
+    max-width: 100%;
+  }
+
+  .detalle-browser {
+    max-width: 55vw;
+  }
 }

package/templates/frontend/src/app/Componentes/Nucleo/manual/manual.component.css

@@ -13,6 +13,10 @@
   align-items: start;
   min-height: 100%;
   font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+  margin-top: 24px;
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* ═══════════════════════════════════════════════════════════
@@ -94,6 +98,19 @@
   font-size: 0.78rem;
 }
 
+.toc-activo > .toc-enlace {
+  background: #dce9ff;
+  color: #002f6b;
+  font-weight: 700;
+  border-left: 3px solid #1976d2;
+}
+
+.toc-sublista {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
 .toc-descargar {
   display: block;
   width: calc(100% - 1rem);
@@ -119,10 +136,25 @@
    Área principal del artículo
    ══════════════════════════════════════════════════════════ */
 .manual-main {
-  padding: 1.5rem 2.5rem 4rem 2rem;
+  padding: 1.5rem 2.5rem 4rem 5rem;
   min-width: 0;
 }
 
+/* Título principal fijo */
+.manual-titulo-principal {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #012169;
+  margin: 0 0 1.5rem;
+  padding-bottom: 0.6rem;
+  border-bottom: 3px solid #2e6da4;
+}
+
+/* En móvil se muestra el externo y se oculta el de dentro del main */
+.manual-titulo-movil {
+  display: none;
+}
+
 /* ═══════════════════════════════════════════════════════════
    Estados: cargando / error
    ══════════════════════════════════════════════════════════ */
@@ -161,11 +193,12 @@
   scroll-margin-top: 1rem;
 }
 
-.manual-articulo h2 {
+.manual-articulo h2,
+:host ::ng-deep .manual-articulo h2 {
   font-size: 1.25rem;
   font-weight: 700;
   color: #002f6b;
-  margin: 2.5rem 0 0.75rem;
+  margin: 1rem 0 0.75rem;
   padding: 0.4rem 0.9rem;
   background: #e8f0fe;
   border-left: 4px solid #1976d2;
@@ -173,11 +206,12 @@
   scroll-margin-top: 1rem;
 }
 
-.manual-articulo h3 {
+.manual-articulo h3,
+:host ::ng-deep .manual-articulo h3 {
   font-size: 1.05rem;
   font-weight: 600;
   color: #0b4fce;
-  margin: 1.75rem 0 0.5rem;
+  margin: 3rem 0 0.5rem;
   scroll-margin-top: 1rem;
 }
 
@@ -190,8 +224,10 @@
 }
 
 /* Párrafos */
-.manual-articulo p {
-  margin: 0 0 0.9rem;
+.manual-articulo p,
+:host ::ng-deep .manual-articulo p {
+  margin: 0 0 1.2rem;
+  text-align: justify;
 }
 
 /* Listas */
@@ -319,7 +355,40 @@
 /* ═══════════════════════════════════════════════════════════
    Responsivo — pantallas pequeñas
    ══════════════════════════════════════════════════════════ */
+/* Botón volver arriba — solo móvil */
+.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);
+  }
+}
+
 @media (max-width: 768px) {
+  .manual-titulo-movil {
+    display: block;
+    margin-top: 16px;
+  }
+
+  .manual-main .manual-titulo-principal:not(.manual-titulo-movil) {
+    display: none;
+  }
+
   .manual-layout {
     grid-template-columns: 1fr;
   }

package/templates/frontend/src/app/Componentes/Nucleo/manual/manual.component.html

@@ -1,3 +1,5 @@
+<h1 class="manual-titulo-principal manual-titulo-movil">Manual de usuario</h1>
+
 <div class="manual-layout">
 
   <!-- ── Índice lateral ─────────────────────────────────── -->
@@ -5,11 +7,22 @@
     <p class="toc-titulo">Contenido</p>
     <nav>
       <ul class="toc-lista">
-        @for (entrada of toc; track entrada.id) {
-        <li [class]="'toc-nivel-' + entrada.nivel">
-          <button class="toc-enlace" (click)="irA(entrada.id)" [title]="entrada.texto">
-            {{ entrada.texto }}
+        @for (seccion of secciones; track seccion.id) {
+        <li class="toc-nivel-2" [class.toc-activo]="seccionActiva?.id === seccion.id">
+          <button class="toc-enlace" (click)="seleccionarSeccion(seccion)" (focus)="seleccionarSeccion(seccion)" [title]="seccion.titulo">
+            {{ seccion.titulo }}
           </button>
+          @if (seccionActiva?.id === seccion.id && seccion.subEntradas.length > 0) {
+          <ul class="toc-sublista">
+            @for (sub of seccion.subEntradas; track sub.id) {
+            <li class="toc-nivel-3">
+              <button class="toc-enlace" (click)="irA(sub.id)" [title]="sub.texto">
+                {{ sub.texto }}
+              </button>
+            </li>
+            }
+          </ul>
+          }
         </li>
         }
       </ul>
@@ -23,6 +36,7 @@
 
   <!-- ── Artículo principal ─────────────────────────────── -->
   <main class="manual-main" role="main" aria-label="Manual de usuario">
+    <h1 class="manual-titulo-principal">Manual de usuario</h1>
 
     @if (cargando) {
     <div class="manual-estado" role="status" aria-live="polite" aria-busy="true">
@@ -39,11 +53,15 @@
     </div>
     }
 
-    @if (!cargando && !error) {
-    <article #contenidoManual class="manual-articulo" [innerHTML]="contenido" (click)="manejarClicEnContenido($event)">
+    @if (!cargando && !error && seccionActiva) {
+    <article #contenidoManual class="manual-articulo" [innerHTML]="seccionActiva.html"
+      (click)="manejarClicEnContenido($event)">
     </article>
+    <button class="btn-volver-arriba" (click)="irAlInicio()" title="Volver arriba">
+      ↑ Volver arriba
+    </button>
     }
 
   </main>
 
-</div>
+</div>

package/templates/frontend/src/app/Componentes/Nucleo/manual/manual.component.ts

@@ -13,8 +13,25 @@ interface EntradaToc {
   id: string;
 }
 
+interface Seccion {
+  id: string;
+  titulo: string;
+  html: SafeHtml;
+  subEntradas: EntradaToc[];
+}
+
 const DIACRITICOS = new RegExp('[̀-ͯ]', 'g');
 
+function generarId(texto: string): string {
+  return texto
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(DIACRITICOS, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .trim()
+    .replace(/\s+/g, '-');
+}
+
 @Component({
   selector: 'app-manual',
   standalone: true,
@@ -23,18 +40,23 @@ const DIACRITICOS = new RegExp('[̀-ͯ]', 'g');
   styleUrl: './manual.component.css'
 })
 export class ManualComponent implements OnInit, OnDestroy {
-  public contenido: SafeHtml = '';
-  public toc: EntradaToc[] = [];
+  public secciones: Seccion[] = [];
+  public seccionActiva: Seccion | null = null;
   public cargando: boolean = true;
   public error: boolean = false;
   private markdownRaw: string = '';
   private _destroy$ = new Subject<void>();
   @ViewChild('contenidoManual') contenidoManualRef!: ElementRef;
 
-  constructor(private http: HttpClient, private sanitizer: DomSanitizer, private datosGlobalesService: DatosGlobalesService) { }
+  constructor(
+    private http: HttpClient,
+    private sanitizer: DomSanitizer,
+    private datosGlobalesService: DatosGlobalesService
+  ) {}
 
   ngOnInit(): void {
-    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDelManual`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+    this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDelManual`)
+      .pipe(takeUntil(this._destroy$)).subscribe({ error: () => {} });
 
     this.http.get('/Manual.md', { responseType: 'text' }).pipe(takeUntil(this._destroy$)).subscribe({
       next: (markdown) => {
@@ -44,21 +66,54 @@ export class ManualComponent implements OnInit, OnDestroy {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
 
+        // Asignar IDs a todos los headings
         doc.querySelectorAll('h1, h2, h3').forEach((heading) => {
           const texto = heading.textContent ?? '';
-          const id = texto
-            .toLowerCase()
-            .normalize('NFD')
-            .replace(DIACRITICOS, '')
-            .replace(/[^a-z0-9\s-]/g, '')
-            .trim()
-            .replace(/\s+/g, '-');
-          heading.id = id;
-          const nivel = parseInt(heading.tagName[1], 10);
-          this.toc.push({ nivel, texto, id });
+          heading.id = generarId(texto);
         });
 
-        this.contenido = this.sanitizer.bypassSecurityTrustHtml(doc.body.innerHTML);
+        // Dividir en secciones por h2
+        const secciones: Seccion[] = [];
+        let nodos: Node[] = [];
+        let tituloActual = '';
+        let idActual = '';
+        let subEntradasActuales: EntradaToc[] = [];
+
+        const guardarSeccion = () => {
+          if (!idActual) return;
+          const div = document.createElement('div');
+          nodos.forEach(n => div.appendChild(n.cloneNode(true)));
+          secciones.push({
+            id: idActual,
+            titulo: tituloActual,
+            html: this.sanitizer.bypassSecurityTrustHtml(div.innerHTML),
+            subEntradas: [...subEntradasActuales]
+          });
+        };
+
+        Array.from(doc.body.childNodes).forEach(node => {
+          const el = node as Element;
+          if (el.tagName === 'H2') {
+            guardarSeccion();
+            tituloActual = el.textContent ?? '';
+            idActual = generarId(tituloActual);
+            el.id = idActual;
+            nodos = [node];
+            subEntradasActuales = [];
+          } else if (el.tagName === 'H3' && idActual) {
+            const texto = el.textContent ?? '';
+            const id = generarId(texto);
+            el.id = id;
+            subEntradasActuales.push({ nivel: 3, texto, id });
+            nodos.push(node);
+          } else {
+            if (idActual) nodos.push(node);
+          }
+        });
+        guardarSeccion();
+
+        this.secciones = secciones;
+        this.seccionActiva = secciones[0] ?? null;
         this.cargando = false;
       },
       error: () => {
@@ -73,8 +128,21 @@ export class ManualComponent implements OnInit, OnDestroy {
     this._destroy$.complete();
   }
 
+  seleccionarSeccion(seccion: Seccion): void {
+    this.seccionActiva = seccion;
+  }
+
   irA(id: string): void {
-    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    // Buscar la sección que contiene ese id
+    const seccionContenedora = this.secciones.find(
+      s => s.id === id || s.subEntradas.some(e => e.id === id)
+    );
+    if (seccionContenedora) {
+      this.seccionActiva = seccionContenedora;
+    }
+    setTimeout(() => {
+      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, 50);
   }
 
   descargar(): void {
@@ -87,6 +155,15 @@ export class ManualComponent implements OnInit, OnDestroy {
     URL.revokeObjectURL(url);
   }
 
+  irAlInicio(): void {
+    const contenedor = document.querySelector('.zona-scrollable');
+    if (contenedor) {
+      contenedor.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }
+
   manejarClicEnContenido(event: MouseEvent): void {
     const anchor = (event.target as Element).closest('a');
     if (!anchor) return;

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

@@ -1,5 +1,73 @@
+/* Header */
+.dialogo-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  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 {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.dialogo-titulo {
+  font-size: 1.1rem;
+  font-weight: 600;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: 0.2px;
+}
+
+/* Mensaje */
+.dialogo-mensaje {
+  margin: 20px 0 12px;
+  font-size: 0.95rem;
+  color: #333;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5;
+}
+
+/* Campo de comentario */
 .mensaje {
-  margin-top: 1%;
+  width: 100%;
+  margin-top: 4px;
+}
+
+/* Botones */
+mat-dialog-actions {
   display: flex;
-  justify-content: center;
-}
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 8px 20px 16px;
+}
+
+.btn-cancelar {
+  color: #012169;
+  border-color: #012169;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+.btn-aceptar {
+  background-color: #012169;
+  color: white;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+.btn-aceptar:disabled {
+  background-color: #a0b0c4;
+  color: white;
+}
+
+/* Pie */
+.dialogo-pie {
+  height: 20px;
+  background: linear-gradient(90deg, rgba(1, 33, 105, 1) 0%, rgba(63, 97, 171, 1) 100%);
+  margin: 0 -8px;
+}