utn-cli 2.0.88 → 2.0.90

package/package.json

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

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

@@ -1,4 +1,4 @@
-const { ejecutarConsulta, ejecutarConsultaSIGU, ejecutarConsultaCumulo, crearObjetoConexionSIGU } = require('./db.js');
+const { ejecutarConsulta, ejecutarConsultaSIGU, crearObjetoConexionSIGU } = require('./db.js');
 const ManejadorDeErrores = require('./ManejadorDeErrores.js');
 const InformacionDelModulo = require('../InformacionDelModulo.js');
 const { envioDeCorreo } = require('./EnvioDeCorreos.js');
@@ -103,325 +103,35 @@ class Miscelaneo {
     }
   }
 
-  //REPORTE INICIA AQUÍ
-
   async generarFirmaHTML(Identificador, FechaDeLaFirma) {
-    const [persona] = await ejecutarConsultaSIGU("SELECT Identificacion, CONCAT(Nombre, ' ', PrimerApellido, ' ', SegundoApellido) AS NombreCompleto FROM SIGU.SIGU_Personas WHERE Identificador = ?", [Identificador]);
-
-    if (!persona) return '';
-
-    const nombre = persona.NombreCompleto;
-    const identificacion = persona.Identificacion;
-    const instancia = await (async () => {
-      try {
-        const result = await ejecutarConsultaSIGU(`
-          SELECT 
-            CASE 
-              WHEN i.TipoDeResponsabilidad = 'Ninguna' THEN sup.Nombre
-              ELSE i.Nombre
-            END AS Nombre
-          FROM SIGU.EstructuraOrganizacional_Instancias i
-          LEFT JOIN SIGU.EstructuraOrganizacional_Instancias sup
-            ON i.IdentificadorDeInstanciaSuperior = sup.IdentificadorDeInstancia
-          WHERE i.Identificador = ?
-        `, [Identificador]);
-        return result?.[0]?.Nombre || 'N/A';
-      } catch {
-        return 'N/A';
-      }
-    })();
-
-    return `   <div style="
-        font-size: 9px;
-        border: 1px solid #eee;
-        padding: 6px;
-        display: inline-flex;
-        align-items: center;
-        background-color: #fcfcfc;
-        gap: 8px;
-      ">
-        <div class="logo" style="display:flex; align-items:center;">
-          <img src="https://storage.sigu.utn.ac.cr/images/cards/LogoUTN.svg"
-               alt="Logo UTN"
-               style="height:25px;">
-        </div>
-        <div style="
-          width: 1px;
-          height: 50px;
-          background-color: #ccc;
-        "></div>
-<div style="text-align: left;">
-      <strong>FIRMADO DIGITALMENTE POR:</strong><br>
-      ${nombre}<br>
-      Cédula: ${identificacion}<br>
-      Instancia: ${instancia}<br>
-      Fecha: ${FechaDeLaFirma}
- </div>
-
-    </div>`;
+    const ReporteHTML = require('./ReporteHTML.js');
+    return await ReporteHTML.generarFirmaHTML(Identificador, FechaDeLaFirma);
   }
 
   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 de objetos.
-    //
-    // 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.
-    //
-    // Ejemplo MostrarEncabezado:
-    // MostrarEncabezado = true  (Valor por defecto, muestra la barra azul "Registro N° 1")
-    // MostrarEncabezado = false (Oculta la barra azul, ideal para usar la función con un único registro)
-
-    if (!ElementosParaLaTabla?.length) return '<p>No hay datos para mostrar.</p>';
-
-    const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
-    const columnas = [...baseColumnas, ...ParametrosExtra.filter(p => !baseColumnas.includes(p))];
-
-    let htmlFinal = '';
-
-    ElementosParaLaTabla.forEach((fila, index) => {
-
-      const filasHTML = columnas.map(col => {
-        const valor = fila[col] ?? '-';
-        return `
-          <tr>
-            <th style="width: 20%;">${col}</th>
-            <td style="width: 80%;">${valor}</td>
-          </tr>
-        `;
-      }).join('');
-
-      const encabezadoHTML = MostrarEncabezado ? `
-        <div style="background-color: #002f6b; color: white; padding: 6px 10px; font-weight: bold; font-size: 14px;">
-          Registro N° ${index + 1}
-        </div>
-      ` : '';
-
-      htmlFinal += `
-      <div style="margin-top: 20px; page-break-inside: avoid; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
-        
-        ${encabezadoHTML}
-        
-        <table style="border: none; border-radius: 0; margin-top: 0;">
-          <tbody>
-            ${filasHTML}
-          </tbody>
-        </table>
-
-      </div>`;
-    });
-
-    return htmlFinal;
+    const ReporteHTML = require('./ReporteHTML.js');
+    return ReporteHTML.GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos, ParametrosExtra, MostrarEncabezado);
   }
 
   GenerarReporteHTMLEncabezado(InformacionDeLaDerecha, titulares, marcaDeAgua = '') {
-    const date = new Date();
-    const year = date.getFullYear();
-
-    return ` <!DOCTYPE html>
-    <html lang="es">
-    <head>
-      <meta charset="UTF-8">
-      <title>${titulares.titulo}</title>
-
-      <style>
-        @media print {
-          * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-        }
-        body { font-family: Roboto, "Helvetica Neue", sans-serif; margin: 8px; }
-        .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; min-height: 70px; }
-        .header > div { flex: 1; }
-        .logo { flex-shrink: 0; }
-        .title-container { text-align: center; flex-grow: 1; }
-        .title { font-size: 16px; font-weight: bold; white-space: nowrap; flex-shrink: 0; }
-        .subtitle { font-size: 13px; font-weight: bold; margin-top: 4px; }
-        .info { text-align: right; font-size: 11px; margin-left: 10px; flex-shrink: 0; }
-        table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; }
-        th, td { border: 1px solid #ccc; padding: 4px; text-align: left; font-size: 12px; }
-        th { background-color: #002f6b; color: white; }
-        tr:nth-child(even) { background-color: #f9f9f9; }
-        td:last-child { width: 100px; }
-        hr { border: none; border-top: 2px solid #838383; margin: 8px 0; }
-        .watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 80px; color: rgba(100, 100, 100, 0.09); font-weight: bold; z-index: 999; white-space: nowrap; pointer-events: none; }
-      </style>
-
-    </head>
-    <body>
-      <div class="watermark">${marcaDeAgua}</div>
-      <div class="header">
-        <div class="logo">
-          <img src="https://storage.sigu.utn.ac.cr/images/cards/LogoUTN.svg" alt="Logo UTN" style="height:50px;">
-        </div>
-        <div class="title-container">
-          <div class="title">Universidad Técnica Nacional</div>
-          <div class="subtitle">${titulares.primerSubtitulo}</div>
-          <div class="subtitle">${titulares.segundoSubtitulo}</div>
-        </div>
-        <div class="info">
-         ${InformacionDeLaDerecha}
-        </div>
-        
-      </div> `;
+    const ReporteHTML = require('./ReporteHTML.js');
+    return ReporteHTML.GenerarReporteHTMLEncabezado(InformacionDeLaDerecha, titulares, marcaDeAgua);
   }
 
   GenerarReporteHTMLFecha() {
-    const now = new Date();
-
-    const day = now.getDate().toString().padStart(2, '0');
-    const month = (now.getMonth() + 1).toString().padStart(2, '0');
-    const year = now.getFullYear();
-
-    let hours = now.getHours();
-    const minutes = now.getMinutes().toString().padStart(2, '0');
-    const ampm = hours >= 12 ? 'PM' : 'AM';
-
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    hours = hours.toString().padStart(2, '0');
-
-    const fechaFormateada = `${day}-${month}-${year} ${hours}:${minutes} ${ampm}`;
-
-    return ` <div style="margin-left: 0; font-size: 11px; margin-top:4px;">
-      <strong>Fecha:</strong>
-      <span style="
-          border-bottom: 1px solid #000;
-          margin-left: 10px;
-          display: inline-block;
-          padding: 0 4px 2px 4px;
-          vertical-align: middle;
-          text-align: center;
-          min-width: 120px;
-      ">${fechaFormateada} 
-      </span>
-    </div>
-       `
+    const ReporteHTML = require('./ReporteHTML.js');
+    return ReporteHTML.GenerarReporteHTMLFecha();
   }
 
   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));
