/* LE PAGINE PRIMA DI ENTRARE — l'accesso, il cambio della password e il
   suo recupero (02/10 e 03/10, Luciano, sull'anteprima).
   Niente barra e niente menu: chi e' qui non e' ancora dentro.
   I colori, i campi e i tasti sono quelli del telaio (eplanner.css, caricato
   prima di questo): qui solo l'impianto della pagina, coi nomi `acc-`. */

/* **Sempre col tema chiaro**: prima dell'accesso non si sa chi e' davanti,
   e il logo di una clinica, quasi sempre scuro, sul fondo scuro sparisce. */

.acc-pagina{min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:var(--s6) var(--s4)}

.acc-scheda{width:100%; max-width:400px; background:var(--superficie);
  border:1px solid var(--bordo); border-radius:14px; box-shadow:var(--ombra);
  padding:var(--s6)}

.acc-marchio{display:flex; justify-content:center; margin-bottom:var(--s5)}
.acc-logo{display:block; height:40px; max-width:240px; width:auto; object-fit:contain}
.acc-nome{font-family:var(--titoli); font-size:21px; font-weight:600;
  letter-spacing:-.02em; text-align:center}

/* **Titolo e frase al centro** (03/10, Luciano), su tutte le pagine prima
   di entrare: hanno la stessa forma, e il titolo non deve saltare passando
   dall'una all'altra. I campi e i tasti restano dove sono. */
.acc-scheda h2{font-size:21px; font-weight:600; letter-spacing:-.02em;
  line-height:1.2; margin-bottom:var(--s2); text-align:center}
.acc-dice{margin:0 0 var(--s5); font-size:13.5px; line-height:1.55;
  color:var(--testo-medio); text-align:center}
.acc-dice b{color:var(--testo); font-weight:600}

.acc-chi{margin:0 0 var(--s5); padding:var(--s3) var(--s4); border-radius:11px;
  background:var(--superficie-alt); border:1px solid var(--bordo)}
.acc-chi b{display:block; margin-top:2px; font-size:13.5px; font-weight:600;
  overflow-wrap:anywhere}

.acc-errore{margin:0 0 var(--s4); padding:var(--s3) var(--s4); border-radius:11px;
  background:color-mix(in srgb, var(--manca) 9%, var(--superficie));
  border:1px solid color-mix(in srgb, var(--manca) 40%, transparent);
  color:var(--manca); font-size:13.5px; line-height:1.5}

.acc-campo .male{color:var(--manca); font-weight:600; font-size:12px;
  margin-top:5px; line-height:1.45}
.acc-campo input.male-c{border-color:var(--manca)}

.acc-regole{margin:6px 0 0; padding:0; list-style:none; font-size:11.5px;
  color:var(--testo-debole); line-height:1.6}

.acc-tasti{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); margin-top:var(--s5)}
.acc-tasti .bottone{flex:none}
.acc-tasti form{margin:0}

.acc-piede{margin-top:var(--s5); padding-top:var(--s4);
  border-top:1px solid var(--riga); font-size:12.5px; line-height:1.5;
  color:var(--testo-medio)}
.acc-piede p{margin:0 0 var(--s4)}
/* **La riga sta sopra il logo di iPlanner** (03/10, Luciano): quando nel
   piede c'e' un collegamento — «Hai dimenticato la password?» — la riga
   passa fra il collegamento e il logo, con le stesse distanze. Senza
   collegamento, come nel cambio della password, resta dov'era. */
.acc-piede:has(> p){padding-top:0; border-top:0}
.acc-piede > p{padding-bottom:var(--s4); border-bottom:1px solid var(--riga)}
/* il logo di iPlanner alla stessa altezza che ha nella barra del programma */
.acc-prodotto{display:block; height:26px; width:auto; margin:0 auto}

@media (max-width:480px){
  .acc-pagina{justify-content:flex-start; padding:var(--s5) var(--s3)}
  .acc-scheda{padding:var(--s5)}
}