/* =============================================================================
   moduli.css — moduli e pagine di servizio (rivendicazione, privacy, area
   gestori e admin)
   =============================================================================
   Si carica dopo base.css. Stesse misure di filtri.css e pannello.css: campi e
   pulsanti alti 44px, raggio piccolo, pulsante principale su --colore-brand.
   Solo variabili di base.css, nessun colore scritto a mano.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Pagina: base.css blocca lo scorrimento per la mappa; qui la pagina scorre
   -------------------------------------------------------------------------- */

body.pagina-servizio {
  display: block;
  height: auto;
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
  overflow: auto;
  /* Salto leggibile verso le sezioni dell'indice dell'editor; spento da
     prefers-reduced-motion (regola globale di base.css) */
  scroll-behavior: smooth;
}

/* Intestazione comune alle pagine di servizio: marchio a sinistra, sessione
   (email ed Esci, "Aggiorna" in più per l'admin) a destra. Fissa in cima
   durante lo scorrimento, così "Esci" resta sempre raggiungibile (anche
   senza questo, soddisfa da sola "intestazione fissa su mobile" del gestore). */
body.pagina-servizio .intestazione {
  position: sticky;
  top: 0;
  z-index: var(--z-foglio);
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spazio-3);
}

.intestazione__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  color: inherit;
  text-decoration: none;
}

.intestazione__link:hover {
  text-decoration: underline;
}

/* Marchio dell'intestazione: link aderente al logo. Nessun padding né
   min-height che estenda l'area cliccabile oltre l'immagine; il logo è già alto
   44px, quindi di per sé un bersaglio comodo al tocco. line-height:0 toglie lo
   spazio sotto l'immagine; il raggio serve al contorno di focus aderente. */
.intestazione__marchio {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: var(--raggio-piccolo);
  color: inherit;
  text-decoration: none;
}

/* Lockup completo o solo simbolo: width:auto mantiene le proporzioni reali del
   file (logo 1773×841 ≈ 2,11:1, simbolo quadrato). La resa in px resta sotto la
   risoluzione del PNG (logo nitido); le misure nell'HTML hanno lo stesso
   rapporto, così non c'è layout shift. */
.intestazione__logo {
  display: block;
  width: auto;
}

.intestazione__logo--completo {
  display: none; /* su mobile si mostra il simbolo */
  height: 44px;
}

.intestazione__logo--simbolo {
  display: block;
  height: 44px;
}

/* Da 768px: lockup completo al posto del solo simbolo */
@media (min-width: 768px) {
  .intestazione__logo--completo {
    display: block;
  }

  .intestazione__logo--simbolo {
    display: none;
  }
}

/* Audit P1.2: il contorno di :focus-visible (base.css) è dello stesso verde
   dello sfondo dell'intestazione — qui diventa chiaro per restare visibile */
.intestazione a:focus-visible,
.intestazione button:focus-visible {
  outline-color: var(--colore-testo-su-brand);
}

/* La sessione, spostata dentro l'intestazione: niente più bordo/spaziatura
   pensati per stare sopra il contenuto della card bianca */
