/* ════════════════════════════════════════════════════════════════
   L2Gamers — Reproductor de música (versión minimalista "disco")
   Estilo fire/gold de la marca. Cargado en todas las páginas.
   Huella mínima: un disco en la esquina inferior izquierda; los
   controles se despliegan en un panel (hover en desktop / tap en móvil).
   Variables: reutiliza las del tema si existen; si no, fallback duro.
   ════════════════════════════════════════════════════════════════ */
:root{
  --l2a-c0:var(--c0,#050302);
  --l2a-c1:var(--c1,#0c0704);
  --l2a-c2:var(--c2,#140a04);
  --l2a-fire2:var(--fire2,#c0390a);
  --l2a-fire3:var(--fire3,#e05a15);
  --l2a-fire4:var(--fire4,#f07a20);
  --l2a-gold2:var(--gold2,#e8a020);
  --l2a-gold3:var(--gold3,#f5b830);
  --l2a-gold4:var(--gold4,#ffd060);
  --l2a-tx1:var(--tx1,#fdf3e6);
  --l2a-tx3:var(--tx3,#a87848);
  --l2a-tx4:var(--tx4,#6a4828);
  --l2a-bf:var(--bf,rgba(192,57,10,.25));
}

/* Contenedor flotante (esquina inferior izquierda; no choca con el chat/otros
   widgets que suelen ir a la derecha). Respeta el safe-area de iOS/Android. */
.l2a-dock{position:fixed;
  left:calc(55px + env(safe-area-inset-left,0px));
  bottom:calc(37px + env(safe-area-inset-bottom,0px));
  z-index:9000;display:flex;align-items:flex-end;gap:0;
  font-family:'Exo 2',sans-serif;-webkit-user-select:none;user-select:none;
  transition:left .35s cubic-bezier(.4,0,.2,1),opacity .25s}

/* Disco principal (toggle play/pause). "Gira" cuando suena. */
.l2a-btn{position:relative;width:48px;height:48px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--l2a-fire2) 55%,transparent);
  background:radial-gradient(circle at 35% 30%,var(--l2a-c2),var(--l2a-c0));
  color:var(--l2a-gold3);cursor:pointer;flex:0 0 auto;z-index:2;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3) inset;
  transition:transform .15s,border-color .2s,box-shadow .2s,color .2s}
.l2a-btn:hover{transform:translateY(-2px);color:var(--l2a-gold4);
  border-color:color-mix(in srgb,var(--l2a-gold2) 70%,transparent);
  box-shadow:0 6px 20px rgba(0,0,0,.55),0 0 14px color-mix(in srgb,var(--l2a-fire3) 35%,transparent)}
.l2a-ico{display:flex;align-items:center;justify-content:center}
.l2a-btn svg{width:20px;height:20px;flex:0 0 auto}
/* Aro giratorio cuando está sonando */
.l2a-btn::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--l2a-gold3) 45%,transparent);
  opacity:0;transition:opacity .3s;pointer-events:none}
.l2a-dock.is-playing .l2a-btn::after{opacity:1;animation:l2aSpin 7s linear infinite}
.l2a-dock.is-playing .l2a-btn{border-color:color-mix(in srgb,var(--l2a-gold2) 70%,transparent);
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 16px color-mix(in srgb,var(--l2a-fire3) 40%,transparent)}
@keyframes l2aSpin{to{transform:rotate(360deg)}}

/* Equalizer animado sobre el disco cuando suena (oculta el icono play/pause).
   Mientras suena mostramos las barras; el play/pause sigue accesible al hover
   o cuando está en pausa. */
.l2a-eq{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  gap:2.5px;z-index:1;pointer-events:none}
.l2a-eq i{flex:none;width:3px;height:14px;background:var(--l2a-gold3);border-radius:2px;
  transform-origin:center;animation:l2aEqDisc .9s ease-in-out infinite;will-change:transform}
.l2a-eq i:nth-child(1){animation-delay:0s}
.l2a-eq i:nth-child(2){animation-delay:.2s}
.l2a-eq i:nth-child(3){animation-delay:.4s}
.l2a-eq i:nth-child(4){animation-delay:.15s}
@keyframes l2aEqDisc{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes l2aEq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(2.4)}}
/* Cuando suena: mostrar barras y atenuar el icono; al pasar el mouse sobre el
   disco vuelve el icono play/pause para poder pausar. */
.l2a-dock.is-playing .l2a-eq{display:flex}
.l2a-dock.is-playing .l2a-ico{opacity:0;transition:opacity .2s}
/* Al pasar el mouse sobre el disco mientras suena, el icono play/pause
   reaparece (semi) para indicar que se puede pausar; las barras siguen visibles. */
.l2a-dock.is-playing .l2a-btn:hover .l2a-ico{opacity:.85}

/* Equalizer mini junto al nombre de la pista en el panel (se ve siempre que
   suena, sin depender del hover sobre el disco). */
.l2a-eq-mini{display:none;align-items:flex-end;gap:2px;height:14px;flex:0 0 auto}
.l2a-eq-mini i{flex:none;width:2.5px;height:6px;background:var(--l2a-gold3);border-radius:2px;
  transform-origin:bottom;animation:l2aEq .9s ease-in-out infinite}
.l2a-eq-mini i:nth-child(1){animation-delay:0s}
.l2a-eq-mini i:nth-child(2){animation-delay:.2s}
.l2a-eq-mini i:nth-child(3){animation-delay:.4s}
.l2a-eq-mini i:nth-child(4){animation-delay:.15s}
.l2a-dock.is-playing .l2a-eq-mini{display:flex}

/* Barra de progreso (seek) con tiempos */
.l2a-seek-row{display:flex;align-items:center;gap:8px}
.l2a-time{font-size:10px;color:var(--l2a-tx3);font-variant-numeric:tabular-nums;
  min-width:30px;flex:0 0 auto}
.l2a-time-dur{text-align:right}
.l2a-seek{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;cursor:pointer;
  outline:none;
  background:linear-gradient(to right,var(--l2a-gold3) 0%,var(--l2a-gold3) var(--l2a-fill,0%),
    color-mix(in srgb,var(--l2a-fire2) 22%,transparent) var(--l2a-fill,0%))}
.l2a-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--l2a-gold4),var(--l2a-gold2));
  border:1px solid var(--l2a-fire2);cursor:pointer;box-shadow:0 0 5px rgba(0,0,0,.5)}
.l2a-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:var(--l2a-gold3);border:1px solid var(--l2a-fire2);cursor:pointer}

/* "Oreja" de controles: pestaña pegada al disco para abrir el panel en táctil.
   En desktop se usa hover, así que la ocultamos. */
.l2a-ear{width:18px;height:30px;margin-left:-3px;flex:0 0 auto;z-index:2;
  border:1px solid var(--l2a-bf);border-left:none;border-radius:0 8px 8px 0;
  background:linear-gradient(160deg,var(--l2a-c1),var(--l2a-c0));
  color:var(--l2a-tx3);cursor:pointer;display:none;
  align-items:center;justify-content:center;padding:0;
  transition:color .15s,transform .2s}
.l2a-ear svg{width:13px;height:13px}
.l2a-ear:hover{color:var(--l2a-gold3)}
.l2a-dock.is-touch .l2a-ear{display:none}
.l2a-dock.is-touch.is-open .l2a-ear{transform:rotate(180deg)}
/* Sin pistas / sistema sin música: no tiene sentido la oreja. */
.l2a-dock.is-open .l2a-ear{color:var(--l2a-gold3)}

/* ── Ocultar / mostrar el reproductor (desliza a la izquierda) ── */
/* Botón ✕ sobre el disco: anclado a la esquina sup-der del disco (48px),
   solo visible al pasar el cursor o en táctil. */
.l2a-hide{position:absolute;left:29px;bottom:36px;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--l2a-bf);background:var(--l2a-c2);color:var(--l2a-tx3);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:6;
  opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s,color .15s,border-color .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.l2a-hide svg{width:11px;height:11px}
.l2a-hide:hover{color:var(--l2a-gold4);border-color:var(--l2a-gold3)}
.l2a-dock:hover .l2a-hide,.l2a-dock.is-touch .l2a-hide{opacity:1;transform:scale(1)}
/* Pestañita › para volver a mostrar: oculta salvo cuando el dock está escondido. */
.l2a-show{position:absolute;left:0;bottom:7px;width:17px;height:34px;
  border:1px solid var(--l2a-bf);border-left:none;border-radius:0 9px 9px 0;
  background:linear-gradient(160deg,var(--l2a-c1),var(--l2a-c0));
  color:var(--l2a-gold3);cursor:pointer;display:none;align-items:center;justify-content:center;
  padding:0;z-index:1;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.l2a-show svg{width:12px;height:12px}
.l2a-show:hover{color:var(--l2a-gold4)}
/* Estado oculto: el dock se desliza fuera por la izquierda con left negativo.
   !important para ganar sobre las reglas de posición del UCP (que usan !important). */
.l2a-dock.is-hidden{left:-140px!important;pointer-events:none}
.l2a-dock.is-hidden .l2a-show{display:flex;position:fixed;left:0;pointer-events:auto;
  bottom:calc(44px + env(safe-area-inset-bottom,0px))}
body[data-page="ucp_panel"] .l2a-dock.is-hidden .l2a-show{
  bottom:calc(71px + env(safe-area-inset-bottom,0px))}
.l2a-dock.is-hidden .l2a-hide{display:none}
/* Mientras está oculto, también colapsamos el panel para que no asome. */
.l2a-dock.is-hidden .l2a-panel,.l2a-dock.is-hidden .l2a-hint{display:none}

/* Panel expandible (nombre de pista + prev/next + volumen).
   Se despliega HACIA LA DERECHA del disco para no tapar contenido de arriba. */
.l2a-panel{display:flex;flex-direction:column;gap:9px;margin-left:8px;
  background:linear-gradient(160deg,var(--l2a-c1),var(--l2a-c0));
  border:1px solid var(--l2a-bf);border-radius:13px;padding:12px 13px;
  min-width:280px;max-width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  opacity:0;transform:translateX(-10px) scale(.97);
  transform-origin:left center;pointer-events:none;
  transition:opacity .2s,transform .2s,margin .2s;
  /* Colapsado: no ocupa ancho para no empujar nada. */
  width:0;min-width:0;padding-left:0;padding-right:0;overflow:hidden;white-space:nowrap}
.l2a-dock.is-open .l2a-panel{opacity:1;transform:none;pointer-events:auto;
  width:auto;min-width:280px;padding:12px 13px}

/* Cabecera del panel: título de pista */
.l2a-track{display:flex;align-items:center;gap:8px;min-width:0}
.l2a-track-ico{flex:0 0 auto;color:var(--l2a-gold3);display:flex}
.l2a-track-name{font-size:12px;font-weight:600;color:var(--l2a-tx1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2a-track-sub{font-size:10px;color:var(--l2a-tx4);text-transform:uppercase;
  letter-spacing:1px}

/* Fila de controles (prev/next + volumen) */
.l2a-row{display:flex;align-items:center;gap:6px}
.l2a-ctrl{width:30px;height:30px;border-radius:7px;
  border:1px solid var(--l2a-bf);background:var(--l2a-c2);color:var(--l2a-tx3);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:color .15s,border-color .15s,background .15s}
.l2a-ctrl:hover{color:var(--l2a-gold3);border-color:color-mix(in srgb,var(--l2a-gold2) 50%,transparent);
  background:color-mix(in srgb,var(--l2a-fire2) 12%,transparent)}
.l2a-ctrl svg{width:15px;height:15px}
/* Botón play/pause del panel: control principal, resaltado en dorado */
.l2a-play-btn{border-color:color-mix(in srgb,var(--l2a-gold2) 55%,transparent);
  background:color-mix(in srgb,var(--l2a-fire2) 16%,transparent);color:var(--l2a-gold3)}
.l2a-play-btn:hover{color:var(--l2a-gold4);background:color-mix(in srgb,var(--l2a-fire2) 26%,transparent)}
.l2a-play-ico{display:flex;align-items:center;justify-content:center}
.l2a-play-ico svg{width:15px;height:15px}
/* Botón de lista activo (lista desplegada) */
.l2a-list-btn.is-active{color:var(--l2a-gold3);
  border-color:color-mix(in srgb,var(--l2a-gold2) 55%,transparent);
  background:color-mix(in srgb,var(--l2a-fire2) 15%,transparent)}
/* Lista de pistas desplegable dentro del panel */
.l2a-list{display:none;flex-direction:column;gap:3px;margin-top:2px;
  max-height:190px;overflow-y:auto;padding-right:3px;
  scrollbar-width:thin;scrollbar-color:var(--l2a-gold2) transparent}
.l2a-dock.list-open .l2a-list{display:flex}
.l2a-list::-webkit-scrollbar{width:7px}
.l2a-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--l2a-gold2) 50%,transparent);border-radius:7px}
.l2a-list-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 9px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--l2a-tx1);cursor:pointer;font-family:'Exo 2',sans-serif;font-size:12px;
  transition:background .15s,border-color .15s,color .15s}
