/* ============================================================
   PAGINA DI ACCESSO (16/10)
   Due metà: a sinistra il marchio su petrolio quasi nero (lo stesso
   nero del logo, che si fonde col fondo), a destra il modulo su
   superficie piatta. Sui telefoni il marchio diventa una fascia in
   alto e il modulo una scheda sotto. Colori dai token del tema, così
   il tema Scuro funziona da solo.
   ============================================================ */

#vista-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(380px, 44%) 1fr;
  background: var(--n-0);
}

/* ---------- Marchio ---------- */
.accesso-marchio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 48px 32px;
  color: #c9d6dd;
  background:
    radial-gradient(520px 420px at 50% 40%, rgba(31, 199, 192, .16), transparent 70%),
    radial-gradient(700px 500px at 100% 110%, rgba(10, 126, 164, .28), transparent 65%),
    linear-gradient(165deg, #020b10 0%, #04161f 55%, #062636 100%);
}
/* trama a puntini, appena visibile e sfumata verso il basso */
.accesso-marchio::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
.am-testa {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-13); font-weight: 600; letter-spacing: .01em;
  color: rgba(255, 255, 255, .78);
}
.am-logo-piccolo {
  width: 32px; height: 32px; border-radius: 9px;
  background: #05131c; padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.am-centro { max-width: 420px; }
.am-logo {
  display: block;
  width: 168px; height: 168px;
  margin: 0 0 18px -14px;
  /* il fondo nero del logo sparisce sul petrolio */
  mix-blend-mode: screen;
}
.am-titolo {
  font-size: 40px; line-height: 1.08; font-weight: 750;
  letter-spacing: -.035em;
  color: #fff;
}
.am-titolo span { color: var(--brand-soft, #8fe3c8); }
.am-frase {
  margin-top: 14px;
  font-size: var(--fs-16); line-height: 1.55;
  color: rgba(226, 236, 241, .74);
}
.am-punti {
  list-style: none;
  margin-top: 28px;
  display: grid; gap: 12px;
}
.am-punti li {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-14); font-weight: 500;
  color: rgba(236, 243, 246, .9);
}
.am-punti svg {
  width: 32px; height: 32px; flex-shrink: 0;
  padding: 7px;
  border-radius: 9px;
  color: #7fe0d8;
  background: rgba(31, 199, 192, .1);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 216, .18);
}
.am-piede {
  font-size: var(--fs-11); line-height: 1.5; letter-spacing: .02em;
  color: rgba(255, 255, 255, .4);
}

/* ---------- Modulo ---------- */
.accesso-modulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 28px;
  background:
    radial-gradient(700px 360px at 85% 0%, rgba(10, 126, 164, .05), transparent 65%),
    var(--n-0);
}
.login-card {
  width: 100%;
  max-width: 384px;
  margin: auto 0;
}
.login-occhiello {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-11); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-600);
}
.login-occhiello::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--brand-100);
}
.login-titolo {
  margin-top: 10px;
  font-size: 28px; line-height: 1.15; font-weight: 750;
  letter-spacing: -.03em;
  color: var(--n-900);
}
.login-intro {
  margin-top: 8px;
  font-size: var(--fs-14);
  color: var(--n-500);
}
#form-login { margin-top: 28px; }
#form-login .campo { margin-bottom: 16px; }
#form-login .campo label { color: var(--n-700); }

/* campo con icona a sinistra (e l'occhio a destra per la password) */
.login-input { position: relative; }
.login-input > svg {
  position: absolute; left: 13px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  color: var(--n-400);
  pointer-events: none;
  transition: color var(--t-veloce);
}
.login-input input {
  height: 46px;
  padding-left: 42px;
  border-radius: 11px;
  border-color: var(--n-300);
  background: var(--n-0);
  font-size: var(--fs-14);
}
.login-input input:hover { border-color: var(--n-400); }
.login-input input:focus {
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}
.login-input:focus-within > svg { color: var(--brand-600); }
.login-input input[name="password"] { padding-right: 46px; }
.login-occhio {
  position: absolute; right: 5px; top: 50%;
  width: 36px; height: 36px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--n-400);
}
.login-occhio:hover { color: var(--n-700); background: var(--n-100); }
.login-occhio:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 0; }
.login-occhio svg { width: 18px; height: 18px; }
.login-occhio .occhio-chiudi,
.login-occhio[aria-pressed="true"] .occhio-apri { display: none; }
.login-occhio[aria-pressed="true"] .occhio-chiudi { display: block; }

