/* =====================================================================
   FUNCIONAL ELITE — página de login da gestão (templates/login.php).
   Depende dos tokens e dos botões de goleiro-home.css, carregado antes.
   ===================================================================== */

body.ga-login { min-height: 100vh; display: flex; flex-direction: column; }

.ga-login-wrap {
  flex: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 6vw, 84px) 0;
}

/* Fundo: mesmo brilho preto/dourado do hero da landing. */
body.ga-login::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 10% 8%, rgba(255, 183, 0, .16), transparent 62%),
    radial-gradient(760px 500px at 92% 92%, rgba(255, 183, 0, .12), transparent 60%);
}

/* ── Coluna da esquerda ───────────────────────────────────────────── */
.ga-login-story h1 { font-size: clamp(32px, 4.4vw, 58px); margin: 22px 0 0; }
.ga-login-story h1 em { display: block; font-style: normal; color: var(--ga-gold); }
.ga-login-story p { color: var(--ga-muted); max-width: 52ch; margin: 18px 0 0; }

.ga-login-selos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ga-login-selos span {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--ga-line); border-radius: 999px;
  background: rgba(255, 255, 255, .04); padding: 9px 16px;
  font-size: 13.5px; color: var(--ga-muted);
}
.ga-login-selos i { color: var(--ga-green-3); }

/* ── Cartão do formulário ─────────────────────────────────────────── */
.ga-login-card {
  background: linear-gradient(180deg, var(--ga-panel), var(--ga-ink-2));
  border: 1px solid var(--ga-line); border-radius: 26px;
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.ga-login-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.ga-login-head img {
  width: 62px; height: 62px; object-fit: contain;
  background: #fff; border-radius: 16px; padding: 5px;
}
.ga-login-head small {
  display: block; color: var(--ga-gold);
  font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
}
.ga-login-head h2 { font-size: 26px; margin-top: 4px; }

.ga-login-card label {
  display: block; margin: 18px 0 8px;
  font-family: Oswald, sans-serif; font-size: 12.5px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--ga-muted);
}
.ga-input {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--ga-line); border-radius: 14px;
  background: rgba(255, 255, 255, .04); padding: 0 16px;
  transition: border-color .2s ease, background .2s ease;
}
.ga-input:focus-within { border-color: var(--ga-gold); background: rgba(255, 255, 255, .07); }
.ga-input i { color: var(--ga-muted); }
.ga-input input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ga-text); font-family: inherit; font-size: 16px; padding: 15px 0;
}
.ga-input input::placeholder { color: rgba(169, 187, 176, .55); }

.ga-login-submit {
  width: 100%; margin-top: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 24px; border: 0; border-radius: 999px;
  background: var(--ga-gold); color: #1A1200;
  font-family: Oswald, sans-serif; font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(255, 183, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ga-login-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 183, 0, .38); }

.ga-login-links { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ga-line); display: grid; gap: 10px; }
.ga-login-links a {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--ga-line); border-radius: 14px;
  padding: 13px 16px; font-size: 14.5px; color: var(--ga-muted);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ga-login-links a:hover { border-color: var(--ga-green-3); color: var(--ga-text); background: rgba(47, 168, 91, .10); }
.ga-login-links i { color: var(--ga-green-3); }

/* ── Alertas (flash) ──────────────────────────────────────────────── */
.ga-alert {
  display: flex; align-items: center; gap: 11px;
  border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; font-size: 14.5px;
}
.ga-alert.error { background: rgba(220, 38, 38, .14); border: 1px solid rgba(248, 113, 113, .45); color: #FCA5A5; }
.ga-alert.success { background: rgba(47, 168, 91, .14); border: 1px solid rgba(47, 168, 91, .45); color: #86EFAC; }

@media (max-width: 900px) {
  .ga-login-wrap { grid-template-columns: 1fr; }
  .ga-login-story { order: 2; }
}