/* ════════════════════════════════════════════════════════════
   Login — Olho no Placar
   ════════════════════════════════════════════════════════════ */

/* ── Layout da cena ───────────────────────────────────── */
.cena {
  position:        relative;
  min-height:      100dvh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--esp-6) var(--esp-4);
  overflow:        hidden;
  /*
   * Atmosfera: leve glow verde-turfa no canto inferior-esquerdo
   * evoca o reflexo do refletor na grama sintética.
   */
  background:
    radial-gradient(ellipse 90% 35% at 5% 100%,
      rgba(30, 46, 32, 0.32) 0%, transparent 70%),
    var(--cor-noite);
}

/* Vinheta radial — empurra o olhar para o centro */
.cena::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse 70% 70% at 50% 50%,
                    transparent 30%, rgba(14, 15, 19, 0.75) 100%);
  pointer-events: none;
  z-index:        0;
}

/* ── Elemento de assinatura: display de 7 segmentos ──── */
/*
 * Exibe "1:0" em estilo LED ambar — UMA ocorrencia, como textura
 * de fundo. Grande, semi-transparente, com glow sutil.
 */
.deco-sete-seg {
  position:       absolute;
  right:          -4%;
  bottom:         -6%;
  width:          min(68vw, 480px);
  opacity:        0.075;
  pointer-events: none;
  user-select:    none;
  filter:         drop-shadow(0 0 28px rgba(232, 146, 10, 0.5));
  z-index:        0;
  animation:      pulso-glow var(--anim-dur) ease-in-out infinite alternate;
}

@keyframes pulso-glow {
  from { opacity: 0.065; }
  to   { opacity: 0.105; }
}

/* ── Card de login ────────────────────────────────────── */
.login-wrapper {
  position:  relative;
  z-index:   1;
  width:     100%;
  max-width: 408px;
}

.login-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--esp-6);
  background:     linear-gradient(
                    175deg,
                    rgba(32, 35, 44, 1) 0%,
                    var(--cor-grafite) 50%
                  );
}

/* ── Area da logo ─────────────────────────────────────── */
.logo-area {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--esp-3);
  text-align:     center;
}

/*
 * LOGO: Para trocar pelo arquivo real, substitua o <svg> dentro
 * de .logo-marca por <img src="logo.svg" alt="Olho no Placar">
 * ou pelo SVG inline exportado.
 */
.logo-marca {
  width:     92px;
  height:    auto;
  filter:    drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

.logo-nome {
  font-size:   var(--tipo-4xl);
  line-height: 0.95;
  color:       var(--cor-areia);
}

.logo-subtitulo {
  font-size:      var(--tipo-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--cor-texto-fraco);
}

/* Divisor ambar entre logo e formulario */
.divisor {
  height:     1px;
  background: linear-gradient(90deg,
                transparent 0%,
                rgba(232, 146, 10, 0.5) 35%,
                rgba(232, 146, 10, 0.5) 65%,
                transparent 100%);
}

/* ── Formulario ───────────────────────────────────────── */
.form-login {
  display:        flex;
  flex-direction: column;
  gap:            var(--esp-5);
}

.grupo-campos {
  display:        flex;
  flex-direction: column;
  gap:            var(--esp-4);
}

.link-esqueci {
  display:         block;
  text-align:      right;
  font-size:       var(--tipo-sm);
  color:           var(--cor-texto-fraco);
  text-decoration: none;
  margin-top:      calc(-1 * var(--esp-2));
  transition:      color var(--trans-rapida);
}
.link-esqueci:hover {
  color:           var(--cor-placar);
  text-decoration: none;
  opacity:         1;
}

/* Spinner de carregamento no botao */
.btn-primario[aria-busy="true"] { pointer-events: none; }

.spinner {
  width:         17px;
  height:        17px;
  border:        2.5px solid rgba(14, 15, 19, 0.28);
  border-top-color: var(--cor-noite);
  border-radius: 50%;
  flex-shrink:   0;
  animation:     girar 0.65s linear infinite;
}

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

/* ── Rodape ───────────────────────────────────────────── */
.rodape-login {
  text-align:  center;
  font-size:   var(--tipo-xs);
  color:       rgba(240, 237, 228, 0.2);
  padding-top: var(--esp-5);
}

/* ── Responsivo ───────────────────────────────────────── */
@media (max-width: 440px) {
  .card {
    border-radius: var(--raio-lg);
    padding:       var(--esp-6);
  }
  .logo-nome  { font-size: var(--tipo-3xl); }
  .deco-sete-seg {
    width:  88vw;
    right:  -12%;
    bottom: -4%;
  }
}

@media (min-height: 800px) {
  .cena { padding-top: var(--esp-12); padding-bottom: var(--esp-12); }
}