/* BandiRadar — © 2026 Dospinescu Alexandru Gabriel (P.IVA 04870850403), Rimini, Italia.
   Tutti i diritti riservati.
   Software protetto dalla legge sul diritto d'autore (L. 633/1941, art. 2 n. 8).
   Sono vietati la copia, la modifica, la distribuzione, la decompilazione e ogni forma di
   riuso, totale o parziale, senza autorizzazione scritta del titolare.
   Vietato l'utilizzo del codice e dei contenuti per l'addestramento di sistemi di
   intelligenza artificiale.
   Contatti: dospi22@gmail.com */

/* ═══════════════════════════════════════════════════════════════════
   ADEMPIMENTI — foglio di stile della sezione
   ═══════════════════════════════════════════════════════════════════
   ⚠️ QUESTO FILE NON DICHIARA NESSUN COLORE, NESSUN CARATTERE E NESSUNA
   MISURA TIPOGRAFICA. Li prende tutti da style.css, che la pagina carica
   prima di questo (DESIGN.md, «regola dell'accento unico»: un secondo
   elenco di colori da qualche altra parte nel foglio è la cosa che questo
   mondo rifiuta più di ogni altra). Se qui dentro comparisse un `#`
   seguito da sei cifre, sarebbe il segno che qualcosa è stato copiato
   invece che chiamato.

   Verificabile: python scripts/verifica_token_css.py — un
   var(--nome-sbagliato) non dà nessun errore, dà una regola che sparisce.

   Tutte le classi cominciano per `ad-`, come `.str-` per Agevolazioni
   fisse, `.terr-` per Avvisi degli enti e `.msg-` per la chat: la pagina
   carica anche style.css, e un nome generico ci si scontrerebbe contro.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Il guscio ────────────────────────────────────────────────────── */
.ad-pagina {
  max-width: 1000px;
  margin-inline: auto;
  padding: 24px 20px 64px;
}

/* La barra in cima: da dove si torna indietro, e di chi stiamo parlando. */
.ad-testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.ad-indietro {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-ui); color: var(--text-muted);
  text-decoration: none; padding: 6px 0;
}
.ad-indietro:hover { color: var(--bosco); text-decoration: underline; }
.ad-titolo {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-titolo);
  letter-spacing: var(--tr-titolo);
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 6px;
}
.ad-sottotitolo {
  font-size: var(--t-scheda);
  line-height: var(--lh-prosa);
  color: var(--text-muted);
  max-width: var(--misura-prosa);
}

/* Di chi sono gli adempimenti che si stanno guardando. Per il cliente è la
   sua azienda; per l'amministratore è il cliente che ha aperto, e allora
   la riga deve DIRLO — è la stessa ragione per cui nella chat il nome
   dell'interlocutore resta in cima al filo (CLAUDE.md §9.25). */
.ad-chi {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--card2);
  border: 1px solid var(--filo);
  border-radius: var(--radius-sm);
  font-size: var(--t-ui);
  color: var(--text);
}
.ad-chi strong { font-weight: 600; }
.ad-chi-dato {
  font-family: var(--font-mono);
  font-size: var(--t-dato);
  color: var(--text-muted);
}
.ad-chi-admin {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: var(--tr-maiuscolo);
  font-weight: 600;
  color: var(--bosco);
}

/* ── L'avviso che non è opzionale ─────────────────────────────────── */
/* La sezione la leggono i CLIENTI, e parla di sanzioni. Il disclaimer non
   è una formalità da mettere in fondo: sta in cima, dentro il flusso di
   lettura, prima della prima scheda. Se un giorno qualcuno lo sposta in
   fondo alla pagina, ha cambiato la funzione senza accorgersene. */
.ad-avviso {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 24px;
  padding: 12px 14px;
  background: var(--stato-prorogato-vel);
  border-left: 3px solid var(--stato-prorogato);
  border-radius: var(--radius-sm);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  color: var(--text);
}
.ad-avviso svg { flex: 0 0 auto; margin-top: 1px; }

/* La fascia dell'anteprima: si vede SOLO sul computer di chi lavora al
   progetto (adempimenti.js la accende solo su localhost). Deve essere
   impossibile scambiarla per la pagina vera. */
.ad-finto {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 2px dashed var(--stato-scaduto);
  border-radius: var(--radius);
  background: var(--stato-scaduto-vel);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}
.ad-finto b { display: block; margin-bottom: 4px; font-size: var(--t-gruppo); }

/* ── Filtri ───────────────────────────────────────────────────────── */
.ad-filtri {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--filo-scheda);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.ad-filtro-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-filtro-eti {
  flex: 0 0 auto; min-width: 74px;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: var(--tr-maiuscolo);
  font-weight: 600;
  color: var(--text-muted);
}
.ad-chip {
  font: inherit;
  font-size: var(--t-ui);
  padding: 5px 12px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  min-height: 32px;
}
.ad-chip:hover { border-color: var(--bosco); }
.ad-chip[aria-pressed="true"] {
  background: var(--bosco-velo);
  border-color: var(--bosco);
  color: var(--bosco-scuro);
  font-weight: 600;
}
.ad-scelta {
  font: inherit;
  font-size: var(--t-ui);
  padding: 6px 10px;
  border: 1px solid var(--filo);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  min-height: 34px;
}
.ad-conteggio {
  font-size: var(--t-ui);
  color: var(--text-muted);
  margin-left: auto;
}

