/* Tema di accesso «ergane»: gli stessi colori, lo stesso carattere e la stessa card della pagina /accedi del pannello licenze
   (strumenti/licenze/src/Stile.java, sezione «accesso»). Sopra keycloak.v2 / PatternFly 5. */
@font-face{font-family:'ERGANE Doc';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/jost-400.woff2) format('woff2')}
@font-face{font-family:'ERGANE Doc';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/jost-500.woff2) format('woff2')}
@font-face{font-family:'ERGANE Doc';font-weight:600 700;font-style:normal;font-display:swap;src:url(../fonts/jost-600.woff2) format('woff2')}

:root,html.login-pf{--ink:#231F20;--mut2:color-mix(in srgb,#5B6165 52%,#231F20);--bg:#fff;--paper:#F1F2F2;--line:#D7D7D7;--line2:#C4C6C6;
  --teal:#C94025;--teal-dark:#A6341A;--teal-deep:#8D2511;--red:#BE1E3C;--red-deep:#78122A;--red-soft:#FBEAEE;--ok:#2E7D46;--ok-deep:#1F5A32;--ok-soft:#E6F2E9;
  --amber-deep:#7A4B00;--amber-soft:#FDF1DC;--info-soft:#E9EBEC;--r:6px;
  --sans:'ERGANE Doc','Futura PT',Jost,'Century Gothic','Avenir Next','Trebuchet MS',sans-serif;
  /* PatternFly: i suoi colori di marca diventano il minio di ERGANE */
  --pf-v5-global--primary-color--100:var(--teal-dark);--pf-v5-global--primary-color--200:var(--teal-deep);
  --pf-v5-global--link--Color:var(--teal-dark);--pf-v5-global--link--Color--hover:var(--teal-deep);
  --pf-v5-global--FontFamily--text:var(--sans);--pf-v5-global--FontFamily--heading:var(--sans);--pf-v5-global--FontFamily--sans-serif:var(--sans);
  --pf-v5-global--BorderRadius--sm:var(--r)}

