/* PromoPrint · control de música de fondo, dentro del encabezado: un círculo pequeño con tres
   barras. Las barras laten mientras suena y quedan quietas cuando está pausada. */

.music {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline-start: 4px;
  border: 1px solid rgb(var(--paper-rgb) / 0.2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.music:hover { border-color: rgb(var(--paper-rgb) / 0.5); background-color: rgb(var(--paper-rgb) / 0.06); }
.music:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.music__bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.music__bars i {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: rgb(var(--paper-rgb) / 0.7);
  transition: background-color var(--t-ui) var(--ease-ui);
}
.music[aria-pressed="true"] .music__bars i { background: var(--brand); animation: music-bar 900ms ease-in-out infinite alternate; }
.music[aria-pressed="true"] .music__bars i:nth-child(2) { animation-delay: -300ms; }
.music[aria-pressed="true"] .music__bars i:nth-child(3) { animation-delay: -600ms; }
@keyframes music-bar { from { height: 3px; } to { height: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .music[aria-pressed="true"] .music__bars i { animation: none; height: 8px; }
}

/* Móvil: el control queda a la izquierda del menú, separado de la marca. */
@media (max-width: 960px) {
  .music { margin-inline-start: auto; margin-inline-end: 12px; }
}