/* ── La scheda di un obbligo ──────────────────────────────────────── */
.ad-lista { display: flex; flex-direction: column; gap: 14px; }

.ad-scheda {
  background: var(--card);
  border: 1px solid var(--filo-scheda);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.ad-scheda-testa {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.ad-scheda-titolo {
  flex: 1 1 260px;
  font-size: var(--t-scheda);
  font-weight: 600;
  line-height: var(--lh-titolo);
  color: var(--text);
  margin: 0;
}
.ad-scheda-testo {
  font-size: var(--t-corpo);
  line-height: var(--lh-prosa);
  color: var(--text);
  max-width: var(--misura-prosa);
  margin: 0 0 12px;
}

/* Il semaforo. Due stati soli, e portano un dato:
     verde  = verificato di recente
     giallo = potrebbe essere cambiato, e il link accanto dice dove guardare
   Non c'è il rosso: «potrebbe essere cambiato» non è un allarme, è un
   invito a controllare, e un rosso in pagina si leggerebbe come «sei
   fuori legge» — che è esattamente quello che non possiamo dire. */
.ad-semaforo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.4;
}
.ad-semaforo::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.ad-semaforo.verificato {
  color: var(--stato-aperto);
  background: var(--stato-aperto-vel);
}
.ad-semaforo.da_riverificare {
  color: var(--stato-prorogato);
  background: var(--stato-prorogato-vel);
}
.ad-semaforo.sospeso {
  color: var(--stato-sospeso);
  background: var(--stato-sospeso-vel);
}

/* Il livello: gli stessi quattro colori dei bandi, perché è la stessa
   informazione — da quale ordinamento viene la regola. */
.ad-livello {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-maiuscolo);
}
.ad-livello.ue        { color: var(--livello-eu);        background: var(--livello-eu-vel); }
.ad-livello.nazionale { color: var(--livello-nazionale); background: var(--livello-nazionale-vel); }
.ad-livello.regionale { color: var(--livello-er);        background: var(--livello-er-vel); }
.ad-livello.comunale  { color: var(--livello-regione);   background: var(--livello-regione-vel); }

/* La riga dei dati: frequenza, norma, data di verifica. Monospazio perché
   sono dati, non prosa (DESIGN.md: «il monospazio è per i dati»). */
.ad-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-top: 10px;
  border-top: 1px solid var(--filo);
  font-size: var(--t-meta);
  color: var(--text-muted);
}
.ad-meta-voce { display: inline-flex; align-items: baseline; gap: 6px; }
.ad-meta-eti { text-transform: uppercase; letter-spacing: var(--tr-maiuscolo); }
.ad-meta-val { font-family: var(--font-mono); font-size: var(--t-dato); color: var(--text); }
/* Un campo che non sappiamo NON si riempie con qualcosa di plausibile: si
   dichiara vuoto, e si vede che è vuoto. È la regola numero uno del piano. */
.ad-meta-val.vuoto { font-family: var(--font-body); font-style: italic; color: var(--text-muted); }

.ad-fonte {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-meta);
  color: var(--bosco);
  text-decoration: underline;
}
.ad-fonte.assente {
  color: var(--text-muted);
  text-decoration: none;
  font-style: italic;
}

/* ── Stati vuoti ──────────────────────────────────────────────────── */
.ad-vuoto {
  padding: 32px 20px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--filo-scheda);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--t-corpo);
  line-height: var(--lh-prosa);
}
.ad-vuoto strong { display: block; color: var(--text); margin-bottom: 6px; font-size: var(--t-gruppo); }

/* ── Il radar delle novità ────────────────────────────────────────── */
/* Sta SOTTO gli obblighi e ha un'intestazione sua: sono due cose diverse
   (quello che devi rispettare / quello che è cambiato) e il piano chiede
   di non mescolarle. */
.ad-sezione-titolo {
  font-family: var(--font-display);
  font-size: var(--t-titolo);
  font-weight: 600;
  letter-spacing: var(--tr-titolo);
  color: var(--text);
  margin: 40px 0 6px;
}
.ad-sezione-testo {
  font-size: var(--t-corpo);
  line-height: var(--lh-prosa);
  color: var(--text-muted);
  max-width: var(--misura-prosa);
  margin: 0 0 16px;
}

/* ── Telefono ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ad-pagina { padding: 16px 16px 48px; }
  .ad-filtro-eti { min-width: 100%; }
  .ad-conteggio { margin-left: 0; width: 100%; }
}