/* Piano Salsa · reproductor. Estética Nocturno: fondo tierra, oro para lo activo. */

.ps-player{
  --oro:#E7B57A;
  --oro-grad:linear-gradient(100deg,#B0763A,#F1E4CD);
  --tinta:#2A1E14;
  --panel:rgba(18,14,12,.92);
  --suave:rgba(255,255,255,.16);
  --suave-2:rgba(255,255,255,.26);
  position:relative;
  width:100%;
  border-radius:14px;
  /* Sin «overflow:hidden» aquí a propósito.
     Recortar un iframe desde un elemento padre obliga al navegador a
     componer el vídeo en la GPU, y con ciertas gráficas de Windows el
     iframe se pinta negro mientras el sonido sigue. Las esquinas se
     redondean en la escena y en el propio iframe, que consigue lo
     mismo sin recortar nada por encima del vídeo. */
  background:#0E0B09;
  color:#F5EDE2;
  font:400 15px/1.5 'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.ps-player *,.ps-player *::before,.ps-player *::after{box-sizing:border-box}
.ps-player button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}

/* ---------- escena ---------- */
/* La escena saca su altura de la proporción del vídeo. Si «--ratio»
   no llega o llega mal, cae en 16/9 en lugar de quedarse sin altura:
   sin esa reserva, el iframe medía cero, el vídeo se oía y no se veía
   nada. Era eso, y no la gráfica, lo que dejaba el recuadro negro.

   Y «min-height» como último seguro: si algún navegador no resuelve
   la proporción, el vídeo se ve algo pequeño pero se ve. */
.ps-player-escena{
  position:relative;width:100%;
  aspect-ratio:var(--ratio, 16 / 9);
  min-height:180px;
  background:#0E0B09;border-radius:14px;
}
/* Cuando la caja de fuera ya pone la altura, la escena la llena y no
   discute: así una y otra no pueden contradecirse. */
.ps-player{height:100%}
.ps-player-escena{height:100%}
/* «pointer-events:none» en el iframe: ningún clic llega a Vimeo.
   Así no puede abrir su pantalla completa, ni su menú contextual, ni
   se puede usar su barra si su cuenta decide pintarla. Todo lo
   atiende nuestra capa de encima, que es la única que debe mandar. */
.ps-player-video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  border-radius:14px;pointer-events:none;
}
/* La miniatura se ve entera, nítida y sin oscurecer, hasta que se pulsa
   play. Antes se apagaba al cargar el vídeo y lo que quedaba a la vista era
   el primer fotograma, que en muchos vídeos sale borroso o a medio fundido. */
.ps-player-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .3s ease;pointer-events:none}
.ps-player.es-empezado .ps-player-poster{opacity:0}

/* La capa que recibe clics. Es un botón de verdad: llega por teclado. */
.ps-player-lienzo{position:absolute;inset:0;z-index:2;width:100%;height:100%;cursor:pointer}
.ps-player-lienzo:focus-visible{outline:3px solid var(--oro);outline-offset:-3px}

/* botón central */
.ps-player-central{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:6;width:78px;height:78px;border-radius:50%;
  background:var(--oro-grad);color:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 44px -12px rgba(142,69,34,.9),0 0 0 10px rgba(142,69,34,.16);
  transition:transform .18s ease,opacity .18s ease;
}
.ps-player-central svg{margin-left:4px}
.ps-player-central:hover{transform:translate(-50%,-50%) scale(1.06)}
.ps-player.es-sonando .ps-player-central{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.85)}

