:root{
  color-scheme:dark;
  --background:#070b0f;
  --surface:#0d141a;
  --surface-soft:#111a22;
  --line:#27343f;
  --line-strong:#344653;
  --text:#f4f7fa;
  --muted:#8795a3;
  --blue:#3478f6;
  --blue-hover:#2468e8;
  --danger:#ff7474;
  --radius:16px;
}

*{
  box-sizing:border-box;
}

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

body{
  min-height:100vh;
  overflow:hidden;
  color:var(--text);
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(52,120,246,.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(30,91,180,.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #080d12,
      #05080b
    );
}

button,
input{
  font:inherit;
}

.login-shell{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:20px;
}

.login-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  width:min(880px,100%);
  min-height:470px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:
    0 28px 80px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.015);
}

.login-identity{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding:38px;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      rgba(24,40,55,.96),
      rgba(10,18,25,.98)
    );
}

.login-identity::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-115px;
  bottom:-120px;
  border:1px solid rgba(65,132,255,.20);
  border-radius:50%;
  box-shadow:
    0 0 0 35px rgba(65,132,255,.025),
    0 0 0 70px rgba(65,132,255,.018);
}

.identity-content,
.identity-footer{
  position:relative;
  z-index:1;
}

.brand-logo{
  display:block;
  width:min(260px,82%);
  height:auto;
  object-fit:contain;
  object-position:left center;
}

.product-heading{
  margin-top:58px;
}

.product-eyebrow,
.access-eyebrow{
  color:#72a7ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
}

