/* ============================================================
   attivita-convenzionate.css — la pagina delle attivita' TALE
   Si carica dopo migliorie.css e ne usa i colori (--blu, --filo...).
   Desktop: elenco a sinistra, mappa fissa a destra.
   Telefono: la mappa si apre e si chiude con un pulsante.
   ============================================================ */

.ac-pagina {
  margin-top: var(--barra, 90px);
  padding: 28px 0 10px;
  background: var(--superficie, #f6fafc);
}
.ac-pagina h1 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  font-weight: 500;
  color: var(--inchiostro, #243238);
  margin: 0 0 6px;
}
.ac-sotto { color: var(--spento, #5c6366); margin: 0 0 14px; max-width: 70ch; }
.ac-aggiornato { color: var(--spento, #5c6366); font-size: 13px; }

/* ---------- guida e legenda ------------------------------- */
.ac-guida {
  background: #fff;
  border: 1px solid var(--filo, #e4ecf1);
  border-radius: var(--raggio, 12px);
  padding: 10px 16px;
  margin: 0 0 16px;
  font-size: 14.5px;
}
.ac-guida summary { cursor: pointer; font-weight: 600; color: var(--blu, #019be5); }
.ac-guida ul { margin: 10px 0 4px; padding-left: 20px; }
.ac-guida li { margin-bottom: 4px; }
.ac-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 4px; padding: 0; list-style: none; }
.ac-legenda li { display: flex; align-items: center; gap: 6px; }
.ac-pallino { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9fb3bd; }
.ac-pallino-blu { background: #019be5; }
.ac-pallino-oro { background: #e08a00; }
.ac-pallino-tu { background: #fff; box-shadow: 0 0 0 3px #0d2b39; }
.ac-pallino-circa { background: #019be5; box-shadow: 0 0 0 1px #9fb3bd; outline: 2px dashed #019be5; outline-offset: 2px; }

/* ---------- barra dei filtri ------------------------------ */
.ac-filtri {
  background: #fff;
  border: 1px solid var(--filo, #e4ecf1);
  border-radius: var(--raggio, 12px);
  box-shadow: var(--ombra);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}
.ac-riga-cerca { display: flex; gap: 8px; margin-bottom: 12px; }
.ac-riga-cerca .ac-campo-cerca { flex: 1; position: relative; }
.ac-riga-cerca .ac-campo-cerca .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8aa0aa; }
#ac-cerca { padding-left: 34px; height: 44px; font-size: 16px; border-radius: 8px; }
#ac-vicino { height: 44px; white-space: nowrap; border-radius: 8px; font-weight: 600; }
.ac-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.ac-griglia label { display: block; font-size: 12.5px; font-weight: 600; color: var(--spento, #5c6366); margin: 0 0 3px; letter-spacing: .2px; }
.ac-griglia .form-control { height: 40px; border-radius: 8px; }
.ac-spunta { display: flex !important; align-items: center; gap: 8px; height: 40px; margin: 0 !important; font-size: 14.5px !important; color: var(--testo, #3b4448) !important; cursor: pointer; }
.ac-spunta input { width: 18px; height: 18px; margin: 0; }
.ac-avviso {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff7e0;
  border: 1px solid #f0dcae;
  color: #5a4612;
  font-size: 14px;
}

/* ---------- conteggio --------------------------------------- */
.ac-sopra-elenco { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; flex-wrap: wrap; }
#ac-conteggio { font-weight: 600; color: var(--inchiostro, #243238); margin: 0; }
.ac-link-pulsante { background: none; border: 0; padding: 0; color: var(--blu, #019be5); font-weight: 600; text-decoration: underline; cursor: pointer; }
#ac-apri-mappa { display: none; }

/* ---------- elenco e mappa ---------------------------------- */
.ac-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%); gap: 18px; align-items: start; }
.ac-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.ac-pannello-mappa {
  position: sticky;
  top: calc(var(--barra, 90px) + 12px);
  height: calc(100vh - var(--barra, 90px) - 30px);
  min-height: 360px;
  border-radius: var(--raggio, 12px);
  overflow: hidden;
  border: 1px solid var(--filo, #e4ecf1);
  box-shadow: var(--ombra);
  background: #e9eef1;
}
#ac-mappa { width: 100%; height: 100%; }
.ac-mappa-errore { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--spento, #5c6366); }

/* ---------- la scheda --------------------------------------- */
.ac-scheda {
  background: #fff;
  border: 1px solid var(--filo, #e4ecf1);
  border-radius: var(--raggio, 12px);
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.ac-scheda.ac-scelta { border-color: var(--blu, #019be5); box-shadow: 0 0 0 3px rgba(1,155,229,.18); }
.ac-testa { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ac-nome { font-size: 17px !important; line-height: 1.3; margin: 0 0 5px; color: var(--blu, #019be5); font-weight: 600; overflow-wrap: anywhere; }
.ac-categoria { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #15607f; background: #e6f6fd; border-radius: 20px; padding: 2px 9px; }
.ac-perc {
  flex: 0 0 auto;
  text-align: center;
  background: #fdf4dd;
  border: 1px solid #f0dcae;
  border-radius: 9px;
  padding: 5px 9px 4px;
  min-width: 78px;
}
.ac-perc small { display: block; font-size: 10.5px; color: #6b5420; letter-spacing: .3px; line-height: 1.3; }
.ac-perc b { display: block; font-size: 20px; color: #4a3c18; line-height: 1.15; }
.ac-perc-zero { background: #f3f5f6; border-color: #e1e6e8; }
.ac-indirizzo { margin: 12px 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--testo, #3b4448); }
.ac-indirizzo .fa { color: var(--blu, #019be5); width: 12px; }
.ac-righe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 13px; }
.ac-righe span { border-radius: 6px; padding: 2px 8px; }
.ac-distanza { background: #0d2b39; color: #fff; font-weight: 600; }
.ac-approssimata { background: #f3f5f6; color: var(--spento, #5c6366); }
.ac-ha-store { background: #fff1d6; color: #7a4b00; font-weight: 600; }
.ac-azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ac-btn { font-size: 13px; padding: 6px 10px; border-radius: 7px; border: 1px solid #cfdbe1; background: #fff; color: var(--inchiostro, #243238); }
.ac-btn:hover, .ac-btn:focus { background: #f1f6f9; color: var(--inchiostro, #243238); }
.ac-btn-primo { background: var(--blu, #019be5); border-color: var(--blu, #019be5); color: #fff; font-weight: 600; }
.ac-btn-primo:hover, .ac-btn-primo:focus { background: #0189cb; color: #fff; }
.ac-btn-store { border-color: #e9b85a; color: #7a4b00; font-weight: 600; }
.ac-dettagli { margin-top: 10px; border-top: 1px solid var(--filo, #e4ecf1); padding-top: 8px; font-size: 14px; }
.ac-dettagli summary { cursor: pointer; color: var(--blu, #019be5); font-weight: 600; }
.ac-descrizione, .ac-orari { white-space: pre-line; margin: 8px 0 0; color: var(--testo, #3b4448); }
.ac-contatti { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; }
.ac-contatti a { overflow-wrap: anywhere; }

/* ---------- vuoto, caricamento ------------------------------ */
.ac-vuoto, .ac-caricamento {
  background: #fff;
  border: 1px dashed #c7d5dc;
  border-radius: var(--raggio, 12px);
  padding: 26px 18px;
  text-align: center;
  color: var(--testo, #3b4448);
}
.ac-vuoto p { margin: 0 0 10px; }
.ac-errore { border-color: #e2a3a3; color: #8a2a2a; }

/* ---------- fumetto della mappa ----------------------------- */
.ac-fumetto { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 170px; }
.ac-fumetto b { font-size: 14px; color: var(--inchiostro, #243238); }
.ac-fumetto-cat { color: #15607f; font-weight: 600; font-size: 12px; }
.ac-fumetto-perc { font-weight: 600; color: #4a3c18; }
.ac-fumetto em { color: var(--spento, #5c6366); }
.ac-fumetto-link { display: flex; gap: 12px; margin-top: 4px; font-weight: 600; }

/* ---------- telefono ---------------------------------------- */
@media (max-width: 991px) {
  .ac-corpo { display: flex; flex-direction: column; }
  .ac-pannello-mappa { display: none; position: static; width: 100%; height: 58vh; min-height: 300px; order: -1; }
  .ac-pannello-mappa.ac-mappa-aperta { display: block; }
  #ac-apri-mappa { display: inline-block; }
  .ac-elenco { width: 100%; }
}
@media (max-width: 520px) {
  .ac-pagina { padding-top: 18px; }
  .ac-riga-cerca { flex-direction: column; }
  #ac-vicino { width: 100%; }
  .ac-griglia { grid-template-columns: 1fr 1fr; }
  .ac-griglia > div:last-child { grid-column: 1 / -1; }
  .ac-elenco { grid-template-columns: 1fr; }
}

/* il riquadro della percentuale, in piccolo, per la legenda */
.ac-perc-mini { display: inline-block; background: #fdf4dd; border: 1px solid #f0dcae; border-radius: 6px; padding: 0 6px; color: #4a3c18; font-size: 13px; }

/* il foglio del sito mette i campi in maiuscolo: qui si leggono meglio normali */
.ac-filtri select, .ac-filtri input, .ac-filtri option { text-transform: none; }