/* Finexis sign-in · layout adaptado do componente enviado (21st.dev).
   Login e desafio TOTP continuam nas APIs nativas; não cria login social falso. */
#loginScreen.auth-layer{
  position:fixed!important;
  inset:0!important;
  z-index:200!important;
  display:block!important;
  min-width:0;
  min-height:100dvh;
  padding:0!important;
  margin:0;
  background:#fff!important;
  color:#222328;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#loginScreen .signin-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:100dvh;
  width:100%;
  background:#fff;
}
#loginScreen .signin-left{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:clamp(32px,5vw,74px);
  background:#fff;
}
#loginScreen .signin-content{
  width:100%;
  max-width:432px;
  min-width:0;
}
#loginScreen .auth-brand{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:max-content;
  margin:0 0 40px!important;
  font-size:16px!important;
  font-weight:650!important;
  letter-spacing:-.035em;
  color:#222328!important;
}
#loginScreen .auth-brand > .finexis-auth-icon{
  display:block;
  flex:none;
  width:34px!important;
  height:34px!important;
  object-fit:contain;
}
#loginScreen .auth-brand > .finexis-auth-icon-white{display:none}
#loginScreen .signin-heading h1{
  font-size:clamp(32px,3.35vw,48px);
  line-height:1.13;
  letter-spacing:-.053em!important;
  font-weight:630!important;
  margin:0 0 12px!important;
  color:#202126;
}
#loginScreen .signin-heading > p{
  margin:0 0 31px!important;
  color:#7b7e87!important;
  line-height:1.5;
  font-size:15px!important;
}
#loginScreen .auth-card{
  width:100%!important;
  max-width:none!important;
  min-width:0;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#loginScreen .signin-fields{
  display:flex;
  flex-direction:column;
  gap:20px;
}
#loginScreen .signin-field > label{
  display:block;
  font-size:13px!important;
  font-weight:560!important;
  margin:0 0 9px!important;
  color:#50525b;
}
#loginScreen .signin-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid #e2e2e5;
  border-radius:16px;
  background:rgba(21,22,25,.035);
  backdrop-filter:blur(5px);
  transition:border-color .22s ease,background .22s ease;
}
#loginScreen .signin-input-wrap:focus-within{
  border-color:#ea0032;
  background:rgba(234,0,50,.025);
}
#loginScreen .signin-input-wrap > input{
  display:block;
  width:100%;
  min-width:0;
  min-height:55px;
  padding:15px 16px!important;
  margin:0!important;
  border:0!important;
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:16px!important;
  color:#222328!important;
  font-size:14px;
  font-weight:450;
  letter-spacing:0;
}
#loginScreen .signin-input-wrap input::placeholder{color:#9c9ea7;opacity:1}
#loginScreen .signin-input-wrap input:-webkit-autofill{
  box-shadow:0 0 0 1000px #f8f8f8 inset!important;
  -webkit-text-fill-color:#222328;
}
#loginScreen .signin-password-wrap > input{padding-right:60px!important}
#loginScreen .signin-reveal{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  height:37px;
  width:37px;
  padding:0;
  color:#8b8e98;
  border:0;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