.product-heading h1{
  margin:10px 0 8px;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.product-heading p{
  max-width:370px;
  margin:0;
  color:#9aa8b5;
  font-size:13px;
  line-height:1.6;
}

.identity-features{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:28px;
}

.identity-features span{
  padding:6px 9px;
  border:1px solid #2b3a47;
  border-radius:999px;
  color:#aab6c1;
  background:rgba(8,14,20,.48);
  font-size:10px;
  font-weight:650;
}

.identity-footer{
  color:#657482;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.login-access{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:38px 42px;
}

.access-header h2{
  margin:8px 0 7px;
  color:var(--text);
  font-size:26px;
  letter-spacing:-.025em;
}

.access-header p{
  margin:0 0 25px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

form{
  display:grid;
  gap:7px;
}

label{
  margin-top:8px;
  color:#b9c4ce;
  font-size:11px;
  font-weight:650;
}

input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  outline:none;
  color:#fff;
  background:#091017;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

input:hover{
  border-color:#456071;
}

input:focus{
  border-color:var(--blue);
  background:#0b131b;
  box-shadow:0 0 0 3px rgba(52,120,246,.14);
}

.password-field{
  position:relative;
}

.password-field input{
  padding-right:67px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:5px;
  width:auto;
  height:32px;
  margin:0;
  padding:0 9px;
  border:0;
  border-radius:6px;
  color:#8fb6ff;
  background:transparent;
  font-size:10px;
  font-weight:750;
  cursor:pointer;
}

.password-toggle:hover{
  background:rgba(52,120,246,.11);
}

.login-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:42px;
  margin-top:15px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:var(--blue);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(37,99,235,.20);
  transition:
    background .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.login-button:hover:not(:disabled){
  background:var(--blue-hover);
  box-shadow:0 10px 28px rgba(37,99,235,.28);
  transform:translateY(-1px);
}

.login-button:active:not(:disabled){
  transform:translateY(0);
}

.login-button:disabled{
  opacity:.78;
  cursor:wait;
}

.button-loader{
  display:none;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

.login-button.loading .button-loader{
  display:block;
}

.message{
  min-height:18px;
  margin-top:4px;
  color:var(--danger);
  font-size:11px;
  line-height:1.4;
  text-align:center;
}

.message:not(:empty){
  padding:7px 9px;
  border:1px solid rgba(239,68,68,.32);
  border-radius:7px;
  background:rgba(239,68,68,.08);
}

.access-footer{
  margin-top:20px;
  color:#667583;
  font-size:10px;
  text-align:center;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

@media(max-width:760px){
  body{
    overflow:auto;
  }

  .login-shell{
    padding:12px;
  }

  .login-card{
    grid-template-columns:1fr;
    width:min(430px,100%);
    min-height:0;
  }

  .login-identity{
    padding:24px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .brand-logo{
    width:min(230px,78%);
  }

  .product-heading{
    margin-top:25px;
  }

  .product-heading h1{
    font-size:27px;
  }

  .product-heading p,
  .identity-features,
  .identity-footer{
    display:none;
  }

  .login-access{
    padding:26px 24px;
  }
}

@media(max-height:590px) and (min-width:761px){
  .login-shell{
    padding:10px;
  }

  .login-card{
    min-height:430px;
  }

  .login-identity,
  .login-access{
    padding-top:25px;
    padding-bottom:25px;
  }

  .product-heading{
    margin-top:32px;
  }
}

@media(max-width:390px){
  .login-identity{
    padding:20px;
  }

  .login-access{
    padding:22px 20px;
  }

  .access-header p{
    margin-bottom:18px;
  }
}








/* WISE INTELOG - LOGO HORIZONTAL - INICIO */

.login-identity .brand-logo{
  display:block;
  width:min(300px,90%);
  max-height:74px;
  object-fit:contain;
  object-position:left center;
  background:transparent;
}

@media(max-width:760px){
  .login-identity .brand-logo{
    width:min(250px,84%);
    max-height:60px;
  }
}

/* WISE INTELOG - LOGO HORIZONTAL - FIM */


/* WISE INTELOG - RECUPERACAO DE SENHA - INICIO */

[hidden]{
  display:none !important;
}

.login-help{
  min-height:18px;
  margin-top:2px;
  text-align:center;
}

.login-help a,
.access-link{
  color:#8fb6ff;
  font-size:11px;
  font-weight:650;
  text-decoration:none;
}

.login-help a:hover,
.access-link:hover{
  color:#b8d0ff;
  text-decoration:underline;
}

.recovery-card{
  min-height:430px;
}

.recovery-form{
  display:grid;
  gap:8px;
}

.recovery-message{
  min-height:18px;
  margin-top:5px;
  font-size:11px;
  line-height:1.45;
  text-align:center;
}

.recovery-message.error{
  padding:8px 10px;
  border:1px solid rgba(239,68,68,.32);
  border-radius:7px;
  color:#ff8585;
  background:rgba(239,68,68,.08);
}

.recovery-message.success{
  padding:8px 10px;
  border:1px solid rgba(16,185,129,.30);
  border-radius:7px;
  color:#72ddb5;
  background:rgba(16,185,129,.08);
}

.recovery-navigation{
  margin-top:15px;
  text-align:center;
}

.password-policy-login{
  margin-top:8px;
  padding:9px 11px;
  border:1px solid #27343f;
  border-radius:8px;
  color:#8493a1;
  background:#0a1117;
  font-size:10px;
  line-height:1.45;
}

/* WISE INTELOG - RECUPERACAO DE SENHA - FIM */


/* WISE INTELOG - RECUPERACAO DE SENHA */

[hidden]{
  display:none !important;
}

.login-support{
  display:flex;
  justify-content:center;
  min-height:24px;
  margin-top:2px;
}

.forgot-password-link,
.recovery-back-link{
  color:#8fb6ff;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

.forgot-password-link:hover,
.recovery-back-link:hover{
  color:#b4ceff;
  text-decoration:underline;
}

.recovery-card{
  min-height:430px;
}

.recovery-form{
  display:grid;
  gap:8px;
}

.recovery-message{
  min-height:18px;
  margin-top:8px;
  padding:0;
  color:#9aa8b5;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

.recovery-message.success{
  padding:9px;
  border:1px solid rgba(16,185,129,.32);
  border-radius:7px;
  color:#75ddb7;
  background:rgba(16,185,129,.08);
}

.recovery-message.error{
  padding:9px;
  border:1px solid rgba(239,68,68,.32);
  border-radius:7px;
  color:#ff8b8b;
  background:rgba(239,68,68,.08);
}

.recovery-actions{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.password-policy-list{
  margin:8px 0 0;
  padding-left:18px;
  color:#82909d;
  font-size:10px;
  line-height:1.6;
}