/* ══ I POSTI SULLA MAPPA ══════════════════════════════════════════════════════
   Stessa impronta di `/maps` — la mappa prende tutto, i comandi le galleggiano
   sopra — con in basso, al posto dello slider del tempo degli eventi, la fila
   dei filtri. In fondo a una mappa ci sta una cosa sola, e qui la domanda non è
   «quando» ma «cosa». */

/* ── LA FILA ──────────────────────────────────────────────────────────────────
   Le pastiglie non stanno su un vassoio di vetro come lo slider: sono già
   scatolette chiare con la loro ombra, e un pannello dietro le farebbe sembrare
   una barra di applicazione appoggiata sulla carta. Scorrono da sole. */
  .poif{ position:absolute; left:0; right:0; z-index:6;
    /* ═══ SOPRA LA BARRA DEL TELEFONO ══════════════════════════════════════
       In basso, su un telefono, non c'è il bordo dello schermo: c'è la barra
       degli indirizzi che va e viene, e sotto la striscia dei gesti. Quello che
       il telefono dichiara di volersi tenere è `env(safe-area-inset-bottom)`;
       il resto è aria, perché un comando a filo di un bordo si tocca male. */
    bottom:calc(18px + env(safe-area-inset-bottom));
    pointer-events:none; }

  /* ═══ L'OMBRA VUOLE ARIA DENTRO IL CONTENITORE ══════════════════════════
     Una fila che scorre taglia tutto quello che esce dal suo riquadro, ombre
     comprese: con mezzo centimetro di margine l'ombra finiva di netto, come se
     le pastiglie stessero sopra un gradino. Il padding qui non è spaziatura, è
     il posto dove l'ombra ha diritto di stare. */
  .poif-fila{ display:flex; gap:.45rem; overflow-x:auto; overscroll-behavior-x:contain;
    padding:14px 12px 16px; pointer-events:auto;
    scrollbar-width:none; -ms-overflow-style:none;
    /* ═══ NIENTE AGGANCI E NIENTE FRENATE ═══════════════════════════════════
       Lo scorrimento a scatti — ogni pastiglia che si incastra al centro —
       aggiunge una decelerazione fra il dito e il filtro: si lascia andare, la
       fila continua per conto suo, e il tocco che arriva dopo lo mangia
       l'inerzia. La fila scorre e basta, e il tocco vale anche mentre scorre
       (lo prende `pointerdown`, non il click). */ }
  .poif-fila::-webkit-scrollbar{ display:none; }

  @media (max-width:560px){
    .poif{ bottom:calc(14px + env(safe-area-inset-bottom)); }
    .poif-fila{ padding-left:8px; padding-right:8px; }
  }

