/* login.css — la porta della console amministrativa.
   ════════════════════════════════════════════════════════════════════════════
   Una sola azione, quindi una sola cosa da guardare: il volto.
   E' il glifo che il sistema sta per mostrare davvero, quindi anticiparlo
   qui dice cosa succedera' meglio di qualsiasi frase. Le parentesi angolari
   sono quelle che iOS disegna quando inquadra, e si chiudono al tocco.
   Il buco della serratura del marchio sta in cima, piccolo: e' la firma, non
   il protagonista. ════════════════════════════════════════════════════════ */

.lg-scena {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(760px 380px at 50% 12%, rgba(106, 166, 255, .10), transparent 68%),
    radial-gradient(520px 300px at 50% 100%, rgba(140, 245, 208, .05), transparent 70%);
}

.lg-card {
  width: 360px; max-width: 100%;
  padding: 26px 26px 24px;
  display: grid; gap: 0;
  text-align: center;
  animation: lg-entra .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lg-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── testa: marchio e lingua ────────────────────────────────────────────── */
.lg-testa { display: flex; align-items: center; gap: 11px; text-align: left; }
.lg-logo { display: flex; flex: none; color: var(--text); }
.lg-marchio { flex: 1; min-width: 0; }
.lg-nome { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.lg-sotto { margin-top: 1px; font-size: 11.5px; color: var(--text-dim); }
.lg-lingua {
  flex: none; background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 3px 6px; font-size: 11px; font: inherit; font-size: 11px;
}

/* ── il volto ───────────────────────────────────────────────────────────── */
.lg-volto {
  display: flex; align-items: center; justify-content: center;
  margin: 30px 0 26px;
  color: var(--accent);
  filter: drop-shadow(0 0 22px rgba(106, 166, 255, .28));
}
.lg-volto .lg-ang {
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
  transform-origin: 32px 32px;
}
/* al tocco le parentesi si stringono sul volto, come quando iOS mette a fuoco */
.lg-volto.is-attesa .lg-ang { transform: scale(.86); }
.lg-volto.is-attesa { animation: lg-pulsa 1.5s ease-in-out infinite; }
@keyframes lg-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.lg-volto.is-ok { color: var(--ok); }
.lg-volto.is-no { color: var(--warn); }

/* ── il bottone ─────────────────────────────────────────────────────────── */
.lg-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; padding: 0 16px;
  border: 0; border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), #4e8ef0);
  color: #06101f;
  font: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(106, 166, 255, .85);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), filter .16s ease;
}
.lg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lg-btn:active { transform: translateY(0); }
.lg-btn:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.lg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lg-impronta { display: flex; flex: none; }

/* ── coda ───────────────────────────────────────────────────────────────── */
.lg-errore {
  margin-top: 14px; font-size: 12.5px; line-height: 1.45;
  color: var(--danger); min-height: 0;
}
.lg-errore:empty { display: none; }
.lg-aiuto {
  margin-top: 18px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim); opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .lg-card, .lg-volto, .lg-volto .lg-ang, .lg-btn { animation: none; transition: none; }
  .lg-btn:hover { transform: none; }
}