/* =========================================================
   LOGIN.CSS — FINAL / ESTÁVEL / PRODUÇÃO
========================================================= */

/* ===============================
   VARIÁVEIS
================================ */
:root{
  --bg-top: #07070a;
  --bg-mid: #0b0c10;

  --accent: #F3F9FF;
  --muted: rgba(255,255,255,0.64);
  --muted-2: rgba(255,255,255,0.20);
  --line: rgba(255,255,255,0.10);

  --card-radius: 14px;
  --glass: 6px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  --blue: #2196F3;
  --red: #ff3c3c;
}

/* ===============================
   RESET / BASE
================================ */
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  font-family:var(--font);
  color:var(--accent);
  background: var(--bg-mid);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* ===============================
   FUNDO
================================ */
#bg-image{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  opacity:.8;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:-2;
}

body::before{ content:none!important }

#bg-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ===============================
   LAYOUT
================================ */
.center-wrap{
  position:relative;
  z-index:3;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.login-card{
  width:min(460px,94%);
  background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.005));
  border-radius:var(--card-radius);
  padding:34px;
  border:1px solid rgba(255,255,255,.03);
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(var(--glass));
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ===============================
   LOGO / TÍTULO
================================ */
.logo-container{
  text-align:center;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.pc-logo{
  max-width:120px;
  margin:0 auto;
  display:block;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.4));
}

.login-title{
  margin:0 0 6px;
  font-weight:700;
  letter-spacing:3px;
  font-size:1.6rem;
  text-align:center;
  text-shadow:0 0 4px rgba(255,255,255,.2);
}

/* ===============================
   FLASH
================================ */
.flashes{
  list-style:none;
  padding:0;
  margin:0 0 6px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.flashes li{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
  font-size:.95rem;
}

.flash.error{ color:#ffb3b3 }
.flash.success{ color:#a8ffcf }

/* ===============================
   FORM
================================ */
.login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.field{ position:relative; margin:6px 0 }

.field-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

.icon{
  width:26px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  opacity:.4;
}

.field input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:var(--accent);
  font-size:1rem;
  padding:10px 6px;
}

.field input::placeholder{ color:var(--muted-2) }

.underline{
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  border-bottom:1px solid var(--line);
  transition:border-color .16s;
}

.field-inner:focus-within + .underline{
  border-bottom-color:var(--accent);
}

.row{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
}

.checkbox{
  display:flex;
  gap:8px;
  font-size:.9rem;
  color:var(--muted);
}

.checkbox span{ font-size:.8rem; opacity:.75 }

/* ===============================
   BOTÃO
================================ */
.btn-outline{
  margin-top:8px;
  height:44px;
  border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  color:var(--accent);
  font-weight:700;
  letter-spacing:1.6px;
  cursor:pointer;
  transition:.2s;
}

.btn-outline:hover{
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
}

/* ===============================
   BOT IA
================================ */
.bot-login{
  width:110px;
  transform-origin:center;
  animation:
    bot-float 1.7s ease-in-out infinite,
    antenna-rotate 2.4s ease-in-out infinite;
}

/* flutuação */
@keyframes bot-float{
  0%{ transform:translateY(0) }
  50%{ transform:translateY(-8px) }
  100%{ transform:translateY(0) }
}

/* micro rotação */
@keyframes antenna-rotate{
  0%{ rotate:0deg }
  50%{ rotate:1.5deg }
  100%{ rotate:0deg }
}

/* ===============================
   BOT — VALIDANDO
================================ */
.bot-validating{
  animation:
    bot-float 4s ease-in-out infinite,
    antenna-rotate 6s ease-in-out infinite,
    bot-blink 1.1s ease-in-out infinite;
}

@keyframes bot-blink{
  0%{
    filter:drop-shadow(0 0 6px rgba(33,150,243,.4));
    opacity:1;
  }
  50%{
    filter:drop-shadow(0 0 22px rgba(33,150,243,.95));
    opacity:.85;
  }
  100%{
    filter:drop-shadow(0 0 6px rgba(33,150,243,.4));
    opacity:1;
  }
}

/* ===============================
   BOT — ERRO (AGITADO)
================================ */
.bot-error{
  animation:
    bot-error-pulse 1s ease-in-out 3,
    bot-shake .18s linear 8;
}



@keyframes bot-error-pulse{
  0%{ transform:scale(1) }
  50%{ transform:scale(1.15) }
  100%{ transform:scale(1) }
}

@keyframes bot-shake{
  0%{ transform:translateX(0) }
  25%{ transform:translateX(-6px) }
  50%{ transform:translateX(6px) }
  75%{ transform:translateX(-6px) }
  100%{ transform:translateX(0) }
}

/* ===============================
   ACESSIBILIDADE
================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
}

/* ===============================
   RESPONSIVO
================================ */
@media (max-width:420px){
  .login-card{ padding:20px }
  .login-title{ font-size:1.3rem; letter-spacing:2px }
  .pc-logo{ max-width:90px }
}