/* ── UNA PASTIGLIA ────────────────────────────────────────────────────────────
   Spenta è bianca con l'icona del suo colore: si riconosce la categoria senza
   doverla accendere. Accesa prende il colore pieno — quello dei suoi pallini
   sulla mappa, che arriva da `--c` e in ultima istanza dal catalogo in PHP. */
  .poif-voce{ flex:none;
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.42rem .75rem .42rem .6rem; border:0; border-radius:999px; cursor:pointer;
    font:inherit; font-size:.8rem; font-weight:800; letter-spacing:.01em;
    color:#0a3d62; background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 6px 16px -8px rgba(10,61,98,.55), 0 0 0 1px rgba(10,61,98,.08);
    transition:background .14s ease, color .14s ease, transform .1s ease; }
  .poif-voce i{ font-size:.9rem; color:var(--c,#7a8693); transition:color .14s ease; }
  .poif-voce:active{ transform:scale(.96); }

  .poif-voce.is-on{ background:var(--c,#0a3d62); color:#fff;
    box-shadow:0 8px 20px -8px var(--c,#0a3d62), 0 0 0 1px rgba(255,255,255,.5) inset; }
  .poif-voce.is-on i{ color:#fff; }

/* ── IL NUMERO ────────────────────────────────────────────────────────────────
   Quanti se ne vedono adesso, qui. È il riscontro che mancava: senza, toccare
   una pastiglia a mappa larga non cambiava niente sotto gli occhi — i punti di
   quella categoria erano lontani o troppo piccoli — e sembrava un bottone
   rotto. Col numero si vede subito che la mappa ha capito, e si vede anche dove
   NON c'è niente: uno zero è una risposta.

   Sta attaccato al nome e non in cima alla barra: il conto di una cosa va
   scritto sulla cosa. */
  .poif-n{ font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums;
    padding:.05rem .34rem; border-radius:999px; line-height:1.5;
    color:#5b6b78; background:rgba(10,61,98,.09); }
  .poif-voce.is-on .poif-n{ color:#fff; background:rgba(255,255,255,.24); }
  /* Zero non si spegne, si dice piano: nascondendolo sparirebbe proprio
     l'informazione che serviva — «qui non ce n'è». */
  .poif-voce.e-vuota{ opacity:.62; }

/* ── E IL TOCCO SI SENTE SUBITO ───────────────────────────────────────────────
   Fra il dito e i pallini che cambiano passa il tempo che la mappa ci mette a
   ridisegnare. Poco, ma abbastanza per chiedersi se ha sentito: la pastiglia fa
   un piccolo salto nell'istante del tocco, prima di qualunque altra cosa. */
  .poif-voce.tocco{ animation:poifTocco .34s ease; }
  @keyframes poifTocco{
    0%{ transform:scale(.94); } 55%{ transform:scale(1.06); } 100%{ transform:scale(1); }
  }
  @media (prefers-reduced-motion:reduce){ .poif-voce.tocco{ animation:none; } }

/* ── LA SCHEDA DI UN POSTO ────────────────────────────────────────────────────
   Non ha un pannello suo: sale dentro quello dei paesi, che sa già salire,
   chiudersi con Escape e farsi tirare giù. Qui c'è solo come è scritto dentro. */
  .poi-scheda{ padding:.2rem 0 .6rem; }
  .poi-nome{ margin:0 0 .25rem; font-family:'Lobster',cursive; font-weight:400;
    font-size:1.5rem; line-height:1.15; color:#0a3d62; }
  .poi-dove{ margin:0; font-size:.85rem; font-weight:700; color:#5b6b78;
    display:flex; align-items:center; gap:.4rem; }
  .poi-dove i{ color:#1a86c8; }
  /* La nota è quello che abbiamo aggiunto noi al punto: si vede che non viene
     da OpenStreetMap perché è scritta in corsivo, con una riga di colore
     accanto. Chi legge deve poter distinguere il dato dal commento. */
  .poi-nota{ margin:.7rem 0 0; padding-left:.7rem; border-left:3px solid #1a86c8;
    font-size:.9rem; line-height:1.5; font-style:italic; color:#4a5a66; }
  .poi-testo{ margin:.7rem 0 0; font-size:.92rem; line-height:1.55; color:#33424d; }
  .poi-foto{ display:block; width:100%; height:170px; object-fit:cover;
    border-radius:12px; margin-bottom:.7rem; background:#e8eef2; }

/* ══ I RECAPITI NEL FOGLIO DI UN POSTO ═══════════════════════════════════════
   Una riga per cosa, con la sua icona: se è aperto adesso, il telefono, il
   sito, l'indirizzo, l'orario. Le righe che si toccano (chiama, apri il sito,
   scrivi) sono legami veri; le altre sono testo. Grandi abbastanza per un dito. */
  .poi-rec{ margin:.8rem 0 0; display:flex; flex-direction:column; gap:.15rem; }
  .poi-rec-riga{ display:flex; align-items:flex-start; gap:.65rem; margin:0; padding:.5rem 0;
    font-size:.92rem; line-height:1.4; color:#33424d; text-decoration:none; overflow-wrap:anywhere; }
  .poi-rec-riga i{ flex:none; width:1.1rem; margin-top:.15rem; text-align:center; color:#1a86c8; }
  a.poi-rec-riga{ color:#10567f; font-weight:600; }
  a.poi-rec-riga:active{ opacity:.6; }
  .poi-rec-aperto{ font-weight:800; color:#1f8a5b; }
  .poi-rec-aperto i{ color:#1f8a5b; }
  .poi-rec-chiuso{ font-weight:800; color:#b04a3a; }
  .poi-rec-chiuso i{ color:#b04a3a; }

/* Di chi è la fotografia: piccolo, sotto di lei. È il minimo dovuto a chi l'ha fatta. */
  .poi-foto-di{ margin:.2rem 0 0; font-size:.68rem; color:#8a97a3; text-align:right; }

/* ══ I TASTI NEL FOGLIO DI UN POSTO ══════════════════════════════════════════
   Pastiglie che vanno a capo: cinque gesti per chi guarda, e sotto — solo per
   chi amministra — il suo riquadro. Grandi quanto un dito (44px di altezza). */
  .poi-azioni{ display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0 0; padding-top:.9rem;
    border-top:1px solid rgba(16,36,58,.1); }
  .poi-az{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.45rem .85rem;
    border:1px solid rgba(16,36,58,.16); border-radius:999px; background:#fff; color:#33424d;
    font:inherit; font-size:.84rem; font-weight:700; text-decoration:none; cursor:pointer; }
  .poi-az i{ color:#1a86c8; font-size:.85rem; }
  .poi-az:active{ background:rgba(26,134,200,.1); }
  .poi-az[disabled]{ opacity:.5; }
  /* «Questo posto è mio»: è l'invito, e si distingue. */
  .poi-az-mio{ border-color:#1a86c8; background:#1a86c8; color:#fff; }
  .poi-az-mio i{ color:#fff; }

  .poi-modulo{ margin:.8rem 0 0; padding:.8rem; border-radius:14px; background:rgba(16,36,58,.045); }
  .poi-modulo[hidden]{ display:none; }
  /* Si apre piano: cresce e si schiarisce in un terzo di secondo, invece di comparire di colpo. */
  @keyframes poi-si-apre{
    from{ opacity:0; max-height:0; margin-top:0; padding-top:0; padding-bottom:0; }
    to  { opacity:1; max-height:26rem; }
  }
  .poi-modulo:not([hidden]){ overflow:hidden; animation:poi-si-apre .34s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes poi-compare{ from{ opacity:0; } to{ opacity:1; } }
  .poi-esito:not([hidden]){ animation:poi-compare .3s ease both; }
  .poi-az{ transition:background-color .2s ease, transform .2s ease; }
  .poi-az:active{ transform:scale(.97); }
  @media (prefers-reduced-motion: reduce){
    .poi-modulo:not([hidden]), .poi-esito:not([hidden]){ animation:none; }
  }
  .poi-modulo-tit{ margin:0 0 .5rem; font-size:.9rem; font-weight:800; color:#10243a; }
  /* 16px: sotto, l'iPhone ingrandisce la pagina appena si tocca il campo. */
  .poi-campo{ display:block; width:100%; margin:0 0 .5rem; padding:.6rem .7rem; border:1px solid rgba(16,36,58,.18);
    border-radius:10px; background:#fff; color:#10243a; font:inherit; font-size:16px; }
  .poi-invia{ min-height:44px; padding:.5rem 1.2rem; border:0; border-radius:999px; background:#10243a; color:#fff;
    font:inherit; font-size:.88rem; font-weight:800; cursor:pointer; }

  .poi-esito{ margin:.7rem 0 0; font-size:.86rem; font-weight:700; color:#b04a3a; }
  .poi-esito[hidden]{ display:none; }
  .poi-esito-bene{ color:#1f8a5b; }
  .poi-esito a{ color:#1a86c8; }

/* ── per chi amministra ───────────────────────────────────────────────────── */
  .poi-admin{ margin:1.1rem 0 0; padding:.8rem; border-radius:14px; background:#10243a; }
  .poi-admin-tit{ margin:0 0 .4rem; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:rgba(255,255,255,.6); }
  .poi-admin-stato{ margin:0; display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; line-height:1.4;
    color:rgba(255,255,255,.88); overflow-wrap:anywhere; }
  .poi-admin .poi-azioni{ border-top-color:rgba(255,255,255,.16); }
  .poi-admin .poi-esito{ color:#ffb4a6; }
  .poi-admin .poi-esito-bene{ color:#8fe3bd; }

/* ══ LE STELLE E I COMMENTI DI UN POSTO ══════════════════════════════════════
   La media grande — «4,6» — con le sue stelle e quanti giudizi la fanno; sotto
   gli ultimi commenti; in fondo il proprio giudizio, con le stelle grandi da
   toccare (la metà sinistra di una stella vale mezza). */
  .poi-giudizi{ margin:1rem 0 0; padding-top:.9rem; border-top:1px solid rgba(16,36,58,.1); }
  .poi-media{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
  .poi-media-n{ font-size:1.5rem; font-weight:800; line-height:1; color:#10243a; }
  .poi-media-q, .poi-media-niente{ font-size:.82rem; color:#6b7a87; }
  .poi-stelle{ display:inline-flex; gap:.12rem; color:#f2a900; font-size:1rem; }
  .poi-stelle-piccole{ font-size:.7rem; }

  .poi-commenti{ margin:.6rem 0 0; display:flex; flex-direction:column; gap:.6rem; }
  .poi-commento-chi{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; font-size:.78rem; color:#6b7a87; }
  .poi-commento-chi b{ font-size:.86rem; color:#10243a; }
  .poi-commento-t{ margin:.15rem 0 0; font-size:.9rem; line-height:1.5; color:#33424d; overflow-wrap:anywhere; }
  .poi-commento-via{ margin-top:.25rem; padding:.25rem .65rem; border:1px solid rgba(176,74,58,.4); border-radius:999px;
    background:none; color:#b04a3a; font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; }

  .poi-mio{ margin:.9rem 0 0; padding:.8rem; border-radius:14px; background:rgba(16,36,58,.045); }
  .poi-mio-tit{ margin:0 0 .35rem; font-size:.86rem; font-weight:800; color:#10243a; }
  /* Grandi: ogni stella è un bersaglio per il dito, e la sua metà anche. */
  .poi-stelle-tocca{ font-size:2rem; gap:.3rem; cursor:pointer; }
  .poi-stelle-tocca i{ padding:.1rem 0; }
  .poi-mio-n{ display:block; min-height:1.2rem; margin:.15rem 0 .45rem; font-size:.8rem; font-weight:700; color:#6b7a87; }

/* ── LE LINGUETTE DEL FOGLIO ──────────────────────────────────────────────────
   Tre voci larghe uguali; quella aperta ha il filo sotto. Il quadro che si apre
   si schiarisce piano, come il modulo dei tasti. */
  /* Come le «tabs» di Bootstrap: una riga col filo sotto, e la voce aperta è una
     linguetta vera — bordo sui tre lati, angoli tondi in alto, aperta verso il quadro. */
  .poi-ling{ display:flex; gap:.2rem; margin:.9rem 0 0; border-bottom:1px solid rgba(16,36,58,.18); }
  .poi-ling-voce{ min-height:44px; padding:.5rem .85rem; margin-bottom:-1px; border:1px solid transparent;
    border-radius:10px 10px 0 0; background:none; color:#1a86c8; font:inherit; font-size:.88rem; font-weight:700;
    cursor:pointer; transition:color .2s ease, background-color .2s ease; }
  .poi-ling-voce i{ margin-right:.3rem; font-size:.82rem; }
  .poi-ling-voce[aria-selected="true"]{ color:#10243a; background:#fff; border-color:rgba(16,36,58,.18);
    border-bottom-color:#fff; }
  .poi-quadro{ padding-top:.9rem; }
  .poi-quadro[hidden]{ display:none; }
  .poi-quadro:not([hidden]){ animation:poi-compare .25s ease both; }
  /* Dentro un quadro la prima cosa non ha bisogno del suo filo sopra: c'è già quello delle linguette. */
  .poi-quadro > .poi-azioni:first-child, .poi-quadro > .poi-giudizi:first-child{ border-top:0; padding-top:0; margin-top:0; }
  @media (prefers-reduced-motion: reduce){ .poi-quadro:not([hidden]){ animation:none; } }

/* ── LA FILA DELLE FOTOGRAFIE ─────────────────────────────────────────────────
   Si scorre di lato e ogni pezzo si ferma al suo posto. Quando la fotografia è
   una sola resta larga, col posto vuoto che spunta di fianco: si vede che c'è
   altro. Il posto vuoto è tratteggiato, per non sembrare una fotografia rotta. */
  .poi-fila{ display:flex; gap:.5rem; margin:.8rem 0 0; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .poi-fila::-webkit-scrollbar{ display:none; }
  .poi-fila-foto, .poi-fila-piu{ flex:none; height:150px; border-radius:12px; scroll-snap-align:start; }
  .poi-fila-foto{ position:relative; width:78%; margin:0; overflow:hidden; background:#e8eef2; }
  .poi-fila-foto img{ display:block; width:100%; height:100%; object-fit:cover; }
  .poi-fila-foto figcaption{ position:absolute; right:0; bottom:0; max-width:100%; padding:.15rem .45rem;
    border-radius:8px 0 0 0; background:rgba(16,36,58,.6); color:#fff; font-size:.64rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .poi-fila-piu{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
    width:38%; border:2px dashed rgba(26,134,200,.45); background:rgba(26,134,200,.06); color:#1a86c8;
    font:inherit; font-size:.84rem; font-weight:800; cursor:pointer; }
  .poi-fila-piu i{ font-size:1.3rem; }
  .poi-fila-piu:active{ background:rgba(26,134,200,.14); }
  /* Senza nemmeno una fotografia il posto vuoto prende tutta la riga. */
  .poi-fila-piu:only-child{ width:100%; }

/* ═══ SALVA ═══ due tasti a pillola: la stella si accende d'oro, il cuore di rosso. */
.poi-segni{ display:flex; gap:.6rem; flex-wrap:wrap; }
.poi-segno{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.5rem 1.1rem;
  border-radius:999px; border:1px solid rgba(16,36,58,.14); background:#fff; color:#10243a;
  font-size:.95rem; font-weight:700; cursor:pointer; transition:transform .12s ease, background .2s, color .2s; }
.poi-segno i{ color:#9aa6b2; transition:color .2s, transform .2s; }
.poi-segno:active{ transform:scale(.96); }
.poi-segno:disabled{ opacity:.5; cursor:default; }
.poi-segno-stella.poi-acceso{ background:#fff7e0; border-color:#f2c14e; }
.poi-segno-stella.poi-acceso i{ color:#f0a800; transform:scale(1.12); }
.poi-segno-cuore.poi-acceso{ background:#ffecef; border-color:#f28b9b; }
.poi-segno-cuore.poi-acceso i{ color:#e0314b; transform:scale(1.12); }
.poi-salva-detto{ margin:.7rem 0 0; font-size:.86rem; color:#5a6772; line-height:1.4; }
.poi-segno-n{ font-size:.8rem; font-weight:700; color:#5a6772; }
.poi-segno-n:empty{ display:none; }