/* cargando */
.ps-player-cargando{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;display:none;gap:6px}
.ps-player.es-cargando .ps-player-cargando{display:flex}
.ps-player.es-cargando .ps-player-central{opacity:0}
.ps-player-cargando span{width:9px;height:9px;border-radius:50%;background:var(--oro);animation:ps-latido 1s infinite ease-in-out}
.ps-player-cargando span:nth-child(2){animation-delay:.15s}
.ps-player-cargando span:nth-child(3){animation-delay:.3s}
@keyframes ps-latido{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* marca de agua: quien comparta el vídeo, se delata.
   Flotante por defecto — cambia de sitio para que no se pueda recortar
   de una grabación hecha con el móvil. */
.ps-player-marca{
  position:absolute;right:14px;top:12px;z-index:4;pointer-events:none;user-select:none;
  font:600 11px 'JetBrains Mono',ui-monospace,monospace;color:rgba(255,255,255,.34);
  text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:0;
  transition:opacity .4s ease,left 1.2s ease,top 1.2s ease;
}
.ps-player.es-sonando .ps-player-marca{opacity:1}
.ps-player-marca.es-fuerte{font-size:13px;color:rgba(255,255,255,.55);font-weight:700}

/* aviso flotante (reanudar, error, atajo pulsado)
   Va por encima de las asas A y B: 113px miden los mandos con la pista
   de bucle abierta y las asas sobresalen hasta 99px. Menos de 120 y el
   aviso tapa las asas justo cuando el alumno quiere arrastrarlas. */
.ps-player-aviso{
  position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:9;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100% - 32px);padding:11px 16px;border-radius:999px;
  background:var(--panel);border:1px solid var(--suave);
  font:700 13.5px 'Manrope',sans-serif;box-shadow:0 14px 34px -18px #000;
}
.ps-player-aviso[hidden]{display:none}
.ps-player-aviso button{
  padding:6px 14px;border-radius:999px;background:var(--oro-grad);color:var(--tinta);
  font:800 13px 'Manrope',sans-serif;white-space:nowrap;
}
.ps-player-aviso button.es-plano{background:none;border:1px solid var(--suave-2);color:#F5EDE2}

/* ---------- mandos ---------- */
/* La barra de mandos es opaca en su parte baja a propósito: si la
   cuenta de Vimeo trae una plantilla de inserción que ignora
   «controls=0», su barra queda debajo de la nuestra y no se asoma. */
.ps-player-mandos{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(10,8,7,1) 0%,rgba(10,8,7,1) 46%,rgba(10,8,7,.72) 70%,transparent 100%);
  opacity:1;transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease;
}
.ps-player.es-oculto .ps-player-mandos{opacity:0;transform:translateY(8px);pointer-events:none}
.ps-player.es-oculto .ps-player-lienzo{cursor:none}

/* barra de progreso */
.ps-player-barra{position:relative;height:20px;display:flex;align-items:center;margin-bottom:2px}
.ps-player-barra::before{
  content:"";position:absolute;left:0;right:0;height:5px;border-radius:999px;
  background:rgba(255,255,255,.2);transition:height .15s ease;
}
.ps-player-buffer{position:absolute;left:0;height:5px;width:0;border-radius:999px;background:rgba(255,255,255,.3);transition:width .4s linear,height .15s ease}
.ps-player-avance{position:absolute;left:0;height:5px;width:0;border-radius:999px;background:var(--oro-grad);transition:height .15s ease}
.ps-player-tirador{
  position:absolute;right:0;top:50%;transform:translate(50%,-50%) scale(0);
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .15s ease;
}
.ps-player-barra:hover::before,.ps-player-barra:hover .ps-player-buffer,.ps-player-barra:hover .ps-player-avance,
.ps-player-rango:focus-visible ~ .ps-player-globo{height:7px}
.ps-player-barra:hover .ps-player-tirador,.ps-player-rango:focus-visible + .ps-player-globo{transform:translate(50%,-50%) scale(1)}

/* El range real está encima, invisible: así funciona con teclado y lector de pantalla. */
.ps-player-rango{
  position:absolute;left:0;right:0;width:100%;height:20px;margin:0;
  opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:none;
}
.ps-player-rango:focus-visible{opacity:0}
.ps-player-rango:focus-visible ~ .ps-player-avance{box-shadow:0 0 0 2px var(--oro)}

