/* =====================================================
   OZONCORE • LOGIN EXPERIENCE PREMIUM
===================================================== */

/* ===========================
   CONTEXTO LOGIN
=========================== */

html,
body.login-page{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}

body.login-page{
  background:
    radial-gradient(circle at 18% 18%, rgba(0,255,209,0.07) 0%, transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(56,189,248,0.07) 0%, transparent 20%),
    radial-gradient(circle at 84% 82%, rgba(168,85,247,0.05) 0%, transparent 20%),
    linear-gradient(135deg, #020611 0%, #050B16 42%, #0B1222 100%);
  display:block;
  position:relative;
  overflow:hidden;
  color:#F8FAFC;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Glow tecnológico */
body.login-page::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  background:radial-gradient(circle, rgba(0,255,209,0.08), transparent 70%);
  top:-160px;
  right:-160px;
  animation:loginFloat 12s infinite ease-in-out alternate;
  pointer-events:none;
  z-index:0;
}

body.login-page::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0.24), transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.24), transparent 72%);
  pointer-events:none;
  opacity:.13;
  z-index:0;
}

@keyframes loginFloat{
  from{transform:translateY(0px);}
  to{transform:translateY(40px);}
}

/* ===========================
   WRAPPER
=========================== */

.login-wrapper{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 16px;
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  overflow:hidden;
  box-sizing:border-box;
}

/* ===========================
   CARD LOGIN
=========================== */

.login-card{
  width:100%;
  max-width:390px;
  padding:24px 24px 20px;
  border-radius:24px;
  background:rgba(20,30,50,0.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(0,255,209,0.14);
  box-shadow:
    0 0 70px rgba(0,255,209,0.07),
    0 24px 60px rgba(0,0,0,0.40),
    inset 0 0 30px rgba(255,255,255,0.02);
  position:relative;
  overflow:hidden;
  transition:.35s ease;
  box-sizing:border-box;
}

.login-card:hover{
  box-shadow:
    0 0 85px rgba(0,255,209,0.10),
    0 28px 70px rgba(0,0,0,0.44),
    inset 0 0 30px rgba(255,255,255,0.03);
}

.login-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,209,0.45), transparent);
  opacity:.9;
}

/* ===========================
   BRAND
=========================== */

.login-brand{
  text-align:center;
  position:relative;
  margin-bottom:18px;
}

.login-logo-glow{
  width:62px;
  height:62px;
  border-radius:999px;
  margin:0 auto 10px;
  background:radial-gradient(circle, rgba(0,255,209,0.22), rgba(0,255,209,0.06) 55%, transparent 75%);
  filter:blur(1px);
}

.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(0,255,209,0.08);
  border:1px solid rgba(0,255,209,0.14);
  color:#7DFBE6;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:12px;
}

.login-logo{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#F8FAFC;
}

/* ===========================
   HEADER
=========================== */

.login-header{
  text-align:center;
  margin-bottom:20px;
}

.login-header h2{
  font-size:22px;
  font-weight:800;
  margin:0 0 8px;
  letter-spacing:-0.02em;
  color:#F8FAFC;
}

.login-sub{
  font-size:13px;
  color:#94A3B8;
  margin:0 auto;
  max-width:285px;
  line-height:1.5;
}

/* ===========================
   FORM
=========================== */

#loginForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.input-group{
  width:100%;
}

.login-card input{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  color:#fff;
  outline:none;
  transition:.3s ease;
  font-size:15px;
  box-sizing:border-box;
}

.login-card input::placeholder{
  color:#64748B;
}

.login-card input:focus{
  border-color:rgba(0,255,209,0.55);
  box-shadow:0 0 0 4px rgba(0,255,209,0.08), 0 0 18px rgba(0,255,209,0.18);
  background:rgba(255,255,255,0.06);
}

/* ===========================
   BOTÃO
=========================== */

#btnLogin{
  width:100%;
  height:52px;
  border:none;
  border-radius:15px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-blue));
  color:#03131A;
  font-size:15px;
  letter-spacing:.01em;
  transition:.25s ease;
  box-shadow:0 16px 28px rgba(0,255,209,0.16);
}

#btnLogin:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 34px rgba(0,255,209,0.20);
}

#btnLogin:active{
  transform:translateY(0);
}

/* ===========================
   STATUS LOGIN
=========================== */

.login-status{
  margin-top:0;
  font-size:12px;
  font-weight:600;
  min-height:16px;
  text-align:center;
}

