:root {
  --carta: #E8EEF3;
  --carta-scura: #DBE4EC;
  --inchiostro: #16232E;
  --inchiostro-attenuato: #4F616E;
  --blu-protocollo: #163A56;
  --azzurro-chiaro: #2E82AC;
  --ambra-margine: #96702E;
  --riga: #C2CEDA;
  /* Classificazione documenti (mappa dei collegamenti): colori aggiuntivi,
     scelti e validati (contrasto, cromia, distinguibilità CVD) per stare
     accanto a blu-protocollo/azzurro-chiaro senza confondersi con ambra-margine
     (riservato al significato "delibera mancante"). */
  --classe-determina: #1B8A66;
  --classe-decreto: #6A4C93;
  --classe-personale: #A83E73;
  --classe-bilancio: #B24C32;
  --classe-affidamenti: #4C5FA8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background-color: var(--carta);
  background-image:
    radial-gradient(rgba(30,42,38,.05) .6px, transparent .6px);
  background-size: 4px 4px;
  color: var(--inchiostro);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.7;
}

body::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--blu-protocollo), var(--azzurro-chiaro));
}

a { color: inherit; }
a:focus-visible, input:focus-visible {
  outline: 2px solid var(--blu-protocollo);
  outline-offset: 2px;
}

@keyframes salita {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Pagina documento ---------- */

.pagina {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.barra-laterale {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.torna-indice {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inchiostro-attenuato);
  transition: color .15s ease;
}
.torna-indice:hover { color: var(--blu-protocollo); }
.torna-mappa { display: flex; align-items: center; gap: .3em; }

.timbro {
  --colore-timbro: var(--blu-protocollo);
  border: 2px solid var(--colore-timbro);
  border-radius: 2px;
  padding: .9rem 1.15rem .9rem 1rem;
  transform: rotate(-1.4deg);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
  width: fit-content;
  animation: salita .5s ease both;
}
.timbro-cc { --colore-timbro: var(--azzurro-chiaro); }
.timbro-fantasma { --colore-timbro: var(--ambra-margine); border-style: dashed; }
.timbro-fantasma::before { border-style: dashed; }
.timbro::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--colore-timbro);
  border-radius: 1px;
  opacity: .55;
}
.timbro::after {
  content: "";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 3px, var(--colore-timbro) 3.5px, var(--colore-timbro) 4px, transparent 4.5px),
    radial-gradient(circle at center, var(--colore-timbro) 1.5px, transparent 1.5px);
  opacity: .8;
}
.timbro-tipo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--colore-timbro);
}
.timbro-numero {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--colore-timbro);
  line-height: 1.1;
  font-variant-numeric: oldstyle-nums;
}
.timbro-anno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  color: var(--colore-timbro);
}
.timbro-data {
  display: block;
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: .78rem;
  color: var(--colore-timbro);
  opacity: .8;
  margin-top: .15rem;
}
.timbro-piccolo { transform: rotate(-1deg); margin-bottom: .9rem; }
.timbro-piccolo .timbro-numero { font-size: 1.2rem; }

.componenti { display: flex; flex-direction: column; gap: .5rem; }
.componenti-titolo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-attenuato);
  border-bottom: 1px solid var(--riga);
  padding-bottom: .4rem;
}
.componenti ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.componenti li { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.3; }
.componenti-nome { color: var(--inchiostro); }
.componenti-ruolo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .03em;
  color: var(--inchiostro-attenuato);
}

.legenda-link {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--inchiostro-attenuato);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.legenda-link-titolo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-attenuato);
  border-bottom: 1px solid var(--riga);
  padding-bottom: .4rem;
}
.legenda-link-voce { display: flex; align-items: flex-start; gap: .5rem; }
.legenda-pallino { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: .3em; }
.legenda-risolto { background: var(--blu-protocollo); }
.legenda-rotto { background: none; border: 1.5px dashed var(--ambra-margine); }

.indice-sezioni-titolo {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-attenuato);
  border-bottom: 1px solid var(--riga);
  padding-bottom: .4rem;
  margin-bottom: .6rem;
}
.indice-sezioni ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.indice-sezioni a {
  text-decoration: none;
  font-size: .88rem;
  color: var(--inchiostro-attenuato);
  border-left: 2px solid transparent;
  padding-left: .6rem;
  display: block;
  transition: color .15s ease, border-color .15s ease, padding-left .15s ease;
}
.indice-sezioni a:hover { color: var(--blu-protocollo); border-left-color: var(--azzurro-chiaro); padding-left: .8rem; }

