/* Avvisi dal territorio (inc/avvisi.php): card (.avv) della pagina /avvisi/, riga compatta (.avr) di home e guida.
   Caricato su home, guida del comune e /avvisi/ (che riusa anche testata, filtri e gruppi di eventi.css).
   Origine: tela ../design/avvisi. */

:root {
  /* Cinque categorie. Il colore sta solo nel disco dell'icona (contrasto >= 3:1 sul disco); le scritte restano in --text-2 */
  --av-viab: #9A5F0B;  --av-viab-bg: rgba(154,95,11,.13);
  --av-chiu: #C22F31;  --av-chiu-bg: rgba(194,47,49,.12);
  --av-meteo: #2F7FB5; --av-meteo-bg: rgba(47,127,181,.13);
  --av-serv: #237A74;  --av-serv-bg: rgba(35,122,116,.13);
  --av-even: #58704F;  --av-even-bg: rgba(88,112,79,.14);
  --av-warn-fg: #7A4E08; --av-warn-bg: rgba(201,138,43,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --av-viab: #E9B45E; --av-viab-bg: rgba(233,180,94,.16);
    --av-chiu: #FF938F; --av-chiu-bg: rgba(255,147,143,.16);
    --av-meteo: #8CC3E0; --av-meteo-bg: rgba(140,195,224,.16);
    --av-serv: #6FD0C6; --av-serv-bg: rgba(111,208,198,.16);
    --av-even: #B2CBA9; --av-even-bg: rgba(178,203,169,.16);
    --av-warn-fg: #F2CB8A; --av-warn-bg: rgba(233,180,94,.18);
  }
}
:root[data-theme="dark"] {
  --av-viab: #E9B45E; --av-viab-bg: rgba(233,180,94,.16);
  --av-chiu: #FF938F; --av-chiu-bg: rgba(255,147,143,.16);
  --av-meteo: #8CC3E0; --av-meteo-bg: rgba(140,195,224,.16);
  --av-serv: #6FD0C6; --av-serv-bg: rgba(111,208,198,.16);
  --av-even: #B2CBA9; --av-even-bg: rgba(178,203,169,.16);
  --av-warn-fg: #F2CB8A; --av-warn-bg: rgba(233,180,94,.18);
}

.c-viab { --c: var(--av-viab); --cb: var(--av-viab-bg); }
.c-chiu { --c: var(--av-chiu); --cb: var(--av-chiu-bg); }
.c-meteo { --c: var(--av-meteo); --cb: var(--av-meteo-bg); }
.c-serv { --c: var(--av-serv); --cb: var(--av-serv-bg); }
.c-even { --c: var(--av-even); --cb: var(--av-even-bg); }

/* Disco con l'icona della categoria (32 px: sulla card e sulla riga) */
.avc { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cb); color: var(--c); }
.avc svg { width: 18px; height: 18px; }

.status.warn { background: var(--av-warn-bg); color: var(--av-warn-fg); }