.login-status.success{
  color:var(--success);
}

.login-status.error{
  color:var(--danger);
}

/* ===========================
   FOOTER
=========================== */

.login-footer{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.forgot-btn{
  border:none;
  background:transparent;
  color:var(--accent);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  padding:8px 10px;
  border-radius:12px;
  transition:.2s ease;
}

.forgot-btn:hover{
  background:rgba(0,255,209,0.06);
  transform:none;
  box-shadow:none;
}

/* ===========================
   DESKTOP GRANDE
=========================== */
@media (min-width: 1400px){
  body.login-page::before{
    width:700px;
    height:700px;
    top:-190px;
    right:-190px;
  }

  body.login-page::after{
    background-size:42px 42px;
    opacity:.12;
  }
}

/* ===========================
   DESKTOP BAIXO / NOTEBOOK
=========================== */
@media (max-height: 820px){
  .login-wrapper{
    padding:12px 16px;
  }

  .login-card{
    max-width:380px;
    padding:22px 22px 18px;
  }

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

  .login-logo-glow{
    width:56px;
    height:56px;
    margin:0 auto 8px;
  }

  .login-badge{
    font-size:10px;
    padding:6px 11px;
    margin-bottom:10px;
  }

  .login-logo{
    font-size:24px;
  }

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

  .login-header h2{
    font-size:20px;
    margin-bottom:6px;
  }

  .login-sub{
    font-size:12px;
    line-height:1.45;
    max-width:270px;
  }

  #loginForm{
    gap:12px;
  }

  .login-card input,
  #btnLogin{
    height:48px;
  }

  .login-footer{
    margin-top:10px;
  }

  .forgot-btn{
    font-size:12px;
    padding:6px 8px;
  }
}

/* ===========================
   TABLET / NOTEBOOK
=========================== */
@media (max-width: 1024px){
  body.login-page::before{
    width:520px;
    height:520px;
    top:-130px;
    right:-130px;
  }

  body.login-page::after{
    background-size:34px 34px;
    opacity:.11;
  }

  .login-card{
    max-width:385px;
  }
}

/* ===========================
   MOBILE
=========================== */
@media (max-width:768px){

  html,
  body.login-page{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  body.login-page::before{
    width:400px;
    height:400px;
    top:-100px;
    right:-100px;
  }

  body.login-page::after{
    background-size:28px 28px;
    opacity:.10;
  }

.login-wrapper{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  margin:0;
  overflow:hidden;
}

  .login-card{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  max-width:100%;
  border-radius:0;
  padding:
    calc(env(safe-area-inset-top, 0px) + 32px)
    20px
    calc(env(safe-area-inset-bottom, 0px) + 24px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}

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

  .login-logo-glow{
    width:56px;
    height:56px;
    margin-bottom:8px;
  }

  .login-badge{
    font-size:10px;
    padding:6px 10px;
    margin-bottom:10px;
  }

  .login-logo{
    font-size:24px;
  }

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

  .login-header h2{
    font-size:22px;
    line-height:1.08;
    margin-bottom:6px;
  }

  .login-sub{
    font-size:12px;
    max-width:260px;
    line-height:1.45;
  }

  #loginForm{
    gap:12px;
  }

  .login-card input,
  #btnLogin{
    height:50px;
    font-size:15px;
    border-radius:14px;
  }

  .login-status{
    font-size:12px;
    min-height:16px;
  }

  .login-footer{
    margin-top:12px;
  }

  .forgot-btn{
    font-size:12px;
    padding:8px 10px;
  }
}

/* ===========================
   MOBILE PEQUENO
=========================== */
@media (max-width:380px){

  .login-card{
    padding:
      calc(env(safe-area-inset-top, 0px) + 28px)
      18px
      calc(env(safe-area-inset-bottom, 0px) + 22px);
    border-radius:0;
  }

  .login-badge{
    font-size:10px;
    margin-bottom:10px;
  }

  .login-logo{
    font-size:28px;
  }

  .login-header{
    margin-bottom:20px;
  }

  .login-header h2{
    font-size:22px;
    line-height:1.06;
    margin-bottom:10px;
  }

  .login-sub{
    font-size:13px;
    line-height:1.4;
  }

  #loginForm{
    gap:14px;
  }

  .login-card input,
  #btnLogin,
  .forgot-btn{
    height:54px;
    border-radius:16px;
    font-size:15px;
  }

  .login-footer{
    margin-top:16px;
  }
}