/* InduTech Academy — pagine di accesso, attivazione e password.
   Stessi colori, stesso marchio e stessi pulsanti di indutechconsulting.it */
:root{
  --color-primary:#0036f7;
  --color-primary-dark:#0028b8;
  --color-primary-light:#e8ecff;
  --color-ink:#10131c;
  --color-ink-soft:#4a4f5e;
  --color-muted:#7b8194;
  --color-bg:#ffffff;
  --color-bg-alt:#f6f7fb;
  --color-border:#e4e6f0;
  --color-crit:#b3261e;
  --color-crit-soft:#fdecea;
  --color-good:#0e7c5a;
  --radius-md:14px;
  --radius-lg:24px;
  --shadow-sm:0 2px 8px rgba(16,19,28,.06);
  --shadow-md:0 12px 32px rgba(16,19,28,.10);
  --font-base:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  font-family:var(--font-base);
  color:var(--color-ink);
  background:var(--color-bg-alt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- reticolo tecnico appena accennato, come sulla home ---------- */
.accesso{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.5rem 1.25rem 2rem;
}
.accesso::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(16,19,28,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,19,28,.035) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 70%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 70%);
}
.accesso > *{position:relative}

/* ---------- marchio: identico a quello del sito ---------- */
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1.35rem; letter-spacing:-.02em;
  color:var(--color-ink);
  margin-bottom:2rem;
}
.brand:hover{text-decoration:none}
.brand-mark{width:40px; height:40px; flex-shrink:0}
.brand b{color:var(--color-primary)}

/* ---------- riquadro ---------- */
.acc-box{
  width:100%; max-width:27rem;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:var(--shadow-md);
}
.acc-occhiello{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:.7rem;
}
.acc-box h2{
  font-size:1.75rem; font-weight:800; letter-spacing:-.02em;
  color:var(--color-ink); line-height:1.2; margin-bottom:.55rem;
}
.acc-sub{font-size:.95rem; color:var(--color-ink-soft); margin-bottom:1.5rem}

label{display:block; font-size:.82rem; font-weight:600; color:var(--color-ink); margin:1.05rem 0 .4rem}
input{
  width:100%; font-family:var(--font-base); font-size:.95rem; color:var(--color-ink);
  padding:.8rem .95rem; border:1px solid var(--color-border); border-radius:10px;
  background:var(--color-bg); transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus{outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light)}
input::placeholder{color:#a8adbd}
.acc-letto{background:var(--color-bg-alt); color:var(--color-muted)}
.acc-aiuto{display:block; font-size:.78rem; color:var(--color-muted); margin-top:.35rem}

.acc-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:1.7rem;
  font-family:var(--font-base); font-size:.95rem; font-weight:600; color:#fff;
  background:var(--color-primary); border:1px solid transparent; border-radius:999px;
  padding:.9rem 1.7rem; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(0,54,247,.25);
}
.acc-btn:hover{background:var(--color-primary-dark); transform:translateY(-2px); color:#fff; text-decoration:none}

.acc-errore{
  background:var(--color-crit-soft); border:1px solid rgba(179,38,30,.22); color:#8f1d17;
  border-radius:10px; padding:.75rem .95rem; font-size:.88rem; margin-bottom:.2rem;
}
.acc-nota{
  margin-top:1.7rem; padding-top:1.4rem; border-top:1px solid var(--color-border);
  font-size:.85rem; color:var(--color-muted); display:grid; gap:.8rem;
}
.acc-nota b{color:var(--color-ink-soft)}

/* ---------- riga dei numeri sotto il riquadro ---------- */
.acc-numeri{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1.6rem;
  margin-top:1.6rem; font-size:.82rem; color:var(--color-muted);
}
.acc-numeri span{display:inline-flex; align-items:center; gap:7px}
.acc-numeri span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--color-primary); opacity:.55;
}

.acc-piede{
  margin-top:1.6rem; font-size:.76rem; color:var(--color-muted);
  text-align:center; line-height:1.75; max-width:30rem;
}

/* ---------- controlli della pagina di installazione ---------- */
.chk{list-style:none; margin:1.2rem 0 .3rem; display:grid; gap:.45rem; font-size:.85rem}
.chk li{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:.55rem .8rem; border:1px solid var(--color-border);
  border-radius:9px; background:var(--color-bg-alt);
}
.chk b{font-weight:600; color:var(--color-ink)}
.si{color:var(--color-good); font-weight:700}
.no{color:var(--color-crit); font-weight:700}

@media (max-width:560px){
  .accesso{padding:2rem 1rem 1.5rem}
  .brand{font-size:1.2rem; margin-bottom:1.5rem}
  .brand-mark{width:34px; height:34px}
  .acc-box{padding:1.5rem 1.25rem; border-radius:18px}
  .acc-box h2{font-size:1.5rem}
}

/* ---------- casella di accettazione ---------- */
.acc-spunta{
  display:flex; align-items:flex-start; gap:.7rem;
  margin:1.4rem 0 0; padding:.85rem .95rem;
  background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:11px;
  font-size:.85rem; font-weight:400; color:var(--color-ink-soft); line-height:1.55; cursor:pointer;
}
.acc-spunta input{
  width:18px; height:18px; margin:.1rem 0 0; flex-shrink:0;
  accent-color:var(--color-primary); cursor:pointer;
}
.acc-spunta a{font-weight:600}
.acc-piede a{color:var(--color-ink-soft)}
.acc-piede a:hover{color:var(--color-primary)}