:root {
    --login-blue: #004ee5;
    --login-blue-deep: #021d61;
    --login-blue-mid: #0b68e8;
    --login-ice: #eef5fe;
    --login-ice-strong: #d6e8fc;
    --login-text: #0b2452;
    --login-muted: #627899;
    --login-border: #cbd9ec;
    --login-green: #13a653;
    --login-danger: #c82437;
}

* { box-sizing: border-box; }

html,
body,
form {
    min-height: 100%;
    margin: 0;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--login-text);
    background: #fff;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select { font: inherit; }

.screen-field { display: none !important; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.login-stage {
    position: relative;
    min-height: clamp(760px, 100vh, 980px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 84% 18%, rgba(198, 222, 250, .74), rgba(234, 244, 255, .52) 28%, transparent 56%),
        linear-gradient(90deg, #fff 0, #fff 42%, #f8fbff 62%, #eaf3ff 100%);
}

.login-stage::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -11%;
    right: -4%;
    width: 63%;
    height: 48%;
    border-radius: 0 0 0 150px;
    background: linear-gradient(145deg, rgba(231, 241, 253, .78), rgba(207, 226, 248, .34));
    transform: rotate(-5deg);
    transform-origin: right top;
}

.login-stage::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 6.5%;
    left: 34.7%;
    width: 168px;
    height: 118px;
    border: 1px solid rgba(0, 78, 229, .24);
    border-right: 0;
    border-radius: 68px 0 0 68px;
}

.login-corner-pill {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 42px;
    height: 230px;
    border-radius: 0 0 24px 0;
    background: linear-gradient(180deg, #126df2 0%, var(--login-blue) 100%);
    box-shadow: 8px 14px 30px rgba(0, 78, 229, .15);
}

.login-stage-glow {
    position: absolute;
    z-index: -1;
    top: 4%;
    right: 3%;
    width: 152px;
    height: 152px;
    opacity: .72;
    background-image: radial-gradient(circle, rgba(0, 78, 229, .28) 2.4px, transparent 2.6px);
    background-size: 18px 18px;
}

.login-stage-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(430px, 43%) minmax(430px, 500px) 1fr;
    align-items: center;
    width: 100%;
    min-height: clamp(760px, 100vh, 980px);
    padding: 46px 3.8% 165px 5.5%;
}

.login-brand {
    position: relative;
    z-index: 4;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-bottom: 14px;
}

.login-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 154px;
    height: auto;
    border-radius: 0 0 10px 10px;
    object-fit: contain;
}

.login-brand-copy { margin-top: 112px; }