-    const columnas = [...baseColumnas, ...ParametrosExtra.filter(p => !baseColumnas.includes(p))];
-
-    const tableHeaders = `<th>N°</th>` + columnas.map(col => `<th>${col}</th>`).join('');
-
-    const rows = ElementosParaLaTabla.map((fila, index) => {
-      const rowCells = columnas.map(col => {
-        const valor = fila[col] ?? '';
-        return `<td>${valor}</td>`;
-      }).join('');
-      return `<tr><td><strong>${index + 1}</strong></td>${rowCells}</tr>`;
-    });
-
-    const colCount = columnas.length + 1;
-    const minRows = 1;
-    let currentIndex = rows.length;
-    while (rows.length < minRows) {
-      let emptyCells = `<td><strong>${currentIndex + 1}</strong></td>`;
-      for (let i = 0; i < colCount - 1; i++) {
-        emptyCells += '<td></td>';
-      }
-      rows.push(`<tr style="height:40px">${emptyCells}</tr>`);
-      currentIndex++;
-    }
-
-    const tableRows = rows.join('');
-    return `
-    <table>
-      <thead>
-        <tr>${tableHeaders}</tr>
-      </thead>
-      <tbody>
-        ${tableRows}
-      </tbody>
-    </table>`;
+    const ReporteHTML = require('./ReporteHTML.js');
+    return ReporteHTML.GenerarReporteHTMLTablas(ElementosParaLaTabla, ParametrosExcluidos, ParametrosExtra);
   }
 
   GenerarReporteHTMLPie() {
-    return `
-    </body>
-    </html>`;
+    const ReporteHTML = require('./ReporteHTML.js');
+    return ReporteHTML.GenerarReporteHTMLPie();
   }