.documento h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  line-height: 1.25;
  margin: 0 0 2rem;
  color: var(--blu-protocollo);
  animation: salita .5s ease both .05s;
}

.corpo-documento { animation: salita .6s ease both .1s; }

.corpo-documento h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* "Art. N": vere partizioni strutturali del testo (poche, importanti),
   marcate con un accento forte per farle risaltare come divisori. */
.corpo-documento h2.titolo-articolo {
  font-size: .8rem;
  color: var(--blu-protocollo);
  margin: 2.8rem 0 1.1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--azzurro-chiaro);
}
.corpo-documento h2.titolo-articolo:first-child { margin-top: 0; }

/* Connettori retorici (VISTO, DATO ATTO, CONSIDERATO CHE, ...): decine per
   documento, introducono una premessa e non una vera sezione, quindi
   restano più piccoli e leggeri, come un'etichetta sopra il paragrafo
   invece di un titolo di pari peso di "Art. N". */
.corpo-documento h2.titolo-clausola {
  font-size: .68rem;
  font-weight: 600;
  color: var(--inchiostro-attenuato);
  margin: 1.5rem 0 .4rem;
  padding-left: .6rem;
  border-left: 2px solid var(--riga);
}
.corpo-documento h2.titolo-clausola:first-child { margin-top: 0; }

.corpo-documento p { margin: 0 0 1.15rem; max-width: 72ch; }

.tabella-contenitore { overflow-x: auto; margin: 0 0 1.6rem; }
.tabella-estratta {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: .93rem;
}
.tabella-estratta th, .tabella-estratta td {
  border: 1px solid var(--riga);
  padding: .5rem .7rem;
  text-align: left;
  vertical-align: top;
}
.tabella-estratta th {
  background: var(--blu-protocollo);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
.tabella-estratta tbody tr:nth-child(even) { background: var(--carta-scura); }

.corpo-documento p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 3.4em;
  float: left;
  line-height: .82;
  padding: .05em .1em 0 0;
  color: var(--blu-protocollo);
}

a.riferimento {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: background .15s ease;
}
a.riferimento:hover { text-decoration-style: solid; background: var(--carta-scura); }

/* Link interno: un'altra delibera già presente in archivio (percorso
   relativo, es. "gc-64-2025.html"): freccia dritta, "resti nel sito". */
a.riferimento-interno { color: var(--blu-protocollo); }
a.riferimento-interno::after { content: "\2192"; display: inline-block; margin-left: .15em; font-size: .8em; opacity: .6; }

/* Link esterno: normativa su Normattiva/EUR-Lex, fuori dall'archivio:
   colore diverso e freccia in diagonale, convenzione per "apre altrove". */
a.riferimento-esterno { color: var(--azzurro-chiaro); }
a.riferimento-esterno::after { content: "\2197"; display: inline-block; margin-left: .15em; font-size: .8em; opacity: .6; }

.riferimento-non-risolto {
  color: var(--ambra-margine);
  background: rgba(150, 112, 46, .1);
  border-bottom: 1px dashed var(--ambra-margine);
  border-radius: 2px;
  padding: 0 .2em;
  cursor: help;
}
.riferimento-non-risolto::after { content: "\2020"; margin-left: .15em; font-size: .8em; }

/* ---------- Indice / schedario ---------- */

.pagina-indice { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

.testata { margin-bottom: 2rem; animation: salita .5s ease both; }
.eyebrow {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azzurro-chiaro);
  margin-bottom: .6rem;
}
.testata h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  margin: 0 0 .5rem;
  color: var(--blu-protocollo);
}
.sottotitolo { color: var(--inchiostro-attenuato); margin: 0; max-width: 60ch; }
.link-mappa {
  display: inline-block;
  margin-top: .9rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--azzurro-chiaro);
  text-decoration: none;
  border-bottom: 1px dotted var(--azzurro-chiaro);
}
.link-mappa:hover { color: var(--blu-protocollo); border-color: var(--blu-protocollo); }