.login-maiuscole {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: var(--fs-12); font-weight: 600;
  color: var(--warn-ink);
}
.login-maiuscole::before {
  content: '⇪'; font-size: 13px; line-height: 1;
}

.login-riga {
  display: flex; justify-content: flex-end;
  margin: -4px 0 18px;
}
.login-link {
  border: 0; background: none; padding: 2px 0;
  font-size: var(--fs-13); font-weight: 600;
  color: var(--brand-600);
}
.login-link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.login-link:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }
.login-aiuto {
  margin: -6px 0 18px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-100);
  font-size: var(--fs-13); line-height: 1.5;
  color: var(--n-700);
}
.login-aiuto strong { color: var(--n-900); }

/* pulsante: altezza piena e rotella mentre si entra */
.login-invia {
  position: relative;
  height: 48px;
  border-radius: 11px;
  font-size: 15px;
}
.login-rotella {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: login-gira .7s linear infinite;
}
.login-invia.in-corso { cursor: progress; }
.login-invia.in-corso .login-rotella { display: inline-block; }
.login-invia:disabled { opacity: 1; }
@keyframes login-gira { to { transform: rotate(360deg); } }

.login-sicurezza {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--n-200);
  font-size: var(--fs-12); line-height: 1.5;
  color: var(--n-500);
}
.login-sicurezza svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  color: var(--ok-ink);
}
.login-proprieta {
  margin-top: 32px;
  font-size: var(--fs-11); line-height: 1.5;
  color: var(--n-400);
  text-align: center;
  display: none;   /* sui computer sta nel pannello del marchio */
}

/* ---------- Tema scuro ---------- */
[data-theme="dark"] #vista-login,
[data-theme="dark"] .accesso-modulo { background: var(--n-50); }
[data-theme="dark"] .login-card { background: transparent; border: 0; }
[data-theme="dark"] .login-input input { background: var(--n-0); }
[data-theme="dark"] .login-aiuto { background: var(--brand-50); }

/* ---------- Schermi medi: meno respiro nel marchio ---------- */
@media (max-width: 1100px) {
  .accesso-marchio { padding: 32px 36px 28px; }
  .am-titolo { font-size: 34px; }
}

/* ---------- Telefoni e tablet in verticale ---------- */
@media (max-width: 860px) {
  #vista-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    background: var(--n-50);
  }
  .accesso-marchio {
    padding: 22px 20px 64px;
    gap: 18px;
    justify-content: flex-start;
  }
  .am-testa { display: none; }
  .am-centro { display: flex; align-items: center; gap: 12px; max-width: none; }
  .am-logo { width: 56px; height: 56px; margin: -6px -4px -6px -8px; }
  .am-titolo { font-size: 24px; }
  .am-frase, .am-punti, .am-piede { display: none; }

  .accesso-modulo {
    justify-content: flex-start;
    padding: 0 16px 24px;
    background: transparent;
  }
  .login-card {
    position: relative; z-index: 1;   /* sopra la fascia del marchio */
    margin: -44px 0 0;
    padding: 26px 22px 22px;
    border-radius: var(--r-xl);
    background: var(--n-0);
    border: 1px solid var(--n-200);
    box-shadow: var(--sh-4);
  }
  [data-theme="dark"] .login-card { background: var(--n-0); border: 1px solid var(--n-200); }
  .login-titolo { font-size: 24px; }
  #form-login { margin-top: 22px; }
  .login-sicurezza { margin-top: 22px; padding-top: 16px; }
  .login-proprieta { display: block; margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-rotella { animation-duration: 2s; }
}