/* =========================================================
   Estilos globales – Login Social (index, login, perfil)
   ========================================================= */

/* 🌌 Layout base */
body {
  background: radial-gradient(circle at top left, #0d0d0d, #000);
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* =========================================================
   Landing / Marca principal
   ========================================================= */

/* Logo </> grande del home */
.logo-icon {
  font-size: 4rem;
  font-weight: 900;
  color: #e50914;
  text-shadow: 0 0 25px rgba(229, 9, 20, 0.9);
  animation: glowPulse 2s ease-in-out infinite;
}

/* Animación de pulso / brillo */
@keyframes glowPulse {
  0%,
  100% {
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.7), 0 0 40px rgba(229, 9, 20, 0.4);
    transform: scale(1);
  }

  50% {
    text-shadow: 0 0 40px rgba(229, 9, 20, 1), 0 0 80px rgba(229, 9, 20, 0.8);
    transform: scale(1.05);
  }
}

/* Texto de marca */
.brand {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 15px rgba(229, 9, 20, 0.5);
}

/* Subtítulo de la landing */
.tagline {
  font-size: 1rem;
  color: #bbb;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

/* Botón principal "Ir al login" */
.btn-chingon {
  background: linear-gradient(90deg, #e50914, #ff0033);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

.btn-chingon:hover {
  background: linear-gradient(90deg, #ff0033, #e50914);
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(229, 9, 20, 0.8);
}

/* Footer fijo en la parte inferior */
.footer {
  position: absolute;
  bottom: 15px;
  font-size: 0.9rem;
  color: #666;
}

.footer a {
  color: #e50914;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* =========================================================
   Fondo general para pantallas internas (login / perfil)
   ========================================================= */

.bg-gradient-dark {
  background: radial-gradient(
    circle at top,
    #1f2933 0,
    #020617 50%,
    #000000 100%
  );
}

/* =========================================================
   Tarjetas de login y perfil
   ========================================================= */

/* Card del login */
.login-card {
  max-width: 380px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #e5e7eb;
}

/* Card del perfil */
.profile-card {
  max-width: 540px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e5e7eb;
}

/* Logo de marca en login */
.brand-logo .brand-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: #0f172a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.brand-logo span {
  text-shadow: 0 0 12px rgba(229, 9, 20, 0.7);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.brand-logo span:hover {
  transform: scale(1.1);
  text-shadow: 0 0 25px rgba(229, 9, 20, 1);
}

/* =========================================================
   Botones sociales
   ========================================================= */

/* Botón Google custom */
.btn-google {
  background-color: #ffffff;
  color: #374151;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.btn-google:hover {
  background-color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.6);
}

/* =========================================================
   Avatares en el perfil
   ========================================================= */

/* Avatar de perfil cuando viene foto de Google/Facebook */
.profile-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid rgba(249, 115, 22, 0.9); /* naranja */
}

/* Placeholder si no trae avatar */
.avatar-placeholder {
  width: 96px;
  height: 96px;
  background: #111827;
  border: 2px dashed #4b5563;
  color: #f9fafb;
  font-size: 2rem;
}