/* ---------- CARD (lista /avvisi/) ---------- */
.avvs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .avvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avv { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.avv:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--hover-border); }
.avv-top { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.avv-cat { font-size: var(--text-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.avv-when { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.avv h3 { font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.avv p { font-size: 14px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avv-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding-top: 2px; } /* chip e pillole su una riga, poi il link sotto */
.avv-place { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.avv-place svg { width: 13px; height: 13px; color: var(--text-2); }
.avv-src { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); min-width: 0; }
.avv-src svg { width: 13px; height: 13px; flex: none; }
.avv-go { flex-basis: 100%; display: flex; align-items: center; gap: 5px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--accent); }
.avv-go svg { width: 14px; height: 14px; transition: transform var(--t); }
.avv:hover .avv-go svg { transform: translate(2px, -2px); }
.avv-go.in:hover svg, .avv:hover .avv-go.in svg { transform: translateX(3px); }

/* Urgente: barra rossa a sinistra + pillola. Niente animazione: il puntino che pulsa e' riservato a "in corso / dal vivo" */
.avv.urgent { border-left: 4px solid var(--rosso); padding-left: 14px; }
/* Segnalazione di un'associazione o di un residente: bordo tratteggiato, non e' una comunicazione ufficiale */
.avv.seg { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.avv.seg:hover { background: var(--surface); }
/* Scaduto: resta raggiungibile dal link, sparisce dalla lista "In vigore" */
.avv.old { opacity: .72; }

/* ---------- RIGA COMPATTA (widget in home, "Dal comune" nella guida) ---------- */
.avr { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 56px; padding: 10px 8px; margin: 0 -8px; border-top: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; transition: background-color var(--t); }
.avr:first-child { border-top: 0; }
.avr:hover { background: var(--surface-2); }
.avr .t { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avr .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.avr .meta b { color: var(--text); font-weight: 700; }
.avr .meta .status { padding: 3px 8px; }
.avr.urgent { background: rgba(217,56,58,.08); box-shadow: inset 4px 0 0 var(--rosso); padding-left: 16px; }
.avr.urgent:hover { background: rgba(217,56,58,.14); }
.avr.urgent + .avr { border-top-color: transparent; }
:root[data-theme="dark"] .avr.urgent { background: rgba(255,147,143,.12); }
@media (hover: none) { .avv:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .avv:hover { transform: none; } .avv-go svg { transition: none; } }
@media (max-width: 719px) { .avv:active { transform: scale(.985); transition-duration: 80ms; } }

/* ---------- PAGINA /avvisi/ ---------- */
.av-side .notice b { color: var(--text); }
.av-cover { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
.av-cover li { margin-left: 18px; }
.av-cover ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Chip del filtro come link (a.btn): mai a capo; freccia del percorso dentro il link */
.filters .quick a.btn { white-space: nowrap; }
.crumb a svg { width: 18px; height: 18px; flex: none; }
.day > .more.center, .col > .av-storico { display: block; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Paginazione dello storico */
.av-pag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.col > .av-storico { align-self: center; }
.av-side .foot { flex-wrap: wrap; }
.av-cover .notice a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- POP-UP DELL'AVVISO (dialog .avd, costruito in shared.js da avvApri) ----------
   Mobile: foglio che sale dal basso. Desktop: finestra al centro. Dentro: categoria, comune e data, titolo, inizio del testo,
   fonte con il link al sito del comune, condividi, altri avvisi dello stesso comune. */
.avd { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 90vh; max-height: 90dvh; padding: 0; border: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -8px 40px rgba(15,30,38,.25); overflow: auto; overscroll-behavior: contain; }
.avd::backdrop { background: rgba(15,30,38,.55); }
.avd[open] { animation: avd-su .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes avd-su { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) {
  .avd { inset: 0; margin: auto; width: min(600px, calc(100% - 48px)); height: fit-content; max-height: 86vh; border-radius: var(--radius-l); box-shadow: 0 24px 60px rgba(15,30,38,.3); }
  .avd[open] { animation-name: avd-in; }
  @keyframes avd-in { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
}
.avd-in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 10px 20px 24px; }
@media (min-width: 720px) { .avd-in { padding: 22px 28px 28px; } }
.avd-grip { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: 2px; }
@media (min-width: 720px) { .avd-grip { display: none; } }
.avd-top { display: flex; align-items: center; gap: 8px 10px; padding-right: 52px; flex-wrap: wrap; }
.avd-x { position: absolute; top: 10px; right: 12px; }
@media (min-width: 720px) { .avd-x { top: 16px; right: 18px; } }
.avd h2 { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 720px) { .avd h2 { font-size: 28px; } }
.avd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.avd-meta a.avv-place:hover { background: var(--line); }
.avd-testo { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.avd-testo.vuoto { color: var(--text-2); font-style: italic; }
.avd-fonte { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
.avd-fonte p { font-size: 13px; color: var(--text-2); }
.avd-fonte p b { color: var(--text); }
.avd-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.avd-azioni .cta { flex: 1 1 auto; }
.avd-azioni .cta.ext::after { content: '\2197'; }
.avd-azioni .cta.ghost::after { content: none; }
.avd-azioni .cta svg { width: 18px; height: 18px; }
.avd-altri { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.avd-altri h3 { font-size: 16px; padding-top: 10px; }
.avd-altri .more { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--accent); padding: 12px 0; }
/* Caricamento: righe grigie al posto del testo */
.avd-sk { height: 14px; border-radius: 7px; background: var(--surface-2); }
.avd-sk.t { height: 26px; width: 80%; }
.avd-sk.c { width: 60%; }
@media (prefers-reduced-motion: reduce) { .avd[open] { animation: none; } }
:root[data-theme="dark"] .avd { background: var(--surface); }
.avd-azioni .cta { height: auto; min-height: 44px; padding: 10px 20px; text-align: center; }