/* ═══════════════════════════════════════════════════════════════════════════
   LA MAPPA UNICA — la fascia in alto, il cerca che si apre, i filtri in basso.

   Vale solo dove il body ha `maps-uno`: la pagina `/maps` col dentro. `/poi` e
   `/eventi` da sole restano com'erano — la fila e lo slider si vedono da subito.

   ═══ IL COLORE COMANDA, NON LA FORMA ═══════════════════════════════════════
   Posti ed eventi sono filtri: scuri accesi, bianchi spenti — qualunque forma
   abbiano, pillola o tondo. La forma dice solo chi ha spazio adesso (col cerca
   aperto si stringono in tondo per fargli posto), il colore dice cosa lavora.
   «Cerca» non è un filtro: non cambia mai colore.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA FASCIA IN ALTO ──────────────────────────────────────────────────────
   Allineata a destra, e staccata dalla barra del suo margine: prima era a filo,
   quasi la toccava. Sopra la carta, sopra i comandi. */
.stbar{ position:absolute; z-index:32;
  top:calc(var(--sotto-barra) + 16px + var(--sat, env(safe-area-inset-top)));
  right:8px; display:flex; align-items:center; gap:.4rem; }

/* Da fermi sono pillole: icona e parola. */
/* Niente `gap`: fra l'icona e la parola c'è un `margin-left` sulla parola. La
   `gap` restava anche quando la parola si stringeva a zero, e teneva l'icona
   spostata a sinistra dentro il tondo. Il margine invece si chiude con lei, e
   l'icona torna al centro. */
.stbar-b{ flex:none; height:40px; min-width:44px; padding:0 15px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:800; letter-spacing:.01em;
  color:#0a3d62; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 2px rgba(10,61,98,.18), 0 10px 28px -10px rgba(10,61,98,.45);
  /* Più morbida e un filo più lenta: la pillola che si stringe si guarda. */
  transition:padding .34s cubic-bezier(.22,.61,.36,1),
             background-color .18s ease, color .18s ease, transform .12s ease; }
.stbar-b i{ flex:none; font-size:1rem; }
.stbar-b:active{ transform:scale(.94); }

/* La parola: sparisce stringendosi, non a scatto — è lei che fa la pillola. */
.stbar-t{ max-width:6rem; margin-left:.42rem; overflow:hidden; white-space:nowrap;
  transition:max-width .34s cubic-bezier(.22,.61,.36,1),
             opacity .24s ease, margin-left .34s cubic-bezier(.22,.61,.36,1); }

/* Acceso (solo posti/eventi): il tondo o la pillola si riempie di blu. */
.stbar-b[aria-pressed="true"]{ background:#0a3d62; color:#fff;
  box-shadow:0 1px 2px rgba(10,61,98,.25), 0 12px 30px -10px rgba(10,61,98,.6); }

/* ── COL CERCA APERTO ───────────────────────────────────────────────────────
   La pillola «Cerca» sparisce e al suo posto scende il campo; posti ed eventi si
   stringono in due tondi con la sola icona, per fargli spazio. */
body.maps-uno.cerca-aperto .stbar-cerca{ display:none; }
body.maps-uno.cerca-aperto .stbar-b[data-str="poi"],
body.maps-uno.cerca-aperto .stbar-b[data-str="eventi"]{
  width:44px; padding:0; }
body.maps-uno.cerca-aperto .stbar-b[data-str="poi"] .stbar-t,
body.maps-uno.cerca-aperto .stbar-b[data-str="eventi"] .stbar-t{
  max-width:0; opacity:0; margin-left:0; }

/* ── IL CERCA A SCOMPARSA ───────────────────────────────────────────────────
   Di suo non c'è: lo apre la lente. Aperto occupa la sinistra e lascia i due
   tondi a destra. La casella ha già la sua lente dentro, quindi il bottone
   «Cerca» scompare del tutto invece di restarle accanto. */
body.maps-uno #mapsCerca{ display:none; }
body.maps-uno.cerca-aperto #mapsCerca{ display:block;
  top:calc(var(--sotto-barra) + 16px + var(--sat, env(safe-area-inset-top)));
  left:8px; right:112px; transform:none; width:auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   I FILTRI IN BASSO, IN UNA RIGA SOLA.

   Prima lo slider degli eventi e la fila dei posti stavano uno sopra l'altro e
   si coprivano quando erano accesi tutt'e due. Adesso scorrono nella stessa
   riga, all'altezza di una pillola: per primo lo slider (dentro una pillola),
   poi le categorie dei posti. Il modal delle card sta fuori di qui.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ UN CONTENITORE SOLO, DUE PEZZI CHE SI ACCENDONO A PARTE ═══════════════
   `.mapf` è la riga: dentro, sempre e soli due figli — lo slider degli eventi
   (per primo) e la fila dei posti. Non si sciolgono l'uno nell'altro: restano
   due scatole distinte nello stesso contenitore, e ognuna si accende per conto
   suo (lo slider con «Eventi», la fila con «Posti»). Prima uno «spariva dentro»
   l'altro con `display:contents`, e la gerarchia non si capiva più. */