#loginScreen .signin-reveal .ph{font-size:20px}
#loginScreen .signin-reveal:hover{color:#222328;background:#ebebef}
#loginScreen .signin-reveal:focus-visible,
#loginScreen .signin-submit:focus-visible,
#loginScreen .back-btn:focus-visible{outline:2px solid #ea0032!important;outline-offset:3px}
#loginScreen .signin-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:55px;
  margin:25px 0 0!important;
  padding:15px 20px!important;
  border:0;
  border-radius:16px;
  background:#242529;
  color:#fff;
  font-size:14px;
  font-weight:600;
  transition:background .2s ease,transform .2s ease;
  cursor:pointer;
}
#loginScreen .signin-submit:hover:not(:disabled){background:#36373d;transform:translateY(-1px)}
#loginScreen .signin-submit:disabled{opacity:.52;cursor:wait}
#loginScreen .signin-submit .ph{font-size:17px}
#loginScreen #login-error{
  margin:14px 0 0!important;
  min-height:20px;
  color:#c3002a!important;
  font-size:12px!important;
  line-height:1.5;
}
#loginScreen .signin-footnote{
  margin-top:21px;
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:center;
  color:#a1a3ab;
  font-size:12px;
}
#loginScreen .signin-footnote .ph{font-size:15px}
#loginScreen .signin-right{
  position:relative;
  min-width:0;
  min-height:100dvh;
  padding:16px;
  background:#fff;
}
#loginScreen .signin-hero-image{
  position:absolute;
  inset:16px;
  border-radius:26px;
  background-color:#27282b;
  /* Fotografia indicada no arquivo original da referência 21st.dev. */
  background-image:url("https://cdn.21st.dev/assets/mirror/ec/ecff1664e7fc3185d0e947571f984ea5fa3de9580fb0e73a03cd9c9b3461cb09.jpg");
  background-position:center;
  background-size:cover;
  overflow:hidden;
}
#loginScreen .signin-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 45%,rgba(0,0,0,.47));
}
#loginScreen .signin-hero-overlay{
  position:absolute;
  left:45px;
  bottom:47px;
  pointer-events:none;
}
#loginScreen .signin-hero-overlay > img{
  display:block;
  width:min(175px,35vw);
  max-height:58px;
  object-fit:contain;
  object-position:left center;
  filter:none!important;
}
#loginScreen .signin-mfa-stage .signin-mfa-description{
  font-size:13px!important;
  color:#6d707b!important;
  line-height:1.65;
  margin:0!important;
}
#loginScreen .signin-qr-stage{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  padding:17px;
  border-radius:16px;
  background:#f7f7f8;
}
#loginScreen .signin-qr-stage #mfa-qr{
  display:block;
  margin:0 auto!important;
  padding:8px;
  width:192px;
  height:192px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
}
#loginScreen .signin-qr-stage p{
  margin:3px 0!important;
  color:#767981!important;
  font-size:12px!important;
  text-align:center;
}
#loginScreen .signin-qr-stage code{
  display:block;
  width:100%;
  margin:0!important;
  padding:11px!important;
  border-radius:10px;
  background:#fff!important;
  color:#323337;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.065em;
  text-align:center;
  user-select:all;
}
#loginScreen #mfa-code{
  letter-spacing:.18em!important;
  text-align:left!important;
  font-size:19px!important;
  font-variant-numeric:tabular-nums;
}
#loginScreen .back-btn{
  display:flex;
  width:max-content;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:3px 0!important;
  margin:0!important;
  background:none!important;
  border:0;
  color:#666973!important;
  font-size:12px;
  font-weight:550;
  cursor:pointer;
}
#loginScreen .back-btn:hover{color:#ea0032!important}
#loginScreen .back-btn .ph{font-size:14px}
@keyframes signin-reveal-up{
  from{opacity:0;transform:translateY(16px);filter:blur(3px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes signin-reveal-right{
  from{opacity:0;transform:translateX(25px);filter:blur(3px)}
  to{opacity:1;transform:translateX(0);filter:blur(0)}
}
#loginScreen:not([hidden]) .auth-brand{animation:signin-reveal-up .7s .08s both}
#loginScreen:not([hidden]) .signin-heading{animation:signin-reveal-up .7s .16s both}
#loginScreen:not([hidden]) .auth-card{animation:signin-reveal-up .7s .24s both}
#loginScreen:not([hidden]) .signin-footnote{animation:signin-reveal-up .7s .3s both}
#loginScreen:not([hidden]) .signin-hero-image{animation:signin-reveal-right .85s .15s both}
#loginScreen[data-stage="mfa"] .signin-heading,
#loginScreen[data-stage="mfa"] .signin-mfa-stage{animation:signin-reveal-up .4s both}

/* Títulos e formulário acompanham a aparência selecionada no ERP. */
html[data-theme="dark"] #loginScreen.auth-layer,
html[data-theme="dark"] #loginScreen .signin-shell,
html[data-theme="dark"] #loginScreen .signin-left,
html[data-theme="dark"] #loginScreen .signin-right{
  background:#111214!important;
  color:#eeeeef;
}
html[data-theme="dark"] #loginScreen .auth-brand > .finexis-auth-icon-color{display:none!important}
html[data-theme="dark"] #loginScreen .auth-brand > .finexis-auth-icon-white{display:block!important}
html[data-theme="dark"] #loginScreen .auth-brand,
html[data-theme="dark"] #loginScreen .signin-heading h1{color:#f2f2f4!important}
html[data-theme="dark"] #loginScreen .signin-heading p,
html[data-theme="dark"] #loginScreen .signin-field>label{color:#b1b2b9!important}
html[data-theme="dark"] #loginScreen .signin-input-wrap{
  background:#1c1d20!important;
  border-color:#3a3b40;
}
html[data-theme="dark"] #loginScreen .signin-input-wrap:focus-within{
  border-color:#ea0032;
  background:#241e22!important;
}
html[data-theme="dark"] #loginScreen .signin-input-wrap>input{
  color:#eeeeef!important;
  background:transparent!important;
}
html[data-theme="dark"] #loginScreen .signin-input-wrap input:-webkit-autofill{
  box-shadow:0 0 0 1000px #252628 inset!important;
  -webkit-text-fill-color:#eeeeef;
}
html[data-theme="dark"] #loginScreen .signin-input-wrap input::placeholder{color:#7f8188}
html[data-theme="dark"] #loginScreen .signin-reveal{color:#a4a6b0}
html[data-theme="dark"] #loginScreen .signin-reveal:hover{background:#323337;color:#fff}
html[data-theme="dark"] #loginScreen .signin-submit{background:#ebebee;color:#1b1c20}
html[data-theme="dark"] #loginScreen .signin-submit:hover:not(:disabled){background:#fff}
html[data-theme="dark"] #loginScreen #login-error{color:#ff7e95!important}
html[data-theme="dark"] #loginScreen .signin-mfa-description,
html[data-theme="dark"] #loginScreen .signin-qr-stage p{color:#b0b2ba!important}
html[data-theme="dark"] #loginScreen .signin-qr-stage{background:#222327}
html[data-theme="dark"] #loginScreen .signin-qr-stage code{background:#34353a!important;color:#e6e6e9}
html[data-theme="dark"] #loginScreen .back-btn{color:#b4b5bd!important}
html[data-theme="dark"] #loginScreen .back-btn:hover{color:#ff7d96!important}
html[data-theme="dark"] #loginScreen .signin-footnote{color:#8b8d97}
@media(max-width:830px){
  #loginScreen .signin-shell{grid-template-columns:minmax(0,1fr)}
  #loginScreen .signin-right{display:none}
  #loginScreen .signin-left{min-height:100dvh;padding:36px clamp(22px,6vw,45px)}
  #loginScreen .signin-content{max-width:445px}
}
@media(max-height:680px) and (min-width:831px){
  #loginScreen .signin-left{padding-top:30px;padding-bottom:30px}
  #loginScreen .auth-brand{margin-bottom:22px!important}
  #loginScreen .signin-right{min-height:620px}
}
@media(prefers-reduced-motion:reduce){
  #loginScreen *,
  #loginScreen *::before,
  #loginScreen *::after{
    animation:none!important;
    transition:none!important;
    filter:none;
  }
}