.intestazione .servizio__sessione {
  padding-bottom: 0;
  border-bottom: 0;
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   Contenitore centrato, largo al massimo 560px
   -------------------------------------------------------------------------- */

.servizio {
  padding: var(--spazio-4) var(--spazio-2) var(--spazio-6);
}

.servizio__contenitore {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  max-width: 560px;
  margin: 0 auto;
  padding: var(--spazio-6) var(--spazio-4);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border-radius: var(--raggio-medio);
  box-shadow: var(--ombra-morbida);
  overflow-wrap: anywhere;
}

/* Audit P3.1: dimensione fissa → token fluido (clamp), stesso valore minimo */
.servizio__titolo {
  color: var(--colore-brand);
  font-family: var(--font-titoli);
  font-size: var(--testo-xl);
  line-height: 1.25;
}

.servizio__testo {
  color: var(--colore-testo);
}

.servizio__link {
  color: var(--colore-brand);
  font-weight: 600;
}

.servizio__contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

/* Rifugio della richiesta */
.servizio__rifugio {
  padding: var(--spazio-3) var(--spazio-4);
  background: var(--colore-sfondo);
  border-radius: var(--raggio-medio);
}

.servizio__rifugio-nome {
  color: var(--colore-brand);
  font-size: 1.125rem;
  line-height: 1.25;
}

.servizio__rifugio-dettagli {
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.servizio__rifugio-quota {
  color: var(--colore-brand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Percorso a tre passi (/rivendica/): Accesso → I tuoi dati → Conferma
   -------------------------------------------------------------------------- */

.passi[hidden] {
  display: none;
}

.passi__elenco {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passi__passo {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-1);
  text-align: center;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.passi__passo--attivo {
  color: var(--colore-brand);
  font-weight: 600;
}

.passi__passo--fatto {
  color: var(--colore-testo);
}

.passi__cerchio {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--colore-superficie);
  color: var(--colore-testo-secondario);
  border: 2px solid var(--colore-secondario);
  border-radius: var(--raggio-pillola);
  font-weight: 700;
}

.passi__cerchio--attivo {
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border-color: var(--colore-brand);
}

.passi__cerchio--fatto {
  color: var(--colore-brand);
  border-color: var(--colore-brand);
}

.passi__icona {
  width: 1rem;
  height: 1rem;
}

/* Utente collegato ed "Esci" */
.servizio__sessione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  padding-bottom: var(--spazio-3);
  border-bottom: 1px solid var(--colore-bordo);
  font-size: var(--dimensione-piccola);
}

.servizio__motivo {
  white-space: pre-line;
}

/* -----------------------------------------------------------------------------
   Messaggi (elemento aria-live) e riquadri
   -------------------------------------------------------------------------- */

/* Vuoto non occupa spazio */
.messaggio:empty {
  display: none;
}

.messaggio,
.riquadro {
  margin: 0;
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: var(--raggio-piccolo);
}

.messaggio--attesa {
  color: var(--colore-testo-secondario);
  background: var(--colore-sfondo);
}

.messaggio--errore,
.riquadro--errore {
  color: var(--colore-testo);
  background: var(--colore-superficie);
  border: 1px solid var(--colore-errore);
  border-left-width: 4px;
}

.messaggio--conferma,
.riquadro--conferma {
  color: var(--colore-testo);
  background: var(--colore-accento-freddo);
}

.riquadro {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

/* Bozza (informativa privacy da validare): ben visibile, testo sempre scuro
   sull'accento caldo (regola di contrasto di base.css) */
.riquadro--bozza {
  color: var(--colore-testo);
  background: var(--colore-accento-caldo);
  border: 2px solid var(--colore-testo);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
   Moduli
   -------------------------------------------------------------------------- */

.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

.modulo__gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

.modulo__etichetta {
  color: var(--colore-testo);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
}

/* Audit P1.1: --colore-bordo su superficie è 1,39:1 (bordo quasi invisibile a
   riposo). --colore-secondario raggiunge 4,48:1 (requisito WCAG 1.4.11: 3:1);
   nessun token dedicato: base.css non è nei file di questo task. */
.modulo__campo {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--spazio-3);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border: 1px solid var(--colore-secondario);
  border-radius: var(--raggio-piccolo);
  font: inherit;
}

.modulo__campo:focus {
  border-color: var(--colore-brand);
}

/* Casella con etichetta: tutta la riga è l'area di tocco, alta 44px */
.modulo__casella {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 44px;
}

.modulo__casella input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--colore-brand);
  cursor: pointer;
}

.modulo__casella label {
  cursor: pointer;
}

.modulo__azioni-secondarie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-4);
}

/* -----------------------------------------------------------------------------
   Pulsanti
   -------------------------------------------------------------------------- */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--spazio-4);
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border: 1px solid var(--colore-brand);
  border-radius: var(--raggio-piccolo);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.pulsante:hover:not(:disabled) {
  background: var(--colore-secondario-hover);
  border-color: var(--colore-secondario-hover);
}

.pulsante--secondario {
  background: var(--colore-superficie);
  color: var(--colore-brand);
}

.pulsante--secondario:hover:not(:disabled) {
  background: var(--colore-sfondo);
  border-color: var(--colore-brand);
}

