/* =============================================================================
   pannello.css — contenuto della scheda del rifugio (aside#pannello)
   =============================================================================
   Posizione e superficie del pannello sono in base.css. Solo variabili di
   base.css, nessun colore scritto a mano.
   ========================================================================== */

.pannello {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  padding: 0 var(--spazio-4) var(--spazio-6);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  /* Lo scorrimento resta dentro il pannello, senza trascinare la pagina */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Le parti della scheda non si comprimono: scorre il pannello */
.pannello > * {
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Sotto 768px: foglio a tre altezze (anteprima/metà/piena), trascinabile
   dalla maniglia (pannello.js, Pointer Events). Nessuno stile inline (CSP
   style-src 'self', in sola segnalazione): --passo lo impostano SOLO le
   classi statiche qui sotto, mai uno script. L'altezza resta quella di
   "piena" (lascia sempre visibile la parte alta della mappa): le altre due
   si ottengono traslando il foglio verso il basso con transform, non
   riducendo l'altezza.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pannello {
    height: calc(100% - 8rem);
    transform: translateY(calc(var(--passo, 0) * 1%));
    transition: transform var(--durata-lenta) var(--curva-molla);
  }

  /* Durante il trascinamento: niente transizione, il passo (sotto) deve
     seguire il dito a scatti di 4, senza ritardo */
  .pannello--in-trascinamento {
    transition: none;
  }

  /* Stati di riposo: questi valori devono restare identici a PASSO_ALTEZZA
     in pannello.js */
  .pannello--anteprima { --passo: 78; }
  .pannello--meta { --passo: 42; }
  .pannello--piena { --passo: 0; }

  /* Classi-passo (step 4%): solo durante il trascinamento (pannello.js),
     mai per uno stato di riposo */
  .pannello--passo-0 { --passo: 0; }
  .pannello--passo-1 { --passo: 4; }
  .pannello--passo-2 { --passo: 8; }
  .pannello--passo-3 { --passo: 12; }
  .pannello--passo-4 { --passo: 16; }
  .pannello--passo-5 { --passo: 20; }
  .pannello--passo-6 { --passo: 24; }
  .pannello--passo-7 { --passo: 28; }
  .pannello--passo-8 { --passo: 32; }
  .pannello--passo-9 { --passo: 36; }
  .pannello--passo-10 { --passo: 40; }
  .pannello--passo-11 { --passo: 44; }
  .pannello--passo-12 { --passo: 48; }
  .pannello--passo-13 { --passo: 52; }
  .pannello--passo-14 { --passo: 56; }
  .pannello--passo-15 { --passo: 60; }
  .pannello--passo-16 { --passo: 64; }
  .pannello--passo-17 { --passo: 68; }
  .pannello--passo-18 { --passo: 72; }
  .pannello--passo-19 { --passo: 76; }
  .pannello--passo-20 { --passo: 80; }
  .pannello--passo-21 { --passo: 84; }
  .pannello--passo-22 { --passo: 88; }
  .pannello--passo-23 { --passo: 92; }
  .pannello--passo-24 { --passo: 96; }
  .pannello--passo-25 { --passo: 100; }
}

/* -----------------------------------------------------------------------------
   Sotto 768px, con il foglio aperto a un'altezza di riposo: alza la legenda
   (in basso a sinistra) e i controlli di Leaflet (zoom e attribuzione, in basso
   a destra, dentro .leaflet-bottom) appena sopra il bordo superiore visibile
   del foglio, così agli stati "anteprima" e "metà" non restano coperti.
   L'altezza visibile del foglio è la sua altezza (100% - 8rem, come sopra) per
   la frazione non traslata (1 - --passo/100): anteprima → 0.22, metà → 0.58.
   La % di "bottom" qui si riferisce alla stessa altezza di .principale a cui si
   riferisce l'altezza del foglio, quindi i due valori combaciano. A "piena" non
   si alza nulla: il foglio copre quasi tutto di proposito.
   Si usa :has() come miglioramento progressivo: dove non è supportato la regola
   è ignorata e i controlli restano dove sono oggi (nessuna regressione). Durante
   il trascinamento (classi pannello--passo-N) le regole non scattano e i
   controlli tornano in basso, per poi rialzarsi allo stato di riposo. Le
   transizioni seguono la regola prefers-reduced-motion di base.css.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .legenda,
  .leaflet-bottom {
    transition: bottom var(--durata-lenta) var(--curva-standard);
  }

  .principale:has(.pannello--anteprima:not([hidden])) .legenda,
  .principale:has(.pannello--anteprima:not([hidden])) .leaflet-bottom {
    bottom: calc((100% - 8rem) * 0.22 + var(--spazio-2));
  }

  .principale:has(.pannello--meta:not([hidden])) .legenda,
  .principale:has(.pannello--meta:not([hidden])) .leaflet-bottom {
    bottom: calc((100% - 8rem) * 0.58 + var(--spazio-2));
  }
}

/* -----------------------------------------------------------------------------
   Barra con maniglia e pulsante di chiusura: resta in alto durante lo
   scorrimento. La maniglia è visibile solo sotto 768px.
   -------------------------------------------------------------------------- */

