/* Identidade do acesso baseada na referência NIB Barueri. */
.nib-access {
 --login-bg:#fff;
 --login-text:#102e4d;
 --login-muted:#566c85;
 --login-line:#c5d9ec;
 --login-field:#e8f5fe;
 --login-link:#0062cd;
 --login-error:#960d54;
 --login-error-bg:#fdecf4;
 --login-heading:#102e4d;
 --login-highlight:#0062cd;
 --login-kicker:#0062cd;
 --login-outside:#3f5875;
 --login-outside-line:#102e4d40;
 --login-gradient-start:#d3e9fc;
 --login-gradient-end:#f4f9ff;
 --login-grid:#102e4d21;
 --login-glow:#0880fa60;
 --login-shadow:#102e4d4d;
 position:relative;
 isolation:isolate;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:clamp(14px,2.1vh,23px);
 min-height:100dvh;
 padding:max(25px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom));
 border-top:5px solid transparent;
 border-image:linear-gradient(90deg,#0062cd 0 16.67%,#1a8eee 16.67% 33.33%,#40adf9 33.33% 50%,#04a852 50% 66.67%,#fccc2c 66.67% 83.33%,#d71182 83.33%) 1;
 background:
  radial-gradient(circle at 50% -12%,var(--login-glow),transparent 45%),
  radial-gradient(circle at 104% 104%,var(--login-glow),transparent 38%),
  radial-gradient(circle at -4% 104%,var(--login-glow),transparent 30%),
  linear-gradient(var(--login-gradient-start),var(--login-gradient-end));
 font-family:Inter,'DM Sans','Segoe UI',sans-serif;
 color:var(--login-text);
}

[data-theme=dark] .nib-access {
 --login-bg:#10263d;
 --login-text:#eaf4fd;
 --login-muted:#9db3c9;
 --login-line:#42617e;
 --login-field:#142f4a;
 --login-link:#77c9fd;
 --login-error:#ff8fc3;
 --login-error-bg:#3a1428;
 --login-heading:#fff;
 --login-highlight:#fccc2c;
 --login-kicker:#77c9fd;
 --login-outside:#c7dcf0;
 --login-outside-line:#ffffff33;
 --login-gradient-start:#102e4d;
 --login-gradient-end:#001b4d;
 --login-grid:#ffffff12;
 --login-glow:#0880fa69;
 --login-shadow:#0009;
}