-  //la información adicional se concatena desde la llamada
-  //REPORTE TERMINA AQUÍ
 
   obtenerNombreLaBaseDeDatos() {
     return this.NombreDelRepositorioDeLaBaseDeDatos.slice(0, -3);
@@ -1114,7 +824,7 @@ class Miscelaneo {
         `a`.`Tipo`, IF(`a`.`Icono` <> '', CONCAT('https://storage.sigu.utn.ac.cr/images/cards/', `a`.`Icono`), '') AS `Icono`, `a`.`Color`, `a`.`Correo`,\
         `a`.`Version`, `a`.`FechaDePublicacion`, `a`.`AcuerdoDeNivelDeServicio`, `a`.`DiccionarioDeDatos`, `a`.`Repositorios`,\
         `a`.`EnlaceDelVideo`,`a`.`EnlaceDelManual`\
-        , `a`.`Estado`, REGEXP_SUBSTR(SUBSTRING_INDEX(`a`.`Repositorios`, '/', -1), '[^,]*front[^,]*') AS `Frontend`\
+        , `a`.`Estado`, REGEXP_SUBSTR(`a`.`Repositorios`, '[^,]*front[^,]*') AS `Frontend`\
       FROM `SIGU`.`SIGU_ModulosV2` `a`\
         JOIN `SIGU`.`SIGU_PermisosV2` `b` ON (`a`.`Nombre` = `b`.`Modulo`)\
       WHERE `a`.`Estado` = 'Activo' AND `a`.`Padre` = ? AND `b`.`PermisoId` IN (?)\
@@ -1544,7 +1254,7 @@ class Miscelaneo {
   }
 
   versionDelNucleo() {
-    return "VERSION_DEL_NUCLEO" + " " + this.NombreCanonicoDelModulo;
+    return "2.0.82" + " " + this.NombreCanonicoDelModulo;
   }
 
   async destinatarioDeInformesDeError() {
@@ -1616,16 +1326,16 @@ class Miscelaneo {
       , [Resultado.uid]);
   }
 
-  obtenerDatosDeLaPersonaPorIdentificacion(Identificacion) {
-    return ejecutarConsultaSIGU("SELECT `a`.`Identificador`, `a`.`Identificacion`\
+  async obtenerDatosDeLaPersonaPorIdentificacion(Identificacion) {
+    return await ejecutarConsultaSIGU("SELECT `a`.`Identificador`, `a`.`Identificacion`\
       , `a`.`Nombre`, `a`.`PrimerApellido`, `a`.`SegundoApellido`\
       , (SELECT GROUP_CONCAT(`b`.`CuentaIBAN`) FROM `SIGU`.`SIGU_CuentasBancariasPersonas` `b` WHERE `b`.`Estado` = TRUE AND `a`.`Identificador` = `b`.`Identificador`) AS `CuentasIBAN`\
       FROM `SIGU`.`SIGU_Personas` `a` WHERE `a`.`Identificacion` = ?"
       , [Identificacion]);
   }
 
-  obtenerEstudiantes() {
-    return ejecutarConsultaSIGU("SELECT `Identificador`, `Identificacion`, `Nombre`, `PrimerApellido`,\
+  async obtenerEstudiantes() {
+    return await ejecutarConsultaSIGU("SELECT `Identificador`, `Identificacion`, `Nombre`, `PrimerApellido`,\
       `SegundoApellido` FROM `SIGU`.`SIGU_Personas` WHERE `Identificador` IN\
         (SELECT `Identificador` FROM `SIGU`.`SIGU_RolesPersonas` WHERE `PerfilGeneralId` = 1 /*El perfil 1 parece ser para Estudiantes*/)");
   }

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

@@ -0,0 +1,235 @@
+const { ejecutarConsultaSIGU } = require('./db.js');
+
+class ReporteHTML {
+  constructor() {}
+
+  async generarFirmaHTML(Identificador, FechaDeLaFirma) {
+    const [persona] = await ejecutarConsultaSIGU("SELECT Identificacion, CONCAT(Nombre, ' ', PrimerApellido, ' ', SegundoApellido) AS NombreCompleto FROM SIGU.SIGU_Personas WHERE Identificador = ?", [Identificador]);
+
+    if (!persona) return '';
+
+    const nombre = persona.NombreCompleto;
+    const identificacion = persona.Identificacion;
+    const instancia = await (async () => {
+      try {
+        const result = await ejecutarConsultaSIGU(`
+          SELECT 
+            CASE 
+              WHEN i.TipoDeResponsabilidad = 'Ninguna' THEN sup.Nombre
+              ELSE i.Nombre
+            END AS Nombre
+          FROM SIGU.EstructuraOrganizacional_Instancias i
+          LEFT JOIN SIGU.EstructuraOrganizacional_Instancias sup
+            ON i.IdentificadorDeInstanciaSuperior = sup.IdentificadorDeInstancia
+          WHERE i.Identificador = ?
+        `, [Identificador]);
+        return result?.[0]?.Nombre || 'N/A';
+      } catch {
+        return 'N/A';
+      }
+    })();
+
+    return `   <div style="
+        font-size: 9px;
+        border: 1px solid #eee;
+        padding: 6px;
+        display: inline-flex;
+        align-items: center;
+        background-color: #fcfcfc;
+        gap: 8px;
+      ">
+        <div class="logo" style="display:flex; align-items:center;">
+          <img src="https://storage.sigu.utn.ac.cr/images/cards/LogoUTN.svg"
+               alt="Logo UTN"
+               style="height:25px;">
+        </div>
+        <div style="
+          width: 1px;
+          height: 50px;
+          background-color: #ccc;
+        "></div>
+<div style="text-align: left;">
+      <strong>Firma electrónica por:</strong><br>
+      ${nombre}<br>
+      Cédula: ${identificacion}<br>
+      Instancia: ${instancia}<br>
+      Fecha: ${FechaDeLaFirma}
+ </div>
+
+    </div>`;
+  }
+
+  GenerarReporteHTMLRegistrosVerticales(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = [], MostrarEncabezado = true) {
+    if (!ElementosParaLaTabla?.length) return '<p>No hay datos para mostrar.</p>';
+
+    const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
+    const columnas = [...baseColumnas, ...ParametrosExtra.filter(p => !baseColumnas.includes(p))];
+
+    let htmlFinal = '';
+
+    ElementosParaLaTabla.forEach((fila, index) => {
+
+      const filasHTML = columnas.map(col => {
+        const valor = fila[col] ?? '-';
+        return `
+          <tr>
+            <th style="width: 20%;">${col}</th>
+            <td style="width: 80%;">${valor}</td>
+          </tr>
+        `;
+      }).join('');
+
+      const encabezadoHTML = MostrarEncabezado ? `
+        <div style="background-color: #002f6b; color: white; padding: 6px 10px; font-weight: bold; font-size: 14px;">
+          Registro N° ${index + 1}
+        </div>
+      ` : '';
+
+      htmlFinal += `
+      <div style="margin-top: 20px; page-break-inside: avoid; border: 1px solid #ccc; border-radius: 8px; overflow: hidden;">
+        
+        ${encabezadoHTML}
+        
+        <table style="border: none; border-radius: 0; margin-top: 0;">
+          <tbody>
+            ${filasHTML}
+          </tbody>
+        </table>
+
+      </div>`;
+    });
+
+    return htmlFinal;
+  }
+
+  GenerarReporteHTMLEncabezado(InformacionDeLaDerecha, titulares, marcaDeAgua = '') {
+    const date = new Date();
+    const year = date.getFullYear();
+
+    return ` <!DOCTYPE html>
+    <html lang="es">
+    <head>
+      <meta charset="UTF-8">
+      <title>${titulares.titulo}</title>
+
+      <style>
+        @media print {
+          * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+        }
+        body { font-family: Roboto, "Helvetica Neue", sans-serif; margin: 8px; }
+        .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; min-height: 70px; }
+        .header > div { flex: 1; }
+        .logo { flex-shrink: 0; }
+        .title-container { text-align: center; flex-grow: 1; }
+        .title { font-size: 16px; font-weight: bold; white-space: nowrap; flex-shrink: 0; }
+        .subtitle { font-size: 13px; font-weight: bold; margin-top: 4px; }
+        .info { text-align: right; font-size: 11px; margin-left: 10px; flex-shrink: 0; }
+        table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; }
+        th, td { border: 1px solid #ccc; padding: 4px; text-align: left; font-size: 12px; }
+        th { background-color: #002f6b; color: white; }
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        td:last-child { width: 100px; }
+        hr { border: none; border-top: 2px solid #838383; margin: 8px 0; }
+        .watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 80px; color: rgba(100, 100, 100, 0.09); font-weight: bold; z-index: 999; white-space: nowrap; pointer-events: none; }
+      </style>
+
+    </head>
+    <body>
+      <div class="watermark">${marcaDeAgua}</div>
+      <div class="header">
+        <div class="logo">
+          <img src="https://storage.sigu.utn.ac.cr/images/cards/LogoUTN.svg" alt="Logo UTN" style="height:50px;">
+        </div>
+        <div class="title-container">
+          <div class="title">Universidad Técnica Nacional</div>
+          <div class="subtitle">${titulares.primerSubtitulo}</div>
+          <div class="subtitle">${titulares.segundoSubtitulo}</div>
+        </div>
+        <div class="info">
+         ${InformacionDeLaDerecha}
+        </div>
+        
+      </div> `;
+  }
+
+  GenerarReporteHTMLFecha() {
+    const now = new Date();
+
+    const day = now.getDate().toString().padStart(2, '0');
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const year = now.getFullYear();
+
+    let hours = now.getHours();
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const ampm = hours >= 12 ? 'PM' : 'AM';
+
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    hours = hours.toString().padStart(2, '0');
+
+    const fechaFormateada = `\${day}-\${month}-\${year} \${hours}:\${minutes} \${ampm}\`;
+
+    return \` <div style="margin-left: 0; font-size: 11px; margin-top:4px;">
+      <strong>Fecha:</strong>
+      <span style="
+          border-bottom: 1px solid #000;
+          margin-left: 10px;
+          display: inline-block;
+          padding: 0 4px 2px 4px;
+          vertical-align: middle;
+          text-align: center;
+          min-width: 120px;
+      ">\${fechaFormateada} 
+      </span>
+    </div>
+       `
+  }
+
+  GenerarReporteHTMLTablas(ElementosParaLaTabla, ParametrosExcluidos = [], ParametrosExtra = []) {
+    if (!ElementosParaLaTabla?.length) return '';
+
+    const baseColumnas = Object.keys(ElementosParaLaTabla[0]).filter(col => !ParametrosExcluidos.includes(col));
+    const columnas = [...baseColumnas, ...ParametrosExtra.filter(p => !baseColumnas.includes(p))];
+
+    const tableHeaders = `<th>N°</th>\` + columnas.map(col => \`<th>\${col}</th>\`).join('');
+
+    const rows = ElementosParaLaTabla.map((fila, index) => {
+      const rowCells = columnas.map(col => {
+        const valor = fila[col] ?? '';
+        return \`<td>\${valor}</td>\`;
+      }).join('');
+      return \`<tr><td><strong>\${index + 1}</strong></td>\${rowCells}</tr>\`;
+    });
+
+    const colCount = columnas.length + 1;
+    const minRows = 1;
+    let currentIndex = rows.length;
+    while (rows.length < minRows) {
+      let emptyCells = \`<td><strong>\${currentIndex + 1}</strong></td>\`;
+      for (let i = 0; i < colCount - 1; i++) {
+        emptyCells += '<td></td>';
+      }
+      rows.push(\`<tr style="height:40px">\${emptyCells}</tr>\`);
+      currentIndex++;
+    }
+
+    const tableRows = rows.join('');
+    return \`
+    <table>
+      <thead>
+        <tr>\${tableHeaders}</tr>
+      </thead>
+      <tbody>
+        \${tableRows}
+      </tbody>
+    </table>`;
+  }
+
+  GenerarReporteHTMLPie() {
+    return `
+    </body>
+    </html>`;
+  }
+}
+
+module.exports = new ReporteHTML();

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

@@ -23,7 +23,127 @@ class ReportePDF {
       fontSizeMuyPequeño: 7
     };
   }
-  
+
+  // const datosUsuario = await Miscelaneo.obtenerDatosDelUsuario(solicitud.headers.authorization);
+  // const Fecha = solicitud.params.Fecha || solicitud.query.Fecha;
+  // const titulos = {
+  //   Principal: "Histórico de asignación de periodos",
+  //   Subtitulo1: `Fecha de proceso: ${Fecha}`,
+  //   Subtitulo2: "Reporte generado por el Área de Administración de Servicios",
+  //   Direccion: "Dirección de Gestión de Desarrollo Humano",
+  //   Area: "Área de Administración de Servicios AAS",
+  //   Usuario: datosUsuario?.Identificacion || "Sistema",
+  //   pieDePagina: "Copia digital del documento original.\nPara fines informáticos únicamente.",
+  //   Acceso: "Privado",
+  //   Uso: "Interno"
+  // };
+  // const metadatos = [
+  //   { llave: 'Identificacion', titulo: 'Cédula', ancho: 80 },
+  //   { llave: 'Nombre', titulo: 'Nombre Completo', ancho: 180 },
+  //   { llave: 'Periodo', titulo: 'Período', ancho: 70 },
+  //   { llave: 'Estamento', titulo: 'Estamento', ancho: 80 },
+  //   { llave: 'DiasOtorgados', titulo: 'Días', ancho: 40 },
+  //   { llave: 'Salario', titulo: 'Salario', ancho: 45 }
+  // ];
+  // const doc = ReportePDF.generarEncabezado(titulos, respuesta);
+  // const parrafo = 'Para más información, visite el <a href="https://www.utn.ac.cr">sitio web de la UTN</a>.';
+  // ReportePDF.generarParrafoHTML(doc, parrafo);
+  // ReportePDF.generarTituloDePagina(doc, titulos.Principal, titulos.Subtitulo1, titulos.Subtitulo2);
+  // ReportePDF.generarTabla(doc, datos, metadatos);
+  // let firmas = [
+  //   {
+  //     Nombre: "DAVID VILLALOBOS CAMBRONERO",
+  //     Identificacion: "111050570",
+  //     Instancia: "Dirección de TI",
+  //     Fecha: "17-04-2026 14:30",
+  //     Motivo: "Aprobación de vacaciones"
+  //   },
+  //   {
+  //     Nombre: "JUAN PEREZ",
+  //     Identificacion: "123456789",
+  //     Instancia: "Recursos Humanos",
+  //     Fecha: "17-04-2026 14:35",
+  //     Motivo: "Validación de saldos"
+  //   },
+  //   {
+  //     Nombre: "JUAN PEREZ",
+  //     Identificacion: "123456789",
+  //     Instancia: "Recursos Humanos",
+  //     Fecha: "17-04-2026 14:35",
+  //     Motivo: "Revisión técnica"
+  //   },
+  //   {
+  //     Nombre: "JUAN PEREZ",
+  //     Identificacion: "123456789",
+  //     Instancia: "Recursos Humanos",
+  //     Fecha: "17-04-2026 14:35",
+  //     Motivo: "Revisión técnica"
+  //   },
+  //   {
+  //     Nombre: "JUAN PEREZ",
+  //     Identificacion: "123456789",
+  //     Instancia: "Recursos Humanos",
+  //     Fecha: "17-04-2026 14:35",
+  //     Motivo: "Revisión técnica"
+  //   },
+  //   {
+  //     Nombre: "JUAN PEREZ",
+  //     Identificacion: "123456789",
+  //     Instancia: "Recursos Humanos",
+  //     Fecha: "17-04-2026 14:35",
+  //     Motivo: "Revisión técnica"
+  //   }
+  // ];
+  // ReportePDF.generarFirmas(doc, firmas);
+  // firmas = [
+  //   {
+  //     Nombre: "DAVID VILLALOBOS CAMBRONERO",
+  //     Identificacion: "111050570",
+  //     Instancia: "Dirección de TI",
+  //     Fecha: "17-04-2026 14:30",
+  //     Motivo: "Aprobación de vacaciones"
+  //   }
+  // ]
+  // ReportePDF.generarFirmas(doc, firmas);
+  // firmas = [
+  //   {
+  //     Nombre: "DAVID VILLALOBOS CAMBRONERO",
+  //     Identificacion: "111050570",
+  //     Instancia: "Dirección de TI",
+  //     Fecha: "17-04-2026 14:30",
+  //     Motivo: "Aprobación de vacaciones"
+  //   },
+  //   {
+  //     Nombre: "DAVID VILLALOBOS CAMBRONERO",
+  //     Identificacion: "111050570",
+  //     Instancia: "Dirección de TI",
+  //     Fecha: "17-04-2026 14:30",
+  //     Motivo: "Aprobación de vacaciones"
+  //   }
+  // ]
+  // ReportePDF.generarFirmas(doc, firmas);
+  // ReportePDF.generarTituloDePagina(doc, titulos.Principal, titulos.Subtitulo1, titulos.Subtitulo2);
+  // ReportePDF.generarTituloDePagina(doc, titulos.Principal, titulos.Subtitulo1, titulos.Subtitulo2);
+  // ReportePDF.generarTabla(doc, datos, metadatos);
+  // ReportePDF.generarTabla(doc, datos, metadatos);
+  // const parrafoIntroductorio = `Este <b>reporte</b> detalla la asignación <u>automática</u> de periodos de vacaciones realizada en la fecha seleccionada. <i>Los datos mostrados</i> corresponden al estado final de cada registro tras el proceso de cálculo.`;
+  // ReportePDF.generarParrafoHTML(doc, parrafoIntroductorio);
+  // ReportePDF.generarTabla(doc, datos, metadatos);
+  // ReportePDF.generarSaltoDePagina(doc);
+  // ReportePDF.generarTabla(doc, datos, metadatos);
+  // ReportePDF.generarParrafoHTML(doc, parrafo);
+  // ReportePDF.generarMarcaDeAgua(doc, "TEXTO DEL SELLO", "#FF0000");
+  // ReportePDF.generarFoliado(doc, 100);
+  // ReportePDF.generarPie(doc, "Copia digital del documento original.\nPara fines informáticos únicamente.");
+  // const MetaDatos = {
+  //   Titulo: "UTN-1-2025-10841",
+  //   Identificador: 12,
+  //   Autor: "VALLADARES BONILLA TONNY MAURICIO 603230047",
+  //   Asunto: "Boleta de Vacaciones"
+  // };
+  // await ReportePDF.generarMetadatosReporte(doc, MetaDatos);
+  // ReportePDF.finalizarReporte(doc);
+
   async verificarSiReporteYaExiste(Modulo, Titulo, Identificador) {
     try {
       const query = `SELECT COUNT(*) AS total FROM SIGU.SIGU_ReportesGenerados WHERE Modulo = ? AND Titulo = ? AND Identificador = ?`;
@@ -143,7 +263,11 @@ class ReportePDF {
   generarEncabezado(Titulos, respuesta) {
     respuesta.setHeader("Content-Type", "application/pdf");
     respuesta.setHeader("Content-Disposition", `inline; filename=Reporte.pdf`);
-    const doc = new PDFDocument({ size: 'Letter', margin: this.config.margin, bufferPages: true });
+    const doc = new PDFDocument({
+      size: 'Letter',
+      margins: { top: 105, left: this.config.margin, right: this.config.margin, bottom: this.config.margin },
+      bufferPages: true
+    });
     doc.pipe(respuesta);
 
     // Función interna para dibujar el encabezado
@@ -170,12 +294,20 @@ class ReportePDF {
       const fechaActual = now.toLocaleDateString('es-CR');
       const horaActual = now.toLocaleTimeString('es-CR', { hour: '2-digit', minute: '2-digit', hour12: false });
       doc.fontSize(this.config.fontSizePequeño).fillColor(this.config.colorPrimario);
-      doc.text(`Fecha: ${fechaActual}`, pageWidth - margin - 150, 45, { align: 'right', width: 150 });
-      doc.text(`Hora: ${horaActual}`, pageWidth - margin - 150, 55, { align: 'right', width: 150 });
-      doc.text(`Usuario: ${Titulos.Usuario}`, pageWidth - margin - 150, 65, { align: 'right', width: 150 });
+      doc.text(`Fecha: ${fechaActual}`, pageWidth - margin - 200, 45, { align: 'right', width: 200 });
+      doc.text(`Hora: ${horaActual}`, pageWidth - margin - 200, 55, { align: 'right', width: 200 });
+      doc.text(`Usuario: ${Titulos.Usuario}`, pageWidth - margin - 200, 65, { align: 'right', width: 200 });
+
+      const acceso = Titulos.Acceso || 'Interno';
+      const uso = Titulos.Uso || 'Público';
+      doc.text(`Acceso: ${acceso}, Uso: ${uso}`, pageWidth - margin - 200, 75, { align: 'right', width: 200 });
+
       // Línea separadora
       doc.moveTo(margin, 90).lineTo(pageWidth - margin, 90).strokeColor(this.config.colorPrimario).lineWidth(2).stroke();
-      doc.moveDown(4);
+
+      // Asegurar que el cursor quede posicionado debajo del encabezado
+      doc.x = margin;
+      doc.y = 105;
     };
     // Evento para añadir el encabezado institucional automáticamente en CADA NUEVA PÁGINA
     doc.on('pageAdded', dibujarEncabezado);
@@ -245,12 +377,89 @@ class ReportePDF {
       // Como el texto de la izquierda tiene 2 líneas, alineamos la paginación un poco más abajo para que quede centrado
       doc.text(paginacion, centerX + 15, footerY + 14, { width: (pageWidth / 2) - margin - 15, align: 'right' });
 
+      // Si el documento tiene firmas y estamos en la última página, agregar la leyenda de seguridad
+      if (doc._tieneFirmas && i === range.start + range.count - 1) {
+        const leyenda = "Documento firmado electrónicamente con firma digital interna de la Universidad Técnica Nacional. Incluye un código de verificación único validable en el sistema SIGU. Cualquier modificación invalida su autenticidad.";
+        doc.fillColor("black").fontSize(6).font(this.config.fuenteBase);
+
+        // Calculamos la posición Y para que esté inmediatamente por encima de la línea del footer (footerY)
+        // Estimamos un alto aproximado dependiendo de cuantas líneas abarque el texto,
+        // pdfkit calculará la altura si usamos heightOfString, pero podemos darle un espacio fijo.
+        const alturaLeyenda = doc.heightOfString(leyenda, { width: pageWidth - 2 * margin, align: 'center' });
+        const yPosLeyenda = footerY - alturaLeyenda - 5;
+
+        doc.text(leyenda, margin, yPosLeyenda, {
+          width: pageWidth - 2 * margin,
+          align: 'center'
+        });
+      }
+
       // Restaurar el margen inferior original
       doc.page.margins.bottom = bottomMargin;
     }
     // doc.end();
   }
 
+  generarFoliado(doc, folioInicial) {
+    if (!doc || folioInicial === undefined) return;
+
+    const range = doc.bufferedPageRange();
+    let folioActual = parseInt(folioInicial);
+
+    for (let i = range.start; i < range.start + range.count; i++) {
+      doc.switchToPage(i);
+
+      const margin = this.config.margin;
+      const pageWidth = doc.page.width;
+      const yPos = 30; // Posición en la parte superior, fuera del área del encabezado principal
+
+      doc.save();
+      doc.fillColor("black")
+        .fontSize(this.config.fontSizeSubtitulo)
+        .font(this.config.fuenteNegrita);
+
+      doc.text(String(folioActual), pageWidth - margin - 100, yPos, {
+        width: 100,
+        align: 'right'
+      });
+
+      doc.restore();
+      folioActual++;
+    }
+  }
+
+  generarMarcaDeAgua(doc, texto, color = "#CCCCCC") {
+    if (!doc || !texto) return;
+
+    const range = doc.bufferedPageRange();
+    for (let i = range.start; i < range.start + range.count; i++) {
+      doc.switchToPage(i);
+
+      const pageWidth = doc.page.width;
+      const pageHeight = doc.page.height;
+
+      doc.save();
+
+      // Configuración de la marca de agua
+      doc.fillColor(color);
+      doc.fillOpacity(0.15); // Transparencia para que no tape el contenido
+      doc.fontSize(60);
+      doc.font(this.config.fuenteNegrita);
+
+      // Posicionamiento central con rotación
+      doc.translate(pageWidth / 2, pageHeight / 2);
+      doc.rotate(-45);
+
+      // Dibujar el texto centrado en el eje rotado
+      doc.text(texto, -pageWidth / 2, -30, {
+        width: pageWidth,
+        align: 'center'
+      });
+
+      doc.restore();
+    }
+  }
+
   generarTabla(doc, datos, metadatos) {
     if (!datos || datos.length === 0) return;
 
@@ -342,6 +551,7 @@ class ReportePDF {
     let isBold = false;
     let isItalic = false;
     let isUnderline = false;
+    let currentLink = null;
 
     const fontSize = opciones.fontSize || this.config.fontSizeSubtitulo;
     const align = opciones.align || 'justify';
@@ -358,6 +568,13 @@ class ReportePDF {
 
     doc.fillColor('black');
 
+    // Comprobamos si hay espacio suficiente en la página antes de empezar a dibujar
+    // Estimamos un alto de línea basado en el tamaño de fuente
+    const estimatedHeight = fontSize * 1.5;
+    if (doc.y + estimatedHeight > doc.page.height - doc.page.margins.bottom - 40) {
+      doc.addPage();
+    }
+
     // Como pdfkit podría venir de un texto dibujado con coordenadas X y Y absolutas (que rompe el flujo interno de texto),
     // definimos la posición X al margen izquierdo para iniciar el párrafo, manteniendo la coordenada Y actual.
     doc.x = margin;
@@ -385,10 +602,26 @@ class ReportePDF {
         textoParaImprimir += ' ';
       }
 
+      // Comprobar espacio por cada fragmento para prevenir que `continued` desborde mal
+      if (doc.y + fontSize > doc.page.height - doc.page.margins.bottom - 20) {
+        // En PDFKit, hacer addPage() mientras hay 'continued' true a veces falla, pero ayuda forzarlo antes.
+        doc.text(' ', { continued: false }); // forzar fin de linea
+        doc.addPage();
+        doc.x = margin; // reposicionar en nueva pagina
+      }
+
+      // Si hay un link activo, usamos color azul y subrayado por defecto si no se especificó lo contrario
+      if (currentLink) {
+        doc.fillColor('blue');
+      } else {
+        doc.fillColor('black');
+      }
+
       doc.text(textoParaImprimir, {
         width: availableWidth,
         continued: isContinued,
-        underline: isUnderline,
+        underline: isUnderline || (currentLink ? true : false),
+        link: currentLink,
         align: align
       });
     };
@@ -425,6 +658,17 @@ class ReportePDF {
         isUnderline = false;
         continue;
       }
+      if (lowerToken.startsWith('<a')) {
+        const hrefMatch = token.match(/href=["']([^"']*)["']/i);
+        if (hrefMatch) {
+          currentLink = hrefMatch[1];
+        }
+        continue;
+      }
+      if (lowerToken === '</a>') {
+        currentLink = null;
+        continue;
+      }
       if (lowerToken === '<br>' || lowerToken === '<br/>' || lowerToken === '<br />') {
         // Si hay un salto de línea, rompemos el continued escribiendo un espacio final
         doc.text(' ', { continued: false });
@@ -451,6 +695,122 @@ class ReportePDF {
 
     doc.moveDown(1);
   }
+
+  generarFirmas(doc, firmas) {
+    if (!firmas || !Array.isArray(firmas) || firmas.length === 0) return;
+
+    doc._tieneFirmas = true; // Marcar el documento como firmado para el pie de página
+
+    const margin = this.config.margin;
+    const pageWidth = doc.page.width;
+    const availableWidth = pageWidth - 2 * margin;
+    const signatureHeight = 75;
+    const gap = 10;
+    const logoWidth = 35;
+    const padding = 6;
+
+    // Dividimos las firmas en grupos de 3 (máximo por fila)
+    for (let i = 0; i < firmas.length; i += 3) {
+      const filaDeFirmas = firmas.slice(i, i + 3);
+      const cantidadEnFila = filaDeFirmas.length;
+
+      // Ancho total por bloque de firma según la cantidad en esta fila
+      const blockWidth = availableWidth / cantidadEnFila;
+
+      // Verificar si hay espacio en la página actual para esta fila
+      if (doc.y + signatureHeight > doc.page.height - 80) {
+        doc.addPage();
+      }
+
+      const startY = doc.y + 10;
+
+      filaDeFirmas.forEach((firma, index) => {
+        const blockX = margin + (index * blockWidth);
+
+        let innerWidth = blockWidth - gap;
+        let innerX = blockX + (gap / 2);
+
+        // Ajustar márgenes para los extremos
+        if (index === 0) {
+          innerX = blockX;
+          innerWidth = blockWidth - (gap / 2);
+        }
+        if (index === cantidadEnFila - 1) {
+          innerWidth = blockWidth - (gap / 2);
+        }
+        if (cantidadEnFila === 1) {
+          innerWidth = 240;
+          innerX = margin + (availableWidth / 2) - (innerWidth / 2);
+        }
+
+        // Dibujar fondo y borde
+        doc.save();
+        doc.fillColor("#FCFCFC").strokeColor("#EEEEEE").lineWidth(1);
+        doc.rect(innerX, startY, innerWidth, signatureHeight).fillAndStroke();
+        doc.restore();
+
+        let currentX = innerX + padding;
+
+        // Dibujar logo
+        try {
+          const rutaLogo = path.join(__dirname, "./LogoUTN.png");
+          // Centrar verticalmente el logo dentro del recuadro
+          const logoY = startY + (signatureHeight / 2) - 13;
+          doc.image(rutaLogo, currentX, logoY, { width: logoWidth });
+
+          // Línea vertical separadora
+          doc.save();
+          doc.moveTo(currentX + logoWidth + padding, startY + padding)
+            .lineTo(currentX + logoWidth + padding, startY + signatureHeight - padding)
+            .strokeColor("#CCCCCC")
+            .lineWidth(0.5)
+            .stroke();
+          doc.restore();
+
+          currentX += logoWidth + (padding * 2);
+        } catch (e) {
+          // Si falla el logo, currentX se mantiene igual para el texto
+        }
+
+        // Área para el texto
+        const textWidth = innerWidth - (currentX - innerX) - padding;
+        let textY = startY + padding + 1;
+
+        doc.fillColor("black");
+
+        // 1. Título
+        doc.fontSize(6).font(this.config.fuenteNegrita);
+        doc.text("Firma electrónica por:", currentX, textY, { width: textWidth, align: 'left' });
+        textY = doc.y + 1;
+
+        // 2. Nombre
+        doc.fontSize(6).font(this.config.fuenteBase);
+        doc.text(firma.Nombre || 'N/A', currentX, textY, { width: textWidth, align: 'left' });
+        textY = doc.y + 1;
+
+        // 3. Cédula
+        doc.text(`Cédula: ${firma.Identificacion || 'N/A'}`, currentX, textY, { width: textWidth, align: 'left' });
+        textY = doc.y + 1;
+
+        // 4. Instancia
+        doc.text(`Instancia: ${firma.Instancia || 'N/A'}`, currentX, textY, { width: textWidth, align: 'left' });
+        textY = doc.y + 1;
+
+        // 5. Fecha
+        doc.text(`Fecha: ${firma.Fecha || 'N/A'}`, currentX, textY, { width: textWidth, align: 'left' });
+        textY = doc.y + 1;
+
+        // 6. Motivo
+        doc.text(`Motivo: ${firma.Motivo || 'N/A'}`, currentX, textY, { width: textWidth, align: 'left' });
+      });
+
+      // Mover el cursor para la siguiente fila
+      doc.y = startY + signatureHeight + 10;
+    }
+
+    // Agregar un poco de margen después de todas las firmas
+    doc.y += 10;
+  }
 }
 
 module.exports = new ReportePDF();

package/templates/backend/servicios/Servicio1.js

@@ -86,7 +86,6 @@ class Servicio1 {
   //       Resultados = await ejecutarConsultaSIGU(SELECTBase + " SELECT * FROM Datos WHERE " + WHERE + ORDERBY + " LIMIT ? OFFSET ?", [parseInt(Parametros.PaginadorTamanio), parseInt(Parametros.PaginadorIndice)]);
   //       return { Registros: Resultados, TotalDeRegistros: Total[0]['Total'] };
   //     }
-  //     const ss = "";
   //   }
   //   // Predeterminadamente se retornan los datos paginados pero sin filtrar
   //   // Los símbolos &&&& se usan como valor predeterminado

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

@@ -14,7 +14,7 @@
       }
     </div>
   </div>
-  <div class="pie">
+  <!-- <div class="pie">
     <p>CONTINUAR</p>
-  </div>
+  </div> -->
 </div>

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

@@ -1,4 +1,54 @@
 .contenido {
   display: flex;
   flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Forzamos 4 columnas calculando el espacio disponible */
+.contenido>* {
+  width: calc(25% - 12px);
+  /* 25% menos una parte del gap (16px * 3 / 4) */
+  box-sizing: border-box;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+  background: #ccc;
+  border: 2px dashed #999;
+  border-radius: 8px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  /* El placeholder debe mantener el tamaño de la tarjeta */
+  min-height: 150px;
+  /* Ajustar según la altura promedio de tus tarjetas */
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.contenido.cdk-drop-list-dragging div:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Responsividad: 2 columnas en tablets, 1 en móviles */
+@media (max-width: 1200px) {
+  .contenido>* {
+    width: calc(50% - 8px);
+  }
+}
+
+@media (max-width: 600px) {
+  .contenido>* {
+    width: 100%;
+  }
 }

package/templates/frontend/src/app/Paginas/gestion-tabla-XYZ/gestion-tabla-XYZ.component.ts

@@ -172,6 +172,18 @@ export class GestionTablaXYZComponent {
   }
 
   obtenerDatosParaPoblarLaTabla() {
+    // let Filtrado = undefined
+    // if (this.PaginarResultados) {
+    //   if (this.PaginadorTamanio === 0) {
+    //     const pageSize = localStorage.getItem('pageSize');
+    //     if (pageSize) {
+    //       this.PaginadorTamanio = parseInt(pageSize);
+    //     }
+    //   }
+    //   Filtrado = `/${this.PaginadorAccion}/${this.PaginadorIndice}/${this.PaginadorTamanio}/${this.PaginadorFiltro}/${this.PaginadorColumnaParaFiltrar}/${this.PaginadorColumnasParaFiltrar}/${this.ColumnaParaOrdenar}/${this.TipoDeOrden}`;
+    // } else {
+    //   Filtrado = `/TablaSinFiltro/-/-/-/-/-/-/-`;
+    // }
     this.http.get(`${this.datosGlobalesService.ObtenerURL()}XYZ/listar`).subscribe({
       next: (datos: any) => {
         if (datos.error) {