.l2a-list-item:hover{background:color-mix(in srgb,var(--l2a-fire2) 12%,transparent);
  border-color:color-mix(in srgb,var(--l2a-gold2) 30%,transparent)}
.l2a-list-item.is-current{background:color-mix(in srgb,var(--l2a-fire2) 18%,transparent);
  border-color:color-mix(in srgb,var(--l2a-gold2) 50%,transparent);color:var(--l2a-gold3)}
.l2a-list-ico{flex:0 0 auto;display:flex;color:var(--l2a-gold3)}
.l2a-list-ico svg{width:13px;height:13px}
.l2a-list-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l2a-list-empty{font-size:11.5px;color:var(--l2a-tx4);text-align:center;padding:10px;font-style:italic}

/* Slider de volumen */
.l2a-vol{display:flex;align-items:center;gap:8px}
.l2a-vol-ico{flex:0 0 auto;color:var(--l2a-tx3);display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;margin:0;cursor:pointer;transition:color .15s}
.l2a-vol-ico svg{width:16px;height:16px}
.l2a-vol-ico:hover{color:var(--l2a-gold3)}
.l2a-vol-ico.is-muted{color:var(--l2a-fire2)}
.l2a-range{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;
  background:linear-gradient(to right,var(--l2a-gold3) 0%,var(--l2a-gold3) var(--l2a-fill,60%),
    color-mix(in srgb,var(--l2a-fire2) 22%,transparent) var(--l2a-fill,60%));
  outline:none;cursor:pointer}