*,*::before,*::after{box-sizing:border-box}
html.login-pf,html.login-pf body{height:auto;min-height:100%}
html.login-pf body{margin:0;background:var(--paper);background-image:none;color:var(--ink);font:400 14px/1.5 var(--sans);font-variant-numeric:tabular-nums lining-nums}
::selection{background:#E7B2A7;color:var(--ink)}
a{color:var(--teal-dark);text-underline-offset:2px}a:hover{color:var(--teal-deep)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la card */
body.solo{display:grid;place-items:center;min-height:100vh;padding:24px 16px}
.accesso{width:100%;max-width:400px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:28px 28px 26px;margin:0}
.accesso #kc-header{margin:0 0 20px}
.accesso .brand{display:flex;align-items:center;justify-content:flex-start;padding:0;text-decoration:none;background:none}
.accesso .brand .logo{display:block;height:40px;width:auto}
.accesso h1#kc-page-title{font:600 22px/1.15 var(--sans);margin:0 0 4px;color:var(--ink)}
.accesso .sub{margin:4px 0 16px;color:var(--mut2);font-size:13px}
.accesso h1#kc-page-title + :not(.sub){margin-top:16px}
.accesso p{margin:0 0 12px}
.accesso ol,.accesso ul{margin:0 0 12px;padding-left:20px}
.accesso li{margin:0 0 6px}
.accesso code,.accesso #kc-totp-secret-key{font-family:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;font-variant-numeric:slashed-zero tabular-nums;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2px 6px;font-size:12.5px;overflow-wrap:anywhere}

/* moduli: i campi di PatternFly diventano i campi del pannello */
.accesso .pf-v5-c-form{--pf-v5-c-form--GridGap:0;display:block;width:100%}
.accesso .pf-v5-c-form__group{margin:0}
.accesso .pf-v5-c-form__group-label,.accesso .pf-v5-c-form__label{padding:0}
.accesso label,.accesso .pf-v5-c-form__label{display:block;margin:12px 0 4px;font:600 12px/1.3 var(--sans);color:var(--mut2)}
.accesso .pf-v5-c-form__label-text{font:inherit;color:inherit}
.accesso .pf-v5-c-form__label-required{color:var(--red);margin-left:2px}
.accesso .pf-v5-c-form-control{display:block;position:relative;width:100%;min-height:42px;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);padding:0}
.accesso .pf-v5-c-form-control::before,.accesso .pf-v5-c-form-control::after{display:none}
.accesso .pf-v5-c-form-control:hover{border-color:#5B6165}
.accesso .pf-v5-c-form-control:focus-within{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.accesso .pf-v5-c-form-control.pf-m-error,.accesso .pf-v5-c-form-control.pf-m-error:focus-within{border-color:var(--red)}
.accesso .pf-v5-c-form-control.pf-m-readonly{background:var(--paper)}
.accesso .pf-v5-c-form-control input:focus,.accesso .pf-v5-c-form-control input:focus-visible{outline:none;box-shadow:none}
.accesso .pf-v5-c-form-control input,.accesso .pf-v5-c-form-control select{width:100%;min-height:40px;padding:7px 10px;border:0;background:transparent;font:400 14px var(--sans);color:var(--ink);outline:none}
.accesso .pf-v5-c-form-control .pf-v5-c-form-control__utilities{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--red)}
.accesso .pf-v5-c-input-group{display:flex;gap:8px;align-items:stretch}
.accesso .pf-v5-c-input-group__item.pf-m-fill{flex:1;min-width:0}
.accesso .pf-v5-c-helper-text,.accesso .kc-feedback-text{font-size:12px}
.accesso .pf-v5-c-helper-text__item.pf-m-error,.accesso .pf-v5-c-helper-text__item-text.pf-m-error{color:var(--red-deep)}
.accesso .pf-v5-c-helper-text{display:flex;justify-content:flex-start;margin-top:4px}
.accesso .pf-v5-c-form__helper-text{margin:0}
.accesso .pf-v5-c-helper-text__item-text.pf-m-error,.accesso .kc-feedback-text.pf-m-error{display:block;margin-top:4px;color:var(--red-deep);font-size:12.5px;font-weight:500}
.accesso .otp-errore{text-align:center;margin-top:10px}
.accesso .pf-v5-c-check{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.accesso .pf-v5-c-check__input{width:18px;height:18px;accent-color:var(--teal-dark);margin:0}
.accesso .pf-v5-c-check__label{font:500 14px var(--sans);color:var(--ink);margin:0}
.accesso input[type=checkbox]{accent-color:var(--teal-dark)}

/* bottoni: minio pieno per l'azione, bordo per il resto */
.accesso .pf-v5-c-form__actions{display:flex;margin:0;padding:0}
.accesso .pf-v5-c-form__actions>*{margin:0}
.accesso .pf-v5-c-form__actions .pf-v5-c-button,.accesso .pf-v5-c-button.pf-m-block{width:100%}
.accesso .pf-v5-c-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:7px 14px;font:600 14px/1.2 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s}
.accesso .pf-v5-c-button::after,.accesso .pf-v5-c-button::before{display:none}
.accesso .pf-v5-c-button:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.accesso .pf-v5-c-button.pf-m-primary{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;margin-top:18px}
.accesso .pf-v5-c-button.pf-m-primary:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.accesso .pf-v5-c-button.pf-m-secondary,.accesso .pf-v5-c-button.pf-m-tertiary{background:var(--bg);color:var(--ink);border-color:var(--line2);margin-top:12px}
.accesso .pf-v5-c-button.pf-m-control{width:42px;min-height:42px;padding:0;margin:0;color:var(--mut2)}
.accesso .pf-v5-c-button.pf-m-link{border:0;background:none;color:var(--teal-dark);min-height:0;width:auto}
.accesso .pf-v5-c-button.pf-m-link:hover{background:none;text-decoration:underline}
.accesso #reset-login{width:42px}
.accesso .kc-login-tooltip .kc-tooltip-text{font-size:12px}

/* avvisi: il rosso solo per gli errori veri */
.accesso .pf-v5-c-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line2);border-left-width:4px;border-radius:var(--r);background:var(--info-soft);color:var(--ink);font-size:13px}
.accesso .pf-v5-c-alert::before{display:none}
.accesso .pf-v5-c-alert__icon{color:var(--mut2);margin:0}
.accesso .pf-v5-c-alert__title{font-weight:500;color:inherit}
.accesso .pf-v5-c-alert.pf-m-danger{background:var(--red-soft);border-color:var(--red);color:var(--red-deep)}
.accesso .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon{color:var(--red)}
.accesso .pf-v5-c-alert.pf-m-warning{background:var(--amber-soft);border-color:#E08A00;color:var(--amber-deep)}
.accesso .pf-v5-c-alert.pf-m-success{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-deep)}

