/* Blocco 13 — la schermata di accesso, uguale in tutte le app del Mulino:
   tutto lo schermo, nome dell'app grande col suo colore, campi e pulsante in
   basso dove arriva il pollice. La usano sia la pagina da computer sia quella
   da telefono; il disegno sta qui, la logica in js/main.js (apriCancello). */
.cancello {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px);
  background: var(--fondo); color: var(--testo);
  font-family: var(--sans); overflow-y: auto;
}
.cancello-form { width: 100%; max-width: 400px; }
.cancello h1 {
  margin: 0 0 12px; display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em;
  font-size: 50.5px; line-height: 1;
}
.cancello-segno { width: 22px; height: 22px; border-radius: 7px; background: var(--accento); display: inline-block; }
.cancello-sotto { margin: 0 0 28px; color: var(--testo-3); font-size: 13.5px; line-height: 1.45; }
.cancello-scheda {
  background: var(--pannello); border: 1px solid var(--linea); border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column;
}
.cancello label { font-size: 11.5px; font-weight: 600; color: var(--testo-2); margin: 0 0 6px; text-transform: none; letter-spacing: 0; }
.cancello input {
  width: 100%; min-height: 48px; padding: 11px 14px; margin-bottom: 14px;
  font-family: inherit; font-size: 16px; color: var(--testo);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; outline: none;
}
.cancello input:focus { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
.cancello-errore { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--errore-tenue); border: 1px solid var(--errore); color: var(--errore); font-size: 11.5px; }
.cancello-entra {
  min-height: 54px; margin-top: 6px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--accento); color: var(--su-accento); font-family: inherit; font-size: 13.5px; font-weight: 700;
}
.cancello-entra:disabled { opacity: .6; cursor: default; }

/* Suite — il nome della suite sopra quello dell'app. */
.cancello-suite { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--testo-2); }