utn-cli 2.1.38 → 2.1.40

package/package.json

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

package/templates/backend/rutas/misc.js

@@ -881,4 +881,18 @@ Router.get('/obtenerTarjetas', async (solicitud, respuesta, next) => {
   }
 });
 
+Router.get('/calendarioPublico/:Anio?', async (solicitud, respuesta, next) => {
+  try {
+    try {
+      return respuesta.json({ body: await Miscelaneo.obtenerCalendarioPublico(solicitud.params.Anio), error: undefined });
+    } catch (error) {
+      const MensajeDeError = 'No fue posible obtener el calendario público';
+      console.error(new ManejadorDeErrores(MensajeDeError, ManejadorDeErrores.obtenerNumeroDeLinea(), true, `Dirección IP: ${solicitud.ip}`));
+      return respuesta.status(500).json({ body: undefined, error: MensajeDeError });
+    }
+  } catch (error) {
+    next(error);
+  }
+});
+
 module.exports = Router;

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

@@ -2633,6 +2633,131 @@ class Miscelaneo {
       })
       .sort((a, b) => a['Posición'] - b['Posición']);
   }
+
+  async obtenerCalendarioPublico(Anio) {
+    const anio = parseInt(Anio) || new Date().getFullYear();
+
+    const filas = await ejecutarConsultaSIGU(`
+      SELECT
+        c.CalendarioId, c.Anio, c.Version, c.Titulo,
+        p.PeriodoId, p.TipoPeriodo, p.Nombre AS NombrePeriodo,
+        p.Descripcion AS DescripcionPeriodo,
+        p.FechaInicio AS PeriodoInicio, p.FechaFin AS PeriodoFin,
+        p.Orden AS OrdenPeriodo,
+        a.ActividadId, a.Descripcion AS DescripcionActividad,
+        a.FechaInicio AS ActividadInicio, a.FechaFin AS ActividadFin,
+        a.EsDestacada, a.Orden AS OrdenActividad,
+        CASE
+          WHEN a.FechaInicio IS NULL AND a.FechaFin IS NULL THEN 'sin_fecha'
+          WHEN a.FechaFin < CURDATE() THEN 'pasada'
+          WHEN a.FechaInicio > CURDATE() THEN 'proxima'
+          ELSE 'en_curso'
+        END AS EstadoActividad,
+        CASE
+          WHEN a.FechaInicio IS NULL OR a.FechaFin IS NULL THEN NULL
+          WHEN a.FechaFin < CURDATE() THEN 100
+          WHEN a.FechaInicio > CURDATE() THEN 0
+          ELSE GREATEST(0, LEAST(100, ROUND(
+            DATEDIFF(CURDATE(), a.FechaInicio) /
+            NULLIF(DATEDIFF(a.FechaFin, a.FechaInicio), 0) * 100
+          )))
+        END AS PorcentajeActividad,
+        CASE
+          WHEN a.FechaInicio IS NULL THEN NULL
+          WHEN a.FechaInicio > CURDATE() THEN DATEDIFF(a.FechaInicio, CURDATE())
+          ELSE NULL
+        END AS DiasParaInicioActividad
+      FROM \`SIGU\`.\`SIGU_CalendarioInstitucional\` c
+      JOIN \`SIGU\`.\`SIGU_CalendarioPeriodo\` p ON c.CalendarioId = p.CalendarioId
+      LEFT JOIN \`SIGU\`.\`SIGU_CalendarioActividad\` a ON p.PeriodoId = a.PeriodoId
+      WHERE c.Estado = 1 AND c.Anio = ?
+      ORDER BY p.Orden ASC, p.PeriodoId ASC, a.Orden ASC, a.ActividadId ASC
+    `, [anio]);
+
+    if (!filas.length) return null;
+
+    const hoy = new Date();
+    hoy.setHours(0, 0, 0, 0);
+
+    const inicioAnio = new Date(filas[0].Anio, 0, 1);
+    const finAnio = new Date(filas[0].Anio + 1, 0, 1);
+    const porcentajeAnio = Math.max(0, Math.min(100, Math.round((hoy - inicioAnio) / (finAnio - inicioAnio) * 100)));
+
+    const calendario = {
+      CalendarioId: filas[0].CalendarioId,
+      Anio: filas[0].Anio,
+      Version: filas[0].Version,
+      Titulo: filas[0].Titulo,
+      PorcentajeAnio: porcentajeAnio,
+      Periodos: []
+    };
+
+    const periodosMap = new Map();
+
+    for (const fila of filas) {
+      if (!periodosMap.has(fila.PeriodoId)) {
+        let estadoPeriodo = 'sin_fecha';
+        let porcentajePeriodo = null;
+        let diasParaInicioPeriodo = null;
+
+        if (fila.PeriodoInicio && fila.PeriodoFin) {
+          const s = (v) => {
+            const d = typeof v === 'string' ? v : new Date(v).toISOString();
+            const [y, m, dd] = d.slice(0, 10).split('-').map(Number);
+            const fecha = new Date(y, m - 1, dd);
+            fecha.setHours(0, 0, 0, 0);
+            return fecha;
+          };
+          const inicio = s(fila.PeriodoInicio);
+          const fin = s(fila.PeriodoFin);
+
+          if (fin < hoy) {
+            estadoPeriodo = 'pasada';
+            porcentajePeriodo = 100;
+          } else if (inicio > hoy) {
+            estadoPeriodo = 'proxima';
+            porcentajePeriodo = 0;
+            diasParaInicioPeriodo = Math.ceil((inicio - hoy) / 86400000);
+          } else {
+            estadoPeriodo = 'en_curso';
+            const total = fin - inicio;
+            porcentajePeriodo = total > 0
+              ? Math.max(0, Math.min(100, Math.round((hoy - inicio) / total * 100)))
+              : 0;
+          }
+        }
+
+        periodosMap.set(fila.PeriodoId, {
+          PeriodoId: fila.PeriodoId,
+          TipoPeriodo: fila.TipoPeriodo,
+          NombrePeriodo: fila.NombrePeriodo,
+          DescripcionPeriodo: fila.DescripcionPeriodo,
+          PeriodoInicio: fila.PeriodoInicio,
+          PeriodoFin: fila.PeriodoFin,
+          EstadoPeriodo: estadoPeriodo,
+          PorcentajePeriodo: porcentajePeriodo,
+          DiasParaInicioPeriodo: diasParaInicioPeriodo,
+          Actividades: []
+        });
+      }
+
+      if (fila.ActividadId !== null) {
+        periodosMap.get(fila.PeriodoId).Actividades.push({
+          ActividadId: fila.ActividadId,
+          DescripcionActividad: fila.DescripcionActividad,
+          ActividadInicio: fila.ActividadInicio,
+          ActividadFin: fila.ActividadFin,
+          EsDestacada: Boolean(fila.EsDestacada),
+          EstadoActividad: fila.EstadoActividad,
+          PorcentajeActividad: fila.PorcentajeActividad,
+          DiasParaInicioActividad: fila.DiasParaInicioActividad
+        });
+      }
+    }
+
+    calendario.Periodos = [...periodosMap.values()];
+    return calendario;
+  }
 }
 
 module.exports = new Miscelaneo();

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

