/* ============================================================
   AUDIO PLAYER WIDGET v1.1.0 — Elementor
   Botón circular estilo Apple con brillo, sombra en capas
   y anillos de pulso animados.
   ============================================================ */

/* ── Variables por defecto ─────────────────────────────────── */
.audio-player-wrap {
  --audio-btn-size:    64px;
  --audio-icon-size:   26px;
  --audio-btn-color:   #1c1c1e;
  --audio-icon-color:  #ffffff;
  --audio-pulse-color: #1c1c1e;
  --audio-offset:      30px;
  --audio-z:           9999;
}

/* ── Posiciones fijas ───────────────────────────────────────── */
.audio-pos-fixed-br { position: fixed; bottom: var(--audio-offset); right:  var(--audio-offset); z-index: var(--audio-z); }
.audio-pos-fixed-bl { position: fixed; bottom: var(--audio-offset); left:   var(--audio-offset); z-index: var(--audio-z); }
.audio-pos-fixed-tr { position: fixed; top:    var(--audio-offset); right:  var(--audio-offset); z-index: var(--audio-z); }
.audio-pos-fixed-tl { position: fixed; top:    var(--audio-offset); left:   var(--audio-offset); z-index: var(--audio-z); }
.audio-pos-inline   { position: relative; display: inline-block; }

/* ── Ocultar UI (el <audio> sigue activo) ───────────────────── */
.audio-player-hidden              { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }
.audio-player-hidden .audio-element { display: block !important; }

/* ── Elemento <audio> nativo — invisible ────────────────────── */
.audio-element {
  display: block; width: 0; height: 0;
  overflow: hidden; position: absolute;
  opacity: 0; pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   WRAPPER DE SOMBRA
   Separar la sombra del botón permite usar drop-shadow()
   que respeta border-radius:50% sin recortar el círculo.
   ════════════════════════════════════════════════════════════ */
.audio-btn-shadow {
  position: relative;
  display:  inline-flex;
  align-items: center;
  justify-content: center;
  width:  var(--audio-btn-size);
  height: var(--audio-btn-size);
  border-radius: 50%;

  /* sombra coloreada en capas — usa el color del botón como tinte */
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.18))
    drop-shadow(0 10px 26px rgba(0,0,0,0.22))
    drop-shadow(0 20px 44px rgba(0,0,0,0.14));

  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), filter 0.2s ease;
}

.audio-btn-shadow:hover {
  transform: scale(1.08) translateY(-3px);
  filter:
    drop-shadow(0 5px 10px rgba(0,0,0,0.22))
    drop-shadow(0 14px 36px rgba(0,0,0,0.28))
    drop-shadow(0 26px 56px rgba(0,0,0,0.18));
}

.audio-btn-shadow:active {
  transform: scale(0.93);
  transition-duration: 0.08s;
}

/* ════════════════════════════════════════════════════════════
   ANILLOS DE PULSO
   Son hijos del wrapper, no del botón, para que la sombra
   no los corte. Se activan con la clase .audio-playing.
   ════════════════════════════════════════════════════════════ */
.audio-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: 1.5px solid var(--audio-pulse-color);
  width:  100%;
  height: 100%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.audio-btn-shadow.audio-playing .audio-ring-1 {
  animation: audio-ring-out 2.6s ease-out infinite;
}
.audio-btn-shadow.audio-playing .audio-ring-2 {
  animation: audio-ring-out 2.6s ease-out infinite 0.9s;
}

@keyframes audio-ring-out {
  0%   { transform: translate(-50%,-50%) scale(1);    opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(1.75); opacity: 0;    }
}

/* ════════════════════════════════════════════════════════════
   BOTÓN CIRCULAR — EFECTO APPLE
   ════════════════════════════════════════════════════════════ */
.audio-btn {
  /* geometría */
  width:           var(--audio-btn-size);
  height:          var(--audio-btn-size);
  border-radius:   50% !important;
  -webkit-border-radius: 50% !important;
  padding:         0;
  border:          none;
  outline:         none;
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;           /* recorta los pseudo-elementos de brillo */
  display:         flex;
  align-items:     center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  appearance:      none;
  -webkit-appearance: none;

  /* color base — editable desde Elementor */
  background: var(--audio-btn-color);

  /* borde interior luminoso (imita vidrio pulido) */
  box-shadow:
    inset 0  1.5px 0   rgba(255,255,255,0.26),
    inset 0 -1px   0   rgba(0,0,0,0.32),
    inset 0  0     0 1px rgba(255,255,255,0.07);

  transition: box-shadow 0.2s ease;
}

/* brillo superior — arco de luz estilo iOS */
.audio-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 85% 55% at 50% 0%,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.00) 65%
  );
  pointer-events: none;
  z-index: 2;
}

/* reflejo inferior sutil */
.audio-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 70% 35% at 50% 100%,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.00) 70%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Ícono SVG ───────────────────────────────────────────────── */
.audio-btn-icon {
  position:   relative;
  z-index:    3;
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}

.audio-svg {
  display: block;
  transition: stroke 0.2s ease;
}

/* animación del ícono al hacer clic */
.audio-btn:active .audio-btn-icon {
  transform: scale(0.78);
  transition-duration: 0.08s;
}

/* ── Estado bloqueado (autoplay rechazado por el navegador) ──── */
.audio-btn-shadow.audio-blocked .audio-btn {
  opacity: 0.65;
}
.audio-btn-shadow.audio-blocked {
  animation: audio-nudge 3s ease-in-out infinite;
}
@keyframes audio-nudge {
  0%, 88%, 100% { transform: scale(1); }
  92%            { transform: scale(1.09); }
  96%            { transform: scale(0.96); }
}

/* ── Tooltip ────────────────────────────────────────────────── */
.audio-player-wrap[data-tooltip]::after {
  content:        attr(data-tooltip);
  position:       absolute;
  bottom:         calc(100% + 10px);
  right:          0;
  background:     rgba(0,0,0,0.72);
  color:          #fff;
  font-size:      12px;
  font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding:        5px 12px;
  border-radius:  6px;
  white-space:    nowrap;
  opacity:        0;
  pointer-events: none;
  transform:      translateY(4px);
  transition:     opacity 0.2s ease, transform 0.2s ease;
  z-index:        1;
  letter-spacing: 0.2px;
}
.audio-player-wrap[data-tooltip]:hover::after {
  opacity:   1;
  transform: translateY(0);
}
.audio-pos-fixed-tr[data-tooltip]::after,
.audio-pos-fixed-tl[data-tooltip]::after { bottom: auto; top: calc(100% + 10px); }
.audio-pos-fixed-bl[data-tooltip]::after,
.audio-pos-fixed-tl[data-tooltip]::after { right: auto; left: 0; }

/* ── Android: animación de atención cuando necesita tap directo ── */
@keyframes audio-attention {
  0%,100% { transform: scale(1); }
  20%      { transform: scale(1.18); }
  40%      { transform: scale(0.92); }
  60%      { transform: scale(1.10); }
  80%      { transform: scale(0.96); }
}
.audio-btn-shadow.audio-attention {
  animation: audio-attention 0.6s ease-in-out 3;
}