/* Interruttore Studente / Genitore nella schermata di accesso (#view-login).
   Solo variabili di app.css (--surface-2, --line, --blue, ...): segue da solo il tema
   chiaro e quello scuro. */

.mnt-portale{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  padding:4px;margin-bottom:6px;
  border-radius:13px;
  background:var(--surface-2);border:1px solid var(--line);
}
/* il cursore blu che scorre sotto la scelta */
.mnt-portale::before{
  content:"";
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  border-radius:10px;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  box-shadow:0 6px 16px rgba(37,74,135,0.30);
  transition:transform 0.22s ease;
}
#view-login[data-portale="genitore"] .mnt-portale::before{transform:translateX(100%);}
.mnt-portale button{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 12px;
  border:0;border-radius:10px;background:transparent;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--muted);
  transition:color 0.2s ease;
}
.mnt-portale button:hover{color:var(--ink);}
.mnt-portale button[aria-checked="true"]{color:#fff;}
.mnt-portale svg{
  width:18px;height:18px;flex:0 0 18px;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* Responsive, anche girando telefono o tablet: le colonne della griglia di app.css (1fr)
   non possono stringersi sotto il contenuto piu' largo, e il pulsante di Google e' disegnato
   con una larghezza fissa, quella del modulo al caricamento. Senza min-width:0, dopo una
   rotazione da orizzontale a verticale il modulo usciva a destra dallo schermo. Il pulsante
   si ridisegna alla nuova larghezza (mentium-portali.js); nel frattempo non sborda. */
#view-login > .lg-brand,
#view-login > .lg-form-wrap{min-width:0;}
#view-login #mnt-google{overflow:hidden;}

/* Occhio della password: campo e pulsante nello stesso contenitore (vedi mentium-portali.js),
   cosi' il pulsante e' centrato sull'altezza del campo. .lg-field span di app.css vale anche
   per il contenitore: qui se ne tolgono i caratteri dell'etichetta. */
#view-login .mnt-pass-box{
  position:relative;display:block;
  font:inherit;letter-spacing:normal;text-transform:none;color:inherit;
}
#view-login .mnt-pass-box input{padding-right:52px;}
#view-login .mnt-pass-box .lg-show{
  top:50%;right:4px;transform:translateY(-50%);
  display:grid;place-items:center;
  width:40px;height:40px;padding:0;border-radius:9px;
  color:var(--muted);
  transition:color 0.15s ease;
}
#view-login .mnt-pass-box .lg-show:hover{color:var(--ink);}
#view-login .mnt-pass-box .lg-show svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

@media (prefers-reduced-motion:reduce){
  .mnt-portale::before,.mnt-portale button,#view-login .mnt-pass-box .lg-show{transition:none;}
}