/* Azioni distruttive (Respingi, Rimanda in bozza, Elimina): sempre distinte
   dalle azioni normali, con --colore-errore solo come bordo/testo (mai come
   sfondo pieno, per la stessa regola di contrasto di base.css) */
.pulsante--pericoloso {
  background: var(--colore-superficie);
  color: var(--colore-errore);
  border-color: var(--colore-errore);
}

.pulsante--pericoloso:hover:not(:disabled) {
  background: var(--colore-sfondo);
  border-color: var(--colore-errore);
}

/* Aspetto di un link, ma area di tocco di 44px */
.pulsante--link {
  padding: 0;
  background: none;
  color: var(--colore-brand);
  border: 0;
  font-weight: 600;
  text-decoration: underline;
}

/* Audit (controlli-qualita.mjs): --colore-secondario come testo è 4,00:1 su
   --colore-sfondo (sotto 4,5:1) — qui --colore-secondario-testo, 4,69:1 */
.pulsante--link:hover:not(:disabled) {
  background: none;
  color: var(--colore-secondario-testo);
}

.pulsante:disabled {
  background: var(--colore-sfondo);
  color: var(--colore-testo-secondario);
  border-color: var(--colore-bordo);
  cursor: not-allowed;
}

.pulsante--link:disabled {
  background: none;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Testi lunghi (informativa privacy)
   -------------------------------------------------------------------------- */

.servizio__sezione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

.servizio__sezione h2 {
  color: var(--colore-brand);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.servizio__sezione ul {
  margin: 0;
  padding-left: var(--spazio-6);
}

.servizio__sezione li + li {
  margin-top: var(--spazio-1);
}

.servizio__nota {
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

/* -----------------------------------------------------------------------------
   Area gestori (/gestore/)
   -------------------------------------------------------------------------- */

/* L'editor ha bisogno di più spazio dei moduli brevi */
.servizio__contenitore--largo {
  max-width: 760px;
}

.servizio__sottotitolo {
  color: var(--colore-brand);
  font-size: 1.125rem;
  line-height: 1.3;
}

/* Campo nascosto alla vista ma raggiungibile da tastiera e lettori di schermo
   (scelta dei file, attivata dalla sua etichetta) */
.visualmente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.visualmente-nascosto:focus-visible + .pulsante {
  outline: 3px solid var(--colore-brand);
  outline-offset: 2px;
}

/* Etichetta con aspetto di pulsante, disattivata (10 foto raggiunte) */
.pulsante--disattivato,
.pulsante--disattivato:hover {
  background: var(--colore-sfondo);
  color: var(--colore-testo-secondario);
  border-color: var(--colore-bordo);
  cursor: not-allowed;
}

.modulo__campo--area {
  min-height: 10rem;
  padding: var(--spazio-2) var(--spazio-3);
  resize: vertical;
}

/* Avviso neutro (contatti pubblici): bordo d'accento, testo scuro */
.riquadro--avviso {
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  border-left: 4px solid var(--colore-accento-caldo);
}

/* Navigazione tra i rifugi */
.navigazione-rifugi {
  display: flex;
}

.navigazione-rifugi__elenco {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigazione-rifugi__voce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: var(--spazio-3) var(--spazio-4);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
  text-align: left;
  cursor: pointer;
}

.navigazione-rifugi__voce:hover {
  border-color: var(--colore-brand);
  background: var(--colore-sfondo);
}

.navigazione-rifugi__nome {
  color: var(--colore-brand);
  font-weight: 600;
}

.navigazione-rifugi__dettagli {
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

/* Sezioni dell'editor, ciascuna con il proprio "Salva" */
.editor {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

.editor__sezione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
  /* così il salto da un link dell'indice non lascia il titolo sotto la barra */
  scroll-margin-top: calc(var(--altezza-intestazione) + var(--spazio-4));
}

/* Riga "stato sempre in vista" (badge + passo successivo) e indice delle
   sezioni: sotto 768px restano fissi mentre si scorre l'editor */
.editor__barra {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  padding: var(--spazio-3) var(--spazio-4);
  background: var(--colore-superficie);
  border-radius: var(--raggio-medio);
  box-shadow: var(--ombra-1);
}

.editor__barra-stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.editor__prossimo-passo {
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.editor__indice {
  display: flex;
  gap: var(--spazio-1);
  margin: 0 calc(var(--spazio-4) * -1);
  padding: 0 var(--spazio-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.editor__indice-voce {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spazio-3);
  color: var(--colore-brand);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--raggio-pillola);
}

.editor__indice-voce:hover {
  background: var(--colore-sfondo);
}

@media (max-width: 767px) {
  .editor__barra {
    position: sticky;
    top: var(--altezza-intestazione);
    z-index: var(--z-sovrapposto);
  }

  /* Due righe fisse (barra-stato + indice): il salto deve scendere di più */
  .editor__sezione {
    scroll-margin-top: calc(var(--altezza-intestazione) + 5.5rem);
  }
}

.editor__titolo {
  color: var(--colore-brand);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.editor__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
}

.editor__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.editor__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

/* Caselle dei servizi: una colonna sul telefono, due da 480px */
.editor__caselle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--spazio-4);
}

@media (min-width: 480px) {
  .editor__caselle {
    grid-template-columns: 1fr 1fr;
  }
}

/* Periodi di apertura */
.editor__periodi {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
}

.periodo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  min-width: 0;
  margin: 0;
  padding: var(--spazio-3);
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-secondario);
  border-radius: var(--raggio-piccolo);
}

.periodo__legenda {
  padding: 0 var(--spazio-1);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
}

.periodo__date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-2);
}