.cassetto-ricerca { margin-bottom: 2rem; animation: salita .5s ease both .05s; }
.cassetto-ricerca label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-attenuato);
  margin-bottom: .4rem;
}
.cassetto-ricerca input {
  width: 100%;
  max-width: 420px;
  padding: .65rem .9rem;
  border: 1px solid var(--riga);
  border-radius: 2px;
  background: #fff;
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  color: var(--inchiostro);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cassetto-ricerca input:focus-visible { border-color: var(--blu-protocollo); }

.indice-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
  animation: salita .55s ease both .08s;
}
.categoria-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem;
  letter-spacing: .02em;
  background: #fff;
  border: 1px solid var(--riga);
  border-radius: 20px;
  padding: .35rem .8rem;
  color: var(--inchiostro-attenuato);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.categoria-chip:hover { border-color: var(--blu-protocollo); color: var(--inchiostro); }
.categoria-chip.categoria-attiva { background: var(--blu-protocollo); border-color: var(--blu-protocollo); color: #fff; }
.categoria-chip.categoria-attiva .mappa-punto { outline: 1.5px solid #fff; }
.categoria-conteggio { color: inherit; opacity: .7; }

.schedario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
  animation: salita .6s ease both .1s;
  min-height: 120px;
}
.indice-stato {
  grid-column: 1 / -1;
  color: var(--inchiostro-attenuato);
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
}

.indice-paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}
.pagina-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  letter-spacing: .03em;
  background: #fff;
  border: 1px solid var(--riga);
  border-radius: 20px;
  padding: .5rem 1rem;
  color: var(--inchiostro);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pagina-btn:hover:not(:disabled) { border-color: var(--blu-protocollo); color: var(--blu-protocollo); }
.pagina-btn:disabled { opacity: .4; cursor: default; }
.pagina-indicatore { font-family: 'IBM Plex Mono', monospace; font-size: .76rem; color: var(--inchiostro-attenuato); }
.scheda {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--riga);
  border-radius: 3px;
  padding: 1.3rem 1.2rem 1.4rem;
  text-decoration: none;
  color: var(--inchiostro);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.scheda::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  /* --colore-scheda è impostata inline da genera_indice() in base alla
     classificazione REALE del documento (vedi CLASSI_DOCUMENTO), non solo
     GC/CC: prima di questa variabile ogni scheda non-delibera mostrava lo
     stesso azzurro di una Giunta Comunale, indipendentemente dalla classe. */
  background: var(--colore-scheda, var(--blu-protocollo));
}
.scheda:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -14px rgba(31,77,92,.4); }
.scheda-oggetto {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scheda-freccia {
  display: inline-block;
  margin-top: .8rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  color: var(--inchiostro-attenuato);
}
.scheda:hover .scheda-freccia { color: var(--blu-protocollo); }

@media (max-width: 860px) {
  .pagina { grid-template-columns: 1fr; padding-top: 1.8rem; }
  .barra-laterale { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .timbro { transform: none; }
  .timbro::before { transform: none; }
  .indice-sezioni { flex: 1 1 220px; }
}

/* ---------- Mappa dei collegamenti (grafo) ---------- */

.corpo-mappa { margin: 0; height: 100vh; overflow: hidden; }

.pagina-mappa {
  --pannello: #F4F8FB;
  --riga-forte: #9FB3C4;
  --ombra: 0 14px 32px -18px rgba(22,35,46,.35);
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100vh;
  width: 100vw;
}

.mappa-rail {
  background: var(--pannello);
  border-right: 1px solid var(--riga);
  padding: 1.6rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  overflow-y: auto;
}
.mappa-rail h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0;
  color: var(--blu-protocollo);
}
.mappa-rail .mappa-sotto { margin: .55rem 0 0; font-size: .85rem; color: var(--inchiostro-attenuato); line-height: 1.55; }

.mappa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mappa-stat { background: #fff; border: 1px solid var(--riga); border-radius: 3px; padding: .6rem .7rem; }
.mappa-stat b {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--blu-protocollo);
  line-height: 1.05;
}
.mappa-stat.mappa-warn b { color: var(--ambra-margine); }
.mappa-stat span { font-size: .66rem; letter-spacing: .03em; color: var(--inchiostro-attenuato); text-transform: uppercase; }

/* Ricerca: in cima alla mappa, a piena larghezza (solo il margine di
   .mappa-top a sinistra/destra), non più nella barra laterale — è l'azione
   principale della pagina (con archivi grandi la mappa parte vuota, vedi
   visibile() in JS) e i risultati devono restare ben leggibili sopra la
   tela, non schiacciati in una lista stretta di sidebar. */
.mappa-cerca-top { position: relative; width: 100%; pointer-events: auto; }
.mappa-cerca-riga { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.mappa-cerca-riga input[type="text"] {
  flex: 1 1 320px;
  min-width: 0;
  padding: .75rem 1.1rem;
  border: 1px solid var(--riga);
  border-radius: 24px;
  background: #fff;
  font-family: 'Source Serif 4', serif;
  font-size: .98rem;
  color: var(--inchiostro);
  box-shadow: var(--ombra);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mappa-cerca-riga input[type="text"]:focus-visible {
  outline: none; border-color: var(--blu-protocollo);
  box-shadow: 0 0 0 3px rgba(46,130,172,.25), var(--ombra);
}
.mappa-opzione-cerca {
  flex: none;
  white-space: nowrap;
  font-size: .78rem;
  background: var(--pannello);
  border: 1px solid var(--riga);
  border-radius: 20px;
  padding: .5rem .9rem;
  box-shadow: var(--ombra);
}
.mappa-risultati {
  position: absolute; top: calc(100% + .6rem); left: 0; right: 0;
  display: flex; flex-direction: column; gap: .15rem;
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--pannello); border: 1px solid var(--riga); border-radius: 10px;
  box-shadow: 0 20px 40px -16px rgba(22,35,46,.35);
  padding: .4rem;
}
.mappa-risultati:empty { display: none; }
.mappa-risultato {
  text-align: left; border: none; background: none; width: 100%;
  padding: .55rem .6rem; border-radius: 6px; font-size: .88rem; color: var(--inchiostro);
  cursor: pointer; display: flex; align-items: center; gap: .55rem; font-family: 'Source Serif 4', serif;
}
.mappa-risultato span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mappa-risultato:hover { background: var(--carta-scura); }
.mappa-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }

fieldset.mappa-legenda { border: 1px solid var(--riga); border-radius: 3px; padding: .75rem .8rem .85rem; margin: 0; }
fieldset.mappa-legenda legend {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--inchiostro-attenuato); padding: 0 .3rem;
}
.mappa-voce-legenda { display: flex; align-items: center; gap: .55rem; font-size: .78rem; padding: .28rem 0; }
.mappa-linea { width: 22px; height: 2px; background: var(--riga-forte); display: inline-block; flex: none; }
.mappa-linea.mappa-rotta { background: none; border-top: 2px dashed var(--ambra-margine); height: 0; width: 22px; }

