/* 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: #04070F; color: #E7EBF2;
  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: #EAB532; display: inline-block; }
.cancello-sotto { margin: 0 0 28px; color: #88909C; font-size: 13.5px; line-height: 1.45; }
.cancello-scheda {
  background: #0A1018; border: 1px solid #2A3342; border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column;
}
.cancello label { font-size: 11.5px; font-weight: 600; color: #B0B8C5; 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: #E7EBF2;
  background: #04070F; border: 1px solid #2A3342; border-radius: 12px; outline: none;
}
.cancello input:focus { border-color: #EAB532; box-shadow: 0 0 0 3px rgba(234, 181, 50, .18); }
.cancello-errore { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #3A1C19; border: 1px solid #6A2A2A; color: #FF5957; font-size: 11.5px; }
.cancello-entra {
  min-height: 54px; margin-top: 6px; border: 0; border-radius: 16px; cursor: pointer;
  background: #EAB532; color: #04070F; font-family: inherit; font-size: 13.5px; font-weight: 700;
}
.cancello-entra:disabled { opacity: .6; cursor: default; }
