:root{
  --amarillo:#ffd400;
  --rojo:#d90000;
  --claro:#f4f4f4;
  --oscuro:#121212;
  --txt-claro:#000;
  --txt-oscuro:#fff;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--claro);
  color:var(--txt-claro);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  transition:.3s;
}

body.dark{
  background:var(--oscuro);
  color:var(--txt-oscuro);
}

.player{
  width:100%;
  max-width:360px;
  background:rgba(255,255,255,.95);
  border-radius:22px;
  padding:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.3);
  text-align:center;
  animation:fadeUp .6s ease;
}

body.dark .player{background:#1e1e1e;}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

.logo{
  width:170px;
  margin-bottom:6px;
}

.status{
  font-weight:bold;
  margin:6px 0;
}

.status.live{color:red;}
.status.auto{color:green;}

/* ONDAS */
.waves{
  display:none;
  justify-content:center;
  gap:4px;
  margin:10px 0;
}

.wave{
  width:6px;
  height:20px;
  background:linear-gradient(var(--amarillo),var(--rojo));
  border-radius:3px;
  animation:wave 1s infinite ease-in-out;
}

.wave:nth-child(2){animation-delay:.1s}
.wave:nth-child(3){animation-delay:.2s}
.wave:nth-child(4){animation-delay:.3s}
.wave:nth-child(5){animation-delay:.4s}

@keyframes wave{
  0%{height:8px}
  50%{height:28px}
  100%{height:8px}
}

/* AUTODJ */
.cover{
  width:220px;
  height:220px;
  margin:10px auto;
  border-radius:16px;
  overflow:hidden;
  display:none;
}

.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.song{
  font-size:15px;
  margin-bottom:10px;
  display:none;
}

/* CONTROLES */
.controls{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:10px;
}

button{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  font-size:20px;
  cursor:pointer;
  background:#ccc;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:.15s;
}

button.active{
  background:linear-gradient(135deg,var(--amarillo),var(--rojo));
}

button:hover{transform:scale(1.1);}
button:active{transform:scale(.92);}

.volume{
  margin-top:15px;
}

input[type=range]{width:100%;}

.toggle{
  margin-top:10px;
  font-size:14px;
  opacity:.7;
  cursor:pointer;
}