/* ── Login page ─────────────────────────────────────────────────
   Requires: shared.css
   ────────────────────────────────────────────────────────────── */

/* ── Lo sfondo delle porte d'ingresso ────────────────────────────
   L'atrio vetrato: un vano ascensore vero, visto da sotto. Sta su TUTTE
   e sei le pagine d'ingresso — accesso, invito, richiesta di accesso,
   informativa, e le due della password — perche' questo foglio le serve
   tutte. Una sola regola, sei pagine: se domani si cambia foto, si cambia
   qui e cambiano insieme.

   ⚠ UNO PSEUDO-ELEMENTO FISSO, non `background` sul body. Due motivi:

   1. la pagina della richiesta di accesso e' LUNGA. Un `background-size:
      cover` sul body si stira su tutta l'altezza del documento, e la foto
      esce deformata proprio sulla pagina piu' lunga;
   2. `background-attachment: fixed` risolverebbe il punto 1 ma su iOS e'
      rotto da anni — si vede fermo a scatti, o non si vede.

   Un `::before` in `position: fixed` occupa lo schermo e basta: la foto
   resta ferma e alla sua proporzione mentre il contenuto scorre sopra.

   ⚠ E IL COLORE DI FONDO RESTA. Se la foto non arriva — rete lenta, file
   spostato, formato non supportato — la pagina deve restare quella di
   prima, non diventare bianca su bianco.

   ⚠ MA IL COLORE VA SU `html`, NON SU `body`. Preso subito, e non e'
   ovvio: uno pseudo-elemento con `z-index: -1` finisce dietro allo sfondo
   del PROPRIO genitore, non solo dietro al contenuto. Mettendo il colore
   di ripiego sul body, il body lo dipingeva SOPRA la foto e la pagina
   restava grigia — con l'immagine scaricata regolarmente (200, 203 KB) e
   la regola presente nel CSS servito. Nessun errore da nessuna parte:
   semplicemente non si vedeva. */
html {
  background: var(--bg, #f2f4f7);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    /* ⚠ La velatura viene PRIMA nell'elenco, quindi sta SOPRA la foto.
       Serve perche' la foto e' chiara — vetro e cielo — e il riquadro
       bianco ci si perdeva dentro. Scura in basso, dove sta il modulo,
       e quasi trasparente in alto, dove la foto ha il suo disegno. */
    linear-gradient(180deg, rgba(16, 24, 40, .18) 0%, rgba(16, 24, 40, .42) 100%),
    url('../img/atrio-vetrato.webp') center / cover no-repeat;
}

/* ⚠ L'ombra del riquadro va rifatta: quella predefinita e' pensata per un
   fondo grigio piatto, e su una foto sparisce. Senza, il riquadro bianco
   sembra incollato invece che appoggiato. */
.login-card,
.reg-card {
  box-shadow: 0 18px 48px rgba(16, 24, 40, .28);
}

/* ── Card wrapper ───────────────────────────────────────────────── */
.login-wrap {
  width: 100%;
  max-width: 400px;
  padding: 24px 16px;
}

.login-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Header (dark brand stripe) ─────────────────────────────────── */
.login-header {
  background: var(--dark);
  padding: 32px 36px 24px;
  text-align: center;
}

.login-logo { height: 48px; margin-bottom: 14px; }

.login-header h1 {
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.login-header p {
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* ── Body (form area) ───────────────────────────────────────────── */
.login-body { padding: 32px 36px 28px; }

/* ── Error banner ───────────────────────────────────────────────── */
.login-error {
  background: #f2f4f7;
  border: 1px solid #c6ccd4;
  color: var(--brand-h);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.login-error.visible { display: block; }

/* ── Submit button ──────────────────────────────────────────────── */
.btn-login {
  width: 100%;
  padding: 12px;
  background: var(--brand);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: background var(--trans), transform var(--trans);
}

.btn-login:hover  { background: var(--brand-h); }
.btn-login:active { transform: scale(.98); }

/* ── Footer ─────────────────────────────────────────────────────── */
.login-footer {
  text-align: center;
  padding: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted);
}

/* ── Nome del prodotto ───────────────────────────────────────────
   Ferrari Project Studio: non si traduce, identico in ogni lingua.
   Il sottotitolo e' volutamente sottile: presenta, non grida. */
.prodotto-nome {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1e2328;
  margin: 2px 0 0;
}

.prodotto-sottotitolo {
  font-size: 11px;
  color: #57697d;
  letter-spacing: .01em;
  margin: 3px 0 0;
  max-width: 34ch;
}

/* ⚠ Il collegamento al recupero password. Non c'era: la funzione esisteva
 * da sempre e nessuna pagina la nominava (07/09/2026). */
.login-aiuto {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.login-aiuto a {
  color: var(--muted, #6b7a8c);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.login-aiuto a:hover,
.login-aiuto a:focus-visible {
  color: var(--brand, #1a6a94);
  border-bottom-color: currentColor;
}

/* Il punto fra i due collegamenti d'uscita aggiunti il 16/09/2026
   («Ho un codice d'invito» · «Non ho ancora un accesso»). */
.login-separatore {
  margin: 0 7px;
  opacity: .45;
}

/* ── Il selettore di lingua delle pagine d'ingresso (16/09/2026) ──────
   Collegamenti veri e non bottoni: qui la pagina si può ricaricare senza
   perdere niente, mentre dopo l'accesso no — ed è per questo che là il
   selettore è fatto in JavaScript. */
.lingua-ingresso {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 10px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
}

.lingua-ingresso .lingua-voce,
.lingua-ingresso .lingua-scelta {
  padding: 3px 9px;
  border-radius: 5px;
  text-decoration: none;
}

.lingua-ingresso .lingua-voce {
  color: #8a94a2;
}

.lingua-ingresso .lingua-voce:hover,
.lingua-ingresso .lingua-voce:focus-visible {
  color: #2a3542;
  background: rgba(0, 0, 0, .05);
}

/* La lingua corrente non è premibile: un elemento che sembra un comando
   e non fa niente è peggio di uno spento. */
.lingua-ingresso .lingua-scelta {
  color: #2a3542;
  font-weight: 600;
  background: rgba(0, 0, 0, .06);
}

/* ── Il secondo passaggio ────────────────────────────────────────────
   Il codice che arriva per email a chi apre il pannello (18/09/2026).
   Compare al posto del modulo delle credenziali, mai insieme. */
.login-nota {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #6b7a8c);
}

/* ⚠ Il codice si legge a colpo d'occhio e si batte senza sbagliare:
   spaziato, grande, e con le cifre a larghezza fissa perche' non si
   muovano mentre si scrive. */
#codice {
  letter-spacing: .38em;
  font-size: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.login-ricorda {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #6b7a8c);
  cursor: pointer;
}

.login-ricorda input { margin-top: 2px; flex: none; }