.pannello__barra {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0 calc(-1 * var(--spazio-4)) calc(-1 * var(--spazio-4));
  padding: var(--spazio-1) var(--spazio-1) 0;
  background: var(--colore-superficie);
}

.pannello__maniglia {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: grab;
  /* Il trascinamento verticale lo gestisce lo script (Pointer Events) */
  touch-action: none;
}

.pannello__maniglia:active {
  cursor: grabbing;
}

.pannello__maniglia-barra {
  width: 36px;
  height: 4px;
  background: var(--colore-bordo);
  border-radius: var(--raggio-pillola);
}

.pannello__chiudi {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  color: var(--colore-testo);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

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

/* Audit P2.3: era un "×" tipografico; ora l'icona dello sprite, coerente con
   le altre chiusure (filtri, legenda) */
.pannello__chiudi-icona {
  width: 20px;
  height: 20px;
}

/* Da 768px: colonna laterale, niente maniglia né trascinamento */
@media (min-width: 768px) {
  .pannello__maniglia {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   Intestazione della scheda
   -------------------------------------------------------------------------- */

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

/* Il titolo riceve il focus da script: niente contorno al focus col mouse */
.pannello__titolo:focus:not(:focus-visible) {
  outline: none;
}

/* Quota in grande (cifre tabellari) + tipo con icona + zona: visibili già
   nell'altezza "anteprima" del foglio */
.pannello__riepilogo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spazio-1) var(--spazio-3);
  margin-top: calc(-1 * var(--spazio-3));
}

.pannello__quota {
  color: var(--colore-brand);
  font-family: var(--font-titoli);
  font-size: var(--testo-xl);
  font-variant-numeric: tabular-nums;
}

.pannello__tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.pannello__tipo-icona {
  width: 18px;
  height: 18px;
}

.pannello__zona {
  flex-basis: 100%;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
}

.pannello__badge {
  align-self: flex-start;
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-accento-freddo);
  color: var(--colore-testo);
  border-radius: var(--raggio-grande);
  font-size: var(--dimensione-piccola);
  font-weight: 600;
}

/* Indicazioni / Condividi / Chiama: sempre nella stessa riga, scorrevole se
   non entrano tutte */
.pannello__azioni-rapide {
  display: flex;
  gap: var(--spazio-2);
  overflow-x: auto;
}

.pannello__azione {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-1);
  min-width: 72px;
  min-height: 44px;
  padding: var(--spazio-2);
  background: var(--colore-sfondo);
  color: var(--colore-brand);
  border: 0;
  border-radius: var(--raggio-medio);
  font: inherit;
  font-size: var(--dimensione-piccola);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.pannello__azione:hover {
  background: var(--colore-ombra-chiaro);
}

.pannello__azione-icona {
  width: 22px;
  height: 22px;
}

/* -----------------------------------------------------------------------------
   Sezioni
   -------------------------------------------------------------------------- */

.pannello__sezione {
  padding-top: var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
}

.pannello__sottotitolo {
  margin: 0 0 var(--spazio-2);
  color: var(--colore-brand);
  font-size: 1rem;
}

/* Foto: striscia orizzontale con scroll-snap. Le img hanno width e height
   dichiarati (rapporto d'aspetto riservato prima del caricamento) */