.nib-access::before {
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 background-image:linear-gradient(var(--login-grid) 1px,transparent 1px),linear-gradient(90deg,var(--login-grid) 1px,transparent 1px);
 background-size:44px 44px;
 mask-image:radial-gradient(ellipse at 50% 45%,#000,transparent 80%);
 pointer-events:none;
}

.nib-access .nib-access-theme {
 position:absolute;
 z-index:1;
 top:max(14px,env(safe-area-inset-top));
 right:max(18px,env(safe-area-inset-right));
 width:44px;
 height:44px;
 padding:10px;
 border:1px solid var(--login-line);
 border-radius:12px;
 background:var(--login-bg);
 color:var(--login-text);
}
.nib-access-theme svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nib-access .nib-brand-dark,.nib-access .nib-sun {display:none}
[data-theme=dark] .nib-access :is(.nib-brand-light,.nib-moon) {display:none}
[data-theme=dark] .nib-access :is(.nib-brand-dark,.nib-sun) {display:block}

.nib-access-brand {text-align:center}
.nib-access-brand img {
 display:block;
 width:auto;
 height:clamp(46px,8.5vh,84px);
 max-width:100%;
 object-fit:contain;
 margin:0 auto clamp(13px,2.3vh,24px);
}
.nib-access-brand span {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:10px;
 font-size:12px;
 font-weight:700;
 letter-spacing:.13em;
 text-transform:uppercase;
 color:var(--login-kicker);
}
.nib-access-brand span::before {content:"";width:28px;height:3px;border-radius:2px;background:#fccc2c}
.nib-access-brand h1 {margin:7px 0 0;font-size:clamp(28px,4.8vh,44px);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--login-heading)}
.nib-access-brand h1 em {color:var(--login-highlight);font-style:normal}

.nib-access-card {
 box-sizing:border-box;
 width:min(100%,440px);
 padding:clamp(20px,3.4vh,35px) 36px;
 background:var(--login-bg);
 border:1px solid var(--login-line);
 border-radius:24px;
 box-shadow:0 24px 60px -24px var(--login-shadow);
}
.nib-access-card h2 {margin:0 0 5px;font-size:clamp(24px,3.6vh,32px);line-height:1.16;letter-spacing:-.025em;color:var(--login-text)}
.nib-access-card form > p {margin:0 0 18px;color:var(--login-muted);font-size:15px}
.nib-access-card .field {display:flex;flex-direction:column;gap:7px;margin:0 0 15px;color:var(--login-text);font-size:14px;font-weight:600}
.nib-access-card :is(input:not([type=checkbox]),textarea) {
 display:block;
 box-sizing:border-box;
 width:100%;
 min-height:46px;
 padding:10px 14px;
 border:1px solid var(--login-line);
 border-radius:14px;
 background:var(--login-field);
 color:var(--login-text);
 font-family:inherit; line-height:1.4;
 font-size:16px;
}
.nib-access-card :is(input,textarea)::placeholder {color:var(--login-muted);opacity:1}
.nib-access-card input[type=checkbox] {accent-color:#0062cd}
.nib-access :is(button,input,textarea):focus-visible {outline:3px solid #0880fa;outline-offset:2px}
.nib-access-card .password-wrap {position:relative;display:block}
.nib-access-card .password-wrap input {padding-inline-end:90px}
.nib-access-card .password-wrap button {
 position:absolute;
 right:3px;
 top:50%;
 transform:translateY(-50%);
 min-height:40px;
 min-width:76px;
 padding:0 9px;
 border:0;
 border-radius:10px;
 background:transparent;
 color:var(--login-link);
 font-weight:700;
 font-size:13px;
}
.nib-access-card .password-wrap button:hover {background:var(--login-bg)}
.nib-access-card :is(.primary,.quiet) {min-height:44px}
.nib-access-card .primary {
 display:flex;
 justify-content:center;
 align-items:center;
 gap:9px;
 width:100%;
 min-height:49px;
 margin:10px 0 0;
 border:0;
 border-radius:14px;
 background:linear-gradient(90deg,#0057b9,#0568cb);
 color:#fff;
 font-size:16px;
 font-weight:700;
 box-shadow:0 10px 24px -10px #0880fab3;
}
.nib-access-card .primary:hover {background:linear-gradient(90deg,#004eaa,#005dbc)}
.nib-access-card .primary[aria-busy=true] {cursor:wait}
.nib-access-card .quiet {margin-top:9px;color:var(--login-link)}
.nib-access-card .eyebrow {margin-bottom:9px;color:var(--login-link)}
.nib-access-card .hint {
 display:flex;
 align-items:flex-start;
 gap:9px;
 margin:15px 0 0;
 padding:0;
 border:0;
 background:none;
 color:var(--login-muted);
 font-size:13.5px;
 line-height:1.45;
}
.nib-access-card .hint::before {
 content:"i";
 display:grid;
 flex:0 0 19px;
 place-items:center;
 height:19px;
 border-radius:50%;
 background:#102e4d;
 color:#fccc2c;
 font-weight:700;
 font-size:12px;
}
.nib-access-card .notice {margin:12px 0;background:var(--login-field);border-color:var(--login-line);color:var(--login-text)}
.nib-access-card [role=alert]:empty {display:none}
.nib-access-card [role=alert]:not(:empty) {
 margin:0 0 12px;
 padding:9px 12px;
 border:1px solid var(--login-error);
 border-radius:12px;
 background:var(--login-error-bg);
 color:var(--login-error);
 overflow-wrap:anywhere;
}
.nib-access-card [role=alert].success {background:var(--login-field);border-color:var(--login-line);color:var(--login-text)}
.nib-access-foot {margin:13px 0 0;padding-top:12px;border-top:1px solid var(--login-line);color:var(--login-muted);font-size:12px;text-align:center}

.nib-access-capabilities {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:min(100%,800px)}
.nib-access-capabilities div {border-top:2px solid var(--login-outside-line);padding-top:8px;color:var(--login-outside);font-size:12.5px;line-height:1.4}
.nib-access-capabilities b {display:block;margin-bottom:3px;color:var(--login-heading);font-size:14px}

.nib-access .login-spinner {width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:login-spin .8s linear infinite}
@keyframes login-spin {to {transform:rotate(360deg)}}

@media (max-width:700px) {
 .nib-access {padding-top:max(68px,calc(env(safe-area-inset-top) + 55px))}
 .nib-access-card {padding:23px 22px}
 .nib-access-capabilities {width:min(100%,440px);grid-template-columns:1fr;gap:11px}
}
@media (max-height:760px) and (min-width:701px) {
 .nib-access {gap:12px;padding-top:18px;padding-bottom:18px}
 .nib-access-foot {display:none}
}
@media (prefers-reduced-motion:reduce) {
 .nib-access .login-spinner {animation:none}
}