.l2a-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--l2a-gold4),var(--l2a-gold2));
  border:1px solid var(--l2a-fire2);cursor:pointer;box-shadow:0 0 5px rgba(0,0,0,.5)}
.l2a-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:var(--l2a-gold3);border:1px solid var(--l2a-fire2);cursor:pointer}

/* Tooltip de "toca para activar" la primera vez. Aparece sobre el disco. */
.l2a-hint{position:absolute;left:58px;bottom:8px;white-space:nowrap;
  background:var(--l2a-c1);border:1px solid var(--l2a-bf);border-radius:8px;
  padding:7px 11px;font-size:11.5px;color:var(--l2a-tx1);
  box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:3;
  transform:translateX(-6px);transition:opacity .25s,transform .25s}
.l2a-dock.show-hint .l2a-hint{opacity:1;transform:none}
/* Cuando el panel está abierto (hover desktop / tap móvil), ocultar el globo
   "Toca para activar" para que no se solape con el panel. */
.l2a-dock.is-open .l2a-hint{opacity:0!important;transform:translateX(-6px)!important;pointer-events:none}
.l2a-hint::before{content:'';position:absolute;left:-5px;bottom:11px;
  width:9px;height:9px;background:var(--l2a-c1);border-left:1px solid var(--l2a-bf);
  border-bottom:1px solid var(--l2a-bf);transform:rotate(45deg)}