/* codice a 6 cifre: un solo campo vero (incolla, completamento dell'app), sei barrette disegnate sotto;
   ogni cifra cade sopra la sua barretta (cella = 1ch di cifra + 1.4ch di spazio, carattere a spaziatura fissa). Identico al pannello. */
.accesso .ergane-otp{display:block;box-sizing:content-box;width:14.4ch;max-width:100%;min-height:0;margin:6px auto 0;padding:0 0 10px .7ch;height:auto;border:0;border-radius:0;background-color:transparent;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:30px;font-weight:600;line-height:1.3;letter-spacing:1.4ch;text-align:left;color:var(--ink);caret-color:var(--teal);
  background-image:repeating-linear-gradient(to right,var(--line2) 0 1.6ch,transparent 1.6ch 2.4ch);background-size:13.6ch 3px;background-repeat:no-repeat;background-position:.4ch 100%;overflow:hidden}
.accesso .ergane-otp:focus{outline:none;background-image:repeating-linear-gradient(to right,var(--ink) 0 1.6ch,transparent 1.6ch 2.4ch)}
.accesso .ergane-otp:focus,.accesso .ergane-otp:focus-visible{outline:none;box-shadow:none}
.accesso .ergane-otp[aria-invalid=true]{background-image:repeating-linear-gradient(to right,var(--red) 0 1.6ch,transparent 1.6ch 2.4ch)}
.accesso .otp-nota{margin:8px 0 0;font-size:12px;color:var(--mut2);text-align:center}
.accesso #kc-otp-login-form label[for=otp],.accesso #kc-totp-settings-form label[for=totp]{text-align:center}

/* QR e passi dell'OTP */
.accesso #kc-totp-settings{padding-left:20px;margin-bottom:8px}
.accesso .kc-qr-code,.accesso [id$=qr-code]{display:flex;flex-direction:column;align-items:center;margin:8px 0}
.accesso img[id*=qr]{width:180px;height:180px;image-rendering:pixelated;border:1px solid var(--line);border-radius:var(--r);padding:6px;background:#fff}

/* scelta dell'altro modo, elenchi di passkey, pagina di scelta */
.accesso .pf-v5-c-data-list{border:1px solid var(--line);border-radius:var(--r);list-style:none;margin:0 0 12px;padding:0}
.accesso .pf-v5-c-data-list__item{border-bottom:1px solid var(--line)}
.accesso .pf-v5-c-data-list__item:last-child{border-bottom:0}
.accesso .pf-v5-c-data-list__item:hover{background:var(--paper)}
.accesso .pf-v5-c-data-list__item-row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.accesso .pf-v5-c-list{padding-left:20px}
.accesso .pf-v5-c-tile{border:1px solid var(--line2);border-radius:var(--r);padding:8px 12px;margin:0 0 8px;cursor:pointer}
.accesso .pf-v5-c-tile.pf-m-selected{border-color:var(--teal-dark)}

/* piede: contatti, lingua, rimandi */
.accesso .indietro{margin-top:14px;text-align:center;font-size:13px}
.accesso .piede{margin:16px 0 0;font-size:12px;color:var(--mut2)}
.accesso .contatti{display:flex;flex-direction:column;gap:4px}
.accesso .contatti a{white-space:nowrap}
.accesso .lingue{margin:14px 0 0}
.accesso .lingue select{width:auto;min-height:30px;padding:3px 8px;font:500 12px var(--sans);color:var(--mut2);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r)}
.accesso .lingue select:hover{border-color:#5B6165}

/* telefono: la card si allarga, senza scorrimento orizzontale */
@media (max-width:480px){
  body.solo{padding:16px}
  .accesso{padding:22px 20px 20px}
}
@media (prefers-reduced-motion:reduce){.accesso *{transition:none!important}}