/* Padel28 - foglio di stile unico, pensato prima per il telefono.
   Un solo file, niente librerie esterne, nessuna richiesta a server di terzi:
   anche i caratteri stanno in assets/caratteri, perche' la
   Content-Security-Policy del .htaccess non lascia passare altri domini.

   I colori sono quelli del marchio ("Padel28 - Materiale grafico\1.0\5_palette"):
   verde bottiglia, ottone, crema. L'ottone e' un colore di dettaglio: filetti,
   bordi, il bottone principale sul verde. Per i TESTI in ottone su fondo
   chiaro si usa l'ottone scuro, l'ottone pieno non si legge. */

@font-face{
  font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url("caratteri/oswald-latin-wght-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("caratteri/source-sans-3-latin-wght-normal.woff2") format("woff2");
}

:root{
  /* marchio */
  --verde:#11352B;
  --ottone:#C9A227;
  --crema:#F2EDE1;
  /* di servizio */
  --inchiostro:#1B2420;
  --ottone-scuro:#7D6410;
  --verde-chiaro:#DDE7E1;
  --bianco:#FFFFFF;

  --verde-vivo:#1B4D3F;      /* il verde al passaggio del mouse */
  --verde-tenue:#EAF1ED;     /* caselle libere, righe scelte */
  --verde-bordo:#C3D5CB;
  --ottone-tenue:#F6EFD6;
  --fondo:#F8F5EE;           /* la crema, piu' chiara: fondo delle pagine */
  --carta:#FFFFFF;
  --bordo:#E2DCCC;
  --bordo-tenue:#EFEBDF;
  --tenue:#5A6660;           /* testo secondario */
  --spento:#98A29C;
  --ok:#1D6B45;
  --allarme:#A6291F;

  --testo:var(--inchiostro);
  --titoli:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --testi:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --raggio:10px;
  --ombra:0 1px 2px rgba(17,53,43,.06),0 6px 18px rgba(17,53,43,.06);
  --barra-h:58px;   /* altezza della barra in alto: ci si appoggia l'intestazione dell'orario */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:calc(var(--barra-h) + 12px)}
body{
  background:var(--fondo);
  color:var(--testo);
  font:400 17px/1.5 var(--testi);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-text-size-adjust:100%;
}
a{color:var(--verde);text-underline-offset:2px}
a:hover{color:var(--verde-vivo)}
:focus-visible{outline:3px solid var(--ottone);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--titoli);font-weight:600;color:var(--verde);line-height:1.15;text-wrap:balance}
h1{font-size:30px;margin:22px 0 6px;text-transform:uppercase;letter-spacing:.5px}
h2{font-size:21px;margin:30px 0 10px;text-transform:uppercase;letter-spacing:.6px}
h3{font-size:18px;margin:0 0 6px;letter-spacing:.3px}
p{margin:8px 0}
small{color:var(--tenue)}
.piccolo{font-size:15px;color:var(--tenue)}
.centro{text-align:center}
.sottotitolo{color:var(--tenue);margin:0 0 18px;max-width:62ch}
/* Quando e' un titolo di sezione, e non la riga sotto al titolo, gli serve
   aria sopra: senza, la sezione nuova sembra appiccicata al riquadro prima. */
h2.sottotitolo,h3.sottotitolo{margin-top:30px}
.sottotitolo.centro{margin-left:auto;margin-right:auto}
.occhiello{font-family:var(--titoli);font-weight:500;font-size:14px;letter-spacing:3px;
  text-transform:uppercase;color:var(--ottone-scuro);margin:0 0 8px}
.salta{position:absolute;left:-999px;top:0;background:var(--ottone);color:var(--verde);
  padding:10px 14px;z-index:50;font-weight:600}
.salta:focus{left:8px;top:8px}

/* ------------------------------------------------------------ barra */
.barra{
  position:sticky;top:0;z-index:20;height:var(--barra-h);
  display:flex;align-items:center;gap:8px;
  padding:0 16px;color:var(--crema);background:var(--verde);
  border-bottom:3px solid var(--ottone);
}
.marchio{display:flex;align-items:center;flex:0 0 auto;padding:6px 8px 6px 0;text-decoration:none}
.marchio picture{display:block}
.marchio img{display:block;height:29px;width:auto}
.menu-alto{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;align-self:stretch}
.menu-alto::-webkit-scrollbar{display:none}
.menu-alto a{display:flex;align-items:center;color:#C9D6CF;text-decoration:none;padding:0 7px;
  font-family:var(--titoli);font-weight:500;font-size:13.5px;letter-spacing:.6px;text-transform:uppercase;
  white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px}
