/* GR Audio Player v1.1 — GR Diseño Digital */
.gr-audio-player{
  --gr-btn-size:52px;--gr-btn-bg:rgba(139,92,246,.18);--gr-btn-bg-hover:rgba(139,92,246,.32);
  --gr-btn-border:rgba(139,92,246,.35);--gr-btn-border-hover:rgba(139,92,246,.6);
  --gr-btn-color:#A78BFA;--gr-bars-color:#A78BFA;--gr-btn-radius:50%;
  --gr-btn-shadow:0 4px 20px rgba(139,92,246,.25);
  --gr-btn-shadow-hover:0 8px 28px rgba(139,92,246,.45);
  --gr-backdrop:blur(16px);--gr-transition:.35s cubic-bezier(.4,0,.2,1);
  display:inline-flex;align-items:center;gap:8px;
}

/* ── Botón principal ── */
.gr-audio-btn{
  width:var(--gr-btn-size);height:var(--gr-btn-size);border-radius:var(--gr-btn-radius);
  background:var(--gr-btn-bg);backdrop-filter:var(--gr-backdrop);-webkit-backdrop-filter:var(--gr-backdrop);
  border:1px solid var(--gr-btn-border);color:var(--gr-btn-color);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--gr-transition);box-shadow:var(--gr-btn-shadow);outline:none;flex-shrink:0;position:relative;
}
.gr-audio-btn:hover{
  background:var(--gr-btn-bg-hover);border-color:var(--gr-btn-border-hover);
  box-shadow:var(--gr-btn-shadow-hover);transform:scale(1.08);
}

/* ── Animación de glow cuando está reproduciendo ── */
.gr-audio-btn.playing{
  animation:grGlow 2.5s ease infinite;
  border-color:var(--gr-btn-border-hover);
}
@keyframes grGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.5),var(--gr-btn-shadow);}
  50%    {box-shadow:0 0 0 12px rgba(139,92,246,0),0 0 0 6px rgba(139,92,246,.15),var(--gr-btn-shadow);}
}

/* ── Estado "esperando interacción" — parpadeo suave ── */
.gr-audio-btn.gr-waiting{
  animation:grWait 3s ease infinite;
}
@keyframes grWait{
  0%,100%{opacity:1;}40%,60%{opacity:.5;}
}

/* ── Ripple en click ── */
.gr-audio-btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.2);transform:scale(0);border-radius:50%;
  transition:.5s ease;pointer-events:none;
}
.gr-audio-btn:active::after{transform:scale(1.5);opacity:0;transition:.3s ease;}

/* ── Ícono ── */
.gr-audio-icon{font-size:calc(var(--gr-btn-size)*.42);line-height:1;user-select:none;color:var(--gr-btn-color);}
.gr-audio-icon svg{width:calc(var(--gr-btn-size)*.45);height:calc(var(--gr-btn-size)*.45);fill:var(--gr-btn-color);}

/* ── Barras de ecualizador con animación más fluida ── */
.gr-audio-bars{display:flex;gap:2px;align-items:flex-end;height:calc(var(--gr-btn-size)*.38);}
.gr-audio-bars span{display:block;width:3px;background:var(--gr-bars-color);border-radius:2px;height:25%;transition:.2s ease;}
/* Cuando está parado: barras estáticas en diferentes alturas */
.gr-audio-bars span:nth-child(1){height:40%;}
.gr-audio-bars span:nth-child(2){height:70%;}
.gr-audio-bars span:nth-child(3){height:50%;}
.gr-audio-bars span:nth-child(4){height:30%;}
/* Cuando está reproduciendo: animación */
.gr-audio-btn.playing .gr-audio-bars span:nth-child(1),
.gr-audio-player.gr-playing .gr-audio-bars span:nth-child(1){animation:grBar .75s 0s   ease-in-out infinite;}
.gr-audio-btn.playing .gr-audio-bars span:nth-child(2),
.gr-audio-player.gr-playing .gr-audio-bars span:nth-child(2){animation:grBar .75s .18s ease-in-out infinite;}
.gr-audio-btn.playing .gr-audio-bars span:nth-child(3),
.gr-audio-player.gr-playing .gr-audio-bars span:nth-child(3){animation:grBar .75s .09s ease-in-out infinite;}
.gr-audio-btn.playing .gr-audio-bars span:nth-child(4),
.gr-audio-player.gr-playing .gr-audio-bars span:nth-child(4){animation:grBar .75s .27s ease-in-out infinite;}
@keyframes grBar{0%,100%{height:20%;}50%{height:95%;}}

