Calendario: il 19 e il 20 settembre non sono un buco, sono un evento e una chiusura

Quei due giorni non stanno in nessuna delle due griglie perche' non hanno class:
il 19 c'e' la presentazione della nuova apertura, il 20 si sta chiusi. Scritto
come avviso con la sua finestra, il vuoto smette di sembrare una trascrizione
incompleta e diventa un'informazione.

Gli avvisi compaiono in cima al popup e in fondo al PDF - e' il file che gira su
WhatsApp, e chi lo riceve non ha la pagina davanti. Spariscono da soli quando
sono passati: un avviso scaduto dice che il centro e' chiuso in un giorno gia'
trascorso, e chi legge non sa piu' se valga per quest'anno o per il prossimo.

Lo spazio riservato in fondo alla pagina cresce con gli avvisi, altrimenti la
griglia si allunga fino a spingerli su una seconda pagina.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/CalendarioModal.astro

@@ -7,10 +7,13 @@
 // dichiarando da quando entra.
 //
 // Si apre da qualunque elemento con `data-apri-calendario` nella stessa pagina.
-import { calendarioDaMostrare, GIORNI, DISCIPLINE, type Giorno } from '../data/calendari';
+import { calendarioDaMostrare, avvisiAttivi, GIORNI, DISCIPLINE, type Giorno } from '../data/calendari';
 import { t } from '../lib/content';
 
-const scelta = calendarioDaMostrare(new Date());
+const adesso = new Date();
+const scelta = calendarioDaMostrare(adesso);
+// Giornate fuori griglia (eventi, chiusure): spariscono da sole quando sono passate.
+const avvisi = avvisiAttivi(adesso);
 const cal = scelta?.cal ?? null;
 const dal = cal ? new Date(cal.from).toLocaleDateString('it-IT', {
   day: 'numeric', month: 'long', year: 'numeric', timeZone: 'Europe/Rome',
@@ -38,6 +41,14 @@ const presenti = cal
         </div>
       </header>
 
+      {avvisi.length > 0 && (
+        <ul class="cal-avvisi">
+          {avvisi.map((a) => (
+            <li><strong>{a.quando}</strong> — {a.testo}</li>
+          ))}
+        </ul>
+      )}
+
       <div class="cal-dlg__scroll">
         <table class="cal-tab">
           <thead>
@@ -133,6 +144,15 @@ const presenti = cal
   }
   .cal-dlg__chiudi:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
 
+  /* Giornate fuori griglia: stanno sopra la tabella perché sono l'eccezione a ciò che la
+     tabella dice, e sotto passerebbero per una postilla. */
+  .cal-avvisi {
+    list-style: none; margin: 18px 0 0; padding: 12px 16px; background: var(--c-bg-alt);
+    border-left: 3px solid var(--c-accent); display: flex; flex-direction: column; gap: 4px;
+  }
+  .cal-avvisi li { font-size: .84rem; color: var(--c-text); }
+  .cal-avvisi strong { color: var(--c-heading); }
+
   /* La griglia ha otto colonne: su telefono scorre in orizzontale invece di comprimersi
      fino a diventare illeggibile, e la colonna delle ore resta ferma. */
   .cal-dlg__scroll { flex: 1; overflow: auto; margin: 22px 0 0; }