/**
 * ZARZA Player — la barra.
 *
 * Los colores salen de las variables del tema cuando estan, y si no caen a los
 * de la marca: el plugin tiene que poder verse bien aunque manana el tema cambie.
 */

.zzp{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  background:var(--zz-tinta,#17131a);color:#fff;
  box-shadow:0 -12px 40px -22px rgba(0,0,0,.9);
  transform:translateY(100%);transition:transform .28s ease;
  font-family:var(--zz-cuerpo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
}
.zzp.zzp-visible{transform:translateY(0)}
.zzp[hidden]{display:none}
body.zzp-con-player{padding-bottom:76px}

.zzp-caja{display:flex;align-items:center;gap:.9rem;
  max-width:1400px;margin:0 auto;padding:.6rem clamp(.8rem,2.5vw,1.6rem)}

/* --- disco: gira SOLO mientras suena de verdad --------------------- */
.zzp-disco{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#3a2f34 0 14%,#0f0c12 15% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);display:grid;place-items:center}
.zzp-disco i{width:9px;height:9px;border-radius:50%;display:block;
  background:var(--zz-rojo,#b30000);box-shadow:0 0 0 3px rgba(0,0,0,.55)}
.zzp.zzp-gira .zzp-disco{animation:zzp-gira 2.6s linear infinite}
@keyframes zzp-gira{to{transform:rotate(360deg)}}

/* --- botones -------------------------------------------------------- */
.zzp-btn{border:0;background:none;color:inherit;cursor:pointer;display:grid;
  place-items:center;padding:0;line-height:0}
.zzp-play{width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  background:var(--zz-rojo,#b30000);transition:filter .15s ease,transform .15s ease}
.zzp-play svg{width:20px;height:20px;fill:#fff}
.zzp-play .zzp-i-pausa{display:none}
.zzp.zzp-sonando .zzp-play .zzp-i-play{display:none}
.zzp.zzp-sonando .zzp-play .zzp-i-pausa{display:block}
.zzp-play:hover,.zzp-play:focus-visible{filter:brightness(1.1);transform:scale(1.05)}
.zzp-chico{width:30px;height:30px;opacity:.75}
.zzp-chico svg{width:16px;height:16px;fill:currentColor}
.zzp-chico:hover,.zzp-chico:focus-visible{opacity:1}
.zzp-cerrar svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* --- datos ---------------------------------------------------------- */
.zzp-datos{min-width:0;flex:1 1 12rem;display:flex;flex-direction:column;gap:2px}
.zzp-titulo{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.zzp-meta{font-family:var(--zz-mono,ui-monospace,monospace);font-size:.68rem;
  letter-spacing:.09em;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- espectro ------------------------------------------------------- */
.zzp-vu{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:24px}
.zzp-vu i{width:3px;height:10%;border-radius:1px;background:var(--zz-rojo,#b30000);
  opacity:.9;transition:height .07s linear}

/* --- tiempo --------------------------------------------------------- */
.zzp-tiempo{flex:2 1 22rem;display:flex;align-items:center;gap:.55rem;min-width:0}
.zzp-t-actual,.zzp-t-total{font-family:var(--zz-mono,ui-monospace,monospace);
  font-size:.72rem;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap}
.zzp-barra{flex:1 1 auto;height:6px;border-radius:3px;background:rgba(255,255,255,.16);
  position:relative;cursor:pointer;min-width:4rem}
.zzp-cargado,.zzp-relleno{position:absolute;inset:0 auto 0 0;border-radius:3px}
.zzp-cargado{background:rgba(255,255,255,.18);width:0}
.zzp-relleno{background:var(--zz-rojo,#b30000);width:0}
/* En directo no hay «cuanto queda»: la barra deja de ser un control. */
.zzp.zzp-directo .zzp-barra{cursor:default;opacity:.35}
.zzp.zzp-directo .zzp-atras,.zzp.zzp-directo .zzp-adelante{display:none}
.zzp.zzp-directo .zzp-t-total{color:var(--zz-rojo,#ff6b6b);opacity:1;
  letter-spacing:.12em;font-size:.66rem}

/* --- extras --------------------------------------------------------- */
.zzp-extra{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
.zzp-vol{width:76px;accent-color:var(--zz-rojo,#b30000)}
.zzp-vel{background:rgba(255,255,255,.1);color:inherit;border:0;border-radius:4px;
  font:inherit;font-size:.72rem;padding:.2rem .3rem}
.zzp-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.zzp.zzp-error .zzp-meta{color:#ff8a8a;opacity:1}

/* --- el boton que sustituye a un <audio> suelto ---------------------- */
.zzp-suelto{margin:1.1rem 0}
.zzp-boton-suelto{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  border:0;border-radius:999px;padding:.6rem 1.15rem .6rem .85rem;font:inherit;
  font-size:.9rem;background:var(--zz-rojo,#b30000);color:#fff;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.7)}
.zzp-boton-suelto svg{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}
.zzp-boton-suelto:hover,.zzp-boton-suelto:focus-visible{filter:brightness(1.08)}

/* --- lo que no se puede reproducir ---------------------------------- */
.zzp-caido{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
.zzp-rotulo-caido{display:inline-block;margin-left:.5rem;padding:.1rem .45rem;
  border-radius:3px;background:rgba(0,0,0,.12);
  font-family:var(--zz-mono,ui-monospace,monospace);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;opacity:.7;vertical-align:middle}

/* --- el boton de la ficha que esta sonando --------------------------- */
.zzp-suena{position:relative}

@media (max-width:900px){
  .zzp-vu,.zzp-vel,.zzp-vol{display:none}
  .zzp-tiempo{flex:1 1 auto}
}
@media (max-width:560px){
  .zzp-tiempo{display:none}
  .zzp-caja{gap:.6rem}
  body.zzp-con-player{padding-bottom:66px}
}
@media (prefers-reduced-motion:reduce){
  .zzp{transition:none}
  .zzp.zzp-gira .zzp-disco{animation:none}
  .zzp-vu i{transition:none}
  .zzp-play{transition:none}
}