:root {
  /* Palette ispirata a "Il Piccolo Principe" - Scuola Waldorf Bolzano:
     verde petrolio (intestazione, logo bianco), crema come sfondo neutro e
     i toni dell'acquerello della scuola (azzurro, lilla, rosa, pesca,
     sabbia) per strisce, sfondo e stati dei turni. */
  --primario: #1f4b42;       /* verde petrolio (logo, titoli, azioni principali) */
  --primario-scuro: #163731;
  --accento: #c4623a;        /* pesca scuro (evidenze, sovrabilanciamento) */
  --successo: #58907f;       /* verde acqua (stato "mio turno", OK) */
  --errore: #a5402a;
  --grigio: #6b6255;
  --bg: #f7f1e6;             /* crema */
  --bordo: #e3d8c4;
  --testo: #2e2a22;
  --manidifata: #a87a1c;    /* sabbia scuro — turni a pagamento del gruppo Mani di Fata */
  --parziale: #557f9f;      /* azzurro — turno con posti ancora liberi ma non vuoto */
  --sostituzione: #7677a8; /* lilla — richiesta di sostituzione in attesa su un proprio turno */
  --compensato: #9a6b8f;   /* prugna — bilanciato per totale (venerdì + SETT in linea) ma non esatto sui due tipi */
}

* { box-sizing: border-box; }

body {
  font-family: "Quicksand", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  /* Velature d'acquerello molto tenui agli angoli, sopra la crema. */
  background:
    radial-gradient(circle at 0% 0%, rgba(170, 174, 206, 0.30), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(225, 137, 98, 0.20), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(133, 177, 201, 0.18), transparent 35%),
    var(--bg);
  background-attachment: fixed;
  color: var(--testo);
}

h1, h2, h3 { font-family: "Quicksand", inherit; font-weight: 700; }

