/* app/css/30-login.css — estratto da app.css (2026-07, split senza build). */
/* ========== LOGIN ========== */
.login-wrap { padding: 32px 24px; min-height: 100vh; display: flex; flex-direction: column; }
.login-wrap .logo { text-align: center; margin-top: 28px; }
.login-wrap .logo img { max-width: 150px; height: auto; }
.login-wrap .lead { font-size: 16px; color: var(--ink-2); text-align: center; margin-top: 18px; line-height: 1.5; }
.login-wrap .lead strong { color: var(--ink); }
.login-wrap .login-sep { border: 0; height: 1px; background: var(--line); margin: 32px 0 0; width: 100%; }
.login-wrap .form-block { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.login-wrap .form-field { display: flex; flex-direction: column; gap: 6px; }
.login-wrap .form-field label { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 4px; }
.login-wrap .form-field input { width: 100%; padding: 16px; border: 2px solid var(--line); border-radius: 12px; font-size: 16px; background: var(--bg); color: var(--ink); font-weight: 600; }
.login-wrap .form-field input:focus { border-color: var(--brand); background: #fff; outline: none; }
.login-wrap .form-field input.tessera { font-family: ui-monospace, monospace; letter-spacing: 0.1em; font-size: 16px; }
.login-wrap .help-text { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; padding: 0 4px; line-height: 1.45; }
.login-wrap .help-text strong { color: var(--ink-2); }
.input-with-icon { position: relative; }
.input-with-icon input { padding-right: 60px !important; }
.input-with-icon .scan-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 10px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(140,0,20,0.3); }
.input-with-icon .scan-btn:active { transform: translateY(-50%) scale(0.94); }
.btn-primary { padding: 16px; background: var(--brand); color: #fff; border-radius: 12px; font-size: 16px; font-weight: 800; margin-top: 24px; width: 100%; transition: background 120ms ease, transform 80ms ease; }
.btn-primary:active { background: var(--brand-hover); }
.login-wrap .help-link { text-align: center; padding: 18px 0; font-size: 13px; color: var(--ink-3); margin-top: auto; }
.login-wrap .help-link strong { color: var(--brand); font-weight: 700; }
/* Pagine "link inviato": poco contenuto -> niente min-height:100vh + help-link
   inchiodato in fondo (finiva sotto la piega su mobile). Compatto in una schermata. */
.login-wrap--compact { min-height: auto; }
.login-wrap--compact .help-link { margin-top: 24px; }
.login-wrap .login-newuser-hint { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 24px; line-height: 1.55; padding: 0 8px; }