.mappa-opzione { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--inchiostro); cursor: pointer; }
.mappa-opzione input { accent-color: var(--blu-protocollo); width: 15px; height: 15px; }

.mappa-rail-footer {
  margin-top: auto; font-size: .72rem; color: var(--inchiostro-attenuato); line-height: 1.55;
  border-top: 1px solid var(--riga); padding-top: .8rem;
}

.mappa-area {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(rgba(30,42,38,.05) .6px, transparent .6px) 0 0/4px 4px,
    var(--carta);
}
.mappa-area canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.mappa-area canvas.mappa-trascinando { cursor: grabbing; }

.mappa-top {
  position: absolute; top: 1rem; left: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .7rem;
  pointer-events: none;
}
/* Tutto allineato a sinistra, MAI a destra: il cassetto di dettaglio
   (.mappa-cassetto) si apre sovrapponendosi al lato destro dell'area mappa,
   coprendo qualunque controllo si trovasse lì (era il caso di "Reimposta
   vista" e dei pulsanti di modalità nella versione precedente). */
.mappa-top-riga { display: flex; justify-content: flex-start; align-items: flex-start; gap: .6rem; }
.mappa-pillola {
  pointer-events: auto; background: rgba(244,248,251,.9); border: 1px solid var(--riga); border-radius: 20px;
  padding: .4rem .9rem; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--inchiostro-attenuato);
  box-shadow: var(--ombra);
}
.mappa-btn-reset {
  pointer-events: auto; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .03em; text-transform: uppercase;
  background: var(--pannello); color: var(--blu-protocollo); border: 1px solid var(--riga); border-radius: 20px;
  padding: .45rem 1rem; cursor: pointer; box-shadow: var(--ombra);
}
.mappa-btn-reset:hover { border-color: var(--blu-protocollo); }