.periodo .pulsante--link {
  align-self: flex-start;
}

/* Badge di stato (scheda, rivendicazione, foto) */
.badge {
  display: inline-block;
  padding: 0.125rem var(--spazio-2);
  border-radius: var(--raggio-grande);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
  line-height: 1.4;
}

/* verificata, approvata */
.badge--positivo {
  color: var(--colore-testo);
  background: var(--colore-accento-freddo);
}

/* in_verifica, in_attesa: testo sempre scuro sull'accento caldo */
.badge--attesa {
  color: var(--colore-testo);
  background: var(--colore-accento-caldo);
}

/* bozza, sospesa, respinta, revocata */
.badge--neutro {
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
}

/* Contatore dei caratteri della descrizione */
.contatore {
  align-self: flex-end;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
  font-variant-numeric: tabular-nums;
}

/* Griglia delle foto */
.foto-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--spazio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foto-griglia:empty {
  display: none;
}

.foto-scheda {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  min-width: 0;
}

.foto-scheda__cornice {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--colore-sfondo);
  border-radius: var(--raggio-piccolo);
}

.foto-scheda__immagine {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-scheda__assente {
  padding: var(--spazio-2);
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Anteprima "Come la vedono gli escursionisti" (sezione dell'editor): stile
   equivalente al pannello pubblico (pannello.css), rendering indipendente —
   vedi il commento in gestore.js su mappa.js e la variabile globale L.
   -------------------------------------------------------------------------- */

.anteprima {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  background: var(--colore-sfondo);
  border-radius: var(--raggio-medio);
}

.anteprima__nome {
  color: var(--colore-brand);
  font-size: 1.125rem;
  line-height: 1.25;
}

.anteprima__dettagli {
  margin: 0;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.anteprima__blocco {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

.anteprima__titolo {
  color: var(--colore-brand);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
}

.anteprima__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
}

.anteprima__link {
  color: var(--colore-brand);
  font-weight: 600;
}

.anteprima__pastiglie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.anteprima__pastiglia {
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-superficie);
  border-radius: var(--raggio-pillola);
  font-size: var(--dimensione-piccola);
  box-shadow: var(--ombra-1);
}

/* Rivendicazioni di chi non gestisce ancora un rifugio */
.richieste {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.richiesta {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
}

/* -----------------------------------------------------------------------------
   Area di amministrazione (/admin/)
   -------------------------------------------------------------------------- */

/* Schede di navigazione: tre pulsanti alti 44px, vanno a capo sul telefono */
.admin-schede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  padding-bottom: var(--spazio-3);
  border-bottom: 1px solid var(--colore-bordo);
}

.admin-scheda {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 44px;
  padding: 0 var(--spazio-3);
  background: var(--colore-superficie);
  color: var(--colore-brand);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.admin-scheda:hover {
  border-color: var(--colore-brand);
}

.admin-scheda[aria-selected="true"] {
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border-color: var(--colore-brand);
}

/* Numero di elementi in attesa: testo sempre scuro sull'accento caldo */
.admin-conteggio {
  min-width: 1.75rem;
  padding: 0 var(--spazio-1);
  border-radius: var(--raggio-grande);
  background: var(--colore-accento-caldo);
  color: var(--colore-testo);
  font-size: var(--dimensione-piccola);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-pannello {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
}

.admin-pannello:focus-visible {
  outline: 3px solid var(--colore-brand);
  outline-offset: 4px;
}

.admin-elenco {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-voce {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
}

.admin-voce__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
}

.admin-voce__titolo {
  color: var(--colore-brand);
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* Dati del richiedente: etichetta sopra il valore sul telefono, affiancati da 480px */
.admin-dati {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--spazio-3);
  margin: 0;
  font-size: var(--dimensione-piccola);
}

.admin-dati dt {
  color: var(--colore-testo-secondario);
  font-weight: 600;
}

.admin-dati dd {
  margin: 0 0 var(--spazio-2);
}

@media (min-width: 480px) {
  .admin-dati {
    grid-template-columns: max-content 1fr;
  }

  .admin-dati dd {
    margin-bottom: var(--spazio-1);
  }
}

/* Link con area di tocco di 44px (tel:, sito, scheda pubblica) */
.admin-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--colore-brand);
  font-weight: 600;
}

.admin-contatti {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.admin-azioni:empty {
  display: none;
}

/* "Scrivi al gestore": un link con l'aspetto di un pulsante */
.admin-mailto {
  text-decoration: none;
}

.admin-area {
  min-height: 5rem;
}

/* Anteprima della scheda come la vedrà il pubblico */
.admin-anteprima {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-3) var(--spazio-4);
  background: var(--colore-sfondo);
  border-radius: var(--raggio-piccolo);
}

.admin-anteprima__titolo {
  color: var(--colore-brand);
  font-size: var(--dimensione-testo);
}

.admin-anteprima__testo {
  white-space: pre-line;
}

.admin-anteprima__testo + .admin-anteprima__testo {
  margin-top: var(--spazio-2);
}

/* Griglia delle foto: schede più larghe per i due pulsanti */
.admin-griglia {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.admin-foto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  min-width: 0;
}

/* Segnalazioni: filtro per stato sopra l'elenco e testo libero di chi segnala */
.admin-filtro {
  max-width: 20rem;
  margin-bottom: var(--spazio-4);
}

.admin-segnalazione__testo {
  padding: var(--spazio-3);
  background: var(--colore-sfondo);
  border-radius: var(--raggio-piccolo);
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Statistiche dell'area gestori
   -------------------------------------------------------------------------- */

.statistiche {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dimensione-piccola);
}

.statistiche caption {
  margin-bottom: var(--spazio-2);
  color: var(--colore-testo-secondario);
  text-align: left;
}

.statistiche th,
.statistiche td {
  padding: var(--spazio-2);
  border-bottom: 1px solid var(--colore-bordo);
}

.statistiche th {
  font-weight: 600;
  text-align: left;
}

.statistiche thead th {
  color: var(--colore-brand);
}

/* Numeri allineati a destra, colonne dei periodi comprese */
.statistiche td,
.statistiche thead th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Da 768px: più aria attorno al contenitore
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .servizio {
    padding: var(--spazio-6) var(--spazio-4);
  }

  .servizio__contenitore {
    padding: var(--spazio-6);
  }
}

/* -----------------------------------------------------------------------------
   Da 1024px: impaginazione più densa per l'area di amministrazione (elenchi
   più larghi letti a colpo d'occhio, due colonne invece di una striscia lunga)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .servizio__contenitore--largo {
    max-width: 1040px;
  }

  .admin-elenco {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: var(--spazio-4);
  }
}