@@ -0,0 +1,236 @@
+.titulo-dialog {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.titulo-dialog small {
+  font-size: 0.65em;
+  opacity: 0.6;
+  font-weight: normal;
+}
+
+/* ── Buscador ── */
+.buscador {
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.aviso-resultados {
+  font-size: 0.8em;
+  color: #555;
+  margin: 0 0 10px;
+}
+
+mark {
+  background: #FFF176;
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* ── Barra de progreso anual ── */
+.barra-anio {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  background: #f5f5f5;
+  border-radius: 6px;
+}
+
+.barra-anio mat-progress-bar {
+  flex: 1;
+  border-radius: 4px;
+}
+
+.barra-anio-label {
+  font-size: 0.8em;
+  white-space: nowrap;
+  color: #555;
+}
+
+.barra-anio-pct {
+  font-size: 0.8em;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #333;
+}
+
+/* ── Paneles ── */
+.panel {
+  margin-bottom: 8px;
+  border-radius: 6px !important;
+}
+
+.panel-en-curso {
+  border-left: 4px solid #4CAF50;
+}
+
+.panel-proximas {
+  border-left: 4px solid #1976D2;
+}
+
+.panel-pasadas {
+  border-left: 4px solid #9E9E9E;
+}
+
+.icono-estado {
+  margin-right: 6px;
+  font-size: 18px;
+  height: 18px;
+  width: 18px;
+}
+
+.icono-en-curso { color: #4CAF50; }
+.icono-proximas { color: #1976D2; }
+.icono-pasadas  { color: #9E9E9E; }
+
+.panel-vacio {
+  font-size: 0.85em;
+  color: #888;
+  margin: 4px 0 8px;
+  font-style: italic;
+}
+
+/* ── Tarjeta de período ── */
+.periodo-card {
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+}
+
+.periodo-en-curso  { border-left: 3px solid #4CAF50; }
+.periodo-proximas  { border-left: 3px solid #1976D2; }
+.periodo-pasadas   { border-left: 3px solid #BDBDBD; }
+
+.periodo-encabezado {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+
+.periodo-nombre {
+  font-weight: 600;
+  font-size: 0.92em;
+}
+
+.periodo-tipo {
+  font-size: 0.75em;
+  background: #e8e8e8;
+  color: #555;
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.dias-chip {
+  font-size: 0.75em;
+  background: #1976D2;
+  color: #fff;
+  padding: 1px 8px;
+  border-radius: 10px;
+  margin-left: auto;
+}
+
+.periodo-rango {
+  font-size: 0.8em;
+  color: #666;
+  margin-bottom: 6px;
+}
+
+.periodo-barra {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.periodo-barra mat-progress-bar {
+  flex: 1;
+  border-radius: 4px;
+}
+
+.periodo-pct {
+  font-size: 0.75em;
+  white-space: nowrap;
+  color: #555;
+}
+
+/* ── Actividades ── */
+.actividades {
+  margin-top: 6px;
+  border-top: 1px solid #eeeeee;
+  padding-top: 6px;
+}
+
+.actividad-fila {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 0;
+  font-size: 0.82em;
+  flex-wrap: wrap;
+}
+
+.act-icono {
+  font-size: 13px;
+  height: 14px;
+  width: 14px;
+  flex-shrink: 0;
+}
+
+.act-desc {
+  flex: 1;
+  min-width: 0;
+}
+
+.act-fecha {
+  color: #777;
+  white-space: nowrap;
+}
+
+.act-dias {
+  font-size: 0.85em;
+  background: #E3F2FD;
+  color: #1565C0;
+  padding: 0 6px;
+  border-radius: 8px;
+  white-space: nowrap;
+}
+
+/* Colores por estado de actividad */
+.act-en_curso .act-icono { color: #4CAF50; }
+.act-en_curso .act-desc  { color: #2E7D32; font-weight: 500; }
+
+.act-proxima .act-icono  { color: #1976D2; }
+
+.act-pasada .act-icono   { color: #9E9E9E; }
+.act-pasada .act-desc    { color: #9E9E9E; }
+.act-pasada .act-fecha   { color: #BDBDBD; }
+
+.act-sin_fecha .act-icono { color: #BDBDBD; }
+
+/* Textos grises para períodos pasados */
+.gris { color: #9E9E9E; }
+
+/* Estados de carga / error */
+.aviso-error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #c62828;
+  padding: 12px 0;
+  font-size: 0.9em;
+}
+
+.aviso-vacio {
+  color: #888;
+  font-size: 0.9em;
+  padding: 16px 0;
+  font-style: italic;
+}

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

@@ -0,0 +1,172 @@
+<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>
+
+<mat-dialog-content>
+
+  <mat-progress-bar *ngIf="cargando" mode="indeterminate"></mat-progress-bar>
+
+  <div *ngIf="error" class="aviso-error">
+    <mat-icon>error_outline</mat-icon> {{ error }}
+  </div>
+
+  <div *ngIf="!cargando && !error && !calendario" class="aviso-vacio">
+    No hay un calendario activo para el año actual.
+  </div>
+
+  <ng-container *ngIf="!cargando && !error && calendario">
+
+    <div class="barra-anio">
+      <span class="barra-anio-label">Año {{ calendario.Anio }}</span>
+      <mat-progress-bar mode="determinate" [value]="calendario.PorcentajeAnio" color="primary"></mat-progress-bar>
+      <span class="barra-anio-pct">{{ calendario.PorcentajeAnio }}%</span>
+    </div>
+
+    <!-- ── Buscador ── -->
+    <mat-form-field appearance="outline" class="buscador">
+      <mat-label>Buscar actividad</mat-label>
+      <mat-icon matPrefix>search</mat-icon>
+      <input matInput [value]="terminoBusqueda" (input)="onBusqueda($event)" placeholder="Ej: matrícula, exámenes...">
+      <button *ngIf="busquedaActiva" matSuffix mat-icon-button (click)="limpiarBusqueda()" aria-label="Limpiar">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <p *ngIf="busquedaActiva" class="aviso-resultados">
+      <ng-container *ngIf="totalResultados > 0">
+        {{ totalResultados }} resultado(s) para «{{ terminoBusqueda }}»
+      </ng-container>
+      <ng-container *ngIf="totalResultados === 0">
+        Sin resultados para «{{ terminoBusqueda }}»
+      </ng-container>
+    </p>
+
+    <!-- ── EN CURSO ── -->
+    <mat-expansion-panel [expanded]="true" class="panel panel-en-curso"
+                         *ngIf="!busquedaActiva || periodosEnCursoFiltrados.length > 0">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon class="icono-estado icono-en-curso">radio_button_checked</mat-icon>
+          En curso
+        </mat-panel-title>
+        <mat-panel-description>{{ periodosEnCurso.length }} período(s)</mat-panel-description>
+      </mat-expansion-panel-header>
+
+      <p *ngIf="periodosEnCurso.length === 0" class="panel-vacio">Sin períodos en curso actualmente.</p>
+
+      <ng-container *ngFor="let periodo of periodosEnCursoFiltrados">
+        <div class="periodo-card periodo-en-curso">
+          <div class="periodo-encabezado">
+            <span class="periodo-nombre">{{ periodo.NombrePeriodo }}</span>
+            <span class="periodo-tipo">{{ periodo.TipoPeriodo }}</span>
+          </div>
+          <div class="periodo-rango">
+            {{ formatearFecha(periodo.PeriodoInicio) }} → {{ formatearFecha(periodo.PeriodoFin) }}
+          </div>
+          <div class="periodo-barra" *ngIf="!busquedaActiva">
+            <mat-progress-bar mode="determinate" [value]="periodo.PorcentajePeriodo" color="accent"></mat-progress-bar>
+            <span class="periodo-pct">{{ periodo.PorcentajePeriodo }}% transcurrido</span>
+          </div>
+          <div class="actividades" *ngIf="actividadesFiltradas(periodo.Actividades).length">
+            <div *ngFor="let a of actividadesFiltradas(periodo.Actividades)"
+                 class="actividad-fila" [ngClass]="'act-' + a.EstadoActividad">
+              <mat-icon class="act-icono">{{ a.EsDestacada ? 'star' : 'circle' }}</mat-icon>
+              <span class="act-desc" [innerHTML]="resaltarTexto(a.DescripcionActividad)"></span>
+              <span class="act-fecha" *ngIf="a.ActividadInicio">
+                {{ formatearFecha(a.ActividadInicio) }}<span *ngIf="a.ActividadFin"> – {{ formatearFecha(a.ActividadFin) }}</span>
+              </span>
+              <span class="act-dias" *ngIf="a.DiasParaInicioActividad !== null && a.DiasParaInicioActividad !== undefined">
+                en {{ a.DiasParaInicioActividad }}d
+              </span>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </mat-expansion-panel>
+
+    <!-- ── PRÓXIMAS ── -->
+    <mat-expansion-panel [expanded]="true" class="panel panel-proximas"
+                         *ngIf="!busquedaActiva || periodosProximosFiltrados.length > 0">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon class="icono-estado icono-proximas">schedule</mat-icon>
+          Próximas
+        </mat-panel-title>
+        <mat-panel-description>{{ periodosProximos.length }} período(s)</mat-panel-description>
+      </mat-expansion-panel-header>
+
+      <p *ngIf="periodosProximos.length === 0" class="panel-vacio">Sin períodos próximos.</p>
+
+      <ng-container *ngFor="let periodo of periodosProximosFiltrados">
+        <div class="periodo-card periodo-proximas">
+          <div class="periodo-encabezado">
+            <span class="periodo-nombre">{{ periodo.NombrePeriodo }}</span>
+            <span class="periodo-tipo">{{ periodo.TipoPeriodo }}</span>
+            <span class="dias-chip" *ngIf="periodo.DiasParaInicioPeriodo !== null && periodo.DiasParaInicioPeriodo !== undefined">
+              en {{ periodo.DiasParaInicioPeriodo }} día(s)
+            </span>
+          </div>
+          <div class="periodo-rango">
+            {{ formatearFecha(periodo.PeriodoInicio) }} → {{ formatearFecha(periodo.PeriodoFin) }}
+          </div>
+          <div class="actividades" *ngIf="actividadesFiltradas(periodo.Actividades).length">
+            <div *ngFor="let a of actividadesFiltradas(periodo.Actividades)"
+                 class="actividad-fila" [ngClass]="'act-' + a.EstadoActividad">
+              <mat-icon class="act-icono">{{ a.EsDestacada ? 'star' : 'circle' }}</mat-icon>
+              <span class="act-desc" [innerHTML]="resaltarTexto(a.DescripcionActividad)"></span>
+              <span class="act-fecha" *ngIf="a.ActividadInicio">
+                {{ formatearFecha(a.ActividadInicio) }}<span *ngIf="a.ActividadFin"> – {{ formatearFecha(a.ActividadFin) }}</span>
+              </span>
+              <span class="act-dias" *ngIf="a.DiasParaInicioActividad !== null && a.DiasParaInicioActividad !== undefined">
+                en {{ a.DiasParaInicioActividad }}d
+              </span>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </mat-expansion-panel>
+
+    <!-- ── PASADAS ── -->
+    <mat-expansion-panel [expanded]="busquedaActiva" class="panel panel-pasadas"
+                         *ngIf="!busquedaActiva || periodosPasadosFiltrados.length > 0">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon class="icono-estado icono-pasadas">check_circle_outline</mat-icon>
+          Pasadas
+        </mat-panel-title>
+        <mat-panel-description>{{ periodosPasados.length }} período(s)</mat-panel-description>
+      </mat-expansion-panel-header>
+
+      <p *ngIf="periodosPasados.length === 0" class="panel-vacio">Sin períodos pasados.</p>
+
+      <ng-container *ngFor="let periodo of periodosPasadosFiltrados">
+        <div class="periodo-card periodo-pasadas">
+          <div class="periodo-encabezado">
+            <span class="periodo-nombre gris">{{ periodo.NombrePeriodo }}</span>
+            <span class="periodo-tipo">{{ periodo.TipoPeriodo }}</span>
+          </div>
+          <div class="periodo-rango gris">
+            {{ formatearFecha(periodo.PeriodoInicio) }} → {{ formatearFecha(periodo.PeriodoFin) }}
+          </div>
+          <div class="actividades" *ngIf="actividadesFiltradas(periodo.Actividades).length">
+            <div *ngFor="let a of actividadesFiltradas(periodo.Actividades)" class="actividad-fila act-pasada">
+              <mat-icon class="act-icono">check</mat-icon>
+              <span class="act-desc" [innerHTML]="resaltarTexto(a.DescripcionActividad)"></span>
+              <span class="act-fecha" *ngIf="a.ActividadInicio">
+                {{ formatearFecha(a.ActividadInicio) }}<span *ngIf="a.ActividadFin"> – {{ formatearFecha(a.ActividadFin) }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </mat-expansion-panel>
+
+  </ng-container>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-button (click)="cerrar()">Cerrar</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,106 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { CommonModule } from '@angular/common';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+
+@Component({
+  selector: 'app-calendario-publico',
+  templateUrl: './calendario-publico.component.html',
+  styleUrl: './calendario-publico.component.css',
+  imports: [
+    CommonModule,
+    MatDialogContent, MatDialogActions, MatDialogTitle,
+    MatButtonModule, MatIconModule,
+    MatProgressBarModule, MatExpansionModule,
+    MatFormFieldModule, MatInputModule
+  ]
+})
+export class CalendarioPublicoComponent implements OnInit {
+  readonly dialogRef = inject(MatDialogRef<CalendarioPublicoComponent>);
+
+  cargando = true;
+  error = '';
+  calendario: any = null;
+  terminoBusqueda = '';
+
+  get busquedaActiva(): boolean {
+    return this.terminoBusqueda.trim().length > 0;
+  }
+
+  get totalResultados(): number {
+    return this.calendario?.Periodos?.reduce((acc: number, p: any) =>
+      acc + this.actividadesFiltradas(p.Actividades).length, 0) ?? 0;
+  }
+
+  private porEstado(estado: string): any[] {
+    return this.calendario?.Periodos?.filter((p: any) => p.EstadoPeriodo === estado) ?? [];
+  }
+
+  get periodosEnCurso(): any[]  { return this.porEstado('en_curso'); }
+  get periodosProximos(): any[] { return this.porEstado('proxima'); }
+  get periodosPasados(): any[]  { return this.porEstado('pasada'); }
+
+  get periodosEnCursoFiltrados(): any[]  { return this.periodosEnCurso.filter(p => this.periodoConResultados(p)); }
+  get periodosProximosFiltrados(): any[] { return this.periodosProximos.filter(p => this.periodoConResultados(p)); }
+  get periodosPasadosFiltrados(): any[]  { return this.periodosPasados.filter(p => this.periodoConResultados(p)); }
+
+  actividadesFiltradas(actividades: any[]): any[] {
+    if (!this.busquedaActiva) return actividades ?? [];
+    const t = this.terminoBusqueda.trim().toLowerCase();
+    return (actividades ?? []).filter(a => a.DescripcionActividad?.toLowerCase().includes(t));
+  }
+
+  periodoConResultados(periodo: any): boolean {
+    return !this.busquedaActiva || this.actividadesFiltradas(periodo.Actividades).length > 0;
+  }
+
+  resaltarTexto(texto: string): string {
+    if (!this.busquedaActiva || !texto) return texto;
+    const escaped = texto.replace(/[&<>"']/g, c =>
+      ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[c]!)
+    );
+    const regex = new RegExp(`(${this.terminoBusqueda.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return escaped.replace(regex, '<mark>$1</mark>');
+  }
+
+  onBusqueda(event: Event): void {
+    this.terminoBusqueda = (event.target as HTMLInputElement).value;
+  }
+
+  limpiarBusqueda(): void {
+    this.terminoBusqueda = '';
+  }
+
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) {}
+
+  ngOnInit(): void {
+    this.http.get(this.datosGlobalesService.ObtenerURL() + 'misc/calendarioPublico').subscribe({
+      next: (datos: any) => {
+        this.calendario = datos.body;
+        this.cargando = false;
+      },
+      error: () => {
+        this.error = 'No fue posible cargar el calendario.';
+        this.cargando = false;
+      }
+    });
+  }
+
+  cerrar(): void {
+    this.dialogRef.close();
+  }
+
+  formatearFecha(fecha: any): string {
+    if (!fecha) return '—';
+    const s = typeof fecha === 'string' ? fecha : new Date(fecha).toISOString();
+    const [y, m, d] = s.slice(0, 10).split('-').map(Number);
+    return new Date(y, m - 1, d).toLocaleDateString('es-CR', { day: 'numeric', month: 'short' });
+  }
+}