/* =============================================================================
   L'ACCHIANATA DI SANTA ROSALIA
   assets/css/auth.css - Pagine di accesso, registrazione e recupero password
   Caricato con $css_extra = ['auth.css'];
   ============================================================================= */

.pagina-accesso .piede{margin-top:40px}

.accesso{
  display:flex;justify-content:center;
  padding:clamp(34px,6vw,68px) 20px;
}

.accesso__riquadro{
  width:100%;max-width:520px;
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  box-shadow:var(--ombra);
  padding:clamp(26px,5vw,40px);
}

/* Filo dorato in alto: richiama il separatore usato nel resto del sito */
.accesso__riquadro{position:relative;overflow:hidden}
.accesso__riquadro::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--bordeaux),var(--oro) 55%,var(--rosa));
}

.accesso__titolo{
  font-size:clamp(1.7rem,4.2vw,2.2rem);
  margin-bottom:.35em;
}

.accesso__intro{
  color:var(--testo-morbido);
  font-size:1rem;
  margin-bottom:1.8em;
}

/* Nome e cognome affiancati da tablet in su */
.coppia{display:grid;gap:0 16px}
@media (min-width:540px){
  .coppia{grid-template-columns:1fr 1fr}
}

/* Nota informativa sopra un gruppo di campi */
.campo__nota--sopra{
  display:block;position:relative;
  background:var(--rosa-chiaro);
  border-radius:var(--raggio-piccolo);
  padding:11px 14px 11px 40px;margin:-4px 0 20px;
  color:var(--bordeaux);font-size:.87rem;line-height:1.5;
}
.campo__nota--sopra i{position:absolute;left:14px;top:.85em;font-size:1.05rem}

/* I componenti di modulo condivisi (occhio della password, avviso di errore)
   stanno in style.css: servono anche fuori dalle pagine di accesso, per
   esempio nella cancellazione dell'account. */

/* Campo per digitare il codice di reimpostazione */
.campo-codice{
  font-family:"Courier New",Courier,monospace;
  font-size:1.5rem;font-weight:700;
  letter-spacing:.32em;text-align:center;
  text-transform:uppercase;
}
.campo-codice::placeholder{letter-spacing:.2em;font-weight:400;opacity:.4}

.accesso__aiuto{
  text-align:center;margin:18px 0 0;font-size:.93rem;
}

.accesso__alternativa{
  text-align:center;
  margin:22px 0 0;padding-top:20px;
  border-top:1px solid var(--bordo);
  font-size:.95rem;color:var(--testo-morbido);
}
.accesso__alternativa a{font-weight:700}

/* Il bottone di invio ha bisogno di respiro dopo l'ultimo campo */
.accesso form .bottone{margin-top:8px}