header {
  background: var(--primario);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.header-brand { display: flex; align-items: center; gap: 16px; }
.logo-scuola { height: 76px; width: auto; } /* maiuscole del logo ≈ maiuscole del titolo (h1 1.15rem) */
.logo-scuola.nascosto { display: none; }
.header-testi { display: flex; flex-direction: column; line-height: 1.2; }
/* Il separatore compare solo se il logo è visibile (se manca, resta il titolo). */
header h1 { font-size: 1.15rem; margin: 0; color: #fff; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.logo-scuola:not(.nascosto) + .header-testi { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.35); }

/* Striscia d'acquerello sotto l'intestazione (colori ricavati dall'immagine della scuola). */
.striscia-acquerello {
  height: 6px;
  background: linear-gradient(90deg, #85b1c9, #aaaece, #cea3b3, #e18962, #edb770, #ecdf8a);
}

.banner-volontariato {
  background: #efe6d4;
  color: var(--primario-scuro);
  border-bottom: 1px solid var(--bordo);
  margin: 0;
  padding: 8px 24px;
  font-size: 0.85rem;
  text-align: center;
}

.nota-bilanciamento {
  background: #eef1e9;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--successo);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--testo);
  margin-bottom: 16px;
}

.famiglia-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nome-utente-loggato { font-weight: 700; color: #fff; }
/* Pulsanti e contatori dentro l'intestazione verde: versione chiara. */
header button.secondario { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); }
header button.secondario:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
header .contatore-voce { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
header .contatore-voce.sovrabilanciato { background: var(--accento); border-color: var(--accento); }

.hidden { display: none !important; }

.contatore-bilanciamento { display: flex; gap: 6px; }
.contatore-voce {
  font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: #eee6d6; color: var(--grigio); border: 1px solid var(--bordo);
}
.contatore-voce.sovrabilanciato { background: var(--accento); color: white; border-color: var(--accento); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  background: #fffdf9;
  border-bottom: 1px solid var(--bordo);
}

.tab-btn {
  border: none;
  background: none;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--grigio);
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--primario);
  border-bottom-color: var(--accento);
  font-weight: 600;
}

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.filtri {
  display: flex;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filtri label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 4px; }

input, select, button {
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font-family: inherit;
}

button {
  background: var(--primario);
  color: white;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
}

button:hover { opacity: 0.9; }
button.secondario { background: white; color: var(--primario); border: 1px solid var(--primario); }
button:disabled { background: var(--bordo); color: var(--grigio); cursor: not-allowed; opacity: 1; }
button.secondario:disabled { background: white; color: var(--grigio); border-color: var(--bordo); }

.lista-turni { display: flex; flex-direction: column; gap: 10px; }

/* Guida alle pulizie giornaliere (dal file storico): visibile ma non
   invadente, stesso linguaggio della legenda zone. */
.guida-pulizie {
  background: #eef2ea; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 0.82rem; color: var(--testo);
}

/* Fascia "come sono composte le zone": stesso stile compatto della
   legenda colori, fa parte del flusso principale (non una colonna a
   fianco, che può sparire per mancanza di spazio o scorrimento). */
.legenda-zone {
  background: #fbf6ec; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 0.72rem; color: var(--grigio);
}
.legenda-zone h4 { margin: 0 0 4px; font-size: 0.75rem; color: var(--primario); }
.legenda-zone-righe { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legenda-zone-righe strong { color: var(--testo); }

.modal {
  position: fixed; inset: 0; background: rgba(30,25,15,0.45);
  display: flex; align-items: center; justify-content: center;
}
.modal.hidden { display: none; }
.modal-box {
  background: white; padding: 20px; border-radius: 12px; width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}
.modal-box h3 { color: var(--primario); margin-top: 0; }
.modal-box label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cambio-scelte { display: flex; flex-direction: column; gap: 8px; }
.errore { color: var(--errore); font-size: 0.85rem; min-height: 1em; }
.hint { color: var(--grigio); font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bordo); font-size: 0.9rem; }
th { color: var(--primario); }
.badge-carente { color: var(--errore); font-weight: 600; }
.badge-sovrabilanciato { color: var(--accento); font-weight: 600; }
.badge-ok { color: var(--successo); }

/* ---------- Calendario mensile ---------- */

.legenda {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--grigio); margin-bottom: 12px;
}
.legenda span { display: flex; align-items: center; gap: 6px; }
.pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pallino.libero { background: white; border: 1px solid var(--bordo); }
.pallino.mio { background: var(--successo); }
.pallino.occupato { background: var(--primario); }
.pallino.parziale { background: var(--parziale); }
.pallino.sovrabilanciato { background: var(--accento); }
.pallino.completo { background: #e0eee6; border: 1px solid #b6d3c5; }
.pallino.manidifata { background: var(--manidifata); }
.pallino.sostituzione { background: var(--sostituzione); }

.indice-mesi {
  font-size: 0.85rem; margin-bottom: 20px; color: var(--primario);
  display: flex; gap: 4px; flex-wrap: wrap;
}
.indice-mesi a { color: var(--primario); text-decoration: none; font-weight: 600; }
.indice-mesi a:hover { text-decoration: underline; }

.mese-blocco { margin-bottom: 28px; scroll-margin-top: 16px; }

/* Sempre esattamente 2 mesi affiancati, a tutta larghezza (non più un
   max-width fisso che sprecava spazio) — scendono a 1 colonna sola solo
   su schermi stretti. */
.mesi-colonne {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
  align-items: start;
}
@media (max-width: 760px) {
  .mesi-colonne { grid-template-columns: 1fr; }
}
.mese-titolo { margin: 0 0 8px; font-size: 1.05rem; color: var(--primario); }

/* Griglia mensile, il più minimale possibile: un riquadro per giorno,
   turni con sotto il nome della famiglia assegnata (niente più hover
   necessario per saperlo). minmax(0, 1fr), non solo 1fr: senza, le
   colonne con più turni (es. il venerdì, con tante zone) si allargano a
   spese delle altre invece di restare tutte della stessa larghezza. */
.mese-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.giorno-header {
  font-size: 0.75rem; color: var(--grigio); text-align: center;
  padding-bottom: 4px; font-weight: 600;
}

.giorno-cella {
  background: white;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  min-height: 62px;
  min-width: 0; /* senza, il contenuto (es. tante pillole di venerdì) forza la colonna più larga delle altre */
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.giorno-cella.vuota { background: transparent; border: none; }
.giorno-cella.con-turni { background: #fbf6ec; }
/* Giornata con tutti i turni già assegnati: verde chiaro, in tono con il
   verde acqua dello stato "mio turno" e con il verde petrolio. */
.giorno-cella.completa { background: #e0eee6; border-color: #b6d3c5; }

.giorno-numero { font-size: 0.78rem; color: var(--grigio); }

.turno-pills { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }

.turno-con-famiglia {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  max-width: 100%;
}
.turno-famiglia-nome {
  font-size: 0.62rem; color: var(--grigio); line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.turno-pill {
  border: none; border-radius: 5px; font-size: 0.72rem;
  padding: 2px 6px; cursor: pointer; font-weight: 700;
}
.turno-pill.pill-libero { background: white; border: 1px solid var(--bordo); color: var(--grigio); }
.turno-pill.pill-mio { background: var(--successo); color: white; }
.turno-pill.pill-occupato { background: var(--primario); color: white; }
.turno-pill.pill-parziale { background: var(--parziale); color: white; }
.turno-pill.pill-sovrabilanciato { background: var(--accento); color: white; }
.turno-pill.pill-manidifata {
  background: var(--manidifata); color: white;
  box-shadow: 0 0 0 2px white inset, 0 0 0 3px var(--manidifata);
}
.turno-pill.pill-sostituzione-richiesta {
  background: var(--sostituzione); color: white;
}

@media (max-width: 640px) {
  .mese-grid { gap: 2px; }
  .giorno-cella { min-height: 50px; padding: 2px 3px; }
  .giorno-header { font-size: 0.65rem; }
  .turno-famiglia-nome { font-size: 0.58rem; }
}

/* ---------- Amministrazione ---------- */

#vistaAdmin h2 { color: var(--primario); margin-top: 0; }

.admin-nuova-famiglia, .admin-nuovo-turno, .admin-nuova-zona, .admin-genera-turni {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: end;
  background: white; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 12px; margin-bottom: 8px;
}
.admin-nuova-famiglia label, .admin-nuovo-turno label, .admin-nuova-zona label, .admin-genera-turni label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 4px; }
.campo-checkbox { flex-direction: row !important; align-items: center; gap: 6px !important; }
.campo-checkbox input { width: auto; }

/* Azione distruttiva (azzera il calendario): bordo di avviso per
   distinguerla visivamente dalle altre, pur restando compatta. */
.admin-fine-anno {
  background: white; border: 1px solid var(--errore); border-radius: 8px;
  padding: 12px; margin-bottom: 8px;
}

.badge-manidifata {
  background: var(--manidifata); color: white; font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; display: inline-block;
}

.tabella-admin-turni input, .tabella-admin-turni select,
.tabella-famiglie-admin select {
  padding: 4px 6px; font-size: 0.85rem; width: 100%;
}
.tabella-admin-turni td { vertical-align: middle; }

/* ---------- Login (schermata di accesso) ---------- */

.login-scelta {
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
  padding: 40px 20px;
}
.login-card {
  background: white; border: 1px solid var(--bordo); border-radius: 12px;
  padding: 24px; width: 300px; display: flex; flex-direction: column; gap: 10px;
}
.login-card h2 { margin: 0; color: var(--primario); font-size: 1.1rem; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }

/* ---------- Report stampabile (solo i turni della famiglia loggata) ---------- */

#areaStampa { display: none; }

.stampa-titolo { text-align: center; margin-bottom: 4px; }
.stampa-sottotitolo { text-align: center; color: var(--grigio); margin-top: 0; margin-bottom: 24px; }

.stampa-mese { margin-bottom: 18px; page-break-inside: avoid; }
.stampa-mese-titolo {
  color: var(--primario); border-bottom: 2px solid var(--primario);
  padding-bottom: 4px; margin-bottom: 8px; font-size: 1rem;
}

/* Solo le giornate assegnate, una riga ciascuna — niente griglia con le
   caselle vuote degli altri giorni: il dettaglio stampato resta minimo. */
.stampa-giorno-riga {
  display: flex; align-items: baseline; gap: 10px; font-size: 0.85rem;
  padding: 3px 0; border-bottom: 1px solid #ece4d4;
}
.stampa-giorno-data { font-weight: 700; min-width: 90px; flex-shrink: 0; }
.stampa-turno-etichetta { font-weight: 700; }
.stampa-turno-etichetta small { font-weight: 400; color: var(--grigio); margin-left: 4px; }

.stampa-nessun-turno { text-align: center; color: var(--grigio); margin-top: 40px; }

.stampa-zona-legenda {
  background: #f7f2e6; border: 1px solid var(--bordo); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 18px; font-size: 0.72rem; color: var(--grigio);
}
.stampa-zona-legenda h4 { margin: 0 0 4px; font-size: 0.8rem; color: var(--primario); }
.stampa-zona-legenda-righe { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.stampa-zona-legenda-righe strong { color: var(--testo); }

@media print {
  body > *:not(#areaStampa) { display: none !important; }
  #areaStampa { display: block !important; }
  body { background: white; }
}

/* Avviso nel modal "Il tuo turno": annullamento non più possibile (≤ 2 giorni) */
.avviso-urgente {
  background: #fbeee9; border: 1px solid var(--accento); border-radius: 8px;
  padding: 8px 10px; font-size: 0.82rem; color: var(--testo); margin: 0 0 4px;
}

/* Scambio turno: la famiglia sceglie nel calendario il proprio turno da offrire */
.banner-scambio {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff4cf; border: 1px solid var(--manidifata); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 0.88rem;
}
.scambio-attivo .turno-pill { opacity: 0.3; cursor: not-allowed; }
.scambio-attivo .turno-pill.pill-scambio-candidato {
  opacity: 1; cursor: pointer; box-shadow: 0 0 0 3px #f1c84b;
}

.riga-turno-mini { padding: 3px 7px; font-size: 0.75rem; }

/* Scheda Notifiche */
.notifica-card {
  background: white; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
}
.notifica-card .hint { margin: 6px 0 8px; }
.campo-breve { width: 5.5em; display: inline-block; }

/* Importazione famiglie da Excel */
.modal-largo { width: min(1100px, 95vw); max-height: 90vh; overflow: hidden; }
.import-tabella { overflow: auto; max-height: 50vh; border: 1px solid var(--bordo); border-radius: 8px; }
.import-tabella table { width: 100%; font-size: 0.78rem; }
.import-tabella th { position: sticky; top: 0; background: #f3ece0; z-index: 1; }
.import-errore { color: var(--errore); font-weight: 600; }
.import-avviso { color: #8a6a14; }
tr.import-errore td { background: #fbeee9; }
tr.import-aggiorna td { background: #f1f5f9; }

/* Modifica/eliminazione famiglia e importazione calendario */
button.pericolo { background: var(--accento); }
.modal-medio { width: min(560px, 95vw); }
.elim-scelte { display: flex; flex-direction: column; gap: 8px; }
.cal-opzioni { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.cal-contenuto { max-height: 52vh; padding: 8px 10px; }
.cal-contenuto h4 { margin: 12px 0 6px; color: var(--primario); }
.cal-contenuto table { font-size: 0.78rem; }
.cal-contenuto select { max-width: 200px; padding: 3px; }
.cal-contenuto select.manca { border: 2px solid var(--errore); background: #fbeee9; }
.cal-contenuto details { margin-top: 10px; }
.cal-contenuto summary { cursor: pointer; font-weight: 700; color: var(--primario); }
tr.cal-LIBERO td { background: #f1f1f1; }
tr.cal-DAVERIFICARE td { background: #fff7dc; }
tr.cal-NONASSEGNATO td { background: #fbeee9; }
.riga-azioni { white-space: nowrap; }

/* Festività e chiusure: giorni senza zone da assegnare, evidenziati */
.pallino.festivo { background: #e6c9d4; border: 1px solid #cea3b3; }
.giorno-cella.festivo {
  background: repeating-linear-gradient(135deg, #f6e8ee, #f6e8ee 6px, #f1dce5 6px, #f1dce5 12px);
  border-color: #cea3b3;
  display: flex; flex-direction: column; gap: 2px;
}
.giorno-cella.festivo .giorno-numero { color: #8b5a6f; }
.festivo-etichetta { font-size: 0.62rem; line-height: 1.15; color: #8b5a6f; font-style: italic; overflow-wrap: anywhere; }
.tabella-festivita { width: 100%; font-size: 0.85rem; margin-top: 8px; }
.tabella-festivita td, .tabella-festivita th { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--bordo); }

/* Zone speciali: etichetta e contatore */
.tag-speciale { font-size: 0.65rem; font-weight: 600; color: #8b5a6f; background: #f3e3ea; border-radius: 6px; padding: 0 5px; font-style: normal; }
.contatore-speciali { background: #f3e3ea; color: #8b5a6f; }

.altra-data-zone { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
.altra-data-zone label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; }
.altra-data-zone .tag-tipo { font-size: 0.65rem; color: #6b6255; }

/* Finestra del turno (calendario amministratore) */
.turno-admin-assegnati { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.turno-admin-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f3ece0; border-radius: 8px; padding: 6px 10px; }
.turno-admin-assegna { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 10px 0; }
.turno-admin-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }

/* Bilanciamento «compensato»: totale venerdì + SETT in linea con gli obiettivi */
.contatore-voce.compensato, header .contatore-voce.compensato { background: var(--compensato); color: white; border-color: var(--compensato); }
.pallino.compensato { background: var(--compensato); }
.badge-compensato { color: var(--compensato); font-weight: 600; }

/* Giorno di festività con turni (da eliminare) */
.giorno-cella.festivo-con-turni { background: repeating-linear-gradient(135deg, #f6e8ee, #f6e8ee 6px, #f1dce5 6px, #f1dce5 12px); border-color: #cea3b3; }
.giorno-cella.festivo-con-turni .festivo-etichetta { font-weight: 600; font-style: normal; }
.avviso-festivita { background: #fbeee9; border: 1px solid #e3b5a5; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 0.85rem; }
.avviso-festivita details { margin-top: 6px; }

.turno-admin-filtro { font-size: 0.85rem; margin-top: 8px; }

.tag-escluso { font-size: 0.65rem; font-weight: 600; color: #6b6255; background: #ece5d6; border-radius: 6px; padding: 0 5px; margin-left: 4px; }

/* Anomalie del calendario */
.pallino.anomalia { background: #fff; border: 2px solid #d98e04; }
.giorno-cella.con-anomalia { outline: 2px solid #d98e04; outline-offset: -2px; }
.badge-anomalia { display: inline-block; font-size: 0.6rem; font-weight: 700; color: #8a5a00; background: #fde9bf; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.avviso-anomalie { background: #fff7e0; border: 1px solid #ecd08b; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 0.85rem; }
.tabella-anomalie { width: 100%; margin-top: 8px; font-size: 0.82rem; border-collapse: collapse; }
.tabella-anomalie td { padding: 4px 8px; border-bottom: 1px solid #ecd08b; vertical-align: top; }
.giorno-cella.lampeggia { animation: lampeggia 0.6s ease-in-out 3; }
@keyframes lampeggia { 50% { box-shadow: 0 0 0 4px #d98e04; } }

/* Pulsanti Modifica / Elimina nella tabella famiglie: caratteri più piccoli */
button.btn-piccolo { font-size: 0.78rem; padding: 4px 10px; }

@media (max-width: 760px) { .logo-scuola { height: 56px; } }

/* Più aria tra la tabella delle zone e la sezione che segue */
h2.titolo-sezione-distanziata { margin-top: 64px; }

/* Calendario admin: parte alta compatta (spunte + indice mesi sulla stessa riga, legenda breve, informazioni chiuse) */
.barra-calendario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin: 4px 0 8px; }
.barra-calendario .filtri { margin: 0; gap: 4px 18px; align-items: center; }
.barra-calendario .filtri label.campo-checkbox { flex-direction: row; align-items: center; gap: 6px; }
.barra-calendario .indice-mesi { margin: 0; gap: 4px 12px; }
.legenda.legenda-compatta { gap: 4px 16px; font-size: 0.8rem; margin-bottom: 6px; }
details.info-calendario { margin: 2px 0 14px; font-size: 0.85rem; }
/* «Informazioni»: un pulsante ben visibile (bordo, icona, freccia), non un semplice link */
details.info-calendario > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 7px 16px 7px 10px; border: 1.5px solid var(--primario); border-radius: 999px;
  background: #fff; color: var(--primario); font-size: 0.95rem; font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
details.info-calendario > summary::-webkit-details-marker { display: none; }
details.info-calendario > summary::before {
  content: "i"; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--primario); color: #fff;
  font-family: Georgia, serif; font-style: italic; font-size: 0.85rem; font-weight: 700;
}
details.info-calendario > summary::after { content: "▸"; font-size: 0.8rem; }
details.info-calendario[open] > summary::after { content: "▾"; }
details.info-calendario > summary:hover { background: var(--primario); color: #fff; }
details.info-calendario > summary:hover::before { background: #fff; color: var(--primario); }
details.info-calendario > summary .info-sub { font-weight: 500; font-size: 0.8rem; opacity: 0.85; }
details.info-calendario[open] > summary { margin-bottom: 10px; }
.legenda-estesa { margin: 0 0 10px; }
.legenda-estesa h4 { margin: 0 0 4px; font-size: 0.75rem; color: var(--primario); }
.legenda-estesa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.legenda-estesa li { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--grigio); }

/* Telefono: il pulsante «Informazioni» più piccolo (senza il sottotitolo) */
@media (max-width: 640px) {
  details.info-calendario > summary { padding: 4px 12px 4px 8px; font-size: 0.85rem; gap: 6px; }
  details.info-calendario > summary::before { width: 18px; height: 18px; font-size: 0.75rem; }
  details.info-calendario > summary .info-sub { display: none; }
}

/* Filtro «Tutti i turni» / «Solo i miei» (famiglia) */
.filtro-segmentato { display: inline-flex; border: 1.5px solid var(--primario); border-radius: 999px; overflow: hidden; }
.filtro-segmentato button { border: none; border-radius: 0; background: #fff; color: var(--primario); padding: 5px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.filtro-segmentato button.attivo { background: var(--primario); color: #fff; }

/* Senza sabato e domenica (mesi senza turni nel weekend): 5 colonne più larghe */
.mese-grid.senza-weekend { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.giorno-nome { display: none; }

/* Telefono: agenda per giorni (solo giorni con turni, nomi interi) per le famiglie, legenda dentro «Informazioni»,
   indice dei mesi su una riga scorrevole */
@media (max-width: 640px) {
  #vistaFamiglia .mese-grid, #vistaFamiglia .mese-grid.senza-weekend { display: block; }
  #vistaFamiglia .giorno-header, #vistaFamiglia .giorno-cella.vuota { display: none; }
  #vistaFamiglia .giorno-cella:not(.con-turni):not(.festivo) { display: none; }
  /* «Solo i miei»: solo i propri turni, senza le giornate di chiusura (restano se un proprio turno cade in una festività) */
  #vistaFamiglia .solo-miei .giorno-cella.festivo:not(.con-turni) { display: none; }
  #vistaFamiglia .giorno-cella { margin-bottom: 8px; padding: 8px 10px; min-height: 0; }
  #vistaFamiglia .giorno-numero { font-size: 0.95rem; font-weight: 700; color: var(--primario); }
  #vistaFamiglia .giorno-nome { display: inline; }
  #vistaFamiglia .turno-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #vistaFamiglia .turno-con-famiglia { align-items: stretch; }
  #vistaFamiglia .turno-pill { width: 100%; text-align: left; font-size: 0.85rem; padding: 6px 10px; }
  #vistaFamiglia .turno-famiglia-nome { font-size: 0.78rem; padding: 2px 2px 0; }
  #famCalLegenda, #adminCalLegenda { display: none; }
  .barra-calendario .indice-mesi { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; width: 100%; padding-bottom: 4px; }
  .barra-calendario .indice-mesi a { flex: none; }
}