/* Tela de entrada do Painel ROI.
   Fundo escuro fixo: a logo dourada da Ascensional Alchemy pede fundo profundo,
   e a tela de login e o unico lugar do painel onde a marca aparece sozinha. */

.tela-login {
  --fundo: #0B0B14;
  --cartao: rgba(28, 28, 40, .72);
  --borda: rgba(255, 255, 255, .09);
  --texto: #F4F4FA;
  --apagado: #9EA2C4;
  background: var(--fundo);
  color: var(--texto);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
}

/* aurora: os dois polos da marca se encontrando, bem devagar.
   Especificidade alta de proposito: o style.css tem 'body > *:not(.atmosfera)'
   que forcaria position:relative e colapsaria isto dentro do grid. */
body.tela-login > .aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.polo {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .85;
}
.polo-n {
  width: 62vw; height: 62vw; min-width: 460px; min-height: 460px;
  left: -12vw; top: -16vw;
  background: radial-gradient(circle, rgba(45,75,255,.95) 0%, rgba(45,75,255,.35) 42%, transparent 70%);
  animation: deriva-n 22s ease-in-out infinite alternate;
}
.polo-s {
  width: 56vw; height: 56vw; min-width: 420px; min-height: 420px;
  right: -10vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(255,59,107,.9) 0%, rgba(255,59,107,.30) 42%, transparent 70%);
  animation: deriva-s 26s ease-in-out infinite alternate;
}
.veu {
  position: absolute; inset: 0;
  background: radial-gradient(64% 50% at 50% 48%, rgba(123,63,242,.42), transparent 74%);
}
/* granulado leve: tira o aspecto de degrade chapado */
.aurora::after {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes deriva-n { to { transform: translate3d(7vw, 5vh, 0) scale(1.10); } }
@keyframes deriva-s { to { transform: translate3d(-6vw, -5vh, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .polo { animation: none; } }

body.tela-login > .login-wrap { position: relative; z-index: 1; width: 100%; max-width: 396px; }

.login-card {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 22px;
  padding: 38px 34px 34px;
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255,255,255,.07);
  text-align: center;
  animation: entra .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

.login-logo { width: 186px; height: auto; display: block; margin: 0 auto 26px; }

.tela-login h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 27px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
}
.tela-login h1 em { font-style: normal; }
.tela-login .grad {
  background: linear-gradient(96deg, #6C88FF, #A278F5 52%, #FF6B90);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-sub { font-size: 13.5px; color: var(--apagado); margin-top: 6px; margin-bottom: 26px; }

.erro {
  font-size: 13px; color: #FFB0BE;
  background: rgba(255, 59, 107, .12);
  border: 1px solid rgba(255, 59, 107, .30);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 18px;
}

.campo { display: block; text-align: left; margin-bottom: 14px; }
.campo span {
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--apagado); margin-bottom: 7px;
}
.campo input {
  width: 100%; font: inherit; font-size: 15px; color: var(--texto);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--borda);
  border-radius: 11px; padding: 12px 14px;
  transition: border-color .18s ease, background .18s ease;
}
.campo input::placeholder { color: #6E7192; }
.campo input:focus {
  outline: none;
  border-color: rgba(162, 120, 245, .75);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(123, 63, 242, .18);
}

.btn-entrar {
  width: 100%; margin-top: 10px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  border: 0; border-radius: 11px; padding: 13px 18px;
  background: linear-gradient(96deg, #2D4BFF, #7B3FF2 52%, #FF3B6B);
  background-size: 160% 100%; background-position: 0% 50%;
  box-shadow: 0 14px 34px -16px rgba(123, 63, 242, .95);
  transition: background-position .5s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-entrar:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 18px 40px -14px rgba(123, 63, 242, 1); }
.btn-entrar:active { transform: translateY(0); }


@media (max-width: 420px) {
  .login-card { padding: 30px 22px 28px; border-radius: 18px; }
  .login-logo { width: 158px; margin-bottom: 22px; }
}