/* Estilos propios, encima del CSS de cada template (uniradio/css/{template}.css). */

/* Player: estado de carga y de error (ver public/js/init.js). --c-radio lo pone el <main>. */
.bt-play { position: relative; cursor: pointer; }
.bt-play:focus-visible { outline: 3px solid var(--c-radio, #333); outline-offset: 3px; border-radius: 50%; }
.bt-play.cargando::after {
  content: "";
  position: absolute;
  inset: 1px; /* adentro: el boton tiene overflow hidden */
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: var(--c-radio, #333);
  animation: radios-girar .8s linear infinite;
  pointer-events: none;
}
.bt-play.cargando img { opacity: .55; }
.bt-play.con-error img { filter: grayscale(1); opacity: .7; }
@keyframes radios-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bt-play.cargando::after { animation-duration: 2.4s; }
}