:root {
  --verde: #1f3a2e;
  --arancio: #e8590c;
  --testo: #1b1f1d;
  --grigio: #5b645f;
  --bordo: #d3dad6;
  --fondo: #f1f4f2;
  --carta: #ffffff;
  --ombra: 0 2px 10px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

/* Fissa all'area visibile (non a 100vh/100dvh, che su alcuni telefoni risultano più alti dello schermo e spingono giù la barra delle schede). */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* --- testata e tab --- */
.testata {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 8px;
  color: var(--verde);
}
.testata h1 { margin: 0; font-size: 19px; letter-spacing: .01em; }

.tab {
  display: flex;
  background: var(--carta);
  border-top: 1px solid var(--bordo);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--grigio);
  cursor: pointer;
}
.tab button[aria-current="page"] { color: var(--verde); font-weight: 700; }
.tab button:focus-visible { outline: 3px solid var(--arancio); outline-offset: -3px; }

/* --- viste --- */
main { flex: 1; min-height: 0; position: relative; }
.vista { position: absolute; inset: 0; padding: 0 10px 10px; }
.vista.scorrevole { overflow-y: auto; padding: 4px 16px 24px; }
.vista h2 { margin: 6px 0 10px; font-size: 22px; }

.cornice {
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bordo);
  background: #dfe5e1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
#mappa { position: absolute; inset: 0; z-index: 0; }

/* --- pulsanti --- */
.pulsante {
  font: inherit;
  border: 0;
  cursor: pointer;
  box-shadow: var(--ombra);
  background: var(--carta);
  color: var(--testo);
}
.pulsante.tondo { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; }
#btn-posizione { position: absolute; top: 10px; right: 10px; z-index: 500; }
.pulsante:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }

#suggerimento {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(31, 58, 46, .92);
  color: #fff;
  padding: 7px 14px;
  border-radius: 16px;
  font-size: 13px;
  box-shadow: var(--ombra);
  pointer-events: none;
  white-space: nowrap;
}

#avviso {
  position: fixed;
  left: 50%;
  bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1100; /* sopra anche le finestre di conferma */
  max-width: calc(100vw - 32px);
  background: #222;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: var(--ombra);
}

/* --- intestazione del profilo e impostazioni --- */
.intestazione { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pulsante.icona { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: none; border: 1px solid var(--bordo); color: var(--verde); }
.indietro { font: inherit; font-size: 16px; font-weight: 600; color: var(--verde); background: none; border: 0; padding: 10px 0; cursor: pointer; }

/* --- schede delle viste --- */
.statistiche { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.statistiche div { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px; }
.statistiche b { display: block; font-size: 22px; }
.statistiche span { font-size: 12px; color: var(--grigio); }

.vista h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio); margin: 20px 0 6px; }

.righe { list-style: none; margin: 0; padding: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; }
.righe li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.righe li:last-child { border-bottom: 0; }
.righe li.cliccabile { cursor: pointer; }
.righe small { color: var(--grigio); display: block; }
.righe .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--grigio); text-align: right; }

