utn-cli 2.0.96 → 2.0.98

package/package.json

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

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

@@ -825,8 +825,10 @@ class Miscelaneo {
         `a`.`Version`, `a`.`FechaDePublicacion`, `a`.`AcuerdoDeNivelDeServicio`, `a`.`DiccionarioDeDatos`, `a`.`Repositorios`,\
         `a`.`EnlaceDelVideo`,`a`.`EnlaceDelManual`\
         , `a`.`Estado`, REGEXP_SUBSTR(`a`.`Repositorios`, '[^,]*front[^,]*') AS `Frontend`\
+        , `c`.`Etiqueta`, `c`.`ColorDeLaEtiqueta`\
       FROM `SIGU`.`SIGU_ModulosV2` `a`\
         JOIN `SIGU`.`SIGU_PermisosV2` `b` ON (`a`.`Nombre` = `b`.`Modulo`)\
+        LEFT JOIN `SIGU`.`SIGU_ModulosV2InformacionExtra` `c` ON (`a`.`Nombre` = `c`.`Modulo`)\
       WHERE `a`.`Estado` = 'Activo' AND `a`.`Padre` = ? AND `b`.`PermisoId` IN (?)\
       ORDER BY FIELD(a.Nombre, " + ModulosFavoritos + ") DESC, a.Nombre", [Padre, Permisos.map(p => p.PermisoId)]);
     return Modulos.map((linea) => {

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

@@ -60,6 +60,48 @@ class ReporteHTML {
   }
 
   GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = [], MostrarEncabezado = true) {
+    //Ejemplo ElementosParaLaTabla:
+    // [
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "ABC123",
+    //     "Descripción": "Laptop Dell",
+    //     "Código de activo": "ACT-001",
+    //     "N° de serie": "SN123456",
+    //     Marca: "Dell",
+    //     Modelo: "Latitude 5420",
+    //     Estado: "Bueno",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   },
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "XYZ789",
+    //     "Descripción": "Monitor Samsung",
+    //     "Código de activo": "ACT-002",
+    //     "N° de serie": "SN654321",
+    //     Marca: "Samsung",
+    //     Modelo: "S24F350",
+    //     Estado: "Excelente",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   }
+    // ]
+    // Espera un Array 
+    //Ejemplo ParametrosExcluidos:
+    //const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
+    //Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+
+    //Ejemplo ParametrosExtra:
+    //const ParametrosExtra = ['Toma física'];
+    //En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
+
     if (!ElementosParaLaTabla?.length) return '<p>No hay datos para mostrar.</p>';
 
     const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
@@ -186,6 +228,48 @@ class ReporteHTML {
   }
 
   GenerarReporteHTMLTablas(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = []) {
+    //Ejemplo ElementosParaLaTabla:
+    // [
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "ABC123",
+    //     "Descripción": "Laptop Dell",
+    //     "Código de activo": "ACT-001",
+    //     "N° de serie": "SN123456",
+    //     Marca: "Dell",
+    //     Modelo: "Latitude 5420",
+    //     Estado: "Bueno",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   },
+    //   {
+    //     "Fecha del traslado": "16-03-2026",
+    //     "Justificacion": "Traslado por mantenimiento",
+    //     "Dependencia que entrega": "Juan Pérez",
+    //     "Dependencia que recibe": "María Gómez",
+    //     Placa: "XYZ789",
+    //     "Descripción": "Monitor Samsung",
+    //     "Código de activo": "ACT-002",
+    //     "N° de serie": "SN654321",
+    //     Marca: "Samsung",
+    //     Modelo: "S24F350",
+    //     Estado: "Excelente",
+    //     IdentificadorOrigen: 101,
+    //     IdentificadorDestino: 202
+    //   }
+    // ]
+    // Espera un Array 
+    //Ejemplo ParametrosExcluidos:
+    //const ParametrosExcluidos = ['IdentificadorOrigen', 'Justificacion', 'IdentificadorDestino'];
+    //Valores devueltos por el QUERY que no sean necesarios mostrar en la tabla.
+
+    //Ejemplo ParametrosExtra:
+    //const ParametrosExtra = ['Toma física'];
+    //En caso de necesitar un espacio extra en la tabla que no se encuentra en la lista principal.
+
     if (!ElementosParaLaTabla?.length) return '';
 
     const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
@@ -225,6 +309,37 @@ class ReporteHTML {
     </table>`;
   }
 
+  GenerarReporteHTMLDatosEnAgrupacion(titulo, valores) {
+    // Ejemplo titulo:
+    // "Residencia: Atenas 123"
+    // Espera un String. Puede contener texto simple o etiquetas HTML básicas.
+
+    // Ejemplo valores:
+    // {
+    //   "Descripción": "Residencias principales del recinto",
+    //   "Total de habitaciones disponibles": 3,
+    //   "Estado": "Activo"
+    // }
+    // Espera un Objeto (JSON plano) donde cada par llave:valor será una línea en la agrupación.
+    // IMPORTANTE: Se recomienda construir este objeto a mano mapeando solo los datos necesarios
+    // de la base de datos, para evitar imprimir por error arreglos u objetos complejos anidados.
+
+    let htmlTarjeta = `
+      <div style="margin-bottom: 25px; padding: 15px; background-color: #f4f6f9; border-left: 4px solid #002f6b; border-radius: 4px;">
+        <h3 style="margin-top: 0; margin-bottom: 8px; color: #002f6b; font-size: 16px; font-weight: bold;">${titulo}</h3>
+    `;
+
+    const llaves = Object.keys(valores);
+    llaves.forEach((llave, index) => {
+      const margenInferior = (index === llaves.length - 1) ? '0' : '6px';
+      const valor = valores[llave] ?? '-';
+      htmlTarjeta += `<p style="margin: 0 0 ${margenInferior} 0; font-size: 13px; color: #444; line-height: 1.4;"><strong>${llave}:</strong> ${valor}</p>`;
+    });
+
+    htmlTarjeta += `</div>`;
+    return htmlTarjeta;
+  }
+
   GenerarReporteHTMLPie() {
     return `
     </body>
@@ -232,4 +347,4 @@ class ReporteHTML {
   }
 }
 
-module.exports = new ReporteHTML();
+module.exports = new ReporteHTML();

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

@@ -460,6 +460,86 @@ class ReportePDF {
     }
   }
 
+  generarDatosEnAgrupacion(doc, titulo, valores) {
+    if (!valores || typeof valores !== 'object') return;
+
+    const margin = this.config.margin;
+    const pageWidth = doc.page.width;
+    const availableWidth = pageWidth - 2 * margin;
+
+    // Medidas
+    const padding = 15;
+    const gapTitulo = 8;
+    const gapLinea = 6;
+    const borderLeftWidth = 4;
+
+    // Calcular el alto necesario sin alterar doc.y ni doc.x aún
+    doc.fontSize(11).font(this.config.fuenteNegrita);
+    const tituloHeight = doc.heightOfString(titulo || '', { width: availableWidth - padding * 2 });
+
+    let contentHeight = 0;
+    const llaves = Object.keys(valores);
+
+    // Configurar fuente para medir contenido
+    doc.fontSize(this.config.fontSizeCuerpo);
+
+    llaves.forEach((llave, index) => {
+      const valor = valores[llave] ?? '-';
+      const text = `${llave}: ${valor}`;
+
+      // Se utiliza la misma fuente para calcular la altura (la negrita no suele cambiar el alto de la línea en Helvetica)
+      doc.font(this.config.fuenteNegrita);
+      const height = doc.heightOfString(text, { width: availableWidth - padding * 2 });
+
+      const margenInferior = (index === llaves.length - 1) ? 0 : gapLinea;
+      contentHeight += height + margenInferior;
+    });
+
+    const totalHeight = padding + tituloHeight + gapTitulo + contentHeight + padding;
+
+    // Revisar si cabe en la página actual
+    if (doc.y + totalHeight > doc.page.height - doc.page.margins.bottom - 20) {
+      doc.addPage();
+    }
+
+    const currentY = doc.y;
+
+    // Fondo contenedor (#f4f6f9)
+    doc.save();
+    doc.rect(margin, currentY, availableWidth, totalHeight).fill("#f4f6f9");
+    // Borde izquierdo (#002f6b)
+    doc.rect(margin, currentY, borderLeftWidth, totalHeight).fill("#002f6b");
+    doc.restore();
+
+    let textY = currentY + padding;
+    const textX = margin + padding;
+    const textWidth = availableWidth - padding * 2;
+
+    // Dibujar Título
+    doc.fillColor("#002f6b").fontSize(11).font(this.config.fuenteNegrita);
+    doc.text(titulo || '', textX, textY, { width: textWidth });
+    textY = doc.y + gapTitulo;
+
+    // Dibujar Valores
+    doc.fillColor("#444444").fontSize(this.config.fontSizeCuerpo);
+
+    llaves.forEach((llave, index) => {
+      const valor = valores[llave] ?? '-';
+
+      doc.font(this.config.fuenteNegrita);
+      doc.text(`${llave}: `, textX, textY, { continued: true, width: textWidth });
+
+      doc.font(this.config.fuenteBase);
+      doc.text(`${valor}`, { continued: false });
+
+      const margenInferior = (index === llaves.length - 1) ? 0 : gapLinea;
+      textY = doc.y + margenInferior;
+    });
+
+    // Mover cursor abajo dejando margen inferior
+    doc.y = currentY + totalHeight + 15;
+  }
+
   generarTabla(doc, datos, metadatos) {
     if (!datos || datos.length === 0) return;
 

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

@@ -1,29 +1,41 @@
-.contenedor { /* This is the outermost div in graficos.component.html */
+.contenedor {
+  /* This is the outermost div in graficos.component.html */
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
   width: 100%;
-  /* Remove height: 100% from here */
+  height: 100%;
 }
 
-.grafico { /* This is the div containing the h3 and canvas */
+.grafico {
+  /* This is the div containing the h3 and canvas */
   position: relative;
-  width: 100%; /* Take 100% of parent's width */
-  height: 100%; /* Allow height to stretch based on parent */
-  max-height: 50vh; /* Further reduce max-height to 50% of viewport height for increased vertical responsiveness */
+  width: 100%;
+  /* Take 100% of parent's width */
+  height: 100%;
+  /* Allow height to stretch based on parent */
+  max-height: 50vh;
+  /* Further reduce max-height to 50% of viewport height for increased vertical responsiveness */
   padding: 0.5rem;
   box-sizing: border-box;
-  overflow: hidden; /* Prevent content from spilling outside */
-}
-
-.grafico canvas {
-  width: 100% !important;
-  height: 100% !important;
-  display: block; /* Remove any default inline spacing */
+  display: flex;
+  flex-direction: column;
 }
 
 h3 {
   text-align: center;
   margin-bottom: 0.5rem;
+  flex-shrink: 0;
+}
+
+.canvas-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.grafico canvas {
+  display: block;
 }

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

@@ -1,45 +1,42 @@
 <div class="contenedor">
 
   @if(sinDatosReales) {
-    <div style="text-align:center; padding: 20px;">
-      <p><b>No se encontraron datos</b></p>
-    </div>
+  <div style="text-align:center; padding: 20px;">
+    <p><b>No se encontraron datos</b></p>
+  </div>
   } @else {
 
-    @if(Datos && TipoDeGrafico==='Barras') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="barChartData"
-          [options]="barChartOptions"
-          [type]="'bar'"
-          [plugins]="[pluginMostrarValores]">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Barras') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="barChartData" [options]="barChartOptions" [type]="'bar'"
+        [plugins]="[pluginMostrarValores]">
+      </canvas>
+    </div>
+  </div>
+  }
 
-    @if(Datos && TipoDeGrafico==='Pie') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="pieChartData"
-          [options]="pieChartOptions"
-          [type]="'pie'">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Pie') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="pieChartData" [options]="pieChartOptions" [type]="'pie'">
+      </canvas>
+    </div>
+  </div>
+  }
 
-    @if(Datos && TipoDeGrafico==='Línea') {
-      <div class="grafico">
-        <h3>{{Titulo}}</h3>
-        <canvas baseChart
-          [data]="lineChartData"
-          [options]="lineChartOptions"
-          [type]="'line'">
-        </canvas>
-      </div>
-    }
+  @if(Datos && TipoDeGrafico==='Línea') {
+  <div class="grafico">
+    <h3>{{Titulo}}</h3>
+    <div class="canvas-container">
+      <canvas baseChart [data]="lineChartData" [options]="lineChartOptions" [type]="'line'">
+      </canvas>
+    </div>
+  </div>
+  }
 
   }
 
-</div>
+</div>

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

@@ -83,7 +83,12 @@ export class GraficosComponent {
   // =========================
   public pieChartOptions: ChartConfiguration<'pie'>['options'] = {
     responsive: true,
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        bottom: 20
+      }
+    }
   };
 
   public pieChartData: ChartData<'pie', number[], string | string[]> = {

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

@@ -1,93 +1,154 @@
-.esquina {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.pin-icon {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font-size: 24px;
-  color: #888;
-  cursor: pointer;
-  z-index: 2;
-  transition: color 0.3s;
-}
-
-.pin-icon.pinned {
-  color: #222;
+:host {
+  display: block;
 }
 
 .modulo-card {
   position: relative;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 16px;
   width: 300px;
-  height: 150px;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
+  /* Reduced from 380px */
+  height: 220px;
+  border-radius: 25px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  border: 1px solid #0B4FCE;
+  /* Added border as requested */
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   margin: 10px;
-  cursor: pointer;
+  /* Reduced to previous value */
 }
 
 .modulo-card:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
-  transform: scale(1.01);
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }
 
-.modulo-header {
+.modulo-card-header {
+  height: 105px;
+  /* Increased to reach the bottom of the icon container */
+  background-color: #f2f2f2;
   display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
+  justify-content: space-between;
+  align-items: flex-start;
+  /* Align to top instead of center */
+  padding: 15px;
+  position: relative;
 }
 
-.modulo-icon {
-  width: 48px;
-  height: 48px;
+.modulo-tipo {
+  color: #3e5a7a;
+  font-size: 1.2rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+  margin-top: 5px;
+  /* Slight adjustment for alignment */
 }
 
-.modulo-nombre {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: bold;
+.pin-container {
+  width: 40px;
+  height: 40px;
+  background-color: #e6e6e6;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+  transition: all 0.3s ease;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.pin-container.pinned {
   color: #333;
+  background-color: #ddd;
 }
 
-.modulo-tipo {
-  font-size: 1.3rem;
-  font-weight: 500;
+.pin-icon {
+  font-size: 24px;
+  transform: rotate(30deg);
 }
 
-.tipo-área {
-  color: #0077cc;
+.modulo-icon-wrapper {
+  position: absolute;
+  top: 65px;
+  /* Center remains at 65px, so bottom is around 102.5px */
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
 }
 
-.tipo-proceso {
-  color: #2e7d32;
+.modulo-icon-container {
+  width: 75px;
+  height: 75px;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  padding: 10px;
 }
 
-.tipo-servicio {
-  color: #6a1b9a;
+.modulo-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.modulo-icon-placeholder {
+  width: 40px;
+  height: 40px;
+  background-color: #eee;
+  border-radius: 50%;
+}
+
+.modulo-card-body {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 20px;
+  /* Reduced top padding as it doesn't need to clear the overlapping icon anymore */
+  text-align: center;
+  position: relative;
 }
 
 .modulo-descripcion {
-  font-size: 1.1rem;
-  color: #555;
-  margin-bottom: 10px;
+  color: #1d3a5f;
+  font-size: 1.4rem;
+  /* Reduced from 1.6rem */
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 }
 
-.modulo-info {
-  font-size: 0.85rem;
-  color: #777;
+.esquina {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
+  pointer-events: none;
 }
+
+.cintillo-etiqueta {
+  position: absolute;
+  bottom: 20px;
+  right: -42px;
+  width: 170px;
+  /* Wider to accommodate longer text */
+  padding: 5px 0;
+  text-align: center;
+  color: white;
+  font-weight: 800;
+  font-size: 0.75rem;
+  /* Further reduced to ensure 'ACTUALIZADO' fits completely */
+  letter-spacing: 0.5px;
+  transform: rotate(-45deg);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 5;
+}

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

@@ -1,21 +1,30 @@
-<div class="modulo-card" (click)="onClick()" [ngStyle]="{ 'background-color': modulo.Color }">
-  <span class="material-icons pin-icon" [ngClass]="{ 'pinned': estaEnFavoritos() }" (click)="alternarFavorito($event)">
-    push_pin
-  </span>
-  <div class="modulo-header">
-    @if(modulo.Icono) {
-    <img src="{{ modulo.Icono }}" class="modulo-icon" />
-    } @else {
-    <div class="modulo-icon"></div>
-    }
-    <div>
-      <!-- <h2 class="modulo-nombre">{{ modulo.Nombre }}</h2> -->
-      <span class="modulo-tipo tipo-{{ modulo.Tipo.toLowerCase() }}">{{ modulo.Tipo }}</span>
+<div class="modulo-card" (click)="onClick()">
+  <div class="modulo-card-header">
+    <span class="modulo-tipo">{{ modulo.Tipo | uppercase }}</span>
+    <div class="pin-container" (click)="alternarFavorito($event)" [ngClass]="{ 'pinned': estaEnFavoritos() }">
+      <span class="material-icons pin-icon">
+        push_pin
+      </span>
+    </div>
+  </div>
+
+  @if(modulo.Icono) {
+  <div class="modulo-icon-wrapper">
+    <div class="modulo-icon-container">
+      <img src="{{ modulo.Icono }}" class="modulo-icon" alt="{{ modulo.Descripcion }}" />
     </div>
   </div>
-  <p class="modulo-descripcion">{{ modulo.Descripcion }}</p>
-  <div class="modulo-info"></div>
-  @if(modulo.Tipo === 'Servicio') {
-  <div class="esquina"></div>
   }
+
+  <div class="modulo-card-body" [ngStyle]="{ 'background-color': modulo.Color }">
+    <p class="modulo-descripcion">{{ modulo.Descripcion }}</p>
+    @if(modulo.Tipo === 'Servicio') {
+    <!-- <div class="esquina"></div> -->
+    }
+    @if(modulo.Etiqueta) {
+    <div class="cintillo-etiqueta" [ngStyle]="{ 'background-color': modulo.ColorDeLaEtiqueta || '#4a90e2' }">
+      {{ modulo.Etiqueta | uppercase }}
+    </div>
+    }
+  </div>
 </div>

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

@@ -43,6 +43,10 @@
   border-radius: 50%;
 }
 
+.ColorBlanco {
+  color: white;
+}
+
 .botonDeNavegacion:hover {
   background-color: rgba(25, 118, 210, 0.1);
   transform: scale(1.1);
@@ -93,6 +97,7 @@
   font-size: 18px;
   background-color: #002f6b;
   color: white;
+  display: flex;
 }
 
 .encabezado {
@@ -156,6 +161,7 @@
 }
 
 .zona-scrollable {
+  margin-top: 3px;
   flex-grow: 1;
   overflow-y: auto;
   display: flex;

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

@@ -7,41 +7,62 @@
     </div>
     <div class="pie-col derecha">
       @if(TienePermiso) {
-      <button class="botonDeNavegacion" matTooltip="Salir" (click)="Salir()">
+      <button class="botonDeNavegacion" matTooltip="Salir" title="Salir" (click)="Salir()">
         <mat-icon>logout</mat-icon>
       </button>
-      <button class="botonDeNavegacion" [matTooltip]="NombreUsuario || 'Perfil'" (click)="irAPerfil()">
+      <button class="botonDeNavegacion" [matTooltip]="NombreUsuario || 'Perfil'" [title]="NombreUsuario || 'Perfil'"
+        (click)="irAPerfil()">
         <mat-icon>person</mat-icon>
       </button>
       } @else {
-      <button class="botonDeNavegacion" matTooltip="Entrar" (click)="Entrar()">
+      <button class="botonDeNavegacion" matTooltip="Entrar" title="Entrar" (click)="Entrar()">
         <mat-icon>login</mat-icon>
       </button>
       }
     </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">
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Ir atrás" title="Ir atrás" (click)="irAtras()">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <button class="botonDeNavegacion ColorBlanco" matTooltip="Ir al menú del módulo" title="Ir al menú del módulo"
+        (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>
+    </div>
+  </div>
+  }
   <div class="zona-scrollable">
-    @if(TienePermiso){
-    <div class="titulo">{{ Titulo }}</div>
-    }
     <div [ngClass]="claseDelContenedor">
-      @if(TienePermiso) {
+      <!-- @if(TienePermiso) {
       <div class="botonesDeNavegacion">
-        <button class="botonDeNavegacion" matTooltip="Ir atrás" (click)="irAtras()">
+        <button class="botonDeNavegacion" matTooltip="Ir atrás" title="Ir atrás" (click)="irAtras()">
           <mat-icon>arrow_back</mat-icon>
         </button>
-        <button class="botonDeNavegacion" matTooltip="Ir al menú del módulo" (click)="irAlMenuDeModulo()">
+        <button class="botonDeNavegacion" matTooltip="Ir al menú del módulo" title="Ir al menú del módulo"
+          (click)="irAlMenuDeModulo()">
           <mat-icon>menu</mat-icon>
-        </button>
-        <!-- <button class="botonDeNavegacion" matTooltip="Ir al móudulo padre" (click)="irAlModuloPadre()">
+        </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" matTooltip="Ir al inicio" (click)="irAlInicio()">
+      <!-- <button class="botonDeNavegacion" matTooltip="Ir al inicio" title="Ir al inicio" (click)="irAlInicio()">
           <mat-icon>home</mat-icon>
         </button>
       </div>
-      }
+      } -->
       <div class="contenido">
         @if(TienePermiso){
         <div class="cabecera2">
@@ -79,7 +100,8 @@
       </div>
     </div>
     <div class="pie-col derecha">
-      <button class="botonDeNavegacion" matTooltip="Aplicaciones" [matMenuTriggerFor]="menuAplicaciones">
+      <button class="botonDeNavegacion" matTooltip="Aplicaciones" title="Aplicaciones"
+        [matMenuTriggerFor]="menuAplicaciones">
         <mat-icon>keyboard_arrow_up</mat-icon>
       </button>
 
@@ -97,7 +119,7 @@
       </mat-menu>
 
       @if(TienePermiso) {
-      <button class="botonDeNavegacion" matTooltip="Mensajes" (click)="irAMensajes()">
+      <button class="botonDeNavegacion" matTooltip="Mensajes" title="Mensajes" (click)="irAMensajes()">
         @if (Mensajes.length > 0) {
         <mat-icon>mark_email_unread</mat-icon>
         } @else {
@@ -106,16 +128,16 @@
       </button>
       }
       @if(EnlaceDelVideo !== '-') {
-      <button class="botonDeNavegacion" matTooltip="Vídeo" (click)="irAVideo()">
+      <button class="botonDeNavegacion" matTooltip="Vídeo" title="Vídeo" (click)="irAVideo()">
         <mat-icon>live_tv</mat-icon>
       </button>
       }
       @if(EnlaceDelManual !== '-') {
-      <button class="botonDeNavegacion" matTooltip="Ayuda" (click)="irAAyuda()">
+      <button class="botonDeNavegacion" matTooltip="Ayuda" title="Ayuda" (click)="irAAyuda()">
         <mat-icon>help</mat-icon>
       </button>
       }
-      <button class="botonDeNavegacion" matTooltip="Reporte" (click)="irASoporte()">
+      <button class="botonDeNavegacion" matTooltip="Reporte" title="Reporte" (click)="irASoporte()">
         <mat-icon>support_agent</mat-icon>
       </button>
     </div>

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

@@ -7,10 +7,10 @@
   width: 100%;
 }
 
-/* Forzamos 4 columnas calculando el espacio disponible */
+/* Pantallas grandes: se adaptan dinámicamente, máximo 300px, caben tantas como sea posible */
 .contenido>div[cdkDrag] {
-  width: calc(25% - 12px);
-  /* 25% menos una parte del gap (16px * 3 / 4) */
+  flex: 1 1 300px;
+  max-width: 300px;
   box-sizing: border-box;
 }
 
@@ -43,12 +43,16 @@
 /* Responsividad: 2 columnas en tablets, 1 en móviles */
 @media (max-width: 1200px) {
   .contenido>div[cdkDrag] {
+    flex: none;
+    max-width: none;
     width: calc(50% - 8px);
   }
 }
 
 @media (max-width: 600px) {
   .contenido>div[cdkDrag] {
+    flex: none;
+    max-width: none;
     width: 100%;
   }
 }

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

@@ -7,6 +7,8 @@ import { TarjetaPersonalizadaComponent } from "../../Componentes/Nucleo/tarjeta-
 import { HttpClient } from "@angular/common/http";
 import { DatosGlobalesService } from '../../datos-globales.service';
 import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { forkJoin, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 interface BaseTarjetaConfig {
   type: 'single' | 'multiple' | 'report' | 'custom';
@@ -195,31 +197,63 @@ export class ContenedorPrincipalComponent implements OnInit {
       }
     ];
 
-    // // 2. Check for extra permissions (Personas card)
-    // this.http.get(`${this.datosGlobalesService.ObtenerURL()}Personas/PermisoExtra`).subscribe({
-    //   next: (datos: any) => {
-    //     if (datos.body) {
-    //       const personasCard: TarjetaMultipleConfig = {
-    //         type: 'multiple',
-    //         position: 25,
-    //         titulo: 'Personas',
-    //         descripcion: 'Módulo para el mantenimiento de los datos relacionados con personas',
-    //         rutas: [
-    //           { nombre: 'Personas', ruta: 'tablaPersonas' },
-    //           { nombre: 'Correos', ruta: 'tablaCorreosPersonas' },
-    //           { nombre: 'Cuentas bancarias', ruta: 'tablaCuentasPersonas' },
-    //           { nombre: 'Teléfonos', ruta: 'tablaTelefonosPersonas' },
-    //           { nombre: 'Ubicación', ruta: 'tablaUbicacionPersona' },
-    //         ]
-    //       };
-    //       baseTarjetas.push(personasCard);
-    //     }
-    //   },
-    //   error: (error) => {
-    //     console.error('Problemas al intentar obtener los datos: ', error);
-    //     this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
-    //   },
-    // });
+    forkJoin({
+      permisoExtra: this.http.get(`${this.datosGlobalesService.ObtenerURL()}Personas/PermisoExtra`).pipe(
+        catchError(error => {
+          console.error('Problemas al intentar obtener los datos de PermisoExtra: ', error);
+          return of({ body: null });
+        })
+      ),
+      // configuracion: this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).pipe(
+      //   catchError(error => {
+      //     console.error('Error al obtener configuración de tarjetas:', error);
+      //     return of({ body: [] });
+      //   })
+      // )
+    }).subscribe({
+      next: (results: any) => {
+        // // 2. Handle extra permissions
+        // if (results.permisoExtra && results.permisoExtra.body) {
+        //   const personasCard: TarjetaMultipleConfig = {
+        //     type: 'multiple',
+        //     position: 25,
+        //     titulo: 'Personas',
+        //     descripcion: 'Módulo para el mantenimiento de los datos relacionados con personas',
+        //     rutas: [
+        //       { nombre: 'Personas', ruta: 'tablaPersonas' },
+        //       { nombre: 'Correos', ruta: 'tablaCorreosPersonas' },
+        //       { nombre: 'Cuentas bancarias', ruta: 'tablaCuentasPersonas' },
+        //       { nombre: 'Teléfonos', ruta: 'tablaTelefonosPersonas' },
+        //       { nombre: 'Ubicación', ruta: 'tablaUbicacionPersona' },
+        //     ]
+        //   };
+        //   if (!baseTarjetas.find(t => t.titulo === 'Personas')) {
+        //     baseTarjetas.push(personasCard);
+        //   }
+        // }
+
+        // 3. Apply saved configurations
+        if (results.configuracion && results.configuracion.body && results.configuracion.body.length > 0) {
+          const savedConfigs = results.configuracion.body;
+          baseTarjetas.forEach(tarjeta => {
+            const config = savedConfigs.find((c: any) => c.Titulo === tarjeta.titulo);
+            if (config) {
+              tarjeta.position = config.Posicion;
+              if (config.ColorDeBorde) {
+                tarjeta.ColorDeBorde = config.ColorDeBorde;
+              }
+            }
+          });
+        }
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+      },
+      error: (error) => {
+        console.error('Error crítico en el proceso de inicialización:', error);
+        this.tarjetas = baseTarjetas.sort((a, b) => a.position - b.position);
+      }
+    });
+  }
+
     // 3. Load user-specific positions from backend
     this.http.get(`${this.datosGlobalesService.ObtenerURL()}ConfiguracionDeTarjetas/obtener`).subscribe({
       next: (res: any) => {

package/templates/frontend/src/app/Paginas/gestion-de-reportes/gestion-de-reportes.component.css

@@ -7,10 +7,10 @@
   width: 100%;
 }
 
-/* Forzamos 4 columnas calculando el espacio disponible */
+/* Pantallas grandes: se adaptan dinámicamente, máximo 300px, caben tantas como sea posible */
 .contenido>* {
-  width: calc(25% - 12px);
-  /* 25% menos una parte del gap (16px * 3 / 4) */
+  flex: 1 1 300px;
+  max-width: 300px;
   box-sizing: border-box;
 }
 
@@ -43,12 +43,16 @@
 /* Responsividad: 2 columnas en tablets, 1 en móviles */
 @media (max-width: 1200px) {
   .contenido>* {
+    flex: none;
+    max-width: none;
     width: calc(50% - 8px);
   }
 }
 
 @media (max-width: 600px) {
   .contenido>* {
+    flex: none;
+    max-width: none;
     width: 100%;
   }
 }

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.css

@@ -4,10 +4,53 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255,255,255,0.8);
+  background: rgba(255, 255, 255, 0.8);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 2000;
 }
+
+.contenedor {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 64px);
+  overflow: hidden;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.grid-graficos {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1rem 2rem 2rem 2rem;
+  box-sizing: border-box;
+  width: 100%;
+  gap: 3rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.grid-graficos app-graficos {
+  width: 100%;
+  max-width: 800px;
+  height: 400px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 768px) {
+  .contenedor {
+    height: 100vh;
+  }
+
+  .grid-graficos {
+    padding: 1rem;
+    gap: 2rem;
+  }
+}

package/templates/frontend/src/app/Paginas/gestion-graficos/gestion-graficos.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="contenedor">
   <!-- <h3>Gráficos sobre módulos del SIGU</h3> -->
   @if(cargando) {
   <div class="cargando-overlay">
@@ -6,8 +6,10 @@
     <p>Procesando, por favor espere...</p>
   </div>
   } @else {
-  <app-graficos [TipoDeGrafico]="'Pie'" [Datos]="datosParaElGraficoPie" [Titulo]="'Módulos desarrollados en SIGU'" />
-  <app-graficos [TipoDeGrafico]="'Barras'" [Datos]="datosParaElGraficoBarras"
-    [Titulo]="'Total de nacimientos por mes'" />
+  <div class="grid-graficos">
+    <app-graficos [TipoDeGrafico]="'Pie'" [Datos]="datosParaElGraficoPie" [Titulo]="'Módulos desarrollados en SIGU'" />
+    <app-graficos [TipoDeGrafico]="'Barras'" [Datos]="datosParaElGraficoBarras"
+      [Titulo]="'Total de nacimientos por mes'" />
+  </div>
   }
 </div>

package/templates/frontend/src/index.html

@@ -18,6 +18,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <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">
 </head>
 
 <body>