:root{
  --bg:#020817;
  --panel:#071325;
  --panel-deep:#030814;
  --line:rgba(127, 207, 255, .18);
  --line-strong:rgba(23, 187, 255, .46);
  --text:#f4fbff;
  --muted:#adc2d7;
  --muted-strong:#dbeafa;
  --field:#050b19;
  --field-border:rgba(144, 202, 249, .20);
  --blue:#0068e8;
  --blue-2:#009dff;
  --cyan:#20d8ff;
  --aqua:#69f0dc;
  --control-h:62px;
  --side-icon:58px;
}

*{ box-sizing:border-box; }
html, body{ min-height:100%; }

body{
  margin:0;
  min-height:100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.main-content-bloqueio-js{ display:none !important; }
.js-enabled .main-content-bloqueio-js{ display:flex !important; }

.login-page-wrapper{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  background:var(--bg);
}

.login-shell{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:3fr 2fr;
  overflow:hidden;
  background:var(--panel-deep);
}

.login-hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:#020712;
}

.hero-image{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2, 8, 23, .10) 0%, rgba(2, 8, 23, .18) 52%, rgba(2, 8, 23, .88) 100%),
    linear-gradient(0deg, rgba(2, 8, 23, .72) 0%, rgba(2, 8, 23, .18) 50%, rgba(2, 8, 23, .44) 100%),
    url('/img-login/erp-login-visual.png') center/cover no-repeat;
  filter:saturate(1.06) contrast(1.04);
}

.login-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 24%, rgba(32, 216, 255, .18), transparent 24%),
    linear-gradient(90deg, rgba(2,8,23,.28) 0%, transparent 44%, rgba(2,8,23,.82) 100%);
  pointer-events:none;
}

.login-hero::after{
  content:"";
  position:absolute;
  right:-1px;
  top:0;
  bottom:0;
  width:22%;
  background:linear-gradient(90deg, transparent, var(--panel-deep));
  pointer-events:none;
}

.login-panel{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 56% 0%, rgba(0, 157, 255, .20), transparent 34%),
    linear-gradient(150deg, rgba(17, 43, 86, .98) 0%, rgba(7, 19, 37, .98) 38%, rgba(3, 8, 20, 1) 100%);
  border-left:1px solid rgba(127, 207, 255, .10);
}

.login-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%);
  pointer-events:none;
}

.login-panel-inner{
  position:relative;
  z-index:1;
  width:min(520px, 100%);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:54px 58px 34px;
}

.brand{
  width:min(382px, 100%);
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:center;
  margin:0 auto 34px;
}

.brand img{
  width:100%;
  height:auto;
  display:block;
  filter:
    brightness(1.28)
    saturate(1.16)
    contrast(1.05)
    drop-shadow(0 22px 28px rgba(0, 0, 0, .42))
    drop-shadow(0 0 20px rgba(0, 157, 255, .22));
}

.login-heading{
  margin-bottom:24px;
}

.login-title{
  margin:0 0 8px;
  color:#fff;
  font-size:2rem;
  line-height:1.12;
  font-weight:900;
  letter-spacing:0;
  text-shadow:0 12px 28px rgba(0,0,0,.30);
}

.login-subtitle{
  max-width:450px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
}

.form-label{
  display:block;
  margin-bottom:9px;
  color:var(--muted-strong);
  font-size:.92rem;
  font-weight:900;
}

.input-group{
  width:100% !important;
  height:var(--control-h);
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--field-border);
  border-radius:999px;
  background:rgba(5, 11, 25, .86);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015), 0 14px 30px rgba(0,0,0,.20);
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.input-group:focus-within{
  border-color:var(--line-strong);
  background:rgba(7, 17, 36, .95);
  box-shadow:
    0 0 0 1px rgba(32, 216, 255, .22),
    0 18px 42px rgba(0, 125, 255, .20);
}

.input-group .form-control{
  width:1% !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

.input-group-text,
.input-group-action{
  width:var(--side-icon);
  flex:0 0 var(--side-icon);
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--aqua);
  font-size:1.12rem;
}

.input-group-action{
  color:rgba(255,255,255,.82);
}

.input-group-text i,
.input-group-action i,
.input-group-text i::before,
.input-group-action i::before{
  display:inline-block !important;
  opacity:1 !important;
  visibility:visible !important;
}

.form-control{
  height:calc(var(--control-h) - 2px);
  padding:.72rem .35rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  font-size:1rem;
  font-weight:800;
  outline:none;
}

.form-control:focus{
  color:var(--text);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}

.form-control::placeholder{
  color:rgba(196, 211, 226, .78);
  opacity:1;
}

.mb-3{ margin-bottom:26px !important; }
.spacing-after-password{ margin-top:10px; }
.spacing-before-button{ margin-top:16px; }

.form-check-input{
  width:20px;
  height:20px;
  margin-top:0;
  border:1px solid rgba(144, 202, 249, .35);
  background-color:rgba(5, 11, 25, .86);
  border-radius:5px;
}