.mappa-modalita {
  pointer-events: auto; display: flex; gap: .15rem; background: var(--pannello); border: 1px solid var(--riga);
  border-radius: 20px; padding: .2rem; box-shadow: var(--ombra);
}
.mappa-modalita-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase;
  background: none; color: var(--inchiostro-attenuato); border: none; border-radius: 16px;
  padding: .4rem .8rem; cursor: pointer;
}
.mappa-modalita-btn:hover { color: var(--inchiostro); }
.mappa-modalita-btn.mappa-modalita-attiva { background: var(--blu-protocollo); color: #fff; }

.mappa-cassetto {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 90vw);
  background: var(--pannello); border-left: 1px solid var(--riga); box-shadow: var(--ombra);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; z-index: 5;
}
.mappa-cassetto.mappa-aperto { transform: translateX(0); }
/* Quando il cassetto è aperto, la barra di ricerca (a tutta larghezza) si
   restringe per non finirci sotto: senza questo, checkbox e dropdown dei
   risultati — che arrivano fino al bordo destro — resterebbero nascosti
   dietro il cassetto esattamente come i pulsanti "Reimposta vista". */
.pagina-mappa:has(.mappa-cassetto.mappa-aperto) .mappa-top { right: calc(min(380px, 90vw) + 2rem); }
.mappa-cassetto-testata { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.2rem 1.2rem .8rem; border-bottom: 1px solid var(--riga); }
.mappa-chiudi { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--inchiostro-attenuato); line-height: 1; padding: .2rem .4rem; }
.mappa-chiudi:hover { color: var(--inchiostro); }
.mappa-chip {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 20px; background: var(--carta-scura); color: var(--inchiostro-attenuato); margin-bottom: .7rem;
}
.mappa-cassetto-corpo { padding: 1rem 1.2rem 1.4rem; overflow-y: auto; overflow-x: hidden; flex: 1; overflow-wrap: anywhere; }
.mappa-cassetto-corpo h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; line-height: 1.35; margin: 0 0 .8rem; color: var(--inchiostro); overflow-wrap: anywhere; }
.mappa-chip-classe {
  display: flex; align-items: center; gap: .45rem; font-size: .74rem; letter-spacing: .02em;
  color: var(--inchiostro-attenuato); margin-bottom: .8rem; font-family: 'IBM Plex Mono', monospace;
}
.mappa-link-apri {
  display: inline-block; margin-bottom: 1.1rem; font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
  color: var(--blu-protocollo); text-decoration: none; border-bottom: 1px dotted var(--blu-protocollo);
}
.mappa-link-apri:hover { color: var(--azzurro-chiaro); border-color: var(--azzurro-chiaro); }
.mappa-percorso {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--inchiostro-attenuato);
  background: var(--carta); border: 1px solid var(--riga); border-radius: 3px; padding: .5rem .6rem; margin-bottom: 1.1rem;
}
.mappa-sezione { margin-bottom: 1.1rem; }
.mappa-sezione h3 {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--inchiostro-attenuato); border-bottom: 1px solid var(--riga); padding-bottom: .35rem; margin: 0 0 .5rem;
}
.mappa-voce-collegamento {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none;
  padding: .4rem .3rem; border-radius: 3px; cursor: pointer; font-size: .82rem; color: var(--inchiostro); line-height: 1.35;
  font-family: 'Source Serif 4', serif;
}
.mappa-voce-collegamento span:last-child { flex: 1; min-width: 0; }
.mappa-voce-collegamento:hover { background: var(--carta-scura); }
.mappa-stato { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.mappa-stato.mappa-st-risolto { background: var(--azzurro-chiaro); }
.mappa-stato.mappa-st-rotto { background: none; border: 1.5px dashed var(--ambra-margine); }
.mappa-vuoto { color: var(--inchiostro-attenuato); font-size: .8rem; font-style: italic; }
.mappa-componente {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .3rem; font-size: .82rem; color: var(--inchiostro); font-family: 'Source Serif 4', serif;
}
.mappa-componente-ruolo {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--inchiostro-attenuato); flex: none;
}

@media (max-width: 860px) {
  .pagina-mappa { grid-template-columns: 1fr; }
  .mappa-rail { max-height: 40vh; }
  .mappa-top-riga { flex-wrap: wrap; }
}