.login-brand h1 {
    margin: 0;
    color: var(--login-blue-deep);
    font-family: "Arial Black", "Segoe UI Black", "Segoe UI", Arial, sans-serif;
    font-size: clamp(58px, 5vw, 88px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.048em;
    text-transform: uppercase;
}

.login-brand h1 span { display: block; }

.login-isidata {
    margin: 15px 0 0;
    color: var(--login-blue-mid);
    font-size: clamp(38px, 3.5vw, 60px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.025em;
}

.login-tagline {
    margin: 20px 0 0;
    color: #071b4c;
    font-size: clamp(17px, 1.35vw, 23px);
    font-weight: 600;
    line-height: 1.4;
}

.login-card {
    position: relative;
    z-index: 6;
    grid-column: 2;
    width: 100%;
    padding: 38px 40px 34px;
    border: 1px solid rgba(193, 211, 234, .55);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(26, 73, 128, .19), 0 5px 18px rgba(26, 73, 128, .08);
    backdrop-filter: blur(12px);
}

.login-card h2 {
    margin: 0 0 25px;
    color: var(--login-blue-deep);
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 800;
    line-height: 1.2;
}

.login-field-row {
    position: relative;
    margin-bottom: 16px;
}

.login-field-shell,
.login-select-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    border: 1px solid var(--login-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(14, 51, 102, .03);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.login-field-shell:focus-within,
.login-select-shell:focus-within {
    border-color: var(--login-blue);
    box-shadow: 0 0 0 4px rgba(0, 78, 229, .10);
}

.login-field-icon {
    position: absolute;
    z-index: 2;
    left: 17px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #385a91;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.login-input {
    display: block;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 18px 0 58px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--login-text) !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 56px !important;
    text-align: left !important;
    box-shadow: none !important;
}

.login-input::placeholder { color: #6d7fa0; opacity: 1; }
.login-password-input { padding-right: 55px !important; }

.password-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 13px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #385a91;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible { background: #edf5ff; outline: none; }

.password-toggle svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.field-error {
    position: absolute;
    z-index: 4;
    top: -7px;
    right: -7px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #fff !important;
    background: var(--login-danger);
    font-size: 13px;
    font-weight: 800;
    line-height: 21px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(200, 36, 55, .22);
}

.login-submit {
    display: block;
    width: 100% !important;
    height: 60px !important;
    margin: 7px 0 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #fff !important;
    background: linear-gradient(110deg, #075fe1, var(--login-blue)) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 60px !important;
    text-align: center !important;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 23px rgba(0, 78, 229, .23);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.login-submit:hover,
.login-submit:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 28px rgba(0, 78, 229, .30);
    outline: none;
}

.login-submit:active { transform: translateY(0); }

.login-error-panel {
    margin: 15px 0 0;
    padding: 11px 14px;
    border: 1px solid #f2a8b1;
    border-radius: 8px;
    color: #a41428;
    background: #fff1f3;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.login-error-panel span { color: inherit !important; }

.login-divider {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 25px 0 18px;
    color: #405981;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #d5dfed;
}

.login-select-shell { min-height: 58px; }

.login-select {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 52px 0 58px !important;
    border: 0 !important;
    outline: 0 !important;
    color: #435b82 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 56px !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.select-chevron {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 17px;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #385a91;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-50%);
    pointer-events: none;
}

.login-select-shell.needs-selection {
    border-color: #e09c17;
    box-shadow: 0 0 0 4px rgba(224, 156, 23, .15);
    animation: selectPulse .7s ease 2;
}

@keyframes selectPulse { 50% { transform: translateY(-2px); } }

.spid-placeholder-note {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 16px 0 0;
    padding: 11px 18px;
    border: 1px dashed #aac4e8;
    border-radius: 7px;
    color: #496180;
    background: #f5f9ff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.spid-action {
    position: relative;
    width: 100%;
    min-height: 0;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid #0b68c9;
    border-radius: 9px;
    background: #0871ce;
    line-height: 0;
    box-shadow: 0 9px 20px rgba(0, 78, 160, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.spid-native-button {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 620 / 123;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    object-fit: contain;
    cursor: pointer;
}

.spid-action:not(.is-disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(0, 78, 160, .25);
}

.spid-action:focus-within {
    outline: 3px solid rgba(0, 78, 229, .25);
    outline-offset: 3px;
}

.spid-action.is-disabled { box-shadow: none; }
.spid-action.is-disabled .spid-native-button { cursor: not-allowed; }

.login-alert {
    position: absolute;
    z-index: 30;
    top: 18px;
    left: 50%;
    width: min(620px, calc(100% - 40px));
    padding: 13px 18px;
    border: 2px solid #7f1020;
    border-radius: 10px;
    color: #fff;
    background: #b6192e;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 12px 30px rgba(91, 9, 22, .25);
    transform: translateX(-50%);
}

.login-alert strong { display: block; margin-bottom: 3px; text-transform: uppercase; }
.login-alert span { color: #fff !important; }

.login-visual {
    position: absolute;
    z-index: 1;
    top: 9%;
    right: clamp(16px, 1.25vw, 28px);
    width: 39%;
    height: 72%;
    min-width: 510px;
    pointer-events: none;
}

.visual-window {
    position: absolute;
    inset: 0 2% 0 0;
    border: 1px solid rgba(145, 183, 228, .26);
    border-radius: 34px 0 0 34px;
    background: linear-gradient(145deg, rgba(246, 250, 255, .50), rgba(216, 232, 250, .33));
    box-shadow: inset 0 1px rgba(255, 255, 255, .82);
    transform: rotate(-3deg);
}

.window-dot {
    position: relative;
    top: 30px;
    left: 36px;
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 10px;
    border-radius: 50%;
    background: #7ca8de;
    opacity: .6;
}

.window-bar {
    position: absolute;
    top: 76px;
    left: 42px;
    width: 72%;
    height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .53);
}

.document-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    width: 67%;
    height: 24%;
    min-height: 132px;
    padding: 20px 84px 20px 28px;
    border: 1px solid rgba(142, 181, 227, .35);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 34px rgba(44, 93, 151, .19), 0 4px 10px rgba(44, 93, 151, .09);
}

.document-card-one { top: 13%; left: 15%; transform: rotate(-4deg); }
.document-card-two { top: 40%; left: 4%; transform: rotate(-1deg); }
.document-card-three { top: 67%; left: 13%; transform: rotate(3deg); }

.document-bullet {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--login-blue);
}

.document-lines { display: block; width: 61%; margin-left: 20px; }
.document-lines i,
.document-sheet b { display: block; border-radius: 5px; background: #cbd9ec; }
.document-lines i { height: 8px; margin: 10px 0; }
.document-lines i:first-child { width: 91%; background: #4f91e6; }
.document-lines i:nth-child(2) { width: 72%; }
.document-lines i:nth-child(3) { width: 52%; }

.document-sheet {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 62px;
    height: 81px;
    padding: 26px 10px 0;
    border: 2px solid #2e7bdd;
    border-radius: 7px;
    background: #eef5fe;
    box-shadow: 0 0 0 12px rgba(229, 239, 251, .74);
}

.document-sheet::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-left: 2px solid #2e7bdd;
    border-bottom: 2px solid #2e7bdd;
    background: #dbeafd;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.document-sheet b { width: 100%; height: 3px; margin: 6px 0; background: #2e7bdd; }

.approval-check {
    position: absolute;
    right: 9px;
    bottom: -16px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 6px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--login-green);
    font-size: 32px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(19, 166, 83, .22);
}

.connector {
    position: absolute;
    z-index: 2;
    left: 79%;
    width: 19%;
    height: 2px;
    background: var(--login-blue);
}

.connector::after {
    content: "";
    position: absolute;
    right: 0;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--login-blue);
}

.connector-one { top: 25%; }
.connector-two { top: 52%; }
.connector-three { top: 79%; }

.institution-node {
    position: absolute;
    z-index: 4;
    right: 0;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border: 2px solid #2c7ee5;
    border-radius: 50%;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 9px 20px rgba(39, 91, 151, .13);
}

.institution-node-one { top: 18%; }
.institution-node-two { top: 45%; }

.institution-roof {
    position: absolute;
    top: 22px;
    width: 39px;
    height: 15px;
    background: var(--login-blue);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.institution-columns {
    position: absolute;
    top: 38px;
    width: 35px;
    height: 22px;
    border-top: 5px solid var(--login-blue);
    border-bottom: 5px solid var(--login-blue);
    background: repeating-linear-gradient(90deg, var(--login-blue) 0 4px, transparent 4px 10px);
}

.login-bottom-serigraphy {
    position: absolute;
    z-index: 1;
    left: 26%;
    bottom: 0;
    width: min(68vw, 1080px);
    aspect-ratio: 3 / 1;
    opacity: .24;
    background: linear-gradient(90deg, #075fca 0%, #1771f1 52%, #075fca 100%);
    -webkit-mask: url("../Images/header-serigrafia-isidata.png?v=2") center / contain no-repeat;
    mask: url("../Images/header-serigrafia-isidata.png?v=2") center / contain no-repeat;
    pointer-events: none;
}

.login-waves {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(145px, 23vh, 230px);
    pointer-events: none;
}

.wave-light { fill: #eef5fe; }
.wave-mid { fill: #d6e8fc; fill-opacity: .86; }
.wave-front { fill: var(--login-blue); }
.wave-line {
    fill: none;
    stroke: #1771f1;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .95;
}

.login-stage-redirect { min-height: 100vh; }

.redirect-layout {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 150px 24px 210px;
}

.redirect-layout > .login-logo { top: 28px; left: 5.5%; }

.redirect-card {
    width: min(620px, 100%);
    padding: 43px;
    border: 1px solid rgba(193, 211, 234, .62);
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    text-align: center;
    box-shadow: 0 24px 58px rgba(26, 73, 128, .18);
}

.redirect-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: #fff;
    background: var(--login-blue);
    font-size: 34px;
    font-weight: 800;
}

.redirect-card h1 { margin: 0 0 13px; color: var(--login-blue-deep); font-size: 31px; }
.redirect-card p { color: #4e6486; font-size: 17px; }

.redirect-address {
    display: block;
    margin: 18px 0;
    overflow-wrap: anywhere;
    color: var(--login-blue);
    font-size: 18px;
    font-weight: 800;
}

.redirect-note { margin-top: 30px; font-size: 14px !important; }

.redirect-home {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 7px;
    color: #fff;
    background: var(--login-blue);
    font-weight: 800;
    text-decoration: none;
}

.product-strip {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 0;
    overflow: hidden;
    border-top: 1px solid #dbe7f5;
    background: #fff;
}

.product-strip iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

@media (max-width: 1320px) {
    .login-stage-inner {
        grid-template-columns: minmax(370px, 41%) minmax(410px, 470px) 1fr;
        padding-left: 4.5%;
        padding-right: 2.5%;
    }

    .login-brand h1 { font-size: clamp(52px, 5.2vw, 72px); }
    .login-visual {
        right: 14px;
        opacity: .9;
    }
}

@media (max-width: 1050px) {
    .login-stage-inner {
        grid-template-columns: minmax(310px, 1fr) minmax(390px, 455px);
        gap: 28px;
        padding: 44px 5% 170px;
    }

    .login-card { grid-column: 2; }
    .login-visual { display: none; }
    .login-bottom-serigraphy { display: none; }
    .login-stage::before { width: 54%; }
}

@media (max-width: 760px) {
    .login-stage { min-height: 0; }

    .login-stage-inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 24px 18px 175px;
    }

    .login-corner-pill { width: 22px; height: 145px; }
    .login-stage::after,
    .login-stage-glow { display: none; }

    .login-brand {
        align-self: center;
        width: min(500px, 100%);
        padding: 0;
        text-align: center;
    }

    .login-logo {
        position: relative;
        top: auto;
        left: auto;
        width: 120px;
        margin: 0 auto 16px;
    }

    .login-brand-copy { margin: 0 0 28px; }
    .login-brand h1 {
        font-size: clamp(37px, 10.4vw, 54px);
        line-height: .97;
        letter-spacing: -.055em;
    }
    .login-isidata { margin-top: 12px; font-size: clamp(31px, 8vw, 43px); }
    .login-tagline {
        max-width: 310px;
        margin: 13px auto 0;
        font-size: 15px;
        line-height: 1.45;
    }
    .login-card { width: min(500px, 100%); padding: 30px 28px 27px; }
    .login-waves { height: 135px; }
    .product-strip { height: 180px; }
}

@media (max-width: 430px) {
    .login-stage-inner { padding-left: 12px; padding-right: 12px; }
    .login-card { padding: 25px 20px 23px; border-radius: 16px; }
    .login-card h2 { margin-bottom: 20px; font-size: 22px; }

    .login-field-shell,
    .login-select-shell,
    .login-input,
    .login-select {
        min-height: 53px;
        height: 53px !important;
        line-height: 53px !important;
    }

    .login-divider { gap: 10px; font-size: 13px; }
    .spid-button { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Adattamento del marchio, piu lungo rispetto alla denominazione Albo. */
.login-brand-transparency h1 {
    max-width: 720px;
    font-size: clamp(39px, 3.35vw, 60px);
    letter-spacing: -.045em;
}

.login-brand-transparency .login-tagline {
    max-width: 610px;
}

@media (max-width: 1320px) {
    .login-brand-transparency h1 {
        font-size: clamp(36px, 3.7vw, 49px);
    }
}

@media (max-width: 760px) {
    .login-brand-transparency h1 {
        max-width: 100%;
        font-size: clamp(31px, 8vw, 47px);
        overflow-wrap: anywhere;
    }
}