.menu-alto a:hover{color:var(--bianco)}
.menu-alto a.attivo{color:var(--bianco);border-bottom-color:var(--crema)}
.barra-azioni{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.chi-sono{display:none;color:#C9D6CF;font-size:15px;text-decoration:none}
a.chi-sono:hover{color:var(--bianco);text-decoration:underline}
.bottone-barra{background:var(--ottone);color:var(--verde);text-decoration:none;padding:7px 16px;
  border-radius:999px;font-family:var(--titoli);font-weight:600;font-size:14px;letter-spacing:1px;
  text-transform:uppercase;border:1px solid var(--ottone)}
.bottone-barra.contorno{padding:6px 12px;font-size:13px}
.bottone-barra:hover{background:#D8B33C;color:var(--verde)}
.bottone-barra.contorno{background:transparent;color:var(--crema);border-color:rgba(242,237,225,.45)}
.bottone-barra.contorno:hover{background:rgba(242,237,225,.1);color:var(--bianco)}

/* ------------------------------------------------------------ impianto */
.contenitore{width:100%;max-width:960px;margin:0 auto;padding:0 16px 40px;flex:1}
.pagina-stretta{max-width:440px;margin:0 auto;padding-top:28px}
.marchio-pagina{display:block;margin:4px auto 14px;height:70px;width:auto}
.testata-pagina{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.testata-pagina h1{margin-bottom:0}
.briciola{margin:0 0 -10px;font-size:15px}
.briciola a{color:var(--tenue);text-decoration:none}
.briciola a:hover{color:var(--verde);text-decoration:underline}
.azioni-centro{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ------------------------------------------------------------ pie' di pagina */
.pie{background:var(--verde);color:#C9D6CF;border-top:3px solid var(--ottone);font-size:15px}
.pie-dentro{max-width:960px;margin:0 auto;padding:30px 16px 18px;display:grid;
  grid-template-columns:1fr 1fr;gap:24px 20px;align-items:start}
.pie-marchio{grid-column:1 / -1}
.pie-marchio img{display:block;height:62px;width:auto}
.pie-colonna{display:flex;flex-direction:column;gap:5px}
.pie-colonna strong{font-family:var(--titoli);font-weight:500;font-size:13px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ottone);margin-bottom:4px}
.pie a{color:var(--crema);text-decoration:none}
.pie a:hover{color:var(--bianco);text-decoration:underline}
.pie-riga{max-width:960px;margin:0 auto;padding:14px 16px 22px;font-size:13px;color:#9DB0A7;
  border-top:1px solid rgba(242,237,225,.14)}

/* ------------------------------------------------------------ avvisi */
.avviso{padding:12px 14px;border-radius:var(--raggio);margin:16px 0;border:1px solid var(--bordo);
  background:var(--carta);border-left-width:4px}
.avviso-ok{border-color:#BBD9C8;border-left-color:var(--ok);background:#EDF6F0}
.avviso-errore{border-color:#EBC4C0;border-left-color:var(--allarme);background:#FCEEEC}
.avviso-info{border-color:#E4D7A8;border-left-color:var(--ottone);background:var(--ottone-tenue)}
/* Avviso con il bottone accanto: sul telefono il bottone va sotto, largo. */
.avviso-conferma{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.avviso-conferma > div{flex:1 1 260px}
.avviso-conferma form{margin:0}
.avviso-conferma .bottone{white-space:nowrap}
@media (max-width:519px){.avviso-conferma .bottone{width:100%;text-align:center}}

/* ------------------------------------------------------------ moduli */
.modulo label{display:block;margin:0 0 14px;font-size:15px;font-weight:600;color:var(--inchiostro)}
.modulo label input,.modulo label select,.modulo label textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;font:400 16px/1.4 var(--testi);
  border:1px solid #CFC8B6;border-radius:8px;background:var(--bianco);color:var(--testo);
}
.modulo label input:focus,.modulo label select:focus,.modulo label textarea:focus,
.barra-filtri input:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.modulo label small{display:block;margin-top:4px;font-weight:400}
.modulo .riga-spunta{display:flex;align-items:center;gap:8px;color:var(--testo);font-weight:400}
.modulo .riga-spunta input{width:auto;margin:0}
input[type=checkbox],input[type=radio]{accent-color:var(--verde);width:17px;height:17px}
.riquadro{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:20px;
  box-shadow:var(--ombra)}
.pagina-stretta .riquadro{border-top:3px solid var(--ottone)}
.due-colonne{display:grid;grid-template-columns:1fr;gap:0 16px}
fieldset{border:1px solid var(--bordo);border-radius:8px;padding:12px 14px;margin:0 0 14px}
legend{font-size:15px;font-weight:600;padding:0 6px}

.bottone{display:inline-block;background:var(--verde);color:var(--crema);border:1px solid var(--verde);border-radius:8px;
  padding:11px 22px;font-family:var(--titoli);font-size:16px;font-weight:500;letter-spacing:1.2px;
  text-transform:uppercase;line-height:1.3;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .15s,border-color .15s,color .15s}
.bottone:hover{background:var(--verde-vivo);border-color:var(--verde-vivo);color:var(--bianco)}
.bottone.grande{width:100%;padding:14px;font-size:17px}
.bottone.piccolo{padding:8px 14px;font-size:14px;color:var(--crema)}
.bottone.chiaro{background:var(--bianco);color:var(--verde);border-color:#CFC8B6}
.bottone.chiaro:hover{background:var(--verde-tenue);border-color:var(--verde);color:var(--verde)}
.bottone.ottone{background:var(--ottone);border-color:var(--ottone);color:var(--verde);font-weight:600}
.bottone.ottone:hover{background:#D8B33C;border-color:#D8B33C;color:var(--verde)}
.bottone.su-verde{background:transparent;border-color:rgba(242,237,225,.55);color:var(--crema)}
.bottone.su-verde:hover{background:rgba(242,237,225,.1);border-color:var(--crema);color:var(--bianco)}
.collegamento{background:none;border:0;color:var(--allarme);cursor:pointer;font:inherit;font-size:15px;padding:0;text-decoration:underline}
.annulla{margin-left:12px;font-size:15px;color:var(--tenue)}
.in-riga{display:inline}
.in-linea{display:inline-block;margin-right:12px}
/* un modulo di una riga sola: la prova del listino, i filtri */
.modulo.in-linea{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-right:0}
.modulo.in-linea label{margin:0}
.modulo.in-linea label input,.modulo.in-linea label select{width:auto}

.spunte-giorni{display:flex;flex-wrap:wrap;gap:6px}
.spunte-giorni label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:400;
  border:1px solid var(--bordo);border-radius:999px;padding:6px 12px;background:var(--bianco)}
.spunte-giorni input{width:auto;margin:0}

/* ------------------------------------------------------------ gestione */
.linguette{display:flex;gap:2px;margin:18px 0 6px;border-bottom:1px solid var(--bordo);
  overflow-x:auto;scrollbar-width:none}
.linguette::-webkit-scrollbar{display:none}
.linguette a{padding:10px 14px;text-decoration:none;color:var(--tenue);white-space:nowrap;
  font-family:var(--titoli);font-weight:500;font-size:15px;letter-spacing:1px;text-transform:uppercase;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.linguette a:hover{color:var(--verde)}
.linguette a.attiva{color:var(--verde);border-bottom-color:var(--ottone)}
/* Le linguette sono diventate dieci. Sul telefono la barra si scorre col
   dito, ma sul computer non c'e' barretta di scorrimento: l'ultima voce
   resterebbe fuori e nessuno la troverebbe. Da 760px in su vanno a capo. */
@media (min-width:760px){
  .linguette{flex-wrap:wrap;overflow-x:visible;row-gap:0}
}

.tabella{width:100%;border-collapse:separate;border-spacing:0;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;font-size:15px}
.tabella th{text-align:left;padding:10px 12px;background:var(--verde);color:var(--crema);
  font-family:var(--titoli);font-weight:500;font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.tabella td{padding:10px 12px;border-top:1px solid var(--bordo-tenue);vertical-align:top}
.tabella tbody tr:hover td{background:#FCFAF5}
.tabella tr.spenta td{opacity:.55}
.tabella .azioni{white-space:nowrap;text-align:right}
.tabella .azioni a{font-size:15px;margin-right:10px}

.pallina{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bordo);vertical-align:middle}
.pallina.ok{background:var(--ok)}
.pallina.pieno{background:var(--spento)}
.etichetta{display:inline-block;font-size:13px;background:var(--verde-chiaro);color:var(--verde);
  border-radius:999px;padding:2px 9px}
.etichetta.last{background:var(--ottone-tenue);color:var(--ottone-scuro)}
.etichetta.da-fare{background:transparent;color:var(--tenue);border:1px dashed var(--bordo);
  font-size:12px;padding:1px 8px}

.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:16px 0}
.numero{background:var(--carta);border:1px solid var(--bordo);border-top:3px solid var(--ottone);
  border-radius:var(--raggio);padding:16px;text-align:center;box-shadow:var(--ombra)}
.numero strong{display:block;font-family:var(--titoli);font-weight:600;font-size:34px;line-height:1.1;color:var(--verde)}
.numero span{font-size:14px;color:var(--tenue)}

.esito-prova{background:var(--verde-tenue);border:1px solid var(--verde-bordo);border-radius:var(--raggio);
  padding:16px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:14px}
.esito-prova strong{font-family:var(--titoli);font-size:28px;color:var(--verde)}
.esito-prova span{color:var(--verde);font-size:15px}

/* ------------------------------------------------------------ calendario
   Un blocco di orario e' la colonna delle ore piu' una colonna per campo.
   Sul telefono si scorre un blocco sotto l'altro; dal computer i due blocchi
   stanno affiancati e la giornata intera entra in una schermata. La pagina
   non si allarga oltre quello che serve: una tabella di due colonne tirata
   su milleduecento pixel non si legge meglio, si legge peggio. */
.calendario{
  --larghezza-blocco:calc(62px + var(--colonne,2) * 160px);
  --larghezza-pagina:var(--larghezza-blocco);
}
.calendario > *{max-width:var(--larghezza-pagina);margin-left:auto;margin-right:auto}

/* i filtri sono una riga sottile, non una scatola: sopra l'orario ci sono
   gia' il titolo e la striscia dei giorni, e ogni riquadro in piu' allontana
   il primo prezzo dal bordo alto dello schermo */
.barra-filtri{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.barra-filtri label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--tenue);margin:0}
.barra-filtri input,.barra-filtri select{padding:7px 9px;font:400 15px/1.3 var(--testi);
  border:1px solid #CFC8B6;border-radius:8px;background:var(--bianco);color:var(--testo)}
.barra-filtri .bottone.piccolo{background:var(--bianco);color:var(--verde);border-color:#CFC8B6}
.barra-filtri .bottone.piccolo:hover{background:var(--verde-tenue);border-color:var(--verde)}

/* "sabato 14 novembre": in italiano il mese resta minuscolo, quindi si
   alza solo la prima lettera, non l'iniziale di ogni parola. Qui il titolo
   non va in maiuscolo come gli altri: e' una data, si legge come una frase. */
h1.giorno-scelto{margin:20px auto 2px;text-transform:none;letter-spacing:.2px}
h1.giorno-scelto::first-letter{text-transform:uppercase}

/* i sette giorni in alto: si cambia giorno con un tocco, senza aprire il
   calendarietto del telefono. Sul telefono le frecce spariscono: la
   striscia scorre con il dito e lo spazio serve ai giorni. */
.settimana{display:flex;align-items:center;gap:8px;margin:12px 0 10px}
.settimana .freccia{display:none;flex:0 0 auto;text-decoration:none;font-size:20px;line-height:1;
  padding:11px 13px;border:1px solid var(--bordo);border-radius:8px;background:var(--bianco);color:var(--verde)}
.settimana a.freccia:hover{border-color:var(--verde);background:var(--verde-tenue)}
.settimana .freccia.spenta{color:#CFC8B6;background:transparent}
.giorni-scorrevoli{display:flex;gap:6px;overflow-x:auto;flex:1;padding-bottom:2px;scrollbar-width:none}
.giorni-scorrevoli::-webkit-scrollbar{display:none}
.giorno{flex:1 0 46px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 4px 6px;border:1px solid var(--bordo);border-radius:8px;background:var(--bianco);
  text-decoration:none;color:var(--testo)}
.giorno:hover{border-color:var(--verde);background:var(--verde-tenue)}
.giorno .g-nome{font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.8px}
.giorno .g-num{font-family:var(--titoli);font-size:20px;font-weight:600;line-height:1.1;color:var(--verde)}
.giorno.scelto{background:var(--verde);border-color:var(--verde);box-shadow:inset 0 -3px 0 var(--ottone)}
.giorno.scelto .g-nome{color:#C9D6CF}
.giorno.scelto .g-num{color:var(--crema)}

/* quanto si vuole giocare: una riga di pulsanti, non una tendina. Si vede
   subito che cosa si sta guardando e basta un tocco per cambiarlo, mentre una
   tendina nasconde la scelta dietro due gesti.
   Le voci NON hanno classe "durata": quella e' gia' delle schede grandi
   della pagina di prenotazione (vedi .durate piu' sotto), e riusarla qui
   farebbe comparire pastiglie alte come riquadri. Si stilano per discendenza,
   che e' anche il motivo per cui il nome del contenitore e' preciso. */
.durate-scelta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.durate-etichetta{font-size:14px;color:var(--tenue);margin-right:2px}
.durate-scelta a{text-decoration:none;color:var(--verde);background:var(--bianco);
  border:1px solid var(--bordo);border-radius:999px;padding:6px 14px;font-size:14px;
  white-space:nowrap;display:inline-block}
.durate-scelta a:hover{border-color:var(--verde);background:var(--verde-tenue)}
.durate-scelta a.scelta{background:var(--verde);border-color:var(--verde);color:var(--crema);
  font-weight:600;box-shadow:inset 0 -3px 0 var(--ottone)}

/* ------------------------------------------------------------ orario
   Una riga per ora, una colonna per campo. Le ore in punto hanno il filo
   scuro sopra e l'ora in grassetto: sono i punti dove l'occhio si appoggia
   scorrendo la giornata. */
/* Niente overflow sul riquadro, altrimenti l'intestazione appiccicosa si
   fermerebbe dentro il riquadro invece che in cima alla finestra; da quattro
   campi in su (.scorre) si accetta il cambio in cambio dello scorrimento. */
.blocchi{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.orario-cornice{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra)}
.orario-cornice.scorre{overflow-x:auto}
.orario{width:100%;border-collapse:collapse;font-size:15px}
.orario thead th{position:sticky;top:var(--barra-h);z-index:5;background:var(--verde);color:var(--crema);
  font-family:var(--titoli);font-size:15px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  text-align:center;padding:10px 8px 9px;white-space:nowrap}
.orario thead th:first-child{border-top-left-radius:calc(var(--raggio) - 1px)}
.orario thead th:last-child{border-top-right-radius:calc(var(--raggio) - 1px)}
.orario thead th small{display:block;font-family:var(--testi);font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;color:#C9D6CF;margin-top:1px}
.orario thead th.col-ora{background:var(--verde)}
.orario td,.orario tbody th{padding:3px;border-top:1px solid var(--bordo-tenue)}
.orario tr.in-punto td,.orario tr.in-punto th{border-top:1px solid var(--bordo)}
.orario tbody th.col-ora{width:58px;text-align:right;padding-right:10px;font-size:13px;
  font-weight:400;color:var(--spento);white-space:nowrap;font-variant-numeric:tabular-nums}
.orario tr.in-punto th.col-ora{font-family:var(--titoli);font-weight:500;color:var(--verde);font-size:15px;letter-spacing:.5px}
.orario tbody tr:hover td{background:#FCFAF5}

.cella{display:block;text-align:center;padding:9px 6px;border-radius:7px;font-size:15px;
  text-decoration:none;line-height:1.2;font-variant-numeric:tabular-nums}
.cella.libera{background:var(--verde-tenue);color:var(--verde);font-weight:600;border:1px solid var(--verde-bordo);
  transition:background .12s,border-color .12s,color .12s}
.cella.libera:hover{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.cella.libera:hover small{color:#C9D6CF}
.cella.occupata{background:#F1EEE6;color:var(--spento);font-size:13px}
.cella.chiusa{color:var(--spento);font-size:13px;
  background:repeating-linear-gradient(45deg,#F6F3EB,#F6F3EB 5px,#ECE7DA 5px,#ECE7DA 10px)}
.cella.passata,.cella.vuota,.cella.senza-prezzo{color:#CFC8B6}
/* la seconda riga della casella libera: quanto si puo' giocare da li' */
.cella.libera small{display:block;font-weight:400;font-size:12px;color:var(--ottone-scuro);margin-top:1px}
.legenda{margin-top:14px}

/* una riga di bottoni che non e' un modulo solo: sospendi, riattiva, password */
.azioni-riga{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
.azioni-riga input[type=text],.azioni-riga input:not([type]){padding:9px 10px;border:1px solid #CFC8B6;
  border-radius:8px;font:400 15px/1.3 var(--testi);background:var(--bianco)}

/* ------------------------------------------------------- registro presenze
   Si usa a bordo campo, col telefono in mano: tre pulsanti larghi per riga,
   toccabili senza mirare, e niente tabella da scorrere di lato. */
.registro{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.registro li{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:12px 14px;display:grid;gap:10px}
.registro .nome{font-weight:600;font-size:17px}
.registro .scelte{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.registro .scelte label{display:block;position:relative}
.registro .scelte input{position:absolute;opacity:0;width:0;height:0}
.registro .scelte span{display:block;text-align:center;padding:12px 6px;border:1px solid var(--bordo);
  border-radius:8px;font-size:14px;color:var(--tenue);background:var(--bianco);cursor:pointer}
.registro .scelte input:checked + span{background:var(--verde);border-color:var(--verde);
  color:var(--crema);font-weight:600}
.registro .scelte input:focus-visible + span{outline:2px solid var(--ottone);outline-offset:2px}
@media (min-width:760px){
  .registro li{grid-template-columns:1fr auto;align-items:center}
  .registro .scelte{grid-template-columns:repeat(3,120px)}
}

/* ------------------------------------------------------------ orario unico
   (la riga dell ora si chiama .riga-ora: .fascia e gia della pagina iniziale)
   Una riga per mezz'ora e le pastiglie dei campi in alto a destra: la riga
   dice se si gioca e quanto costa, le pastiglie quali campi sono liberi. Le
   quattro facce della pastiglia - piena, tratteggiata, vuota, rigata - sono
   quattro stati diversi, e il perche' sta in app/pagine/calendario.php. */
/* una colonna sola per tutta la giornata: niente piu' due blocchi
   affiancati, ne' la larghezza doppia dal computer */
.calendario.unico{--larghezza-blocco:min(420px,100%);--larghezza-pagina:min(420px,100%)}
.calendario.unico .blocchi{grid-template-columns:1fr}
/* Titolo, striscia dei giorni, filtro e orario incolonnati sulla stessa
   larghezza. Serve dirlo qui: .settimana e .barra-filtri scrivono "margin"
   per esteso e cosi' azzerano i margini laterali automatici di
   ".calendario > *". Con la colonna larga non si notava; con la colonna
   stretta la striscia dei giorni finiva a sinistra e la tabella al centro. */
.calendario.unico > *{margin-left:auto;margin-right:auto}
/* Dal computer la colonna respira un po' di piu': ci stanno i sette giorni
   della striscia senza stringerli, e la riga ha aria fra il prezzo e le
   pastiglie. Oltre non si allarga: una tabella di due colonne tirata su
   tutto lo schermo non si legge meglio, si legge peggio. */
@media (min-width:760px){
  .calendario.unico{--larghezza-blocco:min(470px,100%);--larghezza-pagina:min(470px,100%)}
  .calendario.unico .riga-ora{padding:9px 10px 9px 14px;min-height:50px}
  .calendario.unico .settimana{margin-bottom:14px}
  /* i sette giorni devono entrare tutti nella colonna: senza questo l'ultimo
     resta tagliato a meta' dalla freccia, perche' un riquadro non si
     restringe sotto la larghezza del suo testo */
  .calendario.unico .giorno{flex:1 1 0;min-width:0}
  .calendario.unico .blocchi{margin-top:4px}
}
.orario-unico thead th:last-child{text-align:left;padding-left:14px}
.orario-unico thead th small{white-space:normal}
.orario-unico td{padding:3px}
.riga-ora{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:8px 8px 8px 12px;border-radius:7px;min-height:46px}
.riga-ora.libera{background:var(--verde-tenue);border:1px solid var(--verde-bordo)}
.riga-ora.piena{background:#F1EEE6;border:1px solid transparent}
/* campo libero ma la partita chiesta non ci sta: si prenota una piu' corta.
   Sta in mezzo fra libera e piena, perche' in mezzo ci sta davvero */
.riga-ora.corta{background:var(--carta);border:1px dashed var(--bordo)}
.riga-ora .prezzo{font-weight:600;color:var(--verde);text-decoration:none;font-size:16px;
  font-variant-numeric:tabular-nums;padding-top:3px;white-space:nowrap}
.riga-ora a.prezzo:hover{color:var(--ottone-scuro);text-decoration:underline}
.riga-ora .prezzo small{display:block;font-weight:400;font-size:12px;color:var(--ottone-scuro);margin-top:1px}
.riga-ora .prezzo.niente{color:var(--spento);font-weight:400;font-size:14px}
/* il ripiego: la durata chiesta non ci sta, ma una piu' corta si. Si prenota
   eccome, pero' non deve gridare quanto un'ora che fa quello che si cercava */
.riga-ora .prezzo.ripiego{color:var(--tenue);font-weight:500}
.riga-ora a.prezzo.ripiego:hover{color:var(--verde)}
.riga-ora .prezzo.ripiego small{color:var(--tenue)}

.campi{display:flex;gap:7px;flex:0 0 auto}
.pastiglia{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--titoli);font-size:15px;font-weight:600;line-height:1;text-decoration:none;
  border:1.5px solid;font-variant-numeric:tabular-nums}
/* il dito prende piu di quanto il tondo mostri: 38 px in larghezza (quanto
   il tondo piu lo spazio fino a quello accanto, senza sovrapporsi: un tocco
   storto non deve prenotare il campo sbagliato) e 44 in altezza */
a.pastiglia::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:44px;
  transform:translate(-50%,-50%)}
a.pastiglia.libera{background:var(--verde);border-color:var(--verde);color:var(--crema)}
a.pastiglia.libera:hover{background:var(--ottone);border-color:var(--ottone-scuro);color:var(--verde)}
.pastiglia.stretta{background:var(--bianco);border-color:var(--verde-bordo);border-style:dashed;color:var(--spento)}
.pastiglia.occupata{background:transparent;border-color:#E2DCCC;color:#CFC8B6}
.pastiglia.chiusa{border-color:#E2DCCC;color:var(--spento);
  background:repeating-linear-gradient(45deg,#F3F0E8,#F3F0E8 3px,#E7E2D6 3px,#E7E2D6 6px)}

/* letto solo da chi usa un lettore di schermo */
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ prenotazione */
.testo-lungo{max-width:66ch;margin:0 auto;font-size:18px;line-height:1.6}
.testo-lungo h1{margin-top:30px;padding-bottom:12px;border-bottom:3px solid var(--ottone)}
.testo-lungo h2{margin-top:30px;font-size:19px}
.torna{margin-top:14px}

.riepilogo{background:var(--carta);border:1px solid var(--bordo);border-top:3px solid var(--ottone);
  border-radius:var(--raggio);padding:6px 18px;margin:16px 0;box-shadow:var(--ombra)}
.riga-riepilogo{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-top:1px solid var(--bordo-tenue)}
.riga-riepilogo:first-child{border-top:0}
.riga-riepilogo span{color:var(--tenue);font-size:15px}
.riga-riepilogo strong{font-size:17px;text-align:right}
.riga-riepilogo strong::first-letter{text-transform:uppercase}
.riga-riepilogo.totale{border-top:2px solid var(--verde)}
.riga-riepilogo.totale strong{font-family:var(--titoli);font-size:28px;font-weight:600;color:var(--verde)}

/* la scelta della durata: le possibili si toccano, le altre restano in
   pagina spente con scritto perche'. Dirlo costa una riga e risparmia la
   telefonata "ma allora e' occupato o no?". */
.piccolo-titolo{font-size:15px;letter-spacing:1.5px;color:var(--ottone-scuro);font-weight:500;margin:24px 0 10px}
.durate{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:18px}
.durata{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:13px 14px;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--carta);text-decoration:none;color:var(--testo)}
.durata strong{font-size:17px}
.durata small{color:var(--tenue);font-size:14px;text-align:right}
a.durata:hover{border-color:var(--verde);background:var(--verde-tenue);color:var(--testo)}
.durata.scelta{border:2px solid var(--verde);background:var(--verde-tenue);padding:12px 13px;
  box-shadow:inset 4px 0 0 var(--ottone)}
.durata.scelta strong,.durata.scelta small{color:var(--verde)}
.durata.spenta{background:transparent;border-style:dashed}
.durata.spenta strong{color:var(--spento);font-weight:500}

/* le ore di chi ha fatto l'accesso */
.prenotazioni{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0;max-width:820px}
.prenotazione{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:16px;display:grid;gap:10px;box-shadow:var(--ombra)}
.prenotazione.stato-in_attesa{border-left:4px solid var(--ottone)}
.prenotazione.stato-confermata{border-left:4px solid var(--verde)}
.pren-quando strong{display:block;font-family:var(--titoli);font-weight:600;font-size:20px;color:var(--verde);letter-spacing:.2px}
.pren-quando strong::first-letter{text-transform:uppercase}
.pren-quando span{color:var(--tenue);font-size:15px}
.pren-dati{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16px}
.pren-dati small{color:var(--tenue)}
.codice{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:1.5px;
  background:var(--verde);color:var(--crema);border-radius:6px;padding:4px 10px;font-size:14px}
.pren-azioni{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pren-azioni form{margin:0}
.pren-azioni small{color:var(--tenue)}

/* ------------------------------------------------------------ prenotazioni al banco
   Una scheda per partita. Il bordo a sinistra dice la cassa a colpo d'occhio:
   ottone da incassare, rosso giocata e non pagata, verde pagata, grigio
   annullata. Sul telefono i bottoni dell'incasso vanno a tutta larghezza:
   si toccano con una mano, con l'altra si prendono i soldi. */
.viste-banco{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.vista{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid #CFC8B6;border-radius:999px;
  background:var(--bianco);color:var(--verde);text-decoration:none;font-family:var(--titoli);font-weight:500;
  font-size:15px;letter-spacing:.8px;text-transform:uppercase}
.vista:hover{border-color:var(--verde);background:var(--verde-tenue);color:var(--verde)}
.vista.attiva{background:var(--verde);border-color:var(--verde);color:var(--crema);box-shadow:inset 0 -3px 0 var(--ottone)}
.conteggio{display:inline-block;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--ottone-tenue);
  color:var(--ottone-scuro);font-family:var(--testi);font-size:13px;font-weight:700;letter-spacing:0;text-align:center}
.vista.con-allarme .conteggio{background:var(--allarme);color:var(--bianco)}
.vista.attiva .conteggio{background:var(--ottone);color:var(--verde)}

/* I filtri: data e nome sempre in vista, il resto sotto "Altri filtri". */
.filtri-banco{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:12px 14px;margin:0 0 6px}
.filtri-riga{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end}
.filtri-riga label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--tenue);margin:0;
  flex:1 1 130px;min-width:0}
.filtri-riga label.filtro-cerca{flex:3 1 240px}
.filtri-riga input,.filtri-riga select{padding:9px 10px;font:400 16px/1.3 var(--testi);border:1px solid #CFC8B6;
  border-radius:8px;background:var(--bianco);color:var(--testo);width:100%;min-width:0;min-height:42px}
.filtri-riga input[type=date]{padding-right:6px}
.filtri-riga input:focus,.filtri-riga select:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 3px rgba(201,162,39,.35)}
.filtri-riga label.riga-spunta{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--testo);
  flex:1 1 220px;min-height:42px}
.filtri-riga label.riga-spunta input{width:auto;min-height:0}
details.filtri-altri{margin-top:10px}
details.filtri-altri > summary{cursor:pointer;color:var(--verde);font-size:15px;font-weight:600;padding:2px 0;
  list-style:none;display:inline-flex;align-items:center;gap:6px}
details.filtri-altri > summary::-webkit-details-marker{display:none}
details.filtri-altri > summary::before{content:"\203A";font-size:20px;line-height:1;transition:transform .15s}
details.filtri-altri[open] > summary::before{transform:rotate(90deg)}
details.filtri-altri .filtri-riga{margin-top:8px}
.filtri-bottoni{display:flex;gap:16px;align-items:center;margin-top:12px}
.filtri-bottoni .bottone{min-width:120px}

.riassunto-elenco{margin:0 0 6px;font-size:15px;color:var(--tenue)}
.riassunto-elenco strong{color:var(--ottone-scuro)}
h3.giorno-elenco{margin:14px 0 0;font-size:17px;text-transform:none;letter-spacing:.2px;color:var(--verde);
  padding-bottom:4px;border-bottom:1px solid var(--bordo)}
h3.giorno-elenco::first-letter{text-transform:uppercase}
h3.giorno-elenco small{font-family:var(--testi);font-size:12px;font-weight:700;color:var(--ottone-scuro);
  text-transform:uppercase;letter-spacing:1.5px;margin-left:6px}
.banco-elenco h3.giorno-elenco:first-child{margin-top:0}

.paginatore{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;margin:18px 0 8px}
.pag-numeri{display:flex;gap:6px;align-items:center;justify-content:center}
.pag-numero,.pag-freccia,.pag-salto{display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  min-height:42px;padding:0 12px;border-radius:8px;font-size:15px;text-decoration:none}
a.pag-numero,a.pag-freccia{border:1px solid #CFC8B6;background:var(--bianco);color:var(--verde)}
a.pag-numero:hover,a.pag-freccia:hover{border-color:var(--verde);background:var(--verde-tenue)}
.pag-numero.attuale{background:var(--verde);color:var(--crema);font-weight:700}
.pag-freccia.spenta{color:#CFC8B6}
.pag-salto{min-width:20px;padding:0;color:var(--tenue)}
/* Sul telefono i numeri stanno su una riga, le due frecce sotto, mezza
   larghezza ciascuna: si toccano col pollice senza mirare. */
@media (max-width:519px){
  .pag-numeri{order:1;flex:1 1 100%}
  .pag-freccia{order:2;flex:1 1 40%}
}
h2.giorno-banco{margin:18px 0 6px;text-transform:none;letter-spacing:.2px}
h2.giorno-banco::first-letter{text-transform:uppercase}
h2.giorno-banco small{font-family:var(--testi);font-size:14px;font-weight:600;color:var(--ottone-scuro);
  text-transform:uppercase;letter-spacing:1.5px;margin-left:6px}
.numeri.cassa{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.numero small{display:block;margin-top:4px;font-size:13px;color:var(--tenue)}
.numero.allarme{border-top-color:var(--allarme)}
.numero.allarme strong{color:var(--allarme)}
a.numero{text-decoration:none;color:inherit}
a.numero:hover{border-color:var(--verde)}

.banco-elenco{max-width:none}
.prenotazione.banco{border-left:4px solid var(--bordo);gap:8px}
.prenotazione.banco.cassa-da_incassare{border-left-color:var(--ottone)}
.prenotazione.banco.giocata{border-left-color:var(--allarme);background:#FFFBFA}
.prenotazione.banco.futura{border-left-color:var(--verde-bordo)}
details.pren-anticipo > .incasso-rapido{margin-top:10px}
details.pren-anticipo details.pren-altro{border-top:0;padding-top:4px}
.prenotazione.banco.cassa-incassata{border-left-color:var(--ok)}
.prenotazione.banco.cassa-da_restituire{border-left-color:var(--allarme)}
.prenotazione.banco.cassa-corso,.prenotazione.banco.cassa-gratuita{border-left-color:var(--verde-bordo);box-shadow:none}
.prenotazione.banco.stato-annullata{opacity:.78;box-shadow:none;border-left-color:var(--spento)}
.prenotazione.banco.stato-no_show{border-left-color:var(--allarme)}
.prenotazione.banco:target{outline:3px solid var(--ottone);outline-offset:2px}
.pren-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 14px;flex-wrap:wrap}
.pren-testa .pren-quando strong{font-size:19px}
.pren-cassa{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pren-nota{margin:0;font-size:15px;color:var(--tenue)}
.avviso-no-show{color:var(--allarme) !important}
.etichetta.da-incassare{background:var(--ottone-tenue);color:var(--ottone-scuro);font-weight:600}
.etichetta.allarme{background:#F8E3E0;color:var(--allarme);font-weight:600}
.etichetta.incassata{background:#DFF0E6;color:var(--ok);font-weight:600}
.etichetta.spenta{background:#ECEAE4;color:var(--tenue)}

.incasso-rapido{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 0}
.incasso-rapido .bottone{flex:1 1 120px;padding:12px 14px}
.incasso-rapido.restituzione .bottone{flex:1 1 170px;font-size:14px}
.incasso-rapido .piccolo{flex:1 1 100%}
.bottone.pericolo{background:var(--allarme);border-color:var(--allarme);color:var(--bianco)}
/* Il verde di WhatsApp: si riconosce al volo, ed e' l'unico posto dove
   il sito esce dalla sua palette. */
.bottone.whatsapp{background:#25D366;border-color:#1EBE5A;color:#062E18;font-weight:600}
.bottone.whatsapp:hover{background:#1EBE5A;border-color:#19A74E;color:#031A0D}

/* ------------------------------------------------------------ il mio profilo */
.profilo{max-width:820px}
.profilo-parte{margin:0 0 18px}
.profilo-parte h2{margin:0 0 12px}
.profilo-parte .modulo .bottone{margin-top:4px}
.elenco-allievi{list-style:none;margin:6px 0 10px;padding:0}
.elenco-allievi li{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 14px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--bordo-tenue)}
.elenco-allievi li:last-child{border-bottom:0}
.elenco-allievi li > div small{display:block;color:var(--tenue);font-size:14px}
.elenco-allievi li.finito{opacity:.6}
.elenco-allievi details.pren-altro{flex:1 1 100%;border-top:0;padding-top:0}
.togli-allievo{margin-top:6px}
.bottone.pericolo:hover{background:#8A2018;border-color:#8A2018;color:var(--bianco)}

/* Le azioni rare stanno chiuse: si aprono con un tocco voluto. */
details.pren-altro{flex:1 1 100%;border-top:1px solid var(--bordo-tenue);padding-top:8px}
details.pren-altro > summary{cursor:pointer;color:var(--verde);font-size:15px;font-weight:600;
  list-style:none;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
details.pren-altro > summary::-webkit-details-marker{display:none}
details.pren-altro > summary::before{content:"\203A";font-size:20px;line-height:1;transition:transform .15s}
details.pren-altro[open] > summary::before{transform:rotate(90deg)}
details.pren-annulla > summary{color:var(--allarme)}
details.pren-altro .modulo{margin-top:10px}
details.pren-altro fieldset .riga-spunta{margin:0 0 8px}
details.pren-altro small.piccolo{display:block;margin-top:8px}
.pren-azioni{gap:8px 12px}
/* La scheda del banco resta una colonna anche sul computer: le tre colonne
   di "Le mie ore" qui spezzerebbero i moduli. Sul computer i bottoni
   dell'incasso non si allungano oltre il necessario. */
@media (min-width:760px){
  .prenotazione.banco{grid-template-columns:1fr;align-items:start;gap:8px}
  .prenotazione.banco .pren-azioni{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px 12px}
  .incasso-rapido{max-width:560px}
  .incasso-rapido.restituzione{max-width:none}
  details.pren-altro .modulo{max-width:620px}
}

/* ------------------------------------------------------------ pagina iniziale
   Le fasce vanno da bordo a bordo, il testo resta nella colonna centrale. */
.home .contenitore{max-width:none;padding:0}
.home .contenitore > .avviso{max-width:928px;margin:16px auto;width:calc(100% - 32px)}
.dentro{max-width:960px;margin:0 auto;padding:0 16px}

/* l'apertura: il verde del circolo con le righe del campo in ottone,
   appena accennate, e il marchio completo in versione negativa */
.apertura{background:var(--verde);color:var(--crema);position:relative;overflow:hidden;
  border-bottom:3px solid var(--ottone)}
.apertura::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:
    linear-gradient(var(--ottone),var(--ottone)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(var(--ottone),var(--ottone)) 0 26% / 100% 2px no-repeat,
    linear-gradient(var(--ottone),var(--ottone)) 0 74% / 100% 2px no-repeat}
.apertura-griglia{position:relative;display:grid;grid-template-columns:1fr;gap:26px;
  padding-top:38px;padding-bottom:44px;align-items:center}
.apertura-marchio{order:-1;display:flex;justify-content:center}
.apertura-marchio img{display:block;width:min(46vw,190px);height:auto}
.apertura .occhiello{color:var(--ottone)}
.apertura h1{color:var(--crema);font-size:clamp(32px,8.4vw,56px);line-height:1.05;margin:0 0 14px;letter-spacing:1px}
.apertura-sotto{font-size:19px;line-height:1.5;color:#D9E2DC;max-width:44ch;margin:0 0 22px}
.apertura-azioni{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.apertura-azioni .bottone{padding:13px 24px;font-size:17px}
/* il parcheggio riservato, detto subito sotto il titolo: e' lo stesso segno P
   della fascia sotto la mappa (assets/mappa/mappa.css) */
.apertura-parcheggio{display:flex;align-items:center;gap:13px;margin:2px 0 18px}
.apertura-p{flex:none;width:44px;height:44px;border-radius:9px;background:var(--ottone);color:var(--verde);
  font-family:var(--titoli);font-weight:700;font-size:29px;line-height:44px;text-align:center}
.apertura-parcheggio-parole{display:flex;flex-direction:column;gap:3px;min-width:0}
.apertura-parcheggio-occhiello{font-family:var(--titoli);font-weight:500;font-size:13px;line-height:1.2;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--ottone)}
.apertura-parcheggio strong{font-family:var(--titoli);font-weight:600;font-size:21px;line-height:1.12;
  letter-spacing:.8px;text-transform:uppercase;color:var(--crema)}
@media (min-width:760px){.apertura-parcheggio strong{font-size:24px}}

.fascia{padding:36px 0}
.fascia.chiara{background:var(--crema);border-top:1px solid var(--bordo);border-bottom:1px solid var(--bordo)}
.titolo-fascia{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.titolo-fascia h2{margin:0;font-size:24px;padding-bottom:8px;border-bottom:3px solid var(--ottone)}
.titolo-fascia a{font-size:16px;font-weight:600}

.campi-oggi{display:grid;grid-template-columns:1fr;gap:12px}
.campo-oggi{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
  background:var(--carta);border:1px solid var(--bordo);border-left:4px solid var(--verde);
  border-radius:var(--raggio);padding:16px 18px;text-decoration:none;color:var(--testo);
  box-shadow:var(--ombra);transition:border-color .15s,transform .15s}
a.campo-oggi:hover{border-color:var(--verde);border-left-color:var(--ottone);color:var(--testo);transform:translateY(-1px)}
.campo-nome{grid-column:1;font-family:var(--titoli);font-weight:500;font-size:14px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ottone-scuro)}
.campo-ora{grid-column:1;font-family:var(--titoli);font-weight:600;font-size:34px;line-height:1.1;color:var(--verde)}
.campo-ora small{font-family:var(--testi);font-weight:400;font-size:16px;color:var(--tenue)}
.campo-dati{grid-column:1;font-size:15px;color:var(--tenue)}
.campo-vai{grid-column:2;grid-row:1 / span 3;background:var(--verde);color:var(--crema);border-radius:8px;
  padding:10px 16px;font-family:var(--titoli);font-weight:500;font-size:15px;letter-spacing:1.2px;text-transform:uppercase}
a.campo-oggi:hover .campo-vai{background:var(--verde-vivo)}
.campo-oggi.pieno{border-left-color:var(--spento)}
.campo-oggi.pieno .campo-ora{color:var(--spento);font-size:26px}

.passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:22px}
.passi li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:0 16px;align-items:start}
.passo-numero{grid-row:1 / span 2;font-family:var(--titoli);font-weight:700;font-size:44px;line-height:.95;
  color:var(--verde);min-width:34px;text-align:center;border-bottom:3px solid var(--ottone);padding-bottom:6px}
.passi h3{text-transform:uppercase;letter-spacing:.8px;margin-top:2px}
.passi p{margin:0;color:var(--tenue);max-width:40ch}

.due-riquadri{display:grid;grid-template-columns:1fr;gap:16px}
.scheda{border-top:3px solid var(--ottone)}
.scheda h2{margin:0 0 10px}
.elenco-dati{margin:0 0 12px}
.elenco-dati div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-top:1px solid var(--bordo-tenue)}
.elenco-dati div:first-child{border-top:0}
.elenco-dati dt{color:var(--testo)}
.elenco-dati dd{margin:0;font-weight:600;color:var(--verde);white-space:nowrap;font-variant-numeric:tabular-nums}
.elenco-dati dd small{font-weight:400}

/* ------------------------------------------------------------ dove siamo */
/* La mappa e' un disegno nostro: nessun tassello da server di terzi, che la
   CSP non farebbe passare, e nessuna chiave a pagamento. Il navigatore vero
   e' il bottone "Come raggiungerci". */
.mappa{margin:0;background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra)}
.mappa svg{display:block;width:100%;height:auto}
.m-fondo{fill:#EFEADC}
.m-isolato{fill:#E2DCCB}
.m-strada{fill:none;stroke:var(--bianco);stroke-width:17;stroke-linecap:round}
.m-mezzeria{fill:none;stroke:#CFC8B6;stroke-width:1.5;stroke-dasharray:9 9}
.m-nostra-bordo{fill:none;stroke:var(--ottone);stroke-width:25;stroke-linecap:round;opacity:.55}
.m-nostra{fill:none;stroke:var(--bianco);stroke-width:17;stroke-linecap:round}
.m-pin{fill:var(--verde)}
.m-pin-occhio{fill:var(--ottone)}
.m-nome{fill:var(--verde);font-family:var(--titoli);font-size:17px;font-weight:600;letter-spacing:1.6px}
.m-zona{fill:var(--tenue);font-family:var(--titoli);font-size:14px;font-weight:500;letter-spacing:2.4px}
.m-nota{fill:var(--spento);font-family:var(--testi);font-size:12px}
.dove-azioni{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}

.dove{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.indirizzo{font-family:var(--titoli);font-weight:500;font-size:24px;line-height:1.3;color:var(--verde);
  letter-spacing:.4px;margin:0 0 12px}
.fascia:last-child{border-bottom:0}

.fuori-campo{padding-top:44px}

/* Sul telefono le tabelle della Gestione (quelle con la colonna delle
   azioni) scorrono di lato dentro il loro riquadro, invece di allargare
   tutta la pagina. */
@media (max-width:759px){
  .tabella:has(.azioni){display:block;overflow-x:auto}
}

/* ------------------------------------------------------------ dal tablet in su */
@media (min-width:600px){
  .chi-sono{display:inline}
  .barra{padding:0 20px;gap:14px}
  .menu-alto a{padding:0 14px;font-size:15px;letter-spacing:1px}
  .bottone-barra.contorno{padding:7px 16px;font-size:14px}
  .campi-oggi{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pie-dentro{grid-template-columns:auto 1fr 1fr;gap:20px 56px}
  .pie-marchio{grid-column:auto}
}
@media (min-width:760px){
  /* il marchio orizzontale: 46 px di altezza danno lettere alte 40 px,
     la misura minima della scheda; la barra si alza per dargli aria */
  :root{--barra-h:70px}
  .marchio{padding-right:14px}
  .marchio img{height:46px}
  h1{font-size:34px}
  .due-colonne{grid-template-columns:1fr 1fr}
  .settimana .freccia{display:block}
  .giorno{flex:1 0 54px}
  .orario tbody th.col-ora{width:66px}
  .cella{padding:10px}
  .prenotazione{grid-template-columns:1.4fr 1fr auto;align-items:center;gap:16px}
  .pren-azioni{justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:4px}

  .apertura-griglia{grid-template-columns:1.25fr .75fr;gap:40px;padding-top:64px;padding-bottom:70px}
  .apertura-marchio{order:0;justify-content:flex-end}
  .apertura-marchio img{width:min(30vw,300px)}
  .fascia{padding:52px 0}
  .passi{grid-template-columns:repeat(3,1fr);gap:28px}
  .due-riquadri{grid-template-columns:1fr 1fr;gap:20px}
  .dove{grid-template-columns:1.2fr .8fr;gap:40px}
}
/* Da qui in su i due blocchi stanno affiancati: la giornata si legge tutta
   senza scorrere, che e' il vero vantaggio dello schermo grande. */
@media (min-width:900px){
  .calendario{--larghezza-pagina:calc(var(--larghezza-blocco) * 2 + 14px)}
  .blocchi{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}
@media print{
  .barra,.pie,.salta{display:none}
  body{background:#fff}
}