:root {
  --inchiostro: #232526;
  --carta: #f6f3ed;
  --pannello: #fffdf9;
  --bordo: #ded7cb;
  --acento: #8a4f2c;
  --asfalto: #964f64;
  --carrabile: #a8753d;
  --sentiero: #3f8064;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: Georgia, "Times New Roman", serif;
}

.pagina-percorsi { max-width: 1440px; margin: 0 auto; padding: 48px 32px; }

.introduzione { margin-bottom: 32px; }
.soprattitolo, .etichetta { color: var(--acento); font-family: Arial, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 10px; text-transform: uppercase; }
h1, h2 { line-height: 1.08; }
h1 { font-size: clamp(2.35rem, 4.2vw, 3.85rem); font-weight: 400; margin: 0 0 16px; white-space: nowrap; }
h2 { font-size: 1.35rem; font-weight: 400; margin: 0 0 8px; }
.introduzione > p:last-child { font-size: 1.15rem; line-height: 1.55; margin: 0; max-width: 720px; }

.mappa-layout { border: 1px solid var(--bordo); display: grid; grid-template-columns: 330px minmax(0, 1fr); height: 670px; }
.pannello { background: var(--pannello); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px; }
.stato { color: #635d54; font-family: Arial, sans-serif; font-size: .88rem; line-height: 1.45; margin: -2px 0 0; }
.mostra-tutti { background: var(--acento); border: 1px solid var(--acento); color: white; cursor: pointer; font: 700 .82rem/1.2 Arial, sans-serif; padding: 11px 12px; text-align: left; }
.mostra-tutti:hover, .mostra-tutti:focus-visible { background: #633519; border-color: #633519; outline: 2px solid #633519; outline-offset: 2px; }
.stato-visualizzazione { color: #635d54; font-family: Arial, sans-serif; font-size: .76rem; line-height: 1.45; margin: -4px 0 0; }
.legenda ul { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; margin: 0; padding: 0; }
.legenda li { align-items: center; display: flex; font-family: Arial, sans-serif; font-size: .78rem; gap: 7px; }
.linea { border-radius: 2px; display: inline-block; height: 4px; width: 34px; }
.asfalto { background: var(--asfalto); }.carrabile { background: var(--carrabile); }.sentiero { background: var(--sentiero); }
.elenco-percorsi { display: grid; gap: 6px; }
.percorso { background: transparent; border: 1px solid var(--bordo); color: var(--inchiostro); cursor: pointer; font-family: Arial, sans-serif; font-size: .82rem; line-height: 1.2; padding: 8px 10px; text-align: left; transition: background .18s, color .18s; width: 100%; }
.percorso:hover, .percorso:focus-visible, .percorso.attivo { background: var(--acento); border-color: var(--acento); color: white; outline: none; }
#mappa { height: 100%; min-height: 0; width: 100%; }
.popup-percorso { font-family: Arial, sans-serif; font-size: .84rem; line-height: 1.45; }
.popup-percorso-mappa { background: rgba(255, 253, 249, .97); border: 1px solid var(--bordo); box-shadow: 0 3px 14px rgba(35, 37, 38, .2); max-width: 280px; padding: 16px; position: relative; width: min(280px, calc(100vw - 72px)); }
.popup-percorso-mappa[hidden] { display: none; }
.popup-percorso h3 { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 400; line-height: 1.2; margin: 0 20px 8px 0; }
.popup-percorso p { margin: 4px 0; }.azioni-download { display: flex; gap: 6px; margin-top: 12px; }.popup-percorso .download { align-items: center; background: var(--acento); color: white; display: inline-flex; flex: 1; font-size: .8rem; font-weight: 700; justify-content: center; min-height: 36px; padding: 8px; text-align: center; text-decoration: none; }
.popup-percorso .download:hover, .popup-percorso .download:focus-visible { background: #633519; outline: 2px solid #633519; outline-offset: 2px; }
.popup-percorso .download-pdf { background: #635d54; }
.popup-percorso .download-pdf:hover, .popup-percorso .download-pdf:focus-visible { background: #3e3933; outline-color: #3e3933; }
.chiudi-popup { background: transparent; border: 0; color: #635d54; cursor: pointer; font: 1.5rem/1 Arial, sans-serif; padding: 0; position: absolute; right: 10px; top: 10px; }
.chiudi-popup:hover, .chiudi-popup:focus-visible { color: var(--inchiostro); outline: 2px solid var(--acento); outline-offset: 2px; }
.selettore-mobile { display: none; }

@media (max-width: 780px) {
  .pagina-percorsi { padding: 28px 16px; }
  h1 { white-space: normal; }
  .mappa-layout { display: grid; grid-template-areas: "mappa" "controlli"; grid-template-columns: 1fr; height: auto; }
  #mappa { grid-area: mappa; height: min(62vh, 560px); min-height: 420px; }
  .pannello { border-bottom: 1px solid var(--bordo); border-right: 0; grid-area: controlli; max-height: none; padding: 24px 18px; }
  .percorso { min-height: 44px; }
  .selettore-mobile { display: block; }
  .selettore-mobile label { display: block; font: 700 .76rem Arial, sans-serif; margin-bottom: 6px; text-transform: uppercase; }
  .selettore-mobile select { background: white; border: 1px solid #b9ae9f; font: inherit; padding: 11px; width: 100%; }
  .pannello .legenda, .pannello .lista-desktop { display: none; }
  .popup-percorso-mappa { max-width: min(280px, calc(100vw - 60px)); }
}