/* ── Entrada del botón al cargar la página ── */
.gr-audio-player{
  animation:grAppear .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes grAppear{
  from{opacity:0;transform:scale(.4) translateY(20px);}
  to  {opacity:1;transform:scale(1)  translateY(0);}
}

/* ── Tooltip ── */
.gr-audio-tooltip{
  background:rgba(10,8,15,.92);border:1px solid rgba(139,92,246,.22);color:#e5e0f5;
  font-size:.74rem;font-weight:600;padding:5px 12px;border-radius:6px;white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:var(--gr-transition);pointer-events:none;
  backdrop-filter:blur(8px);
}
.gr-audio-player:hover .gr-audio-tooltip{opacity:1;transform:translateX(0);}

/* ── Badge de nombre de pista ── */
.gr-audio-track{
  background:rgba(10,8,15,.82);border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.6);
  font-size:.7rem;padding:4px 10px;border-radius:50px;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transform:scale(.92);transition:var(--gr-transition);
}
.gr-audio-btn.playing~.gr-audio-track{opacity:1;transform:scale(1);}

/* ── Onda de audio animada (decorativa, opcional) ── */
.gr-audio-wave{
  display:flex;align-items:center;gap:2px;height:calc(var(--gr-btn-size)*.25);
  opacity:0;transition:opacity .4s ease;
}
.gr-audio-btn.playing~.gr-audio-wave{opacity:1;}
.gr-audio-wave span{
  display:block;width:2px;background:var(--gr-bars-color);border-radius:2px;
  height:100%;transform:scaleY(.3);
}
.gr-audio-btn.playing~.gr-audio-wave span:nth-child(1){animation:grWave .9s .0s ease infinite;}
.gr-audio-btn.playing~.gr-audio-wave span:nth-child(2){animation:grWave .9s .1s ease infinite;}
.gr-audio-btn.playing~.gr-audio-wave span:nth-child(3){animation:grWave .9s .2s ease infinite;}
.gr-audio-btn.playing~.gr-audio-wave span:nth-child(4){animation:grWave .9s .3s ease infinite;}
.gr-audio-btn.playing~.gr-audio-wave span:nth-child(5){animation:grWave .9s .15s ease infinite;}
@keyframes grWave{0%,100%{transform:scaleY(.2);}50%{transform:scaleY(1);}}

/* ── YouTube iframe oculto ── */
.gr-yt-frame{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;border:none;}

/* ── Overlay tap-to-play (v1.2) ── */
.gr-audio-overlay{
  position:absolute;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  border-radius:inherit;cursor:pointer;
  animation:grOverlayIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes grOverlayIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.gr-overlay-dismiss{animation:grOverlayOut .5s ease forwards!important}
@keyframes grOverlayOut{to{opacity:0;transform:scale(1.04)}}

.gr-audio-overlay-inner{
  text-align:center;color:#fff;padding:20px;
  animation:grOverlayContentIn .5s ease .15s both;
}
@keyframes grOverlayContentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.gr-audio-overlay-icon{
  width:72px;height:72px;margin:0 auto 14px;color:#fff;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.35));
  transition:transform .2s ease;
}
.gr-audio-overlay:hover .gr-audio-overlay-icon{ transform:scale(1.12); }

.gr-overlay-ring{
  stroke-dasharray:182;stroke-dashoffset:182;
  animation:grRingDraw 1.6s ease .3s forwards;
}
@keyframes grRingDraw{to{stroke-dashoffset:0}}

.gr-audio-overlay-text{
  font-size:1rem;font-weight:700;margin:0 0 5px;
  text-shadow:0 2px 10px rgba(0,0,0,.7);letter-spacing:.01em;
}
.gr-audio-overlay-sub{
  font-size:.82rem;opacity:.7;margin:0;
}

/* Pulso en el botón de play del overlay */
.gr-audio-overlay-icon::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  animation:grPulseRing 2s ease infinite;
}
@keyframes grPulseRing{
  0%  {transform:scale(.9);opacity:.8}
  70% {transform:scale(1.2);opacity:0}
  100%{transform:scale(.9);opacity:0}
}