:root{
  --primary:#7c3aed;
  --glow:0 0 10px rgba(124,58,237,0.6),
         0 0 20px rgba(124,58,237,0.4),
         0 0 40px rgba(124,58,237,0.2);
}

button{
  box-shadow:var(--glow);
}

button:hover{
  box-shadow:
    0 0 15px var(--primary),
    0 0 30px var(--primary);
}

.card, .product{
  border:1px solid rgba(124,58,237,0.2);
}

.card:hover, .product:hover{
  box-shadow:0 0 20px var(--primary);
}


/* =========================
   VARIABLES GLOBALES
========================= */
:root{
  --primary:#7c3aed;
  --glow:
    0 0 10px rgba(124,58,237,0.6),
    0 0 20px rgba(124,58,237,0.4),
    0 0 40px rgba(124,58,237,0.2);
}

/* =========================
   TEXTO NEON
========================= */
.glow-text{
  color:#fff;
  text-shadow:
    0 0 5px var(--primary),
    0 0 10px var(--primary),
    0 0 20px var(--primary);
}

/* =========================
   BOTONES
========================= */
button{
  background:var(--primary);
  color:white;
  box-shadow:var(--glow);
  transition:0.3s;
}

button:hover{
  box-shadow:
    0 0 15px var(--primary),
    0 0 30px var(--primary),
    0 0 60px var(--primary);
  transform:translateY(-2px);
}

/* =========================
   CARDS / PRODUCTOS
========================= */
.card, .product{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(124,58,237,0.2);
  backdrop-filter:blur(10px);
  border-radius:12px;
  transition:0.3s;
  position:relative;
}

.card:hover, .product:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 10px var(--primary),
    0 0 30px rgba(124,58,237,0.4),
    0 0 60px rgba(124,58,237,0.2);
}

/* =========================
   HEADER
========================= */
.header h2{
  color:var(--primary);
  text-shadow:
    0 0 10px var(--primary),
    0 0 20px var(--primary);
}

/* =========================
   INPUTS / FORM
========================= */
input, textarea, select{
  background:#020617;
  color:white;
  border:1px solid rgba(124,58,237,0.2);
  transition:0.3s;
}

input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 10px var(--primary);
}

/* =========================
   STOCK
========================= */
.ok{
  color:#22c55e;
  text-shadow:0 0 10px #22c55e;
}

.no{
  color:#ef4444;
  text-shadow:0 0 10px #ef4444;
}

/* =========================
   DASHBOARD
========================= */
.stat{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(124,58,237,0.2);
  border-radius:12px;
  padding:20px;
  text-align:center;
  transition:0.3s;
}

.stat:hover{
  box-shadow:
    0 0 10px var(--primary),
    0 0 30px rgba(124,58,237,0.5);
}

.stat p{
  text-shadow:0 0 15px var(--primary);
}

/* COLORES EXTRA */
.stat:nth-child(2) p{ color:#22c55e; }
.stat:nth-child(3) p{ color:#38bdf8; }

/* =========================
   BORDE NEON ANIMADO
========================= */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  padding:1px;
  background:linear-gradient(45deg,#7c3aed,transparent,#7c3aed);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:0.3s;
}

.card:hover::before{
  opacity:1;
}