.pannello__galleria {
  display: flex;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0 0 var(--spazio-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.pannello__foto-voce {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

.pannello__foto {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--raggio-medio);
  background: var(--colore-sfondo);
}

/* Contenitore della galleria con più di una foto: striscia + indicatori */
.pannello__galleria-contenitore {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
}

.pannello__galleria-indicatori {
  display: flex;
  justify-content: center;
  gap: var(--spazio-2);
}

.pannello__indicatore {
  width: 8px;
  height: 8px;
  background: var(--colore-bordo);
  border-radius: 50%;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.pannello__indicatore--attivo {
  background: var(--colore-brand);
}

.pannello__descrizione {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  /* Gli a capo singoli scritti dal gestore restano visibili */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

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

.pannello__link {
  color: var(--colore-brand);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pannello__periodo {
  display: block;
}

.pannello__nota {
  display: block;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
  overflow-wrap: anywhere;
}

/* Servizi come pastiglie */
.pannello__pastiglie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pannello__pastiglia {
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  font-size: var(--dimensione-piccola);
}

.pannello__avviso {
  padding: var(--spazio-3);
  background: var(--colore-sfondo);
  color: var(--colore-testo-secondario);
  border-radius: var(--raggio-medio);
  font-size: var(--dimensione-piccola);
}

/* Prenota: pulsante accento caldo, testo sempre scuro (regola di contrasto) */
.pannello__pulsante-prenota {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-4);
  background: var(--colore-accento-caldo);
  color: var(--colore-testo);
  border-radius: var(--raggio-medio);
  font-weight: 700;
  text-decoration: none;
}

.pannello__rivendica {
  font-size: var(--dimensione-piccola);
}

/* Piede: OpenStreetMap e indicazioni */
.pannello__piede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-6);
  padding-top: var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
  font-size: var(--dimensione-piccola);
}

/* -----------------------------------------------------------------------------
   Caricamento ed errore
   -------------------------------------------------------------------------- */

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

.pannello__stato--errore {
  padding-left: var(--spazio-3);
  color: var(--colore-testo);
  border-left: 4px solid var(--colore-errore);
}

.pannello__riprova {
  align-self: flex-start;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-4);
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  border: 0;
  border-radius: var(--raggio-piccolo);
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

.pannello__riprova:hover {
  background: var(--colore-secondario-hover);
}

/* -----------------------------------------------------------------------------
   Segnalazione di un errore (modulo dentro il pannello)
   Aree di tocco di almeno 44px. Nessuna animazione: le transizioni seguono
   la regola prefers-reduced-motion di base.css.
   -------------------------------------------------------------------------- */

.pannello__segnala,
.pannello__modulo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
}

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

.pannello__etichetta {
  font-weight: 600;
}

/* Audit P1.1: --colore-bordo su superficie è 1,39:1 (bordo quasi invisibile a
   riposo), sotto il 3:1 di WCAG 1.4.11; --colore-secondario raggiunge 4,48:1
   (stesso fix di moduli.css per i campi dei moduli). */
.pannello__campo {
  width: 100%;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-3);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  font: inherit;
  border: 1px solid var(--colore-secondario);
  border-radius: var(--raggio-piccolo);
}

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

.pannello__campo[aria-invalid="true"] {
  border-color: var(--colore-errore);
}

.pannello__campo--area {
  resize: vertical;
}

.pannello__contatore {
  align-self: flex-end;
  color: var(--colore-testo-secondario);
  font-size: var(--dimensione-piccola);
  font-variant-numeric: tabular-nums;
}

/* Campo esca: fuori dalla vista senza spostamenti né scorrimento orizzontale */
.pannello__esca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pannello__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.pannello__pulsante {
  align-self: flex-start;
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-4);
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
  font: inherit;
  border: 1px solid var(--colore-brand);
  border-radius: var(--raggio-piccolo);
  cursor: pointer;
  transition: background-color var(--durata-transizione) var(--curva-transizione);
}

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

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

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

.pannello__pulsante:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Area aria-live: vuota non occupa spazio */
.pannello__esito:empty {
  display: none;
}

.pannello__esito--errore,
.pannello__esito--conferma {
  padding-left: var(--spazio-3);
  border-left: 4px solid var(--colore-errore);
}

.pannello__esito--conferma {
  border-left-color: var(--colore-brand);
}

.pannello__esito--attesa {
  color: var(--colore-testo-secondario);
}

.pannello__esito:focus:not(:focus-visible) {
  outline: none;
}