/* Un control de sonido discreto, disponible antes y durante la oración. */
.boton-sonido {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid #b99b5a80;
  border-radius: 8px;
  color: #e2c887;
  background: linear-gradient(180deg, #183340, #10232e);
  box-shadow: inset 0 1px 0 #eed99e12, 0 2px 5px #0002;
}
.boton-sonido:hover { border-color: #dec27e; background: #244454; }
.boton-sonido .sonido-tachado { display: none; stroke: #e2776b; stroke-width: 2; }
.boton-sonido[aria-pressed="false"] .sonido-tachado { display: block; }
.boton-sonido[aria-pressed="false"] .sonido-ondas { display: none; }
.sonido-inicio { position: absolute; top: 24px; right: 26px; z-index: 5; }
.cabecera { grid-template-columns: minmax(150px, 1fr) minmax(0, 2.6fr) minmax(150px, 1fr); }
@media (max-width: 850px) {
  .acciones-cabecera .boton-sonido { flex-basis: 42px; width: 42px; height: 42px; }
  .cabecera { grid-template-columns: 140px minmax(0, 1fr) 140px; }
}
@media (max-width: 600px) {
  .cabecera { grid-template-columns: 70px minmax(0, 1fr); }
  .sonido-inicio { top: 14px; right: 15px; }
}