/* ── Móvil: el panel no debe desbordar la pantalla ── */
@media(max-width:560px){
  .l2a-dock{left:calc(12px + env(safe-area-inset-left,0px));
    bottom:calc(37px + env(safe-area-inset-bottom,0px))}
  /* El panel abierto arranca a la derecha del disco (~62px desde el borde).
     Para que NO se salga ni corte la barra de volumen, su ancho debe dejar
     margen a ambos lados: disco+gap a la izquierda y ~14px a la derecha. */
  .l2a-dock.is-open .l2a-panel{min-width:0;width:calc(100vw - 84px);max-width:300px}
  /* El slider de volumen no debe desbordar la fila: que encoja con su fila. */
  .l2a-vol{min-width:0}
  .l2a-range{min-width:0}
  /* El globo "Toca para activar" en móvil: a la derecha del disco, una sola
     línea corta, fondo OPACO (no translúcido) para que no se mezcle con el
     contenido de atrás. Se auto-oculta a los 5s (ver l2audio.js). */
  .l2a-hint{left:58px;right:auto;bottom:14px;
    white-space:nowrap;max-width:none;font-size:11px;padding:7px 11px;
    background:var(--l2a-c0);box-shadow:0 6px 22px rgba(0,0,0,.75)}
}

/* Respeto a quien pidió menos movimiento */
@media(prefers-reduced-motion:reduce){
  /* El aro giratorio del disco es movimiento amplio: se respeta reduced-motion.
     Las barritas del equalizer son decoración mínima (pocos px) y se mantienen
     animadas: no causan problemas de accesibilidad y son el indicador visual de
     "sonando". Algunos entornos (ahorro de batería, etc.) reportan 'reduce' sin
     que el usuario lo pida, lo que dejaba el equalizer congelado. */
  .l2a-dock.is-playing .l2a-btn::after{animation:none}
}