.ps-player-globo{
  position:absolute;bottom:26px;transform:translateX(-50%);
  padding:4px 9px;border-radius:7px;background:var(--panel);border:1px solid var(--suave);
  font:600 12px 'JetBrains Mono',ui-monospace,monospace;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.ps-player-barra:hover .ps-player-globo{opacity:1}

/* loop A-B */
.ps-player-ab{padding:0 0 9px}
.ps-player-ab[hidden]{display:none}
.ps-player-ab-pista{position:relative;height:6px;border-radius:999px;background:rgba(255,255,255,.14)}
.ps-player-ab-tramo{position:absolute;top:0;height:100%;border-radius:999px;background:rgba(231,181,122,.5)}
.ps-player-ab-asa{
  position:absolute;top:50%;width:30px;height:30px;margin-left:-15px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none;
}
.ps-player-ab-asa b{
  width:22px;height:22px;border-radius:7px;background:var(--oro);color:var(--tinta);
  display:flex;align-items:center;justify-content:center;
  font:800 11px 'Manrope',sans-serif;box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition:transform .14s ease;
}
.ps-player-ab-asa:hover b,.ps-player-ab-asa:focus-visible b{transform:scale(1.14)}
.ps-player-ab-asa:focus-visible{outline:none}
.ps-player-ab-asa:focus-visible b{box-shadow:0 0 0 3px rgba(231,181,122,.5)}

/* fila de botones */
.ps-player-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ps-player-grupo{display:flex;align-items:center;gap:7px;min-width:0}
.ps-player-grupo:last-child{margin-left:auto}

.ps-player-btn{
  min-width:38px;height:38px;padding:0 10px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:#F5EDE2;transition:background .16s ease,color .16s ease;
}
.ps-player-btn b{font:800 12.5px 'Manrope',sans-serif;letter-spacing:.02em}
.ps-player-btn:hover{background:rgba(255,255,255,.2)}
.ps-player-btn:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.ps-player-btn.es-activo{background:var(--oro-grad);color:var(--tinta)}

.ps-icono-pausa,.ps-icono-mudo,.ps-icono-cerrar{display:none}
.ps-player.es-sonando .ps-icono-play{display:none}
.ps-player.es-sonando .ps-icono-pausa{display:block}
.ps-player.es-mudo .ps-icono-son{display:none}
.ps-player.es-mudo .ps-icono-mudo{display:block}
.ps-player.es-pantalla .ps-icono-abrir{display:none}
.ps-player.es-pantalla .ps-icono-cerrar{display:block}

/* volumen: aparece al acercarse, para no ocupar sitio siempre */
.ps-player-son{display:flex;align-items:center;gap:6px}
.ps-player-volumen{
  width:0;opacity:0;height:4px;margin:0;border-radius:999px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:linear-gradient(to right,var(--oro) 0%,var(--oro) var(--vol,100%),rgba(255,255,255,.22) var(--vol,100%),rgba(255,255,255,.22) 100%);
  transition:width .2s ease,opacity .2s ease;
}
.ps-player-son:hover .ps-player-volumen,
.ps-player-son:focus-within .ps-player-volumen{width:74px;opacity:1}
.ps-player-volumen::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.ps-player-volumen::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}

.ps-player-tiempo{
  font:600 12.5px 'JetBrains Mono',ui-monospace,monospace;color:rgba(255,255,255,.72);
  white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:2px;
}
.ps-player-tiempo b{color:#fff;font-weight:600}

/* menús */
.ps-player-menu-caja{position:relative}
.ps-player-menu-caja[hidden]{display:none}
.ps-player-menu{
  position:absolute;bottom:calc(100% + 9px);right:0;z-index:12;min-width:118px;
  padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--suave);
  display:flex;flex-direction:column;gap:2px;box-shadow:0 18px 40px -20px #000;
}
.ps-player-menu[hidden]{display:none}
.ps-player-opcion{
  padding:9px 13px;border-radius:8px;text-align:left;white-space:nowrap;
  font:600 13.5px 'Manrope',sans-serif;color:#F5EDE2;
}
.ps-player-opcion:hover{background:rgba(255,255,255,.1)}
.ps-player-opcion.es-activa{background:rgba(231,181,122,.18);color:var(--oro);font-weight:800}
.ps-player-opcion[disabled]{opacity:.5;cursor:default}

