/* ---------- variables ---------- */ 
:root{
  --neon: #ff0033;             /* color principal del brillo */
  --grid: rgba(255, 0, 0, 0.06);   /* color de la ret¨ªcula */
}

/* ---------- fondo ---------- */
.login-bg{
  min-height:100vh;
  background:#000;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
}

/* ---------- tarjeta ---------- */
.neon-box{
  background:#000;
  border:2px solid var(--neon);
  border-radius:1rem;
  box-shadow:
      0 0 6px   var(--neon),
      0 0 16px  var(--neon),
      0 0 32px  var(--neon);
  animation:pulse 2s ease-in-out infinite alternate;
}
@keyframes pulse{
  from{box-shadow:0 0 4px var(--neon),0 0 10px var(--neon);}
  to  {box-shadow:0 0 10px var(--neon),0 0 40px var(--neon);}
}

/* ---------- logo ---------- */
.logo{max-width:120px}

/* ---------- bot¨®n ---------- */
.btn-neon{
  background:var(--neon);
  color:#000;
  font-weight:600;
  border:none;
  box-shadow:
      0 0 6px var(--neon),
      0 0 14px var(--neon);
  transition:transform .15s,box-shadow .15s;
}
.btn-neon:hover,
.btn-neon:focus{
  box-shadow:
      0 0 10px var(--neon),
      0 0 28px var(--neon),
      inset 0 0 10px #000;
  transform:translateY(-2px);
  color:#000;
}

/* ---------- formularios ---------- */
.form-control,
.form-select{
  border:1px solid #444;
}
.form-control:focus{
  border-color:var(--neon);
  box-shadow:0 0 0 .25rem rgba(255, 0, 51, 0.25);
  background:#000;
  color:#fff;
}

/* ---------- Fireflies ---------- */
.firefly {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--neon) 0%, transparent 70%);
  filter: drop-shadow(0 0 4px var(--neon));
  animation: firefly-move 12s linear infinite,
             firefly-glow 3s ease-in-out infinite alternate;
}
.firefly::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle,
                              rgba(var(--neon-rgb), 0.4) 0%,
                              rgba(var(--neon-rgb), 0) 70%);
  filter: blur(4px);
}

@keyframes firefly-move {
  to {
    transform: translate(200px, -150px)
               rotate(360deg)
               scale(1.2);
  }
}
@keyframes firefly-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}