/* =============================================
   RECARGASYA — login.css
   Pantalla de credenciales: imagen de fondo + olas +
   efecto plexus vectorial (canvas, login.js)
   ============================================= */

.login-page {
  --lx: 50%;
  --ly: 45%;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
  background: #000000;
  isolation: isolate;
}

/* Imagen de fondo (ligeramente más pequeña) + movimiento tipo olas */
.login-bg {
  position: absolute;
  /* Margen extra para que el zoom en la animación no recorte */
  inset: -8%;
  z-index: 0;
  background-color: #000000;
  background-image: url('../img/login-bg-waves.png');
  background-repeat: no-repeat;
  background-position: center center;
  /* Ligeramente más pequeña que cover: borde negro; animación loginBgWave sin cambios */
  background-size: 92%;
  animation: loginBgWave 22s ease-in-out infinite;
  will-change: transform;
}

@keyframes loginBgWave {
  0%, 100% {
    transform: scale(1.06) translate(0%, 0%);
  }
  25% {
    transform: scale(1.1) translate(1.5%, -1.8%);
  }
  50% {
    transform: scale(1.14) translate(-1%, 1.2%);
  }
  75% {
    transform: scale(1.08) translate(-1.6%, -0.6%);
  }
}

/* Viñeta suave para legibilidad del formulario */
.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

/* Brillo cian central tipo referencia plexus (sigue al cursor) */
.login-cursor-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 45vmin at var(--lx) var(--ly),
      rgba(34, 211, 238, 0.12) 0%,
      rgba(56, 189, 248, 0.06) 38%,
      transparent 72%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Canvas plexus (por encima del fondo, bajo la tarjeta) */
.login-line-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 44rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(151, 71, 255, 0.06);
}

.login-logo {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.login-logo-icon {
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto var(--sp-4);
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  box-shadow: var(--shadow-yellow);
}

.login-logo-bolt {
  width: 3.2rem;
  height: 3.2rem;
  display: block;
}

.login-logo-name {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.login-logo-recargas {
  color: var(--dark);
}

.login-logo-yamx {
  color: var(--purple-mid);
}

.login-logo-sub {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin-top: var(--sp-2);
  font-weight: 500;
}

.login-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #991B1B;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-5);
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.login-btn {
  width: 100%;
  padding: 1.6rem 2.4rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--purple-mid), var(--purple));
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 800;
  box-shadow: var(--shadow-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(151, 71, 255, 0.35);
}

.login-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.login-footer-wrap {
  margin-top: var(--sp-8);
  text-align: center;
}

.login-footer {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--gray);
}

@media (prefers-reduced-motion: reduce) {
  .login-bg {
    animation: none;
    inset: 0;
    transform: scale(1.05);
  }

  .login-cursor-spot {
    opacity: 0.4;
    mix-blend-mode: normal;
    background: radial-gradient(circle at 50% 45%, rgba(255, 157, 0, 0.12), transparent 65%);
  }

  .login-line-canvas {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: var(--sp-6) var(--sp-5);
  }
}