.form-check-input:checked{
  background-color:var(--cyan);
  border-color:var(--cyan);
}

.checkbox-label{
  color:rgba(235, 246, 255, .92);
  font-size:.95rem;
  font-weight:800;
  user-select:none;
}

.btn-login-primary{
  width:100%;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 18px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, #22d6c5 0%, #57e8d7 48%, #86f2e5 100%);
  color:#00131f;
  font-size:1rem;
  font-weight:900;
  letter-spacing:0;
  box-shadow:0 18px 36px rgba(34, 214, 197, .25);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.btn-login-primary:hover{
  color:#00131f;
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 22px 46px rgba(34, 214, 197, .34);
}

.btn-login-primary:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.forgot-password{
  margin-top:12px;
}

.forgot-password a{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border:1px solid rgba(144, 202, 249, .18);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#f4fbff;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}

.forgot-password a:hover{
  border-color:rgba(32, 216, 255, .38);
  background:rgba(32, 216, 255, .08);
  color:#9bebff;
}

.page-footer a{
  color:#cfe4f7;
  text-decoration:none;
  font-weight:900;
}

.page-footer a:hover{
  color:#78e7ff;
}

.page-footer{
  margin-top:auto;
  padding-top:30px;
  color:rgba(173, 194, 215, .86);
  font-size:.82rem;
  line-height:1.55;
  text-align:center;
}

body.swal2-height-auto{ height:100vh !important; }
body.swal2-shown,
body.swal2-iosfix{ padding-right:0 !important; }

@media (max-width: 980px){
  body{
    overflow:hidden;
  }

  .login-shell{
    grid-template-columns:1fr;
    grid-template-rows:190px 1fr;
    height:100vh;
    height:100dvh;
  }

  .login-hero{
    min-height:0;
    height:190px;
  }

  .login-panel{
    min-height:0;
    height:auto;
    border-left:0;
    border-top:1px solid rgba(127, 207, 255, .10);
  }

  .login-panel-inner{
    min-height:0;
    height:100%;
    width:min(560px, 100%);
    padding:22px 28px 16px;
  }

  .brand{
    width:min(270px, 100%);
    margin-bottom:16px;
  }
}

@media (max-width: 620px){
  :root{
    --control-h:48px;
    --side-icon:48px;
  }

  .login-shell{
    grid-template-rows:138px 1fr;
  }

  .login-hero{
    height:138px;
    min-height:0;
  }

  .hero-image{
    background-position:center top;
  }

  .login-panel{
    align-items:flex-start;
  }

  .login-panel-inner{
    padding:16px 18px 12px;
  }

  .brand{
    width:min(224px, 100%);
    margin-bottom:12px;
  }

  .login-heading{
    margin-bottom:14px;
  }

  .login-title{
    font-size:1.38rem;
    margin-bottom:5px;
  }

  .login-subtitle{
    font-size:.88rem;
    line-height:1.38;
  }

  .form-label{
    margin-bottom:5px;
    font-size:.84rem;
  }

  .form-control{
    font-size:.9rem;
  }

  .mb-3{
    margin-bottom:13px !important;
  }

  .spacing-after-password{
    margin-top:4px;
  }

  .spacing-before-button{
    margin-top:10px;
  }

  .form-check-input{
    width:18px;
    height:18px;
  }

  .checkbox-label{
    font-size:.86rem;
  }

  .btn-login-primary{
    min-height:48px;
    padding:10px 16px;
    font-size:.92rem;
  }

  .forgot-password{
    margin-top:8px;
  }

  .forgot-password a{
    min-height:44px;
    padding:9px 14px;
    font-size:.86rem;
  }

  .page-footer{
    padding-top:12px;
    font-size:.72rem;
    line-height:1.42;
  }
}

@media (min-width: 981px) and (max-height: 820px){
  :root{
    --control-h:52px;
    --side-icon:50px;
  }

  .login-panel-inner{
    padding:24px 50px 18px;
  }

  .brand{
    width:min(300px, 100%);
    margin-bottom:18px;
  }

  .login-heading{
    margin-bottom:16px;
  }

  .login-title{
    font-size:1.62rem;
    margin-bottom:5px;
  }

  .login-subtitle{
    font-size:.9rem;
    line-height:1.38;
  }

  .form-label{
    margin-bottom:5px;
    font-size:.84rem;
  }

  .mb-3{
    margin-bottom:14px !important;
  }

  .spacing-after-password{
    margin-top:3px;
  }

  .spacing-before-button{
    margin-top:10px;
  }

  .btn-login-primary{
    min-height:50px;
  }

  .forgot-password{
    margin-top:8px;
  }

  .forgot-password a{
    min-height:44px;
    padding:9px 14px;
  }

  .page-footer{
    padding-top:12px;
    font-size:.74rem;
    line-height:1.45;
  }
}