.legenda { display: flex; gap: 18px; font-size: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .mini svg { display: block; }

.azioni { display: flex; gap: 8px; }
.azioni .pulsante { flex: 1; height: 44px; border-radius: 10px; box-shadow: none; border: 1px solid var(--bordo); }
.nota { font-size: 13px; color: var(--grigio); margin: 8px 0 0; line-height: 1.4; }
.nota a { color: inherit; }
.vuoto { color: var(--grigio); margin: 16px 0; line-height: 1.4; }

/* --- cime sulla mappa: triangolo piccolo, area di tocco larga (44 px) --- */
.cima-icona { background: none; border: 0; display: flex; align-items: center; justify-content: center; }
.cima-nome {
  position: absolute;
  left: 50%;
  top: calc(50% + 11px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 150px;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* nomi lunghi su due righe; solo oltre si tagliano */
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #1b1f1d;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff;
  pointer-events: none; /* il tocco resta nell'area del triangolo */
}
.cima-salita .cima-nome { color: #14532d; }
.cima-icona svg { display: block; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); pointer-events: none; }

/* --- popup della cima --- */
.leaflet-popup-content { margin: 14px 16px; min-width: 210px; font-size: 15px; }
.cima h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.2; text-transform: none; letter-spacing: 0; color: var(--testo); }
.cima .quota { margin: 0 0 10px; font-size: 36px; font-weight: 800; line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
.cima .quota span { font-size: 18px; font-weight: 700; }
.cima .dettagli { margin: -4px 0 10px; color: var(--grigio); font-size: 14px; }
.cima .conquistata { margin: 0 0 12px; font-weight: 600; color: #166534; }
.cima .secondario { font: inherit; width: 100%; height: 40px; background: #fff; color: var(--grigio); border: 1px solid var(--bordo); border-radius: 8px; cursor: pointer; }
.cima form { display: flex; flex-direction: column; gap: 8px; }
.cima label { font-size: 13px; color: var(--grigio); }
.cima input[type="date"] { font: inherit; padding: 8px; border: 1px solid var(--bordo); border-radius: 8px; width: 100%; }
.cima .invia { font: inherit; font-weight: 600; background: var(--arancio); color: #fff; border: 0; border-radius: 8px; height: 42px; cursor: pointer; }

.leaflet-control-attribution { font-size: 8.5px; white-space: nowrap; max-width: 100%; overflow: hidden; }
/* crediti centrati in basso, su una riga */
.cornice .leaflet-bottom.leaflet-right { left: 0; right: 0; display: flex; justify-content: center; }
.cornice .leaflet-bottom.leaflet-right .leaflet-control { float: none; margin: 0; }

/* --- ricerca e filtri --- */
#btn-cerca { position: absolute; top: 10px; left: 10px; z-index: 500; display: flex; align-items: center; justify-content: center; color: var(--verde); }
#ricerca { position: absolute; inset: 0; z-index: 800; background: var(--fondo); display: flex; flex-direction: column; }
#ricerca[hidden] { display: none; }
#btn-chiudi-ricerca { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 18px; }
#ricerca-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
.ricerca { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ricerca .filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
/* lascia posto al pulsante ✕: con width 100% il margine da solo non bastava e il campo finiva sotto il pulsante */
#ricerca .ricerca > .campo-testo { width: calc(100% - 52px); }
.ricerca .campo-testo { margin-bottom: 8px; }
.ricerca .campo { font: inherit; font-size: 16px; width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta); color: var(--testo); }
.ricerca .campo:focus-visible { outline: 3px solid var(--arancio); outline-offset: -1px; }
.ricerca .azzera { grid-column: 1 / -1; justify-self: end; font: inherit; font-size: 14px; background: none; border: 0; color: var(--verde); text-decoration: underline; padding: 4px 2px; cursor: pointer; }
.ricerca .conteggio { margin: 2px 2px 6px; font-size: 13px; color: var(--grigio); }
.ricerca .esiti { flex: 1; min-height: 0; overflow-y: auto; }
#vista-cerca .ricerca, #vista-elenco .ricerca { flex: none; }
#vista-cerca .ricerca .esiti, #vista-elenco .ricerca .esiti { overflow: visible; }

/* la lente è in alto a sinistra: il pulsante dello zoom scende sotto */
.cornice .leaflet-control-zoom { margin-top: 64px; }

/* pulsanti sulla mappa: semitrasparenti, così si vede cosa c'è sotto */
#btn-cerca, #btn-posizione, #btn-filtro {
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.cornice .leaflet-control-zoom { border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.cornice .leaflet-control-zoom a {
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* gruppo di cime tutte salite */
.marker-cluster-completo { background: rgba(20, 83, 45, .35); }
.marker-cluster-completo div { background: rgba(20, 83, 45, .92); color: #fff; }
.marker-cluster-completo span { font-weight: 700; }
/* gruppo con tutte cime in comune (filtro di una persona): verde con la spunta e cerchio esterno azzurro */
.marker-cluster-comune { background: rgba(125, 211, 252, .55); }

.ricerca .campo-largo { grid-column: 1 / -1; }

/* filtro delle cime sulla mappa: sotto il pulsante della posizione */
#btn-filtro { position: absolute; top: 64px; right: 10px; z-index: 500; display: flex; align-items: center; justify-content: center; color: var(--verde); }
#btn-filtro.attivo { background: var(--verde); color: #fff; }
#menu-filtro { position: absolute; top: 64px; right: 62px; z-index: 600; display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra); overflow: hidden; }
#menu-filtro[hidden] { display: none; }
#menu-filtro .scelta { font: inherit; font-size: 15px; text-align: left; white-space: nowrap; min-height: 44px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--bordo); background: none; color: var(--testo); cursor: pointer; }
#menu-filtro .scelta:last-child { border-bottom: 0; }
#menu-filtro .scelta.attiva { font-weight: 700; color: var(--verde); background: #e8f0ec; }

/* --- pulsanti sulla mappa: una colonna sottile a destra, piccoli e discreti --- */
#btn-cerca, #btn-filtro, #btn-posizione {
  left: auto; right: 8px; width: 38px; height: 38px; font-size: 19px;
  background: rgba(255, 255, 255, .55);
}
#btn-cerca { top: 8px; }
#btn-filtro { top: 52px; }
#btn-posizione { top: 96px; }
#btn-cerca svg, #btn-filtro svg { width: 19px; height: 19px; }
#btn-filtro.attivo { background: rgba(31, 58, 46, .85); }
#menu-filtro { top: 52px; right: 54px; }
.cornice .leaflet-control-zoom { margin-top: 10px; margin-left: 10px; }
/* sul telefono si zooma con le dita e con il doppio tocco: i pulsanti + e − non servono */
@media (pointer: coarse) { .cornice .leaflet-control-zoom { display: none; } }

/* ricerca nella scheda Salite: campo + pulsante Filtri */
.ricerca .riga-ricerca { display: flex; gap: 8px; margin-bottom: 8px; }
.ricerca .riga-ricerca .campo-testo { margin-bottom: 0; flex: 1; }
.ricerca .bottone-filtri { font: inherit; font-size: 15px; height: 44px; padding: 0 14px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta); color: var(--verde); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ricerca .bottone-filtri.attivo { background: var(--verde); color: #fff; border-color: var(--verde); }
.ricerca .filtri[hidden] { display: none; }

/* tre pulsanti in fila a destra: lente, imbuto, posizione (la posizione è l'ultima, al bordo) */
#btn-cerca { left: auto; right: 96px; top: 8px; }
#btn-filtro { left: auto; right: 52px; top: 8px; }
#btn-posizione { left: auto; right: 8px; top: 8px; }
#menu-filtro { left: auto; right: 8px; top: 52px; }
.cornice .leaflet-control-zoom { margin-top: 10px; }

/* riquadri del profilo che portano alla cima */
.statistiche > div.cliccabile { cursor: pointer; }
.statistiche > div.cliccabile:active, .righe li.cliccabile:active { background: #e8f0ec; }

/* --- revisione dell'import da GPX: schermata a tutto campo sopra l'app --- */
#revisione-gpx { position: fixed; inset: 0; z-index: 800; background: var(--fondo); display: flex; flex-direction: column; }
.gpx-corpo { flex: 1; overflow-y: auto; padding: 16px 16px 8px; }
.gpx-corpo h2 { margin: 0 0 4px; font-size: 20px; }
.gpx-riga { flex-direction: column; align-items: stretch; gap: 8px; }
.gpx-scelta { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.gpx-scelta input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--verde); }
.gpx-testo b { font-weight: 700; }
.gpx-avviso { color: var(--arancio); }
.campo-data { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); color: var(--testo); margin-left: 34px; }
.gpx-piede { display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--carta); border-top: 1px solid var(--bordo); }
.gpx-piede .pulsante { flex: 1; height: 46px; border-radius: 10px; box-shadow: none; border: 1px solid var(--bordo); }
.gpx-piede .pulsante.primario { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 700; flex: 2; }
.gpx-piede .pulsante:disabled { opacity: .45; cursor: default; }

.gpx-errore { font-size: 16px; line-height: 1.4; margin: 12px 0 0; }
.gpx-gia { opacity: .8; }
.gpx-gia .gpx-scelta { cursor: default; }
.gpx-spunta { flex: none; width: 22px; height: 22px; margin: 2px 0 0; border-radius: 50%; background: #16a34a; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* --- cancellazione di tutti i dati --- */
.zona-pericolo { margin-top: 28px; padding: 14px; border: 2px solid #b42318; border-radius: 12px; background: #fff5f4; }
.zona-pericolo h3 { margin: 0 0 6px; color: #b42318; }
.zona-pericolo p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; }
.pulsante.pericolo { background: #b42318; color: #fff; font-weight: 700; }
.zona-pericolo .pulsante.pericolo { width: 100%; height: 46px; border-radius: 10px; box-shadow: none; }
#dialogo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg-sfondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.dlg { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: var(--carta); border-radius: 14px; padding: 18px; box-shadow: var(--ombra); }
.dlg h2 { margin: 0 0 10px; font-size: 20px; }
.dlg p { margin: 0 0 12px; line-height: 1.45; }
.dlg-pericolo { border-top: 6px solid #b42318; }
.dlg-pericolo h2 { color: #b42318; }
.dlg-forte { font-weight: 800; color: #b42318; }
.dlg-casella { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; font-weight: 600; cursor: pointer; }
.dlg-casella input { width: 24px; height: 24px; flex: none; accent-color: #b42318; }
.dlg-campo { width: 100%; height: 46px; font-size: 18px; letter-spacing: .08em; margin-bottom: 12px; }
.dlg-azioni { display: flex; gap: 8px; margin-top: 4px; }
.dlg .pulsante { height: 48px; border-radius: 10px; box-shadow: none; border: 1px solid var(--bordo); padding: 0 12px; }
.dlg .pulsante.secondario { width: 100%; margin-bottom: 12px; background: #fff; }
.dlg-azioni .pulsante { flex: 1; }
.dlg .pulsante.sicuro { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 700; }
.dlg .pulsante.pericolo { border-color: #b42318; }
.dlg .pulsante:disabled { opacity: .35; cursor: default; }

.riquadro-alto { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.ricerca .riquadro-alto > .riga-ricerca, .ricerca .riquadro-alto > .filtri { margin: 0; }
.gpx-importa { display: block; width: 100%; height: 48px; border-radius: 10px; box-shadow: none; background: var(--verde); color: #fff; font-weight: 700; }

/* pulsante "Installa" nella testata (solo se l'app non è già installata) */
.installa { margin-left: auto; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--verde); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.installa:focus-visible { outline: 3px solid var(--arancio); outline-offset: 2px; }

/* scheda Cerca: nel riquadro il campo di testo sta da solo */
.ricerca .riquadro-alto > .campo-testo { margin-bottom: 0; }

/* ---------- account ---------- */
.blocco-google { width: 100%; }
.nota-consenso { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--grigio); text-align: center; }
.blocco-google .nota-consenso, .dlg .nota-consenso { font-size: 12.5px; line-height: 1.4; color: var(--grigio); margin: 8px 0 0; }
.dlg .nota-consenso { text-align: left; margin: 8px 0 12px; }
.dlg-sezione { font-weight: 700; margin: 14px 0 2px; }
.invito-account { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.invito-account h3 { margin: 0 0 4px; }
.invito-account p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--grigio); }
.pulsante.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border-radius: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; box-shadow: none; font-weight: 600; font-size: 15px; }
.google-g { display: inline-flex; }
.sezione-account { margin-bottom: 22px; }
.sezione-account .pulsante.google { margin-top: 10px; }
.account-riga { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.account-testo { display: flex; flex-direction: column; min-width: 0; }
.account-testo b, .account-testo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-testo small { color: var(--grigio); }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; background: var(--bordo); }
.avatar-vuoto { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--verde); }
.link-pericolo { display: block; margin: 12px 0 0; padding: 8px 0; background: none; border: 0; color: #b42318; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.avviso-date { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid #b54708; border-radius: 12px; background: #fffaeb; }
.avviso-date p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.zona-pericolo .sep-pericolo { margin-top: 16px; }
.zona-pericolo .pulsante.pericolo + .sep-pericolo { padding-top: 14px; border-top: 1px solid #f0b8b3; }
.invito-account.invito-evidenza { border: 2px solid var(--verde); background: #eaf3ee; }
.zona-pericolo p { white-space: pre-line; }
.privacy-account { margin-top: 14px; }
.interruttore { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.interruttore input { width: 24px; height: 24px; flex: none; accent-color: var(--verde); }

/* ---------- username ---------- */
.riga-username { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.riga-username .username { font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-azione { background: none; border: 0; padding: 8px 0 8px 12px; color: var(--verde); font: inherit; font-weight: 600; cursor: pointer; }
.campo-testo { width: 100%; height: 46px; border-radius: 10px; border: 1px solid var(--bordo); padding: 0 12px; font-size: 16px; box-sizing: border-box; margin: 4px 0 0; }
.stato-username { min-height: 22px; margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.stato-username.ok { color: #067647; }
.stato-username.no { color: #b42318; }

.privacy-account h3 { margin: 18px 0 4px; }
.opzione-visibilita { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.opzione-visibilita input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--verde); }
.opzione-visibilita b { display: block; }
.opzione-visibilita small { display: block; color: var(--grigio); line-height: 1.35; margin-top: 2px; }

.riga-username .impostazione { font-size: 16px; }
.riga-username .impostazione b { font-weight: 700; }

/* Impostazioni: ogni parte è una scheda */
.scheda-imp, .sezione-account { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px; margin: 0 0 14px; }
.scheda-imp h3, .sezione-account h3 { margin: 0 0 10px; }
.scheda-imp .nota:first-child { margin-top: 0; }
.sezione-account .account-riga { margin: 0 0 4px; }
.sezione-account .esci-piccolo { display: block; width: auto; margin-top: 12px; padding-top: 0; flex: none; height: 36px; padding: 0 14px; border-radius: 10px; box-shadow: none; border: 1px solid var(--bordo); font-size: 14px; }
.sezione-account .riga-username { margin: 10px 0 0; padding-top: 4px; border-top: 1px solid var(--bordo); }
.sezione-account .riga-username .link-azione { padding-right: 0; }
.zona-pericolo { margin-top: 14px; }
/* Titolo e ingranaggio sullo stesso asse: i margini del titolo passano al contenitore */
.intestazione { margin: 0; }
.intestazione h2 { margin: 0; line-height: 1.2; }
/* Ingranaggio abbassato: il suo centro sta sulla linea sotto il titolo "Profilo" (scelta dell'utente) */
.intestazione .pulsante.icona { transform: translateY(18px); }

/* Scheda Cerca: selettore Cime / Persone e risultati delle persone */
.selettore-modo { display: flex; gap: 4px; padding: 4px; margin: 0 0 8px; background: #e6ece9; border-radius: 12px; }
.selettore-modo .modo { flex: 1; height: 38px; border: 0; border-radius: 9px; background: none; color: var(--grigio); font: inherit; font-weight: 600; cursor: pointer; }
.selettore-modo .modo[aria-pressed="true"] { background: var(--carta); color: var(--verde); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.persone .persona { align-items: center; }
.persona-testo { display: flex; flex-direction: column; min-width: 0; }
.persona-testo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-testo small { color: var(--grigio); line-height: 1.3; }
.etichetta-ristretto { font-weight: 600; }
.persona .segui { flex: none; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--verde); background: var(--verde); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.persona .segui.seguito { background: var(--carta); color: var(--verde); }
.persona .segui:disabled { opacity: .5; }

.persona-testo { cursor: pointer; }
.persona-testata { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 12px; }
.persona-testata .segui { flex: none; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--verde); background: var(--verde); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.persona-testata .segui.seguito { background: var(--carta); color: var(--verde); }

/* Filtro "cime di una persona" sulla mappa: targhetta in alto a sinistra, cime azzurre */
#chip-persona { position: absolute; top: 8px; left: 8px; z-index: 500; max-width: calc(100% - 150px); display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 14px; border-radius: 19px; background: rgba(224, 242, 254, .92); color: #075985; border: 1px solid #7dd3fc; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); font-size: 14px; font-weight: 700; }
#chip-persona[hidden] { display: none; }
#chip-persona-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chip-persona-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 16px; cursor: pointer; }
.cima-persona .cima-nome { color: #075985; }
.marker-cluster-persona { background: rgba(125, 211, 252, .45); }
.marker-cluster-persona div { background: rgba(14, 116, 144, .92); color: #fff; }
.persona-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.persona-testata .persona-mappa { flex: none; height: 36px; padding: 0 14px; white-space: nowrap; border-radius: 18px; border: 1px solid #7dd3fc; background: #e0f2fe; color: #075985; font: inherit; font-weight: 600; cursor: pointer; }

/* Link all'informativa sempre presente nella pagina iniziale (richiesto anche da Google per la verifica del marchio) */