/* Scheda dell'ente (/comune/<ente>)
   Stessa veste del sito pubblico: i colori e i caratteri vengono da pubblico.css.
   Tutte le classi hanno il prefisso sc- perche' sulla pagina resta caricato Bootstrap,
   che serve al riquadro dell'assistente IA: cosi' i due mondi non si toccano. */

.sc-pagina {
  --sc-fascia: #4FB39A;
  --sc-fascia-chiaro: #2F8F77;
  --sc-oro-segno: #A6770F;
  --sc-critico: #C4453F;
  --sc-attenzione: #D98A2B;
  --sc-regola: #2E7D52;
  --sc-critico-fondo: #F6E3E1;
  --sc-attenzione-fondo: #FBEBD6;
  --sc-regola-fondo: #E2F0E7;
  --sc-notte: #0A1833;
  --sc-filo: rgba(181, 194, 214, 0.22);
  color: var(--testo);
}
.sc-pagina h1, .sc-pagina h2, .sc-pagina h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.sc-pagina p { margin: 0; }
.sc-pagina .num { font-variant-numeric: tabular-nums; }

/* ---------- Apertura ---------- */
.sc-apertura {
  background: radial-gradient(1200px 600px at 78% 40%, #16305E 0%, var(--blu) 55%, var(--sc-notte) 100%);
  color: var(--su-blu);
  border-bottom: 1px solid var(--oro-filo);
  overflow: hidden;
}
.sc-apertura > .contenitore { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; padding-block: 44px 36px; }
@media (max-width: 980px) { .sc-apertura > .contenitore { grid-template-columns: minmax(0, 1fr); padding-block: 32px 24px; } }
.sc-occhiello { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-chiaro); font-weight: 600; }
.sc-apertura h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.04; color: #fff; margin: 12px 0 14px; }
.sc-sotto { color: var(--su-blu-tenue); max-width: 34em; font-size: 1rem; }
.sc-sotto b { color: var(--su-blu); font-weight: 600; }
.sc-codici { margin-top: 6px; font-size: 0.8rem; color: var(--su-blu-tenue); opacity: 0.8; }
.sc-stato { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--sc-filo); border: 1px solid var(--sc-filo); border-radius: 8px; overflow: hidden; }
.sc-stato div { background: rgba(10, 24, 51, 0.55); padding: 14px 16px; }
.sc-stato strong { display: block; font-size: 2rem; line-height: 1; font-weight: 600; color: #fff; }
.sc-stato span { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--su-blu-tenue); margin-top: 8px; }
.sc-stato span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.sc-giudizio { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--su-blu-tenue); }
.sc-pill { flex: none; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.8rem; border: 1px solid; }
.sc-pill.basso { background: rgba(46, 125, 82, 0.18); color: #9FD9B6; border-color: rgba(46, 125, 82, 0.6); }
.sc-pill.medio { background: rgba(217, 138, 43, 0.16); color: #F3C27E; border-color: rgba(217, 138, 43, 0.5); }
.sc-pill.alto { background: rgba(196, 69, 63, 0.18); color: #F4A29C; border-color: rgba(196, 69, 63, 0.55); }

.sc-radar svg { width: 100%; height: auto; display: block; overflow: visible; }
.sc-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.84rem; color: var(--su-blu-tenue); justify-content: center; margin-top: 4px; }
.sc-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.sc-legenda .sw { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.sc-legenda .pt { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sc-nota-radar { font-size: 0.8rem; color: var(--su-blu-tenue); text-align: center; margin: 8px auto 0 !important; max-width: 46em; opacity: 0.85; }
.sc-poly-ente { transform-origin: center; transform-box: view-box; animation: sc-cresci 1.1s var(--curva) both; }
@keyframes sc-cresci { from { transform: scale(0.55); } to { transform: scale(1); } }
.sc-alone { transform-origin: center; transform-box: fill-box; animation: sc-pulsa 2.2s ease-out infinite; }
@keyframes sc-pulsa { 0% { transform: scale(0.6); opacity: 0.75; } 100% { transform: scale(2.3); opacity: 0; } }
.sc-asse { cursor: pointer; }
.sc-asse:focus { outline: none; }
.sc-asse:hover .sc-etichetta tspan:first-child, .sc-asse:focus .sc-etichetta tspan:first-child { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .sc-poly-ente, .sc-alone { animation: none; } .sc-alone { opacity: 0.35; } }
.sc-vuoto-radar { border: 1px dashed var(--sc-filo); border-radius: 10px; padding: 28px; text-align: center; color: var(--su-blu-tenue); font-size: 0.95rem; }

/* segnaposto durante il caricamento: stessa forma del contenuto */
.sc-attesa { background: linear-gradient(90deg, rgba(181,194,214,.10) 0%, rgba(181,194,214,.22) 50%, rgba(181,194,214,.10) 100%); background-size: 200% 100%; animation: sc-luce 1.4s linear infinite; border-radius: 8px; }
.sc-attesa.chiaro { background: linear-gradient(90deg, #EFECE3 0%, #F7F5EF 50%, #EFECE3 100%); background-size: 200% 100%; }
@keyframes sc-luce { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sc-attesa { animation: none; } }

/* ---------- Barra delle schede ---------- */
.sc-schede { position: sticky; top: 64px; z-index: 30; background: rgba(250, 250, 247, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linea); }
.sc-schede .contenitore { display: flex; align-items: center; gap: 6px; min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.sc-schede a, .sc-schede span { white-space: nowrap; font-size: 0.92rem; padding: 7px 12px; border-radius: 6px; text-decoration: none; color: var(--blu-medio); font-weight: 500; }
.sc-schede a:hover { background: var(--carta); color: var(--blu); }
.sc-schede [aria-current="page"] { background: var(--blu); color: var(--su-blu); }
.sc-schede .sc-sep { width: 1px; height: 22px; background: var(--linea-forte); padding: 0; margin: 0 6px; }
.sc-schede .sc-doc { color: var(--testo-tenue); }
.sc-schede .sc-doc::before { content: "\2193\00a0"; color: var(--oro); }

/* ---------- Sezioni ---------- */
.sc-blocco { padding-block: 56px; }
.sc-blocco + .sc-blocco { border-top: 1px solid var(--linea); }
.sc-carta { background: var(--carta); }
.sc-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 28px; }
@media (max-width: 860px) { .sc-testa { grid-template-columns: minmax(0, 1fr); } }
.sc-testa h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--blu); line-height: 1.12; }
.sc-testa p { color: var(--testo-tenue); max-width: 36em; }
.sc-testa .sc-occhiello { color: var(--sc-oro-segno); margin-bottom: 6px; }

/* Segnali */
.sc-segnali { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .sc-segnali { grid-template-columns: minmax(0, 1fr); } }
.sc-segnale { background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.sc-segnale::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sc-critico); }
.sc-segnale header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-segnale h3 { font-size: 1.2rem; color: var(--blu); }
.sc-bollino { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.sc-bollino.alto { background: var(--sc-critico-fondo); color: #9C2F2A; }
.sc-bollino.medio { background: var(--sc-attenzione-fondo); color: #8A5210; }
.sc-bollino.basso { background: var(--sc-regola-fondo); color: #1F5E3C; }
.sc-cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sc-cifra strong { font-size: 2.5rem; line-height: 1; font-weight: 600; color: var(--blu); }
.sc-cifra small { color: var(--testo-tenue); font-size: 0.92rem; }
.sc-confronto { display: flex; gap: 18px; font-size: 0.86rem; color: var(--testo-tenue); flex-wrap: wrap; }
.sc-confronto b { color: var(--testo); font-weight: 600; }
.sc-azione { font-size: 0.9rem; border-top: 1px solid var(--linea); padding-top: 12px; }
.sc-azione em { font-style: normal; color: var(--testo-tenue); display: block; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.sc-spark { height: 74px; }
.sc-segnale svg.sc-scala { width: 100%; height: 34px; display: block; overflow: visible; }
.sc-nessuno { background: var(--sc-regola-fondo); color: #1F5E3C; border-radius: 10px; padding: 18px 22px; font-size: 0.98rem; }

/* Scala di attenzione */
.sc-scala-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.84rem; color: var(--testo-tenue); margin-bottom: 14px; }
.sc-scala-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.sc-scala-legenda i { display: inline-block; width: 22px; height: 8px; border-radius: 2px; }
.sc-scale { display: grid; gap: 2px; background: var(--linea); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.sc-riga { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 1.4fr); gap: 20px; align-items: center; background: var(--bianco); padding: 14px 20px; }
.sc-riga:hover, .sc-riga:focus { background: #FDFCF8; outline: none; }
.sc-riga .sc-nome { font-weight: 600; color: var(--blu); font-size: 0.95rem; line-height: 1.3; }
.sc-riga .sc-nome small { display: block; font-weight: 400; color: var(--testo-tenue); font-size: 0.78rem; }
.sc-riga .sc-val { text-align: right; font-weight: 600; font-size: 1.05rem; color: var(--blu); white-space: nowrap; }
.sc-riga .sc-val small { font-weight: 400; color: var(--testo-tenue); font-size: 0.76rem; margin-left: 2px; }
.sc-riga svg { width: 100%; height: 34px; display: block; overflow: visible; }
@media (max-width: 700px) { .sc-riga { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; } .sc-riga svg { grid-column: 1 / -1; grid-row: 2; } }
.sc-gruppo { background: var(--carta); padding: 8px 20px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--testo-tenue); }
.sc-altri { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sc-chip { display: inline-flex; gap: 8px; align-items: center; background: var(--bianco); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 0.86rem; }
.sc-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sc-chip b { font-weight: 600; color: var(--blu); }

/* Sciame regionale */
.sc-sciame-riga { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); gap: 20px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--linea); }
.sc-sciame-riga:last-child { border-bottom: 0; }
@media (max-width: 760px) { .sc-sciame-riga { grid-template-columns: minmax(0, 1fr); } }
.sc-sciame-riga h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: var(--blu); }
.sc-sciame-riga p { font-size: 0.86rem; color: var(--testo-tenue); margin-top: 4px; }
.sc-sciame-riga p b { color: var(--testo); }
.sc-sciame svg { width: 100%; height: auto; display: block; overflow: visible; }
.sc-pos { display: inline-block; font-size: 1.9rem; font-weight: 600; color: var(--sc-oro-segno); line-height: 1; margin-top: 6px; }
.sc-pos small { font-size: 0.9rem; color: var(--testo-tenue); font-weight: 400; }

/* Pannelli con grafici */
.sc-griglia2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.sc-griglia2.pari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 980px) { .sc-griglia2, .sc-griglia2.pari { grid-template-columns: minmax(0, 1fr); } }
.sc-pannello { background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; padding: 20px 20px 12px; min-width: 0; }
.sc-pannello h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--blu); }
.sc-pannello .sc-sottotitolo { font-size: 0.85rem; color: var(--testo-tenue); margin-top: 2px; }
.sc-grafico { width: 100%; height: 320px; margin-top: 8px; }
.sc-grafico.alto { height: 380px; }
.sc-grafico.basso { height: 260px; }
.sc-fatto { display: flex; gap: 16px; align-items: center; margin-top: 20px; padding: 16px 18px; border-radius: 8px; background: var(--bianco); border: 1px solid var(--linea); font-size: 0.95rem; }
.sc-fatto strong { font-size: 1.9rem; line-height: 1; font-weight: 700; color: var(--blu); flex: none; }
.sc-vuoto { color: var(--testo-tenue); font-size: 0.92rem; padding: 32px 8px; text-align: center; }

.sc-tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 860px) { .sc-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-tessera { background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.sc-tessera span { font-size: 0.8rem; color: var(--testo-tenue); display: block; }
.sc-tessera strong { font-size: 1.5rem; font-weight: 600; color: var(--blu); line-height: 1.2; display: block; margin-top: 4px; overflow-wrap: anywhere; }
.sc-tessera small { font-size: 0.8rem; color: var(--testo-tenue); }
.sc-tessera small.su { color: var(--sc-regola); }
.sc-tessera small.giu { color: var(--sc-critico); }

/* Tabelle */
.sc-tabella { overflow-x: auto; }
.sc-tabella table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 0; }
.sc-tabella th, .sc-tabella td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: right; vertical-align: top; }
.sc-tabella th:first-child, .sc-tabella td:first-child { text-align: left; }
.sc-tabella td.sc-desc { text-align: left; }
.sc-tabella th { font-weight: 600; color: var(--testo-tenue); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.sc-tabella td { font-variant-numeric: tabular-nums; }
.sc-tabella tr.sc-totale td { font-weight: 700; color: var(--blu); border-top: 2px solid var(--linea-forte); border-bottom: 0; }
.sc-tabella .sc-codice { color: var(--testo-tenue); font-size: 0.8rem; white-space: nowrap; }
details.sc-numeri { margin-top: 10px; font-size: 0.88rem; }
details.sc-numeri summary { cursor: pointer; color: var(--blu-medio); font-weight: 600; padding: 6px 0; }
.sc-apertura details.sc-numeri summary { color: var(--oro-chiaro); }
.sc-apertura .sc-tabella th, .sc-apertura .sc-tabella td { border-color: var(--sc-filo); color: var(--su-blu); }

/* Anni */
.sc-anni { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 24px; }
.sc-anni span.sc-etichetta-anni { font-size: 0.85rem; color: var(--testo-tenue); margin-right: 6px; }
.sc-anni a { font-size: 0.88rem; padding: 5px 11px; border-radius: 6px; border: 1px solid var(--linea); background: var(--bianco); color: var(--blu-medio); text-decoration: none; font-variant-numeric: tabular-nums; }
.sc-anni a:hover { border-color: var(--oro); }
.sc-anni a[aria-current="true"] { background: var(--blu); border-color: var(--blu); color: var(--su-blu); }
.sc-anni a.sc-parziale { border-style: dashed; color: var(--testo-tenue); }
.sc-avviso { background: var(--sc-attenzione-fondo); color: #6B400C; border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 20px; }
.sc-sottosezione { font-family: var(--serif); font-size: 1.45rem; color: var(--blu); margin: 40px 0 16px !important; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sc-sottosezione small { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; background: var(--sc-attenzione-fondo); color: #8A5210; padding: 2px 8px; border-radius: 3px; }

/* Controlli */
.sc-controlli { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sc-controllo { display: flex; gap: 12px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 8px; padding: 14px 16px; font-size: 0.9rem; align-items: flex-start; }
.sc-controllo i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 0.8rem; color: #fff; background: var(--c); margin-top: 1px; }
.sc-controllo small { display: block; color: var(--testo-tenue); font-size: 0.78rem; margin-top: 3px; }
.sc-avvertenza { margin-top: 20px; font-size: 0.85rem; color: var(--testo-tenue); }

/* Suggerimento al passaggio del mouse */
.sc-sugg { position: fixed; z-index: 80; pointer-events: none; background: var(--sc-notte); color: var(--su-blu); border: 1px solid rgba(232, 184, 74, 0.4); border-radius: 6px; padding: 10px 12px; font-size: 0.84rem; line-height: 1.45; max-width: 290px; box-shadow: var(--ombra-lg); opacity: 0; transition: opacity 0.12s; }
.sc-sugg b { color: #fff; font-weight: 600; }
.sc-sugg .r { display: flex; justify-content: space-between; gap: 16px; }
.sc-sugg .r span:last-child { font-variant-numeric: tabular-nums; color: #fff; }

/* Riquadro IA: ospitato dentro la veste nuova, con le sue classi Bootstrap */
.sc-ia {
  padding-top: 32px;
  /* _ia_domanda.html colora titolo, bordo, cursore e pulsante "Chiedi" con var(--primary),
     che il vecchio base.html definiva e pubblico.css no: senza, il pulsante e' bianco su bianco */
  --primary: var(--blu-medio);
}
.sc-ia #ia-box { border-radius: 10px; border: 1px solid var(--linea); box-shadow: none; }

/* Fonti in fondo */
.sc-fonti { padding-block: 32px 48px; }
.sc-fonti .fonti-dati-box { max-width: none; }

/* Tabella "Data aggiornamento" (_fonti_dati.html), nella veste della scheda */
.sc-fonti .fonti-dati-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.sc-fonti .fonti-dati-table thead th { background: var(--blu); color: var(--su-blu); text-align: left; padding: 8px 14px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.sc-fonti .fonti-dati-table tbody td { padding: 7px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.sc-fonti .fonti-dati-table .fonte-nome { font-weight: 600; color: var(--blu); width: 35%; }
.sc-fonti .fonti-dati-table .fonte-dettaglio { color: var(--testo); }
.sc-fonti .fonti-dati-table .fonte-note { font-size: 0.78rem; color: var(--testo-tenue); }

.sc-avviso-fascia { margin: 12px auto 0 !important; max-width: 46em; font-size: 0.84rem; line-height: 1.5; color: #F3C27E; background: rgba(217, 138, 43, 0.12); border: 1px solid rgba(217, 138, 43, 0.4); border-radius: 8px; padding: 10px 14px; }