/* ============================================================
   Centiva — Login (pagina standalone, fuori dallo shell dell'app).
   CSS del design approvato (Centiva brand design/Design login/login),
   spostato da <style> inline a file esterno per il CSP 'style-src self'.
   Font self-host via /static/fonts/_fontface.css.
   ============================================================ */
:root{
  --notte:#1E1B4B; --primario:#524BD6; --primario-hover:#443CC4;
  --testo:#131E2E; --testo-2:#4A5A70; --testo-3:#38465A; --su-scuro:#C7C4E8;
  --bordo:#C8D2DE; --sep:#E0E6EE; --placeholder:#9AA8BC; --bg:#E7ECF2;
}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;background:var(--notte);color:var(--testo)}

/* ---- contenitore: blocco unico (brand+form) centrato su tutta la pagina ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--notte)}

/* sfondo dashboard: ricopre TUTTA la pagina (object-fit:cover, mai vuoti),
   ancorato in alto a SINISTRA; destra/basso sbordano e sono tagliati. */
.login__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;z-index:0}
.login__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(93deg,rgba(20,17,52,.95) 0%,rgba(20,17,52,.72) 30%,rgba(20,17,52,.40) 50%,rgba(20,17,52,.74) 72%,rgba(20,17,52,.93) 100%)}

/* ---- blocco unico centrato: brand + form con distanza reciproca fissa ---- */
.login__group{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:140px;padding:48px}

/* ---- brand ---- */
.login__brand{display:flex;flex-direction:column;gap:24px;max-width:536px}
.brandmark{display:inline-flex;align-items:center}
.brandmark img{height:55.2px;width:51.1px}
.brandmark span{font:500 35.9px/1 'Poppins',sans-serif;letter-spacing:-.06em;color:#fff;margin-left:-6.07px;transform:translateY(-1.08px)}
.login__title{margin:0;font:700 63px/74px 'Sora',sans-serif;letter-spacing:-.015em;color:#fff;white-space:nowrap}
.login__sub{margin:14px 0 0;font:400 20.7px/32px 'IBM Plex Sans',sans-serif;color:var(--su-scuro);max-width:536px}

/* ---- form ---- */
.login__panel{display:flex;align-items:center;flex:none}
.card{width:546px;max-width:100%;background:#fff;border-radius:16px;box-shadow:0 40px 90px rgba(0,0,0,.45);padding:48px;display:flex;flex-direction:column;gap:24px}
.card__h{margin:0;font:700 28px/34px 'Sora',sans-serif;color:var(--testo)}
.card__legale{margin:4px 0 0;text-align:center;font:400 12px 'IBM Plex Sans',sans-serif;color:var(--placeholder)}
.card__legale a{color:var(--testo-2);text-decoration:none}
.card__legale a:hover{text-decoration:underline}
.card__p{margin:0;font:400 13.5px/19px 'IBM Plex Sans',sans-serif;color:var(--testo-2)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 12.5px 'IBM Plex Sans',sans-serif;color:var(--testo-3)}
.field__row{display:flex;justify-content:space-between;align-items:baseline}
.field__row a{font:600 12.5px 'IBM Plex Sans',sans-serif;color:var(--primario-hover);text-decoration:none}
.field input{font:400 14px/20px 'IBM Plex Sans',sans-serif;color:var(--testo);background:#fff;
  border:1px solid var(--bordo);border-radius:9px;padding:11px 13px;min-height:44px;outline:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:var(--placeholder)}
.field input:focus{border-color:var(--primario);box-shadow:0 0 0 3px rgba(82,75,214,.15)}
.btn{font:600 15px/22px 'IBM Plex Sans',sans-serif;min-height:44px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.btn--primary{background:var(--primario);color:#fff;box-shadow:0 6px 16px rgba(82,75,214,.3);transition:background .15s}
.btn--primary:hover{background:var(--primario-hover)}
.btn--ghost{background:#fff;color:var(--testo);border-color:var(--bordo)}
.btn--ghost:hover{background:#F5F8FB}
.sep{display:flex;align-items:center;gap:12px}
.sep span{flex:1;height:1px;background:var(--sep)}
.sep b{font:500 11px 'IBM Plex Sans',sans-serif;letter-spacing:.08em;color:var(--placeholder)}

/* messaggi di stato (adattamento funzionale, non-visivo del design) */
.card__msg{margin:0;padding:10px 12px;border-radius:9px;font:400 13.5px/19px 'IBM Plex Sans',sans-serif}
.card__msg--err{background:#FDECEC;color:#991b1b;border:1px solid #f5c8c8}
.card__msg--ok{background:#E4F4EB;color:#0E6E40;border:1px solid #bfe6cd}

/* ---- responsive: sotto 1120px nascondo il brand, resta la card centrata ---- */
@media (max-width:1119px){
  .login__brand{display:none}
  .login__group{gap:0;padding:24px}
}