body.maps-uno .mapf{ position:absolute; left:0; right:0; z-index:6;
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.45rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:12px 12px 14px;
  /* Il contenitore che scorre DEVE ricevere il tocco: con `pointer-events:none`
     lo scorrimento non partiva — le dita cadevano sui figli, e sul pill dello
     slider ci restavano (il cursore si prende il trascinamento). Con `auto` la
     riga scorre; `pan-x` dice al browser che qui il gesto orizzontale è
     scorrimento, così parte pulito e non litiga con la mappa. La striscia è
     bassa: quello che copre è solo la sua altezza, in fondo. */
  pointer-events:auto; touch-action:pan-x;
  scrollbar-width:none; -ms-overflow-style:none; }
body.maps-uno .mapf::-webkit-scrollbar{ display:none; }

/* La fila dei posti: un figlio solo di `.mapf`, e dentro le sue pastiglie in
   fila. Lo scorrimento è quello di `.mapf`, non un secondo scorrimento suo: la
   sua fila non taglia più niente e non frena. Si accende con «Posti». */
body.maps-uno .mapf > #poiFiltri{ display:none; }
body.maps-uno.mostra-poi .mapf > #poiFiltri{ display:block; flex:none;
  left:auto; right:auto; bottom:auto; position:static; pointer-events:auto; }
body.maps-uno .mapf > #poiFiltri .poif-fila{ overflow:visible; padding:0; gap:.45rem; }

/* Le pastiglie dei posti: un po' più alte, quasi come i bottoni di sopra. E
   con l'ombra piccola, che qui lo scorrimento la taglierebbe. */
body.maps-uno .mapf .poif-voce{ height:36px; padding:0 .9rem; font-size:.84rem;
  box-shadow:0 1px 3px rgba(10,61,98,.28), 0 0 0 1px rgba(10,61,98,.08); }
body.maps-uno .mapf .poif-voce.is-on{
  box-shadow:0 1px 3px rgba(10,61,98,.3), 0 0 0 1px rgba(255,255,255,.5) inset; }
body.maps-uno .mapf .poif-voce i{ font-size:.95rem; }

/* ── LO SLIDER: SEMPRE PRESENTE, IN DUE FORME ───────────────────────────────
   Un figlio di `.mapf`, per primo (in basso a sinistra). Non sparisce mai:
   - spento è un PALLINO col solo calendario. Toccarlo equivale a premere
     «Eventi» in alto — lo `strati.js` accende gli eventi e lo apre;
   - acceso è la PILLOLA con lo slider: calendario · barra · scritta · conta,
     su una riga sola, con lo slider centrato in verticale.
   Base comune a tutt'e due: il tondo bianco che galleggia sulla carta. */
body.maps-uno .mapf > #evTempo{ display:flex !important;
  flex:none; position:static; left:auto; right:auto; bottom:auto;
  align-items:center; justify-content:center;
  height:36px; border-radius:999px; pointer-events:auto;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  backdrop-filter:blur(8px) saturate(140%);
  /* Ombra piccola: la riga scorre in orizzontale e `overflow` taglia anche il
     verticale — una gran ombra finiva mozzata di netto. Basta un filo per
     staccare dalla carta, più il contorno chiaro. */
  box-shadow:0 1px 3px rgba(10,61,98,.28), 0 0 0 1px rgba(10,61,98,.08);
  transition:padding .3s cubic-bezier(.22,.61,.36,1); }

/* Spento: pallino, solo il calendario (senza la sua scatola arancione). */
body.maps-uno:not(.mostra-eventi) .mapf > #evTempo{ width:44px; padding:0; cursor:pointer; }
body.maps-uno:not(.mostra-eventi) #evTempo .evt-corpo{ display:none; }
body.maps-uno:not(.mostra-eventi) #evTempo .evt-int{
  width:auto; height:auto; background:transparent; color:#0a3d62; font-size:1rem; }

/* Acceso: pillola. La scatola interna e la riga label si sciolgono, così tutto
   sta su una linea; l'ordine lo rimette a posto `order` (nel DOM la scritta sta
   prima della barra). */
body.maps-uno.mostra-eventi .mapf > #evTempo{ gap:.5rem; padding:0 .7rem; }
body.maps-uno.mostra-eventi #evTempo .evt-corpo,
body.maps-uno.mostra-eventi #evTempo .evt-riga{ display:contents; }
body.maps-uno.mostra-eventi #evTempo .evt-int{ order:0; width:30px; height:30px; font-size:.8rem; }
body.maps-uno.mostra-eventi #evTempo .evt-range{ order:1; width:118px; margin:0; }
body.maps-uno.mostra-eventi #evTempo .evt-lbl{ order:2; max-width:7.5rem; font-size:.76rem; }
/* Il numero degli eventi in un badge piccolino, in coda: un tondo chiaro con la
   cifra, come il conto sulle pastiglie dei posti. */
body.maps-uno.mostra-eventi #evTempo .evt-conta{ order:3;
  font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums;
  color:#1a6a9c; background:rgba(26,134,200,.14);
  padding:.1rem .42rem; border-radius:999px; line-height:1.5; }

/* Le gocce degli eventi sono marker in pagina (`.stmap-pinwrap`): con «Eventi»
   spento spariscono dalla carta, non solo lo slider. `!important` perché
   MapLibre riscrive lo stile dei marker a ogni movimento della mappa. */
body.maps-uno:not(.mostra-eventi) .stmap-pinwrap{ display:none !important; }

/* ── I COMANDI DI LATO, PIÙ IN BASSO ───────────────────────────────────────
   Con la fascia in cima, i comandi della mappa scendono a respirare. */
body.maps-uno #stmap .stm-glnav{
  margin-top:calc(var(--sotto-barra) + 92px + var(--sat, env(safe-area-inset-top))); }