/* ── Variables globales ─────────────────────────────── */
:root {
  --bg: #07101e;
  --surf: #0c1929;
  --card: #101f32;
  --card2: #132438;
  --bord: #1b3050;
  --bord2: #243d5a;
  --txt: #dde8f5;
  --muted: #4a6584;
  --muted2: #6b8aaa;
  --acc: #2563eb;
  --acc2: #3b82f6;
  --acc3: #60a5fa;
  --green: #22c55e;
  --orange: #f97316;
  --red: #ef4444;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --font-ui: 'Syne', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ── Fondo animado ──────────────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.bg-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.glow-1 {
  top: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(37, 99, 235, .18) 0%, transparent 70%);
  animation: floatA 12s ease-in-out infinite;
}

.glow-2 {
  bottom: -200px;
  right: -200px;
  background: radial-gradient(circle, rgba(139, 92, 246, .14) 0%, transparent 70%);
  animation: floatB 14s ease-in-out infinite;
}

@keyframes floatA {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(40px, 30px); }
}

@keyframes floatB {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-30px, -40px); }
}

/* ── Card base ──────────────────────────────────────── */
.card {
  background: var(--surf);
  border: 1px solid var(--bord);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}

/* ── Brand ──────────────────────────────────────────── */
.brand {
  text-align: center;
  margin-bottom: 28px;
}

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--acc) 0%, #7c3aed 100%);
  border-radius: 14px;
  font-size: 22px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .4);
}

.brand h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--txt);
}

.brand p {
  font-size: 12px;
  color: var(--muted2);
  font-family: var(--font-mono);
  margin-top: 4px;
}

/* ── Botón primario ─────────────────────────────────── */
.btn-primary {
  display: inline-block;
  width: 100%;
  background: linear-gradient(135deg, var(--acc) 0%, #4f46e5 100%);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .18s, transform .12s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
  margin-top: 4px;
  letter-spacing: .2px;
  text-align: center;
}

.btn-primary:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .45);
}

.btn-primary:active { transform: translateY(0); }

/* ── Divider ────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bord);
}

/* ── Footer ─────────────────────────────────────────── */
.auth-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* ── Entrada animada ────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}