/* atajos */
.ps-player-atajos{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;
  background:rgba(10,8,7,.96);
}
/* El desenfoque se aplica solo cuando el panel está abierto: como
   regla permanente creaba una capa compuesta sobre el vídeo incluso
   con el panel cerrado en algunos navegadores. */
.ps-player-atajos:not([hidden]){backdrop-filter:blur(6px)}
.ps-player-atajos[hidden]{display:none}
.ps-player-atajos h4{margin:0;font:800 17px 'Manrope',sans-serif;letter-spacing:-.025em;color:#fff}
.ps-player-atajos dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;align-items:baseline;
  max-width:420px;
}
.ps-player-atajos dt{font:700 12px 'JetBrains Mono',ui-monospace,monospace;color:var(--oro);white-space:nowrap}
.ps-player-atajos dd{margin:0;font:500 13.5px 'Manrope',sans-serif;color:#D3C6B4}

/* pantalla completa */
.ps-player:fullscreen,.ps-player.es-pantalla{border-radius:0;background:#000}
.ps-player:fullscreen .ps-player-escena,.ps-player.es-pantalla .ps-player-escena{height:100%;aspect-ratio:auto;min-height:0}
.ps-player.es-pantalla{position:fixed;inset:0;z-index:99999;width:100vw;height:100vh}

/* bloqueado */
.ps-player-cerrado{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.ps-player-cerrado img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.ps-player-cerrado-caja{position:relative;text-align:center;padding:24px;display:flex;flex-direction:column;gap:10px;align-items:center}
.ps-player-cerrado-titulo{margin:0;font:600 14px 'Manrope',sans-serif;color:#C0B29F}
.ps-player-cerrado-curso{margin:0;font:800 clamp(19px,2.4vw,26px) 'Manrope',sans-serif;letter-spacing:-.03em;color:#fff}

.ps-player-vacio{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  font:600 13px 'JetBrains Mono',ui-monospace,monospace;color:#A2947F;
}

@media (max-width:620px){
  .ps-player-mandos{padding:22px 10px 10px}
  .ps-player-btn{min-width:36px;height:36px;padding:0 8px}
  .ps-player-central{width:62px;height:62px}
  .ps-player-central svg{width:24px;height:24px}
  .ps-player-ayuda{display:none}
  .ps-player-volumen{display:none}
  .ps-player-tiempo{font-size:11.5px}
  .ps-player-aviso{bottom:112px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .ps-player *{transition:none!important;animation:none!important}
}


/* Subtítulos que no existen: el botón se ve apagado para quien
   gestiona, y con su explicación dentro. */
.ps-player-cc-btn.es-vacio{opacity:.45}
.ps-player-nota{margin:0;padding:10px 12px;max-width:230px;font:600 11.5px/1.5 'JetBrains Mono',monospace;color:#A2947F}


/* La marca de agua del vídeo.
   pointer-events:none para que no estorbe al pulsar el vídeo, y
   user-select:none para que no se pueda seleccionar el texto. */
.ps-player-marca{
  /* Ni «transform» ni «transition»: las dos promueven esta capa y
     arrastran el iframe con ella. La marca salta de sitio en seco, que
     además es mejor —una marca que se desliza se puede seguir y
     recortar—. Se coloca por su esquina, no por su centro. */
  position:absolute;z-index:6;
  padding:4px 10px;border-radius:6px;
  font:600 12px/1 'JetBrains Mono',ui-monospace,monospace;
  color:#fff;background:rgba(0,0,0,.28);
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  white-space:nowrap;pointer-events:none;user-select:none;
}
/* Aquí había un «mix-blend-mode:screen» para que la marca se fundiera
   con la imagen. Era la causa del vídeo en negro con el sonido
   corriendo: al mezclar capas sobre un iframe, el navegador compone
   toda la escena en la GPU, y con ciertas gráficas —de ahí que pasara
   solo en algunos ordenadores— el iframe se pinta negro. El contraste
   se consigue igual con la sombra del texto, que no compone nada. */
@media (max-width:640px){ .ps-player-marca{font-size:10px;padding:3px 7px} }
@media print{ .ps-player-marca{display:block!important;opacity:1!important} }


/* ---- Salida de emergencia ----
   Si en algún ordenador el vídeo sigue saliendo negro, esta clase en
   el <body> apaga de golpe todo lo que puede causarlo. Se pone desde
   Módulos → Reproductor, sin tocar código. */
body.ps-video-a-pelo .ps-player-marca{display:none}
body.ps-video-a-pelo .ps-player{border-radius:0}
body.ps-video-a-pelo .ps-player-escena,
body.ps-video-a-pelo .ps-player-video{border-radius:0}
body.ps-video-a-pelo .ps-player-atajos{backdrop-filter:none}


/* Tapón de la esquina superior derecha.
   Algunas cuentas de Vimeo insertan ahí su logotipo aunque se pida
   que no. Queda bajo esta franja, del color del fondo del vídeo. */
.ps-player-tapon{
  position:absolute;right:0;top:0;z-index:3;
  width:104px;height:44px;pointer-events:none;
  background:linear-gradient(200deg,rgba(10,8,7,.9),transparent 78%);
  border-top-right-radius:14px;
}
.ps-player.es-pantalla .ps-player-tapon,
.ps-player:fullscreen .ps-player-tapon{border-top-right-radius:0}
body.ps-video-a-pelo .ps-player-tapon{display:none}


/* ---- El reproductor nativo ----
   Un <video> en lugar del iframe de Vimeo. Sin controles propios del
   navegador: los controles son los nuestros y solo los nuestros. */
video.ps-player-video{
  object-fit:contain;background:#000;
}
video.ps-player-video::-webkit-media-controls,
video.ps-player-video::-webkit-media-controls-enclosure,
video.ps-player-video::-webkit-media-controls-panel{display:none!important;-webkit-appearance:none}
/* Safari en iPhone insiste en poner su botón de pantalla completa. */
video.ps-player-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* Con reproductor propio no hay logotipo de Vimeo que tapar. */
.ps-player:has(video.ps-player-video) .ps-player-tapon{display:none}

/* Los subtítulos, con el tamaño y el margen que les corresponde:
   por defecto el navegador los pega al borde de abajo y quedan
   debajo de nuestra barra de mandos. */
video.ps-player-video::cue{
  /* Crecen con el reproductor: legibles en el móvil y en pantalla completa. */
  font:600 clamp(18px,2.4vw,34px)/1.35 'Manrope',system-ui,sans-serif;
  background:rgba(10,8,7,.78);color:#fff;
}


/* ---- Nada de Vimeo junto a nuestro reproductor ----
   Si por cualquier vía aparece un iframe dentro del reproductor
   —una plantilla antigua en caché, un pegado de la URL en el
   contenido de la lección que WordPress convierte solo— se esconde.
   Con el reproductor propio no hay ningún motivo para que exista. */
.ps-player:has(video.ps-player-video) iframe{display:none!important}

/* Con diez velocidades el menú no cabe en un vídeo pequeño: se limita a la
   altura del reproductor y se desplaza. */
.ps-player-menu{max-height:min(320px,calc(100vh - 140px));overflow-y:auto;overscroll-behavior:contain}
.ps-player-escena .ps-player-menu{max-height:calc(var(--ps-alto, 340px) - 70px)}
.ps-player-opcion{padding:7px 13px}


/* Dieciséis velocidades no caben en una columna en un vídeo pequeño:
   van en dos, y si aun así no caben, el menú hace scroll. */
.ps-player-vel .ps-player-menu:not([hidden]){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  min-width:168px;max-height:min(300px,62vh);overflow:auto;
}
.ps-player-vel .ps-player-opcion{justify-content:center;text-align:center}
.ps-player.es-pantalla .ps-player-vel .ps-player-menu:not([hidden]),
.ps-player:fullscreen .ps-player-vel .ps-player-menu:not([hidden]){max-height:70vh}


/* ---- Bucle A-B sobre la barra ----
   Las banderitas salen por encima de la barra, así no estorban para
   buscar. A se abre a la izquierda de su punto y B a la derecha: aunque
   el bucle dure medio segundo, nunca se pisan. */
.ps-player-ab-tramo{position:absolute;top:50%;height:5px;margin-top:-2.5px;border-radius:999px;background:rgba(231,181,122,.55);z-index:1;pointer-events:none}
.ps-player-ab-tramo[hidden]{display:none}
.ps-player-barra .ps-player-ab-asa{
  position:absolute;bottom:50%;z-index:4;width:auto;height:auto;margin:0;padding:0;border:0;background:none;
  transform:none;cursor:ew-resize;touch-action:none;display:block;
}
.ps-player-barra .ps-player-ab-asa[hidden]{display:none}
.ps-player-barra .ps-player-ab-asa::before{ /* la línea que baja hasta el punto exacto */
  content:"";position:absolute;bottom:-4px;width:2px;height:16px;background:var(--oro);border-radius:2px;
}
.ps-player-barra .ps-player-ab-asa[data-asa="a"]::before{right:-1px}
.ps-player-barra .ps-player-ab-asa[data-asa="b"]::before{left:-1px}
.ps-player-barra .ps-ab-t{
  position:absolute;bottom:10px;white-space:nowrap;padding:2px 6px;border-radius:5px;
  background:rgba(14,11,9,.92);border:1px solid rgba(231,181,122,.6);color:#F5EDE2;
  font:700 10.5px/1.3 'JetBrains Mono',monospace;letter-spacing:-.02em;
}
.ps-player-barra .ps-player-ab-asa[data-asa="a"] .ps-ab-t{right:0;border-bottom-right-radius:0}
.ps-player-barra .ps-player-ab-asa[data-asa="b"] .ps-ab-t{left:0;border-bottom-left-radius:0}
.ps-player-barra .ps-player-ab-asa:hover .ps-ab-t,
.ps-player-barra .ps-player-ab-asa:focus-visible .ps-ab-t{background:var(--oro);color:var(--tinta);border-color:var(--oro)}
.ps-player-barra .ps-player-ab-asa:focus-visible{outline:none}
/* zona para cogerla con el dedo, más grande que lo que se ve */
.ps-player-barra .ps-player-ab-asa::after{content:"";position:absolute;bottom:-8px;width:26px;height:44px}
.ps-player-barra .ps-player-ab-asa[data-asa="a"]::after{right:-13px}
.ps-player-barra .ps-player-ab-asa[data-asa="b"]::after{left:-13px}

.ps-player-ab{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:4px 0 6px;font:600 12px 'JetBrains Mono',monospace;color:#D9CDBB}
.ps-player-ab[hidden]{display:none}
.ps-ab-lado{display:inline-flex;align-items:center;gap:3px}
.ps-ab-lado i{font-style:normal;font-weight:800;color:var(--oro);margin-right:3px}
.ps-ab-lado output{min-width:52px;text-align:center;color:#fff}
.ps-player-ab button{
  min-width:26px;height:26px;padding:0 7px;border-radius:7px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:#F5EDE2;cursor:pointer;font:700 12px 'Manrope',sans-serif;
}
.ps-player-ab button:hover{border-color:var(--oro);color:var(--oro)}
.ps-ab-dur{color:#A2947F}
.ps-ab-quitar{margin-left:auto}
@media(max-width:520px){ .ps-ab-aqui{display:none} }